Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@shopify/ui-extensions

Package Overview
Dependencies
Maintainers
19
Versions
681
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopify/ui-extensions - npm Package Compare versions

Comparing version 2.0.0-alpha.2 to 2022.10.0

loom.config.ts

2

checkout.js

@@ -1,1 +0,1 @@

module.exports = require("./build/node/surfaces/checkout/index");
module.exports = require("./build/cjs/surfaces/checkout/index.js");

@@ -1,1 +0,1 @@

module.exports = require("./build/node/index");
module.exports = require("./build/cjs/index.js");
{
"name": "@shopify/ui-extensions",
"version": "2.0.0-alpha.2",
"version": "2022.10.0",
"main": "index.js",

@@ -10,5 +10,2 @@ "module": "index.mjs",

"*": {
"admin": [
"./build/ts/surfaces/admin/index.d.ts"
],
"checkout": [

@@ -21,2 +18,3 @@ "./build/ts/surfaces/checkout/index.d.ts"

".": {
"types": "./build/ts/index.d.ts",
"esnext": "./index.esnext",

@@ -26,8 +24,4 @@ "import": "./index.mjs",

},
"./admin": {
"esnext": "./admin.esnext",
"import": "./admin.mjs",
"require": "./admin.js"
},
"./checkout": {
"types": "./build/ts/checkout/index.d.ts",
"esnext": "./checkout.esnext",

@@ -41,3 +35,4 @@ "import": "./checkout.mjs",

"dependencies": {
"@remote-ui/core": "^2.1.16"
"@remote-ui/async-subscription": "^2.1.12",
"@remote-ui/core": "2.1.x"
},

@@ -48,3 +43,7 @@ "publishConfig": {

},
"gitHead": "4fbb5899024fa788361f88b300a9efe36bec129d"
"eslintConfig": {
"rules": {
"@shopify/strict-component-boundaries": "off"
}
}
}

@@ -1,8 +0,3 @@

export interface ExtensionInstance {
readonly id: string;
}
export interface StandardApi {
readonly extension: ExtensionInstance;
readonly extensionPoint: string;
}

@@ -1,6 +0,2 @@

import type {
RemoteRoot,
RemoteChannel,
RemoteComponentType,
} from '@remote-ui/core';
import type {RemoteRoot, RemoteComponentType} from '@remote-ui/core';

@@ -11,12 +7,2 @@ export interface Extension<Api, Result> {

export interface RenderExtensionConnection<
AllowedComponents extends RemoteComponentType<
string,
any
> = RemoteComponentType<any, any>
> {
channel: RemoteChannel;
components: AllowedComponents[];
}
export interface RenderExtension<

@@ -26,19 +12,7 @@ Api,

string,
any,
any
> = RemoteComponentType<any, any>
> = RemoteComponentType<any, any, any>,
> {
(
connection: RenderExtensionConnection<AllowedComponents>,
api: Api,
): void | Promise<void>;
}
export interface RenderExtensionWithRemoteRoot<
Api,
AllowedComponents extends RemoteComponentType<
string,
any
> = RemoteComponentType<any, any>
> {
(
root: RemoteRoot<AllowedComponents, AllowedComponents>,

@@ -45,0 +19,0 @@ api: Api,

export * from './api';
export * from './components';
export * from './extension';
export * from './extension';

@@ -1,7 +0,11 @@

import type {CartLine} from '../shared';
import type {StandardApi} from '../standard/standard';
import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
import type {PresentmentCartLine, StandardApi} from '../standard/standard';
export interface CartLineDetailsRenderAfterApi
extends StandardApi<'Checkout::CartLineDetails::RenderAfter'> {
readonly target: CartLine;
/**
* The cart line the extension is attached to.
*/
target: StatefulRemoteSubscribable<PresentmentCartLine>;
}

@@ -1,3 +0,810 @@

export interface CartLine {
id: string;
}
export type ValueOrPromise<T> = T extends PromiseLike<any> ? T : T | Promise<T>;
// To update these type values, see https://github.com/Shopify/checkout-web/pull/8984
export type CurrencyCode =
| 'AED'
| 'AFN'
| 'ALL'
| 'AMD'
| 'ANG'
| 'AOA'
| 'ARS'
| 'AUD'
| 'AWG'
| 'AZN'
| 'BAM'
| 'BBD'
| 'BDT'
| 'BGN'
| 'BHD'
| 'BIF'
| 'BMD'
| 'BND'
| 'BOB'
| 'BOV'
| 'BRL'
| 'BSD'
| 'BTN'
| 'BWP'
| 'BYN'
| 'BZD'
| 'CAD'
| 'CDF'
| 'CHE'
| 'CHF'
| 'CHW'
| 'CLF'
| 'CLP'
| 'CNY'
| 'COP'
| 'COU'
| 'CRC'
| 'CUC'
| 'CUP'
| 'CVE'
| 'CZK'
| 'DJF'
| 'DKK'
| 'DOP'
| 'DZD'
| 'EGP'
| 'ERN'
| 'ETB'
| 'EUR'
| 'FJD'
| 'FKP'
| 'GBP'
| 'GEL'
| 'GHS'
| 'GIP'
| 'GMD'
| 'GNF'
| 'GTQ'
| 'GYD'
| 'HKD'
| 'HNL'
| 'HRK'
| 'HTG'
| 'HUF'
| 'IDR'
| 'ILS'
| 'INR'
| 'IQD'
| 'IRR'
| 'ISK'
| 'JMD'
| 'JOD'
| 'JPY'
| 'KES'
| 'KGS'
| 'KHR'
| 'KMF'
| 'KPW'
| 'KRW'
| 'KWD'
| 'KYD'
| 'KZT'
| 'LAK'
| 'LBP'
| 'LKR'
| 'LRD'
| 'LSL'
| 'LYD'
| 'MAD'
| 'MDL'
| 'MGA'
| 'MKD'
| 'MMK'
| 'MNT'
| 'MOP'
| 'MRU'
| 'MUR'
| 'MVR'
| 'MWK'
| 'MXN'
| 'MXV'
| 'MYR'
| 'MZN'
| 'NAD'
| 'NGN'
| 'NIO'
| 'NOK'
| 'NPR'
| 'NZD'
| 'OMR'
| 'PAB'
| 'PEN'
| 'PGK'
| 'PHP'
| 'PKR'
| 'PLN'
| 'PYG'
| 'QAR'
| 'RON'
| 'RSD'
| 'RUB'
| 'RWF'
| 'SAR'
| 'SBD'
| 'SCR'
| 'SDG'
| 'SEK'
| 'SGD'
| 'SHP'
| 'SLL'
| 'SOS'
| 'SRD'
| 'SSP'
| 'STN'
| 'SVC'
| 'SYP'
| 'SZL'
| 'THB'
| 'TJS'
| 'TMT'
| 'TND'
| 'TOP'
| 'TRY'
| 'TTD'
| 'TWD'
| 'TZS'
| 'UAH'
| 'UGX'
| 'USD'
| 'USN'
| 'UYI'
| 'UYU'
| 'UYW'
| 'UZS'
| 'VES'
| 'VND'
| 'VUV'
| 'WST'
| 'XAF'
| 'XAG'
| 'XAU'
| 'XBA'
| 'XBB'
| 'XBC'
| 'XBD'
| 'XCD'
| 'XDR'
| 'XOF'
| 'XPD'
| 'XPF'
| 'XPT'
| 'XSU'
| 'XTS'
| 'XUA'
| 'XXX'
| 'YER'
| 'ZAR'
| 'ZMW'
| 'ZWL';
// To update these type values, see https://github.com/Shopify/checkout-web/pull/8984
export type Timezone =
| 'Africa/Abidjan'
| 'Africa/Algiers'
| 'Africa/Bissau'
| 'Africa/Cairo'
| 'Africa/Casablanca'
| 'Africa/Ceuta'
| 'Africa/El_Aaiun'
| 'Africa/Johannesburg'
| 'Africa/Juba'
| 'Africa/Khartoum'
| 'Africa/Lagos'
| 'Africa/Maputo'
| 'Africa/Monrovia'
| 'Africa/Nairobi'
| 'Africa/Ndjamena'
| 'Africa/Sao_Tome'
| 'Africa/Tripoli'
| 'Africa/Tunis'
| 'Africa/Windhoek'
| 'America/Adak'
| 'America/Anchorage'
| 'America/Araguaina'
| 'America/Argentina/Buenos_Aires'
| 'America/Argentina/Catamarca'
| 'America/Argentina/Cordoba'
| 'America/Argentina/Jujuy'
| 'America/Argentina/La_Rioja'
| 'America/Argentina/Mendoza'
| 'America/Argentina/Rio_Gallegos'
| 'America/Argentina/Salta'
| 'America/Argentina/San_Juan'
| 'America/Argentina/San_Luis'
| 'America/Argentina/Tucuman'
| 'America/Argentina/Ushuaia'
| 'America/Asuncion'
| 'America/Bahia'
| 'America/Bahia_Banderas'
| 'America/Barbados'
| 'America/Belem'
| 'America/Belize'
| 'America/Boa_Vista'
| 'America/Bogota'
| 'America/Boise'
| 'America/Cambridge_Bay'
| 'America/Campo_Grande'
| 'America/Cancun'
| 'America/Caracas'
| 'America/Cayenne'
| 'America/Chicago'
| 'America/Chihuahua'
| 'America/Costa_Rica'
| 'America/Cuiaba'
| 'America/Danmarkshavn'
| 'America/Dawson'
| 'America/Dawson_Creek'
| 'America/Denver'
| 'America/Detroit'
| 'America/Edmonton'
| 'America/Eirunepe'
| 'America/El_Salvador'
| 'America/Fort_Nelson'
| 'America/Fortaleza'
| 'America/Glace_Bay'
| 'America/Goose_Bay'
| 'America/Grand_Turk'
| 'America/Guatemala'
| 'America/Guayaquil'
| 'America/Guyana'
| 'America/Halifax'
| 'America/Havana'
| 'America/Hermosillo'
| 'America/Indiana/Indianapolis'
| 'America/Indiana/Knox'
| 'America/Indiana/Marengo'
| 'America/Indiana/Petersburg'
| 'America/Indiana/Tell_City'
| 'America/Indiana/Vevay'
| 'America/Indiana/Vincennes'
| 'America/Indiana/Winamac'
| 'America/Inuvik'
| 'America/Iqaluit'
| 'America/Jamaica'
| 'America/Juneau'
| 'America/Kentucky/Louisville'
| 'America/Kentucky/Monticello'
| 'America/La_Paz'
| 'America/Lima'
| 'America/Los_Angeles'
| 'America/Maceio'
| 'America/Managua'
| 'America/Manaus'
| 'America/Martinique'
| 'America/Matamoros'
| 'America/Mazatlan'
| 'America/Menominee'
| 'America/Merida'
| 'America/Metlakatla'
| 'America/Mexico_City'
| 'America/Miquelon'
| 'America/Moncton'
| 'America/Monterrey'
| 'America/Montevideo'
| 'America/New_York'
| 'America/Nipigon'
| 'America/Nome'
| 'America/Noronha'
| 'America/North_Dakota/Beulah'
| 'America/North_Dakota/Center'
| 'America/North_Dakota/New_Salem'
| 'America/Nuuk'
| 'America/Ojinaga'
| 'America/Panama'
| 'America/Pangnirtung'
| 'America/Paramaribo'
| 'America/Phoenix'
| 'America/Port-au-Prince'
| 'America/Porto_Velho'
| 'America/Puerto_Rico'
| 'America/Punta_Arenas'
| 'America/Rainy_River'
| 'America/Rankin_Inlet'
| 'America/Recife'
| 'America/Regina'
| 'America/Resolute'
| 'America/Rio_Branco'
| 'America/Santarem'
| 'America/Santiago'
| 'America/Santo_Domingo'
| 'America/Sao_Paulo'
| 'America/Scoresbysund'
| 'America/Sitka'
| 'America/St_Johns'
| 'America/Swift_Current'
| 'America/Tegucigalpa'
| 'America/Thule'
| 'America/Thunder_Bay'
| 'America/Tijuana'
| 'America/Toronto'
| 'America/Vancouver'
| 'America/Whitehorse'
| 'America/Winnipeg'
| 'America/Yakutat'
| 'America/Yellowknife'
| 'Antarctica/Casey'
| 'Antarctica/Davis'
| 'Antarctica/Macquarie'
| 'Antarctica/Mawson'
| 'Antarctica/Palmer'
| 'Antarctica/Rothera'
| 'Antarctica/Troll'
| 'Antarctica/Vostok'
| 'Asia/Almaty'
| 'Asia/Amman'
| 'Asia/Anadyr'
| 'Asia/Aqtau'
| 'Asia/Aqtobe'
| 'Asia/Ashgabat'
| 'Asia/Atyrau'
| 'Asia/Baghdad'
| 'Asia/Baku'
| 'Asia/Bangkok'
| 'Asia/Barnaul'
| 'Asia/Beirut'
| 'Asia/Bishkek'
| 'Asia/Brunei'
| 'Asia/Chita'
| 'Asia/Choibalsan'
| 'Asia/Colombo'
| 'Asia/Damascus'
| 'Asia/Dhaka'
| 'Asia/Dili'
| 'Asia/Dubai'
| 'Asia/Dushanbe'
| 'Asia/Famagusta'
| 'Asia/Gaza'
| 'Asia/Hebron'
| 'Asia/Ho_Chi_Minh'
| 'Asia/Hong_Kong'
| 'Asia/Hovd'
| 'Asia/Irkutsk'
| 'Asia/Jakarta'
| 'Asia/Jayapura'
| 'Asia/Jerusalem'
| 'Asia/Kabul'
| 'Asia/Kamchatka'
| 'Asia/Karachi'
| 'Asia/Kathmandu'
| 'Asia/Khandyga'
| 'Asia/Kolkata'
| 'Asia/Krasnoyarsk'
| 'Asia/Kuala_Lumpur'
| 'Asia/Kuching'
| 'Asia/Macau'
| 'Asia/Magadan'
| 'Asia/Makassar'
| 'Asia/Manila'
| 'Asia/Nicosia'
| 'Asia/Novokuznetsk'
| 'Asia/Novosibirsk'
| 'Asia/Omsk'
| 'Asia/Oral'
| 'Asia/Pontianak'
| 'Asia/Pyongyang'
| 'Asia/Qatar'
| 'Asia/Qostanay'
| 'Asia/Qyzylorda'
| 'Asia/Riyadh'
| 'Asia/Sakhalin'
| 'Asia/Samarkand'
| 'Asia/Seoul'
| 'Asia/Shanghai'
| 'Asia/Singapore'
| 'Asia/Srednekolymsk'
| 'Asia/Taipei'
| 'Asia/Tashkent'
| 'Asia/Tbilisi'
| 'Asia/Tehran'
| 'Asia/Thimphu'
| 'Asia/Tokyo'
| 'Asia/Tomsk'
| 'Asia/Ulaanbaatar'
| 'Asia/Urumqi'
| 'Asia/Ust-Nera'
| 'Asia/Vladivostok'
| 'Asia/Yakutsk'
| 'Asia/Yangon'
| 'Asia/Yekaterinburg'
| 'Asia/Yerevan'
| 'Atlantic/Azores'
| 'Atlantic/Bermuda'
| 'Atlantic/Canary'
| 'Atlantic/Cape_Verde'
| 'Atlantic/Faroe'
| 'Atlantic/Madeira'
| 'Atlantic/Reykjavik'
| 'Atlantic/South_Georgia'
| 'Atlantic/Stanley'
| 'Australia/Adelaide'
| 'Australia/Brisbane'
| 'Australia/Broken_Hill'
| 'Australia/Darwin'
| 'Australia/Eucla'
| 'Australia/Hobart'
| 'Australia/Lindeman'
| 'Australia/Lord_Howe'
| 'Australia/Melbourne'
| 'Australia/Perth'
| 'Australia/Sydney'
| 'CET'
| 'CST6CDT'
| 'EET'
| 'EST'
| 'EST5EDT'
| 'Etc/GMT'
| 'Etc/GMT-1'
| 'Etc/GMT-10'
| 'Etc/GMT-11'
| 'Etc/GMT-12'
| 'Etc/GMT-13'
| 'Etc/GMT-14'
| 'Etc/GMT-2'
| 'Etc/GMT-3'
| 'Etc/GMT-4'
| 'Etc/GMT-5'
| 'Etc/GMT-6'
| 'Etc/GMT-7'
| 'Etc/GMT-8'
| 'Etc/GMT-9'
| 'Etc/GMT+1'
| 'Etc/GMT+10'
| 'Etc/GMT+11'
| 'Etc/GMT+12'
| 'Etc/GMT+2'
| 'Etc/GMT+3'
| 'Etc/GMT+4'
| 'Etc/GMT+5'
| 'Etc/GMT+6'
| 'Etc/GMT+7'
| 'Etc/GMT+8'
| 'Etc/GMT+9'
| 'Etc/UTC'
| 'Europe/Amsterdam'
| 'Europe/Andorra'
| 'Europe/Astrakhan'
| 'Europe/Athens'
| 'Europe/Belgrade'
| 'Europe/Berlin'
| 'Europe/Brussels'
| 'Europe/Bucharest'
| 'Europe/Budapest'
| 'Europe/Chisinau'
| 'Europe/Copenhagen'
| 'Europe/Dublin'
| 'Europe/Gibraltar'
| 'Europe/Helsinki'
| 'Europe/Istanbul'
| 'Europe/Kaliningrad'
| 'Europe/Kiev'
| 'Europe/Kirov'
| 'Europe/Lisbon'
| 'Europe/London'
| 'Europe/Luxembourg'
| 'Europe/Madrid'
| 'Europe/Malta'
| 'Europe/Minsk'
| 'Europe/Monaco'
| 'Europe/Moscow'
| 'Europe/Oslo'
| 'Europe/Paris'
| 'Europe/Prague'
| 'Europe/Riga'
| 'Europe/Rome'
| 'Europe/Samara'
| 'Europe/Saratov'
| 'Europe/Simferopol'
| 'Europe/Sofia'
| 'Europe/Stockholm'
| 'Europe/Tallinn'
| 'Europe/Tirane'
| 'Europe/Ulyanovsk'
| 'Europe/Uzhgorod'
| 'Europe/Vienna'
| 'Europe/Vilnius'
| 'Europe/Volgograd'
| 'Europe/Warsaw'
| 'Europe/Zaporozhye'
| 'Europe/Zurich'
| 'HST'
| 'Indian/Chagos'
| 'Indian/Christmas'
| 'Indian/Cocos'
| 'Indian/Kerguelen'
| 'Indian/Mahe'
| 'Indian/Maldives'
| 'Indian/Mauritius'
| 'Indian/Reunion'
| 'MET'
| 'MST'
| 'MST7MDT'
| 'Pacific/Apia'
| 'Pacific/Auckland'
| 'Pacific/Bougainville'
| 'Pacific/Chatham'
| 'Pacific/Chuuk'
| 'Pacific/Easter'
| 'Pacific/Efate'
| 'Pacific/Fakaofo'
| 'Pacific/Fiji'
| 'Pacific/Funafuti'
| 'Pacific/Galapagos'
| 'Pacific/Gambier'
| 'Pacific/Guadalcanal'
| 'Pacific/Guam'
| 'Pacific/Honolulu'
| 'Pacific/Kanton'
| 'Pacific/Kiritimati'
| 'Pacific/Kosrae'
| 'Pacific/Kwajalein'
| 'Pacific/Majuro'
| 'Pacific/Marquesas'
| 'Pacific/Nauru'
| 'Pacific/Niue'
| 'Pacific/Norfolk'
| 'Pacific/Noumea'
| 'Pacific/Pago_Pago'
| 'Pacific/Palau'
| 'Pacific/Pitcairn'
| 'Pacific/Pohnpei'
| 'Pacific/Port_Moresby'
| 'Pacific/Rarotonga'
| 'Pacific/Tahiti'
| 'Pacific/Tarawa'
| 'Pacific/Tongatapu'
| 'Pacific/Wake'
| 'Pacific/Wallis'
| 'PST8PDT'
| 'WET';
export type CountryCode =
| 'AC'
| 'AD'
| 'AE'
| 'AF'
| 'AG'
| 'AI'
| 'AL'
| 'AM'
| 'AN'
| 'AO'
| 'AR'
| 'AT'
| 'AU'
| 'AW'
| 'AX'
| 'AZ'
| 'BA'
| 'BB'
| 'BD'
| 'BE'
| 'BF'
| 'BG'
| 'BH'
| 'BI'
| 'BJ'
| 'BL'
| 'BM'
| 'BN'
| 'BO'
| 'BQ'
| 'BR'
| 'BS'
| 'BT'
| 'BV'
| 'BW'
| 'BY'
| 'BZ'
| 'CA'
| 'CC'
| 'CD'
| 'CF'
| 'CG'
| 'CH'
| 'CI'
| 'CK'
| 'CL'
| 'CM'
| 'CN'
| 'CO'
| 'CR'
| 'CU'
| 'CV'
| 'CW'
| 'CX'
| 'CY'
| 'CZ'
| 'DE'
| 'DJ'
| 'DK'
| 'DM'
| 'DO'
| 'DZ'
| 'EC'
| 'EE'
| 'EG'
| 'EH'
| 'ER'
| 'ES'
| 'ET'
| 'FI'
| 'FJ'
| 'FK'
| 'FO'
| 'FR'
| 'GA'
| 'GB'
| 'GD'
| 'GE'
| 'GF'
| 'GG'
| 'GH'
| 'GI'
| 'GL'
| 'GM'
| 'GN'
| 'GP'
| 'GQ'
| 'GR'
| 'GS'
| 'GT'
| 'GW'
| 'GY'
| 'HK'
| 'HM'
| 'HN'
| 'HR'
| 'HT'
| 'HU'
| 'ID'
| 'IE'
| 'IL'
| 'IM'
| 'IN'
| 'IO'
| 'IQ'
| 'IR'
| 'IS'
| 'IT'
| 'JE'
| 'JM'
| 'JO'
| 'JP'
| 'KE'
| 'KG'
| 'KH'
| 'KI'
| 'KM'
| 'KN'
| 'KP'
| 'KR'
| 'KW'
| 'KY'
| 'KZ'
| 'LA'
| 'LB'
| 'LC'
| 'LI'
| 'LK'
| 'LR'
| 'LS'
| 'LT'
| 'LU'
| 'LV'
| 'LY'
| 'MA'
| 'MC'
| 'MD'
| 'ME'
| 'MF'
| 'MG'
| 'MK'
| 'ML'
| 'MM'
| 'MN'
| 'MO'
| 'MQ'
| 'MR'
| 'MS'
| 'MT'
| 'MU'
| 'MV'
| 'MW'
| 'MX'
| 'MY'
| 'MZ'
| 'NA'
| 'NC'
| 'NE'
| 'NF'
| 'NG'
| 'NI'
| 'NL'
| 'NO'
| 'NP'
| 'NR'
| 'NU'
| 'NZ'
| 'OM'
| 'PA'
| 'PE'
| 'PF'
| 'PG'
| 'PH'
| 'PK'
| 'PL'
| 'PM'
| 'PN'
| 'PS'
| 'PT'
| 'PY'
| 'QA'
| 'RE'
| 'RO'
| 'RS'
| 'RU'
| 'RW'
| 'SA'
| 'SB'
| 'SC'
| 'SD'
| 'SE'
| 'SG'
| 'SH'
| 'SI'
| 'SJ'
| 'SK'
| 'SL'
| 'SM'
| 'SN'
| 'SO'
| 'SR'
| 'SS'
| 'ST'
| 'SV'
| 'SX'
| 'SY'
| 'SZ'
| 'TA'
| 'TC'
| 'TD'
| 'TF'
| 'TG'
| 'TH'
| 'TJ'
| 'TK'
| 'TL'
| 'TM'
| 'TN'
| 'TO'
| 'TR'
| 'TT'
| 'TV'
| 'TW'
| 'TZ'
| 'UA'
| 'UG'
| 'UM'
| 'US'
| 'UY'
| 'UZ'
| 'VA'
| 'VC'
| 'VE'
| 'VG'
| 'VN'
| 'VU'
| 'WF'
| 'WS'
| 'XK'
| 'YE'
| 'YT'
| 'ZA'
| 'ZM'
| 'ZW'
| 'ZZ';

@@ -0,8 +1,1246 @@

import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
import type {StandardApi as BaseStandardApi} from '../../../../api';
import type {ExtensionPoint as AnyExtensionPoint} from '../../extension-points';
import type {CurrencyCode, CountryCode, Timezone} from '../shared';
/**
* A key-value storage object for extension points.
*
* Stored data is only available to this specific app
* at this specific extension point.
*
* The storage backend is implemented with `localStorage` and
* should persist across the buyer's checkout session.
* However, data persistence isn't guaranteed.
*/
export interface Storage {
/**
* Read and return a stored value by key.
*
* The stored data is deserialized from JSON and returned as
* its original primitive.
*
* Returns `null` if no stored data exists.
*/
read<T = unknown>(key: string): Promise<T | null>;
/**
* Write stored data for this key.
*
* The data must be serializable to JSON.
*/
write(key: string, data: any): Promise<void>;
/**
* Delete stored data by key.
*/
delete(key: string): Promise<void>;
}
/**
* The high-level capabilities an extension is allowed to have access to.
*
* * `network_access` allows an extension to make network calls via fetch() and
* is requested by a partner
*
* * `block_progress` allows an extension to block a buyer's progress through
* checkout and may be granted by a merchant in differing checkout contexts
*/
export type Capability = 'network_access' | 'block_progress';
/**
* Meta information about an extension point.
*/
export interface Extension {
/**
* The published version of the running extension point.
*
* For unpublished extensions, the value is `null`.
*
* @example 3.0.10
*/
version?: string;
/**
* The URL to the script that started the extension point.
*/
scriptUrl: string;
/**
* Whether your extension is currently rendered to the screen.
*
* Shopify might render your extension before it's visible in the UI,
* typically to pre-render extensions that will appear on a later step of the
* checkout.
*
* Your extension might also continue to run after the buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable<boolean>;
/**
* The allowed capabilities of the extension, defined
* in your `shopify.ui.extension.toml` file .
*
* `network_access`:
* You must [request access](https://shopify.dev/api/checkout-extensions/checkout/configuration#complete-a-request-for-network-access)
* to make network calls.
*
* `block_progress`:
* Merchants control whether your extension [can block checkout progress](https://shopify.dev/api/checkout-extensions/checkout/configuration#block-progress)
*/
capabilities: StatefulRemoteSubscribable<Capability[]>;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
}
export interface Editor {
/**
* Indicates whether the extension is rendering in the checkout editor.
*/
type: 'checkout';
}
/**
* Removes a note
*/
export interface NoteRemoveChange {
/**
* The type of the `NoteRemoveChange` API.
*/
type: 'removeNote';
}
/**
* An Update to a note on the order.
* for example, the buyer could request detailed packaging instructions in an order note
*/
export interface NoteUpdateChange {
/**
* The type of the `NoteUpdateChange` API.
*/
type: 'updateNote';
/**
* The new value of the note.
*/
note: string;
}
export type NoteChange = NoteRemoveChange | NoteUpdateChange;
export interface NoteChangeResultSuccess {
/**
* The type of the `NoteChangeResultSuccess` API.
*/
type: 'success';
}
export interface NoteChangeResultError {
/**
* The type of the `NoteChangeResultError` API.
*/
type: 'error';
/**
* A message that explains the error. This message is useful for debugging.
* It is **not** localized, and therefore should not be presented directly
* to the buyer.
*/
message: string;
}
export type NoteChangeResult = NoteChangeResultSuccess | NoteChangeResultError;
/**
* Updates an attribute on the order. If an attribute with the
* provided key does not already exist, it gets created.
*/
export interface AttributeUpdateChange {
/**
* The type of the `AttributeUpdateChange` API.
*/
type: 'updateAttribute';
/**
* Key of the attribute to add or update
*/
key: string;
/**
* Value for the attribute to add or update
*/
value: string;
}
export type AttributeChange = AttributeUpdateChange;
/**
* The returned result of a successful update to an attribute.
*/
export interface AttributeChangeResultSuccess {
/**
* The type of the `AttributeChangeResultSuccess` API.
*/
type: 'success';
}
/**
* The returned result of an unsuccessful update to an attribute
* with a message detailing the type of error that occurred.
*/
export interface AttributeChangeResultError {
/**
* The type of the `AttributeChangeResultError` API.
*/
type: 'error';
/**
* A message that explains the error. This message is useful for debugging.
* It is **not** localized, and therefore should not be presented directly
* to the buyer.
*/
message: string;
}
export type AttributeChangeResult =
| AttributeChangeResultSuccess
| AttributeChangeResultError;
/**
* Metadata associated with the checkout.
*/
export interface Metafield {
/**
* The name of the metafield. It must be between 3 and 30 characters in
* length (inclusive).
*/
key: string;
/**
* A container for a set of metafields. You need to define a custom
* namespace for your metafields to distinguish them from the metafields
* used by other apps. This must be between 2 and 20 characters in length (inclusive).
*/
namespace: string;
/**
* The information to be stored as metadata.
*/
value: string | number;
/** The metafield’s information type. */
valueType: 'integer' | 'string' | 'json_string';
}
/** Removes a metafield. */
export interface MetafieldRemoveChange {
/**
* The type of the `MetafieldRemoveChange` API.
*/
type: 'removeMetafield';
/**
* The name of the metafield to remove.
*/
key: string;
/**
* The namespace of the metafield to remove.
*/
namespace: string;
}
/**
* Updates a metafield. If a metafield with the
* provided key and namespace does not already exist, it gets created.
*/
export interface MetafieldUpdateChange {
/**
* The type of the `MetafieldUpdateChange` API.
*/
type: 'updateMetafield';
/** The name of the metafield to update. */
key: string;
/** The namespace of the metafield to add. */
namespace: string;
/** The new information to store in the metafield. */
value: string | number;
/**
* The metafield’s information type.
*/
valueType: 'integer' | 'string' | 'json_string';
}
export type MetafieldChange = MetafieldRemoveChange | MetafieldUpdateChange;
export interface MetafieldChangeResultSuccess {
/**
* The type of the `MetafieldChangeResultSuccess` API.
*/
type: 'success';
}
export interface MetafieldChangeResultError {
/**
* The type of the `MetafieldChangeResultError` API.
*/
type: 'error';
/**
* A message that explains the error. This message is useful for debugging.
* It is **not** localized, and therefore should not be presented directly
* to the buyer.
*/
message: string;
}
export type MetafieldChangeResult =
| MetafieldChangeResultSuccess
| MetafieldChangeResultError;
/**
* Represents a custom metadata attached to a resource.
*/
export interface AppMetafield {
/** The key name of a metafield. */
key: string;
/** The namespace for a metafield. */
namespace: string;
/** The value of a metafield. */
value: string | number | boolean;
/** The metafield’s information type. */
valueType: 'boolean' | 'float' | 'integer' | 'json_string' | 'string';
}
/**
* The metafield owner.
*/
export interface AppMetafieldEntryTarget {
/** The type of the metafield owner. */
type: 'customer' | 'product' | 'shop' | 'variant';
/** The numeric owner ID that is associated with the metafield. */
id: string;
}
/**
* A metafield associated with the shop or a resource on the checkout.
*/
export interface AppMetafieldEntry {
/** The target that is associated to the metadata. */
target: AppMetafieldEntryTarget;
/** The metadata information. */
metafield: AppMetafield;
}
export type Version = 'unstable';
/**
* This defines the i18n.translate() signature.
*/
export interface I18nTranslate {
/**
* This returns a translated string matching a key in a locale file.
*
* @example translate("banner.title")
*/
<ReplacementType = string>(
key: string,
options?: {[placeholderKey: string]: ReplacementType | string | number},
): ReplacementType extends string | number
? string
: (string | ReplacementType)[];
}
export interface I18n {
/**
* Returns a localized number.
*
* This function behaves like the standard `Intl.NumberFormat()`
* with a style of `decimal` applied. It uses the buyer's locale by default.
*
* @param options.inExtensionLocale - if true, use the extension's locale
*/
formatNumber: (
number: number | bigint,
options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
) => string;
/**
* Returns a localized currency value.
*
* This function behaves like the standard `Intl.NumberFormat()`
* with a style of `currency` applied. It uses the buyer's locale by default.
*
* @param options.inExtensionLocale - if true, use the extension's locale
*/
formatCurrency: (
number: number | bigint,
options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
) => string;
/**
* Returns a localized date value.
*
* This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
* the buyer's locale by default. Formatting options can be passed in as
* options.
*
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
*
* @param options.inExtensionLocale - if true, use the extension's locale
*/
formatDate: (
date: Date,
options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
) => string;
/**
* Returns translated content in the buyer's locale,
* as supported by the extension.
*
* - `options.count` is a special numeric value used in pluralization.
* - The other option keys and values are treated as replacements for interpolation.
* - If the replacements are all primitives, then `translate()` returns a single string.
* - If replacements contain UI components, then `translate()` returns an array of elements.
*/
translate: I18nTranslate;
}
export interface Language {
/**
* The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
*
* @example 'en' for English, or 'en-US' for English local to United States.
* @see https://en.wikipedia.org/wiki/IETF_language_tag
* @see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
*/
isoCode: string;
}
export interface Currency {
/**
* The ISO-4217 code for this currency.
* @see https://www.iso.org/iso-4217-currency-codes.html
*/
isoCode: CurrencyCode;
}
export interface Localization {
/**
* The currency that the buyer sees for money amounts in the checkout.
*/
currency: StatefulRemoteSubscribable<Currency>;
/**
* The buyer’s time zone.
*/
timezone: StatefulRemoteSubscribable<Timezone>;
/**
* The language the buyer sees in the checkout.
*/
language: StatefulRemoteSubscribable<Language>;
/**
* This is the buyer's language, as supported by the extension.
* If the buyer's actual language is not supported by the extension,
* this is the fallback locale used for translations.
*
* For example, if the buyer's language is 'fr-CA' but your extension
* only supports translations for 'fr', then the `isoCode` for this
* language is 'fr'. If your extension does not provide french
* translations at all, this value is the default locale for your
* extension (that is, the one matching your .default.json file).
*/
extensionLanguage: StatefulRemoteSubscribable<Language>;
}
/**
* The following APIs are provided to all extension points.
*/
export interface StandardApi<ExtensionPoint extends AnyExtensionPoint>
extends BaseStandardApi {
readonly surface: 'checkout';
readonly extensionPoint: ExtensionPoint;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
/**
* Provides details on buyer progression through the steps of the checkout.
*/
buyerJourney: {
/**
* A function for intercepting and preventing progress on checkout. You can block
* checkout progress by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState}`.
* If you do, then you're expected to also update some part of your UI to reflect the reason why progress
* was blocked.
*
* To block checkout progress, you must set the [block_progress](https://shopify.dev/api/checkout-extensions/checkout/configuration#block-progress) capability in your extension's configuration.
*/
intercept(interceptor: Interceptor): Promise<() => void>;
};
/**
* The identifier of the running extension point.
* @example 'Checkout::PostPurchase::Render'
*/
extensionPoint: ExtensionPoint;
/**
* Meta information about the extension.
*/
extension: Extension;
/**
* Key-value storage for the extension point.
*/
storage: Storage;
/**
* The proposed buyer shipping address. During the information step, the address
* updates when the field is committed (on change) rather than every keystroke.
* An address value is only present if delivery is required. Otherwise, the
* subscribable value is undefined.
*/
shippingAddress?: StatefulRemoteSubscribable<MailingAddress | undefined>;
/**
* Information about the buyer that is interacting with the checkout.
*/
buyerIdentity?: BuyerIdentity;
/** Shop where the checkout is taking place. */
shop: Shop;
/**
* Details on the costs the buyer will pay for this checkout.
*/
cost: CartCost;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable<string | undefined>;
/**
* Performs an update on the note attached to the cart and checkout. If
* successful, this mutation results in an update to the value retrieved
* through the `note` property.
*/
applyNoteChange(change: NoteChange): Promise<NoteChangeResult>;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable<Attribute[] | undefined>;
/**
* Performs an update on an attribute attached to the cart and checkout. If
* successful, this mutation results in an update to the value retrieved
* through the `attributes` property.
*/
applyAttributeChange(change: AttributeChange): Promise<AttributeChangeResult>;
/**
* The metafields that apply to the current checkout. The actual resource
* on which these metafields exist depends on the source of the checkout:
*
* - If the source is an order, then the metafields are on the order.
* - If the source is a draft order, then the initial value of metafields are
* from the draft order, and any new metafields you write are applied
* to the order created by this checkout.
* - For all other sources, the metafields are only stored locally on the
* client creating the checkout, and are applied to the order that
* results from checkout.
*
* These metafields are shared by all extensions running on checkout, and
* persist for as long as the customer is working on this checkout.
*
* Once the order is created, you can query these metafields using the
* [GraphQL Admin API](https://shopify.dev/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
*/
metafields: StatefulRemoteSubscribable<Metafield[]>;
/**
* Performs an update on a piece of metadata attached to the checkout. If
* successful, this mutation results in an update to the value retrieved
* through the `metafields` property.
*/
applyMetafieldChange(change: MetafieldChange): Promise<MetafieldChangeResult>;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable<CartLine[]>;
/**
* A list of the line items displayed in the checkout. These may be the same as lines, or may be a subset.
*/
presentmentLines: StatefulRemoteSubscribable<PresentmentCartLine[]>;
/**
* Performs an update on the merchandise line items. It resolves when the new
* line items have been negotiated and results in an update to the value
* retrieved through the `lines` property.
*/
applyCartLinesChange(change: CartLineChange): Promise<CartLineChangeResult>;
/**
* A list of discount codes currently applied to the checkout
*/
discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;
/**
* Performs an update on the discount codes.
* It resolves when the new discount codes have been negotiated and results in an update
* to the value retrieved through the `discountCodes` property.
*/
applyDiscountCodeChange(
change: DiscountCodeChange,
): Promise<DiscountCodeChangeResult>;
/**
* The metafields requested in the `shopify.ui.extension.toml` file. These metafields are
* updated when there's a change in the merchandise items being purchased by the customer.
*/
appMetafields: StatefulRemoteSubscribable<AppMetafieldEntry[]>;
/**
* Details about the location, language, and currency of the buyer. For utilities to easily
* format and translate content based on these details, you can use the `i18n` object instead.
*/
localization: Localization;
/**
* Utilities for translating content and formatting values according to the current `localization`
* of the checkout.
*/
i18n: I18n;
/**
* The settings matching the settings definition written in the `shopify.ui.extension.toml` file.
*
* **Note:** When an extension is being installed in the editor, the settings will be empty until
* a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.
*/
settings: StatefulRemoteSubscribable<ExtensionSettings>;
/**
* Exposes a `analytics.publish` method to publish analytics events.
*/
analytics: Analytics;
}
export interface BuyerIdentity {
/**
* The customer account from the buyer. This value will update when there's a
* change in the account. The value is undefined if the buyer isn’t a known customer
* for this shop.
*
* Protected resource: Requires approval to access protected customer data.
* More info - https://shopify.dev/apps/store/data-protection/protected-customer-data
*/
customer: StatefulRemoteSubscribable<Customer | undefined>;
/**
* The email address of the buyer that is interacting with the cart. This value will update when there's a
* change in the checkout formulary. The value is undefined if no permission given.
*
* Protected resource: Requires approval to access protected customer data (Level 2).
* More info - https://shopify.dev/apps/store/data-protection/protected-customer-data
*/
email: StatefulRemoteSubscribable<string | undefined>;
/**
* The phone number of the buyer that is interacting with the cart. This value will update when there's a
* change in the checkout formulary. The value is undefined if no permission given.
*
* Protected resource: Requires approval to access protected customer data (Level 2).
* More info - https://shopify.dev/apps/store/data-protection/protected-customer-data
*/
phone: StatefulRemoteSubscribable<string | undefined>;
}
export interface Shop {
/**
* The shop ID.
* @example 'gid://shopify/Shop/123'
*/
id: string;
/**
* The name of the shop.
*/
name: string;
/**
* The primary storefront URL.
*/
storefrontUrl?: string;
/**
* The shop's myshopify.com domain.
*/
myshopifyDomain: string;
}
export interface MailingAddress {
/**
* The buyer's full name.
* @example 'John Doe'
*/
name?: string;
/**
* The buyer's first name.
* @example 'John'
*/
firstName?: string;
/**
* The buyer's last name.
* @example 'Doe'
*/
lastName?: string;
/**
* The buyer's company name.
* @example 'Shopify'
*/
company?: string;
/**
* The first line of the buyer's address, including street name and number.
* @example '151 O'Connor Street'
*/
address1?: string;
/**
* The second line of the buyer's address, like apartment number, suite, etc.
* @example 'Ground floor'
*/
address2?: string;
/**
* The buyer's city.
* @example 'Ottawa'
*/
city?: string;
/**
* The buyer's postal or ZIP code.
* @example 'K2P 2L8'
*/
zip?: string;
/**
* The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.
* @example 'CA' for Canada.
*/
countryCode?: CountryCode;
/**
* The buyer's zone code, such as state, province, prefecture, or region.
* @example 'ON' for Ontario.
*/
provinceCode?: string;
/**
* The buyer's phone number.
* @example '+1 613 111 2222'.
*/
phone?: string;
}
export interface CartCost {
/**
* A `Money` value representing the minimum a buyer can expect to pay at the current
* step of checkout. This value excludes amounts yet to be negotiated. For example,
* the information step might not have delivery costs calculated.
*/
totalAmount: StatefulRemoteSubscribable<Money>;
}
export interface CartLine {
/**
* These line item IDs are not stable at the moment, they might change after
* any operations on the line items. You should always look up for an updated
* ID before any call to `applyCartLinesChange` because you'll need the ID to
* create a `CartLineChange` object.
* @example 'gid://shopify/CartLine/123'
*/
id: string;
/**
* The merchandise being purchased.
*/
merchandise: Merchandise;
/**
* The quantity of the merchandise being purchased.
*/
quantity: number;
/**
* The details about the cost components attributed to the cart line.
*/
cost: CartLineCost;
/**
* The line item additional custom attributes.
*/
attributes: Attribute[];
}
export interface CartLineCost {
/**
* The total amount the buyer can expect to pay that is directly attributable to a single
* cart line.
*/
totalAmount: Money;
}
export interface Money {
/**
* The price amount.
*/
amount: number;
/**
* The ISO 4217 format for the currency.
* @example 'CAD' for Canadian dollar
*/
currencyCode: CurrencyCode;
}
export type Merchandise = ProductVariant;
export interface BaseMerchandise {
/**
* The merchandise ID.
*/
id: string;
}
export interface ProductVariant extends BaseMerchandise {
type: 'variant';
/**
* A globally-unique identifier.
* @example 'gid://shopify/ProductVariant/123'
*/
id: string;
/**
* The product variant’s title.
*/
title: string;
/**
* Image associated with the product variant. This field falls back to the product
* image if no image is available.
*/
image?: ImageDetails;
/**
* List of product options applied to the variant.
*/
selectedOptions: SelectedOption[];
/**
* The product object that the product variant belongs to.
*/
product: Product;
}
export interface Product {
/**
* A globally-unique identifier.
*/
id: string;
/**
* The product’s vendor name.
*/
vendor: string;
/**
* A categorization that a product can be tagged with, commonly used for filtering and searching.
*/
productType: string;
}
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}
export interface Attribute {
/**
* The key for the attribute.
*/
key: string;
/**
* The value for the attribute.
*/
value: string;
}
export interface SelectedOption {
/**
* The name of the merchandise option.
*/
name: string;
/**
* The value of the merchandise option.
*/
value: string;
}
export interface PresentmentCartLine {
/**
* The ID of the present cart line. This ID isn't stable and might change after
* any operations on the line items.
* @example 'gid://shopify/PresentmentCartLine/123'
*/
id: string;
/**
* The quantity of the merchandise being purchased.
*/
quantity: number;
/**
* The details about the cost components attributed to the presentment cart line.
*/
cost: PresentmentCartLineCost;
/**
* The title of the line item.
*/
title: string;
/**
* The subtitle of the line item.
*/
subtitle?: string;
/**
* The image associated with the line item.
*/
image?: ImageDetails;
/**
* The merchandise lines being purchased.
*/
lines: CartLine[];
}
export interface PresentmentCartLineCost {
/**
* The total cost of the merchandise line.
*/
totalAmount: Money;
}
export interface CartLineChangeResultSuccess {
/**
* Indicates that the line item was changed successfully.
*/
type: 'success';
}
export interface CartLineChangeResultError {
/**
* Indicates that the line item was not changed successfully. Refer to the `message` property for details about the error.
*/
type: 'error';
/**
* A message that explains the error. This message is useful for debugging.
* It is **not** localized, and therefore should not be presented directly
* to the buyer.
*/
message: string;
}
export type CartLineChangeResult =
| CartLineChangeResultSuccess
| CartLineChangeResultError;
export type CartLineChange =
| CartLineAddChange
| CartLineRemoveChange
| CartLineUpdateChange;
export interface CartLineAddChange {
/**
* An identifier for changes that add line items.
*/
type: 'addCartLine';
/**
* The merchandise ID being added.
* @example 'gid://shopify/ProductVariant/123'
*/
merchandiseId: string;
/**
* The quantity of the merchandise being added.
*/
quantity: number;
/**
* The attributes associated with the line item.
*/
attributes?: Attribute[];
}
export interface CartLineRemoveChange {
/**
* An identifier for changes that remove line items.
*/
type: 'removeCartLine';
/**
* Line Item ID.
* @example 'gid://shopify/CartLine/123'
*/
id: string;
/**
* The quantity being removed for this line item.
*/
quantity: number;
}
export interface CartLineUpdateChange {
/**
* An identifier for changes that update line items.
*/
type: 'updateCartLine';
/**
* Line Item ID.
* @example 'gid://shopify/CartLine/123'
*/
id: string;
/**
* The new merchandise ID for the line item.
* @example 'gid://shopify/ProductVariant/123'
*/
merchandiseId?: string;
/**
* The new quantity for the line item.
*/
quantity?: number;
/**
* The new attributes for the line item.
*/
attributes?: Attribute[];
}
export interface CartDiscountCode {
/**
* The code for the discount
*/
code: string;
}
export type DiscountCodeChange = DiscountCodeAddChange;
export type DiscountCodeChangeResult =
| DiscountCodeChangeResultSuccess
| DiscountCodeChangeResultError;
export interface DiscountCodeAddChange {
/**
* The type of the `DiscountCodeChange` API.
*/
type: 'addDiscountCode';
/**
* The code for the discount
*/
code: string;
}
export interface DiscountCodeChangeResultSuccess {
/**
* Indicates that the discount code change was applied successfully.
*/
type: 'success';
}
export interface DiscountCodeChangeResultError {
/**
* Indicates that the discount code change failed.
*/
type: 'error';
/**
* A message that explains the error. This message is useful for debugging.
* It is **not** localized, and therefore should not be presented directly
* to the buyer.
*/
message: string;
}
type InterceptorResult = InterceptorResultAllow | InterceptorResultBlock;
interface InterceptorResultAllow {
/**
* Indicates that the buyer was allowed to progress through checkout.
*/
behavior: 'allow';
}
interface InterceptorResultBlock {
/**
* Indicates that some part of the checkout UI intercepted and prevented
* the buyer’s progress. The buyer typically needs to take some action
* to resolve this issue and to move on to the next step.
*/
behavior: 'block';
}
export type InterceptorRequest =
| InterceptorRequestAllow
| InterceptorRequestBlock;
interface InterceptorRequestAllow {
/**
* Indicates that the interceptor will allow the buyer's journey to continue.
*/
behavior: 'allow';
/**
* This callback is called when all interceptors finish. We recommend
* setting errors or reasons for blocking at this stage, so that all the errors in
* the UI show up at once.
* @param result InterceptorResult with behavior as either 'allow' or 'block'
*/
perform?(result: InterceptorResult): void | Promise<void>;
}
// The reason is used for tracing and debugging purposes.
interface InterceptorRequestBlock {
/**
* Indicates that the interceptor will block the buyer's journey from continuing.
*/
behavior: 'block';
/**
* The reason for blocking the interceptor request. This value isn't presented to
* the buyer, so it doesn't need to be localized. The value is used only for Shopify’s
* own internal debugging and metrics.
*/
reason: string;
/**
* This callback is called when all interceptors finish. We recommend
* setting errors or reasons for blocking at this stage, so that all the errors in
* the UI show up at once.
* @param result InterceptorResult with behavior as either 'allow' or 'block'
*/
perform(result: InterceptorResult): void | Promise<void>;
}
export interface InterceptorProps {
/**
* Whether the interceptor has the capability to block a buyer's progress through
* checkout. This ability might be granted by a merchant in differing checkout contexts.
*/
canBlockProgress: boolean;
}
export interface Interceptor {
/**
* A function for intercepting and preventing navigation on checkout. You can block
* navigation by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState}`.
* If you do, then you're expected to also update some part of your UI to reflect the reason why navigation
* was blocked.
*/
(interceptorProps: InterceptorProps):
| InterceptorRequest
| Promise<InterceptorRequest>;
}
/**
* Information about a customer who has previously purchased from this shop.
*/
export interface Customer {
/**
* Customer ID.
* @example 'gid://shopify/Customer/123'
*/
id: string;
/**
* The email of the customer.
*/
email?: string;
/**
* The phone number of the customer.
*/
phone?: string;
/**
* The full name of the customer.
*/
fullName?: string;
/**
* The first name of the customer.
*/
firstName?: string;
/**
* The last name of the customer.
*/
lastName?: string;
/**
* The image associated with the customer.
*/
image: ImageDetails;
/**
* Defines if the customer accepts marketing activities.
*/
acceptsMarketing: boolean;
}
/**
* The merchant-defined setting values for the extension.
*/
export interface ExtensionSettings {
[key: string]: string | number | boolean | undefined;
}
/**
* Publish method to emit analytics events to Web Pixels.
*/
export interface Analytics {
publish(name: string, data: {[key: string]: unknown}): Promise<boolean>;
}

@@ -1,1 +0,155 @@

export * from '../../components';
export {Banner} from './components/Banner/Banner';
export type {BannerProps} from './components/Banner/Banner';
export {BlockLayout} from './components/BlockLayout/BlockLayout';
export type {BlockLayoutProps} from './components/BlockLayout/BlockLayout';
export {BlockSpacer} from './components/BlockSpacer/BlockSpacer';
export type {BlockSpacerProps} from './components/BlockSpacer/BlockSpacer';
export {BlockStack} from './components/BlockStack/BlockStack';
export type {BlockStackProps} from './components/BlockStack/BlockStack';
export {Button} from './components/Button/Button';
export type {ButtonProps} from './components/Button/Button';
export {Checkbox} from './components/Checkbox/Checkbox';
export type {CheckboxProps} from './components/Checkbox/Checkbox';
export {Choice} from './components/Choice/Choice';
export type {ChoiceProps} from './components/Choice/Choice';
export {ChoiceList} from './components/ChoiceList/ChoiceList';
export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
export {Divider} from './components/Divider/Divider';
export type {DividerProps} from './components/Divider/Divider';
export {Form} from './components/Form/Form';
export type {FormProps} from './components/Form/Form';
export {Grid} from './components/Grid/Grid';
export type {GridProps} from './components/Grid/Grid';
export {GridItem} from './components/GridItem/GridItem';
export type {GridItemProps} from './components/GridItem/GridItem';
export {Heading} from './components/Heading/Heading';
export type {HeadingProps} from './components/Heading/Heading';
export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
export {Icon} from './components/Icon/Icon';
export type {IconProps} from './components/Icon/Icon';
export {Image} from './components/Image/Image';
export type {ImageProps} from './components/Image/Image';
export {InlineLayout} from './components/InlineLayout/InlineLayout';
export type {InlineLayoutProps} from './components/InlineLayout/InlineLayout';
export {InlineStack} from './components/InlineStack/InlineStack';
export type {InlineStackProps} from './components/InlineStack/InlineStack';
export {InlineSpacer} from './components/InlineSpacer/InlineSpacer';
export type {InlineSpacerProps} from './components/InlineSpacer/InlineSpacer';
export {Link} from './components/Link/Link';
export type {LinkProps} from './components/Link/Link';
export {List} from './components/List/List';
export type {ListProps} from './components/List/List';
export {ListItem} from './components/ListItem/ListItem';
export type {ListItemProps} from './components/ListItem/ListItem';
export {PhoneField} from './components/PhoneField/PhoneField';
export type {PhoneFieldProps} from './components/PhoneField/PhoneField';
export {Pressable} from './components/Pressable/Pressable';
export type {PressableProps} from './components/Pressable/Pressable';
export {ScrollView} from './components/ScrollView/ScrollView';
export type {
ScrollViewProps,
ScrollViewEvent,
} from './components/ScrollView/ScrollView';
export {Select} from './components/Select/Select';
export type {SelectProps} from './components/Select/Select';
export {SkeletonImage} from './components/SkeletonImage/SkeletonImage';
export type {SkeletonImageProps} from './components/SkeletonImage/SkeletonImage';
export {SkeletonText} from './components/SkeletonText/SkeletonText';
export type {SkeletonTextProps} from './components/SkeletonText/SkeletonText';
export {SkeletonTextBlock} from './components/SkeletonTextBlock/SkeletonTextBlock';
export type {SkeletonTextBlockProps} from './components/SkeletonTextBlock/SkeletonTextBlock';
export {Spinner} from './components/Spinner/Spinner';
export type {SpinnerProps} from './components/Spinner/Spinner';
export {Stepper} from './components/Stepper/Stepper';
export type {StepperProps} from './components/Stepper/Stepper';
export {Tag} from './components/Tag/Tag';
export type {TagProps} from './components/Tag/Tag';
export {Text} from './components/Text/Text';
export type {TextProps} from './components/Text/Text';
export {TextBlock} from './components/TextBlock/TextBlock';
export type {TextBlockProps} from './components/TextBlock/TextBlock';
export {TextField} from './components/TextField/TextField';
export type {TextFieldProps} from './components/TextField/TextField';
export {Tooltip} from './components/Tooltip/Tooltip';
export type {TooltipProps} from './components/Tooltip/Tooltip';
export {View} from './components/View/View';
export type {
ViewProps,
Coordinate as ViewCoordinate,
Position as ViewPosition,
PositionType as ViewPositionType,
Translate as ViewTranslate,
} from './components/View/View';
export type {
AccessibilityRole,
ViewLikeAccessibilityRole,
NonPresentationalAccessibilityRole,
Autocomplete,
AutocompleteField,
AutocompleteGroup,
Background,
BackgroundFit,
BackgroundPosition,
BackgroundRepeat,
BlockAlignment,
InlineAlignment,
BorderRadius,
BorderStyle,
BorderWidth,
Breakpoint,
ShorthandProperty,
MaybeShorthandProperty,
Fit,
Status,
Size,
Spacing,
Alignment,
Appearance,
GridItemSize,
Columns,
Rows,
BackgroundProps,
BorderProps,
SizingProps,
SpacingProps,
VisibilityProps,
OverlayActivatorProps,
} from './components/shared';

@@ -7,2 +7,10 @@ import type {RenderExtension} from '../../extension';

export interface ExtensionPoints {
/**
* A [dynamic extension point](https://shopify.dev/api/checkout-extensions/checkout#extension-points) that isn't tied to a specific checkout section or feature.
* Unlike static extension points, dynamic extension points render where the merchant
* sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
*
* The [supported locations](https://shopify.dev/api/checkout-extensions/checkout#supported-locations) for dynamic extension points can be previewed during development
* by [using a URL parameter](https://shopify.dev/apps/checkout/test-ui-extensions#dynamic-extension-points).
*/
'Checkout::Dynamic::Render': RenderExtension<

@@ -12,2 +20,7 @@ StandardApi<'Checkout::Dynamic::Render'>,

>;
/**
* A static extension point that renders on every line item, inside the details
* under the line item properties element.
*/
'Checkout::CartLineDetails::RenderAfter': RenderExtension<

@@ -17,2 +30,70 @@ CartLineDetailsRenderAfterApi,

>;
/**
* A static extension point that is rendered after all line items.
*/
'Checkout::CartLines::RenderAfter': RenderExtension<
StandardApi<'Checkout::CartLines::RenderAfter'>,
AnyComponent
>;
/**
* A static extension point that is rendered between the shipping address header
* and shipping address form elements.
*/
'Checkout::DeliveryAddress::RenderBefore': RenderExtension<
StandardApi<'Checkout::DeliveryAddress::RenderBefore'>,
AnyComponent
>;
/**
* A static extension point that is rendered between the shipping method
* header and shipping method options.
*/
'Checkout::ShippingMethods::RenderBefore': RenderExtension<
StandardApi<'Checkout::ShippingMethods::RenderBefore'>,
AnyComponent
>;
/**
* A static extension point that is rendered after the shipping method
* options.
*/
'Checkout::ShippingMethods::RenderAfter': RenderExtension<
StandardApi<'Checkout::ShippingMethods::RenderAfter'>,
AnyComponent
>;
/**
* A static extension point that is rendered in the order summary, before the discount form element.
*/
'Checkout::Reductions::RenderBefore': RenderExtension<
StandardApi<'Checkout::Reductions::RenderBefore'>,
AnyComponent
>;
/**
* A static extension point that is rendered in the order summary, after the discount form
* and discount tag elements.
*/
'Checkout::Reductions::RenderAfter': RenderExtension<
StandardApi<'Checkout::Reductions::RenderAfter'>,
AnyComponent
>;
/**
* A static extension point that is rendered immediately before any actions within each step.
*/
'Checkout::Actions::RenderBefore': RenderExtension<
StandardApi<'Checkout::Actions::RenderBefore'>,
AnyComponent
>;
/**
* A static extension point that is rendered immediately after the contact form element.
*/
'Checkout::Contact::RenderAfter': RenderExtension<
StandardApi<'Checkout::Contact::RenderAfter'>,
AnyComponent
>;
}

@@ -22,4 +103,3 @@

export type ExtensionForExtensionPoint<
T extends ExtensionPoint
> = ExtensionPoints[T];
export type ExtensionForExtensionPoint<T extends ExtensionPoint> =
ExtensionPoints[T];

@@ -6,1 +6,3 @@ export * from './api';

export * from './shared';
export * from './style';
export * from './globals';

@@ -1,17 +0,6 @@

import {createRemoteRoot} from '@remote-ui/core';
import type {
RenderExtension,
RenderExtensionWithRemoteRoot,
} from '../extension';
export interface ExtensionRegistrationFunction<ExtensionPoints> {
<Point extends keyof ExtensionPoints>(
_extensionPoint: Point,
extensionWithRemoteRoot: ExtensionPoints[Point] extends RenderExtension<
infer Api,
infer AllowedComponents
>
? RenderExtensionWithRemoteRoot<Api, AllowedComponents>
: ExtensionPoints[Point],
): ExtensionPoints[Point];
<Target extends keyof ExtensionPoints>(
target: Target,
implementation: ExtensionPoints[Target],
): ExtensionPoints[Target];
}

@@ -27,32 +16,10 @@

export function createExtensionRegistrationFunction<
ExtensionPoints
ExtensionPoints,
>(): ExtensionRegistrationFunction<ExtensionPoints> {
const extensionWrapper: ExtensionRegistrationFunction<ExtensionPoints> = (
_extensionPoint,
extensionWithRemoteRoot,
target,
implementation,
) => {
async function extension(...args: any[]) {
// This handles extensions that do not take a `RemoteChannel` as their first argument.
// This is true for ”non-rendering” extension points, like `Checkout::PostPurchase::ShouldRender`.
if (
args.length === 1 ||
typeof args[0] !== 'object' ||
args[0] == null ||
!('channel' in args[0])
) {
const result = await (extensionWithRemoteRoot as any)(...args);
return result;
}
const [{channel, components}, ...rest] = args;
const root = createRemoteRoot(channel, {components, strict: true});
const result = await (extensionWithRemoteRoot as any)(root, ...rest);
await root.mount();
return result;
}
return extension as any;
globalThis.shopify.extend(target, implementation);
return implementation;
};

@@ -59,0 +26,0 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc