@shopify/ui-extensions 2024.4.0 → 2024.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/surfaces/checkout/components/Sheet/Sheet.js +16 -0
- package/build/cjs/surfaces/checkout.js +2 -0
- package/build/esm/surfaces/checkout/components/Sheet/Sheet.mjs +12 -0
- package/build/esm/surfaces/checkout.mjs +1 -0
- package/build/esnext/surfaces/checkout/components/Sheet/Sheet.esnext +12 -0
- package/build/esnext/surfaces/checkout.esnext +1 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/format-suggestion.d.ts +20 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/format-suggestion.d.ts.map +1 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/shared.d.ts +51 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/shared.d.ts.map +1 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/standard.d.ts +236 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/standard.d.ts.map +1 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/suggest.d.ts +56 -0
- package/build/ts/surfaces/checkout/api/address-autocomplete/suggest.d.ts.map +1 -0
- package/build/ts/surfaces/checkout/api/checkout/checkout.d.ts +1 -1
- package/build/ts/surfaces/checkout/api/standard/standard.d.ts +126 -51
- package/build/ts/surfaces/checkout/api/standard/standard.d.ts.map +1 -1
- package/build/ts/surfaces/checkout/components/Sheet/Sheet.d.ts +55 -0
- package/build/ts/surfaces/checkout/components/Sheet/Sheet.d.ts.map +1 -0
- package/build/ts/surfaces/checkout/components/Sheet/Sheet.doc.d.ts +4 -0
- package/build/ts/surfaces/checkout/components/Sheet/Sheet.doc.d.ts.map +1 -0
- package/build/ts/surfaces/checkout/components.d.ts +2 -0
- package/build/ts/surfaces/checkout/components.d.ts.map +1 -1
- package/build/ts/surfaces/checkout/helper.docs.d.ts.map +1 -1
- package/build/ts/surfaces/checkout/targets.d.ts +22 -8
- package/build/ts/surfaces/checkout/targets.d.ts.map +1 -1
- package/build/ts/surfaces/checkout.d.ts +5 -2
- package/build/ts/surfaces/checkout.d.ts.map +1 -1
- package/build/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts +24 -0
- package/src/surfaces/checkout/api/address-autocomplete/shared.ts +59 -0
- package/src/surfaces/checkout/api/address-autocomplete/standard.ts +289 -0
- package/src/surfaces/checkout/api/address-autocomplete/suggest.ts +61 -0
- package/src/surfaces/checkout/api/checkout/checkout.ts +1 -1
- package/src/surfaces/checkout/api/standard/standard.ts +128 -51
- package/src/surfaces/checkout/components/Sheet/Sheet.doc.ts +69 -0
- package/src/surfaces/checkout/components/Sheet/Sheet.ts +56 -0
- package/src/surfaces/checkout/components/Sheet/examples/basic-sheet.example.ts +29 -0
- package/src/surfaces/checkout/components.ts +3 -0
- package/src/surfaces/checkout/helper.docs.ts +39 -0
- package/src/surfaces/checkout/targets.ts +31 -9
- package/src/surfaces/checkout.ts +18 -2
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var core = require('@remote-ui/core');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Sheet is designed to be used on top of other elements in a user interface and is typically bound to the bottom of a page.
|
|
9
|
+
* Sheet can contain and display various types of content such as forms, or informational messages.
|
|
10
|
+
* Unlike a Modal, which interrupts user flow, a Sheet offers a less intrusive, fluid experience.
|
|
11
|
+
*
|
|
12
|
+
* The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.
|
|
13
|
+
*/
|
|
14
|
+
const Sheet = core.createRemoteComponent('Sheet');
|
|
15
|
+
|
|
16
|
+
exports.Sheet = Sheet;
|
|
@@ -44,6 +44,7 @@ var ProductThumbnail = require('./checkout/components/ProductThumbnail/ProductTh
|
|
|
44
44
|
var Popover = require('./checkout/components/Popover/Popover.js');
|
|
45
45
|
var ScrollView = require('./checkout/components/ScrollView/ScrollView.js');
|
|
46
46
|
var Select = require('./checkout/components/Select/Select.js');
|
|
47
|
+
var Sheet = require('./checkout/components/Sheet/Sheet.js');
|
|
47
48
|
var SkeletonImage = require('./checkout/components/SkeletonImage/SkeletonImage.js');
|
|
48
49
|
var SkeletonText = require('./checkout/components/SkeletonText/SkeletonText.js');
|
|
49
50
|
var SkeletonTextBlock = require('./checkout/components/SkeletonTextBlock/SkeletonTextBlock.js');
|
|
@@ -105,6 +106,7 @@ exports.ProductThumbnail = ProductThumbnail.ProductThumbnail;
|
|
|
105
106
|
exports.Popover = Popover.Popover;
|
|
106
107
|
exports.ScrollView = ScrollView.ScrollView;
|
|
107
108
|
exports.Select = Select.Select;
|
|
109
|
+
exports.Sheet = Sheet.Sheet;
|
|
108
110
|
exports.SkeletonImage = SkeletonImage.SkeletonImage;
|
|
109
111
|
exports.SkeletonText = SkeletonText.SkeletonText;
|
|
110
112
|
exports.SkeletonTextBlock = SkeletonTextBlock.SkeletonTextBlock;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createRemoteComponent } from '@remote-ui/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Sheet is designed to be used on top of other elements in a user interface and is typically bound to the bottom of a page.
|
|
5
|
+
* Sheet can contain and display various types of content such as forms, or informational messages.
|
|
6
|
+
* Unlike a Modal, which interrupts user flow, a Sheet offers a less intrusive, fluid experience.
|
|
7
|
+
*
|
|
8
|
+
* The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.
|
|
9
|
+
*/
|
|
10
|
+
const Sheet = createRemoteComponent('Sheet');
|
|
11
|
+
|
|
12
|
+
export { Sheet };
|
|
@@ -40,6 +40,7 @@ export { ProductThumbnail } from './checkout/components/ProductThumbnail/Product
|
|
|
40
40
|
export { Popover } from './checkout/components/Popover/Popover.mjs';
|
|
41
41
|
export { ScrollView } from './checkout/components/ScrollView/ScrollView.mjs';
|
|
42
42
|
export { Select } from './checkout/components/Select/Select.mjs';
|
|
43
|
+
export { Sheet } from './checkout/components/Sheet/Sheet.mjs';
|
|
43
44
|
export { SkeletonImage } from './checkout/components/SkeletonImage/SkeletonImage.mjs';
|
|
44
45
|
export { SkeletonText } from './checkout/components/SkeletonText/SkeletonText.mjs';
|
|
45
46
|
export { SkeletonTextBlock } from './checkout/components/SkeletonTextBlock/SkeletonTextBlock.mjs';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createRemoteComponent } from '@remote-ui/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Sheet is designed to be used on top of other elements in a user interface and is typically bound to the bottom of a page.
|
|
5
|
+
* Sheet can contain and display various types of content such as forms, or informational messages.
|
|
6
|
+
* Unlike a Modal, which interrupts user flow, a Sheet offers a less intrusive, fluid experience.
|
|
7
|
+
*
|
|
8
|
+
* The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.
|
|
9
|
+
*/
|
|
10
|
+
const Sheet = createRemoteComponent('Sheet');
|
|
11
|
+
|
|
12
|
+
export { Sheet };
|
|
@@ -40,6 +40,7 @@ export { ProductThumbnail } from './checkout/components/ProductThumbnail/Product
|
|
|
40
40
|
export { Popover } from './checkout/components/Popover/Popover.esnext';
|
|
41
41
|
export { ScrollView } from './checkout/components/ScrollView/ScrollView.esnext';
|
|
42
42
|
export { Select } from './checkout/components/Select/Select.esnext';
|
|
43
|
+
export { Sheet } from './checkout/components/Sheet/Sheet.esnext';
|
|
43
44
|
export { SkeletonImage } from './checkout/components/SkeletonImage/SkeletonImage.esnext';
|
|
44
45
|
export { SkeletonText } from './checkout/components/SkeletonText/SkeletonText.esnext';
|
|
45
46
|
export { SkeletonTextBlock } from './checkout/components/SkeletonTextBlock/SkeletonTextBlock.esnext';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { AddressAutocompleteSuggestion, AutocompleteAddress } from './shared';
|
|
2
|
+
export interface AddressAutocompleteFormatSuggestionApi {
|
|
3
|
+
/**
|
|
4
|
+
* The autocomplete suggestion that the buyer selected during checkout.
|
|
5
|
+
*
|
|
6
|
+
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
|
|
7
|
+
*/
|
|
8
|
+
target: Target;
|
|
9
|
+
}
|
|
10
|
+
interface Target {
|
|
11
|
+
selectedSuggestion: AddressAutocompleteSuggestion;
|
|
12
|
+
}
|
|
13
|
+
export interface AddressAutocompleteFormatSuggestionOutput {
|
|
14
|
+
/**
|
|
15
|
+
* The formatted address that will be used to populate the native address fields.
|
|
16
|
+
*/
|
|
17
|
+
formattedAddress: AutocompleteAddress;
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=format-suggestion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format-suggestion.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,6BAA6B,EAC7B,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sCAAsC;IACrD;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,MAAM;IACd,kBAAkB,EAAE,6BAA6B,CAAC;CACnD;AAED,MAAM,WAAW,yCAAyC;IACxD;;OAEG;IACH,gBAAgB,EAAE,mBAAmB,CAAC;CACvC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import type { MailingAddress } from '../../../checkout';
|
|
2
|
+
/**
|
|
3
|
+
* A partial mailing address with only fields relevant to address autocomplete.
|
|
4
|
+
* All fields are optional
|
|
5
|
+
*/
|
|
6
|
+
export interface AutocompleteAddress extends Pick<MailingAddress, 'address1' | 'address2' | 'city' | 'provinceCode' | 'zip' | 'countryCode'> {
|
|
7
|
+
}
|
|
8
|
+
export interface AddressAutocompleteSuggestion {
|
|
9
|
+
/**
|
|
10
|
+
* The address suggestion text presented to the buyer in the list of autocomplete suggestions.
|
|
11
|
+
*
|
|
12
|
+
* This text is shown to the buyer as-is. No attempts will be made to parse it.
|
|
13
|
+
*
|
|
14
|
+
* @example "123 Main St, Toronto, ON, CA"
|
|
15
|
+
*/
|
|
16
|
+
label: string;
|
|
17
|
+
/**
|
|
18
|
+
* A textual identifier that uniquely identifies an autocomplete suggestion
|
|
19
|
+
* or address. This identifier may be used to search for a formatted address.
|
|
20
|
+
*
|
|
21
|
+
* @example "35ef8d55-dceb-4ed8-847b-2f2fc7472f14"
|
|
22
|
+
*/
|
|
23
|
+
id?: string;
|
|
24
|
+
/**
|
|
25
|
+
* A list of substrings that matched the original search query.
|
|
26
|
+
*
|
|
27
|
+
* If `matchedSubstrings` are provided, then they will be used to highlight the substrings
|
|
28
|
+
* of the suggestions that matched the original search query.
|
|
29
|
+
*
|
|
30
|
+
* @example [{offset: 0, length: 4}]
|
|
31
|
+
*/
|
|
32
|
+
matchedSubstrings?: MatchedSubstring[];
|
|
33
|
+
/**
|
|
34
|
+
* The formatted address that will auto-fill the remaining address fields.
|
|
35
|
+
*
|
|
36
|
+
* If this value is returned for every suggestion, then the
|
|
37
|
+
* `purchase.address-autocomplete.format-suggestion` extension target is not needed.
|
|
38
|
+
*/
|
|
39
|
+
formattedAddress?: AutocompleteAddress;
|
|
40
|
+
}
|
|
41
|
+
export interface MatchedSubstring {
|
|
42
|
+
/**
|
|
43
|
+
* The start location of the matched substring in the suggestion label text.
|
|
44
|
+
*/
|
|
45
|
+
offset: number;
|
|
46
|
+
/**
|
|
47
|
+
* The length of the matched substring in the suggestion label text.
|
|
48
|
+
*/
|
|
49
|
+
length: number;
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/api/address-autocomplete/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAEtD;;;GAGG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,cAAc,EACd,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,KAAK,GAAG,aAAa,CAC1E;CAAG;AAEN,MAAM,WAAW,6BAA6B;IAC5C;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEvC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB"}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import type { Analytics, AppMetafieldEntry, Capability, CheckoutToken, Country, Currency, Editor, ExtensionSettings, I18n, Language, Market, Metafield, SessionToken, Shop, Storage, Version } from '../standard/standard';
|
|
2
|
+
import type { Attribute, MailingAddress } from '../shared';
|
|
3
|
+
import type { ApiVersion, GraphQLError, StorefrontApiVersion, Timezone } from '../../../../shared';
|
|
4
|
+
export interface AddressAutocompleteStandardApi<Target extends 'purchase.address-autocomplete.suggest' | 'purchase.address-autocomplete.format-suggestion'> {
|
|
5
|
+
/**
|
|
6
|
+
* The metafields requested in the
|
|
7
|
+
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
|
|
8
|
+
* file. These metafields are updated when there's a change in the merchandise items
|
|
9
|
+
* being purchased by the customer.
|
|
10
|
+
*
|
|
11
|
+
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
|
|
12
|
+
*
|
|
13
|
+
* > Tip:
|
|
14
|
+
* > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
|
|
15
|
+
*/
|
|
16
|
+
appMetafields: AppMetafieldEntry[];
|
|
17
|
+
/**
|
|
18
|
+
* The methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
|
|
19
|
+
*/
|
|
20
|
+
analytics: Analytics;
|
|
21
|
+
/**
|
|
22
|
+
* The custom attributes left by the customer to the merchant, either in their cart or during checkout.
|
|
23
|
+
*/
|
|
24
|
+
attributes: Attribute[] | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* The proposed customer billing address. The address updates when the field is
|
|
27
|
+
* committed (on change) rather than every keystroke.
|
|
28
|
+
*
|
|
29
|
+
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
|
|
30
|
+
*/
|
|
31
|
+
billingAddress?: MailingAddress | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* A stable ID that represents the current checkout.
|
|
34
|
+
*
|
|
35
|
+
* Matches the `token` field in the [WebPixel checkout payload](https://shopify.dev/docs/api/pixels/customer-events#checkout)
|
|
36
|
+
* and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).
|
|
37
|
+
*/
|
|
38
|
+
checkoutToken: CheckoutToken | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* The meta information about the extension.
|
|
41
|
+
*/
|
|
42
|
+
extension: Extension<Target>;
|
|
43
|
+
/**
|
|
44
|
+
* Utilities for translating content and formatting values according to the current
|
|
45
|
+
* [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization)
|
|
46
|
+
* Type 'RunnableExtensionInstance<keyof RunnableExtensionTargets>' is not assignable to type 'ExtensionInstance<Target>'.
|
|
47
|
+
*
|
|
48
|
+
* Refer to [`localization` examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#examples)
|
|
49
|
+
* for more information.
|
|
50
|
+
*/
|
|
51
|
+
i18n: I18n;
|
|
52
|
+
/**
|
|
53
|
+
* The details about the location, language, and currency of the customer. For utilities to easily
|
|
54
|
+
* format and translate content based on these details, you can use the
|
|
55
|
+
* [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n)
|
|
56
|
+
* object instead.
|
|
57
|
+
*/
|
|
58
|
+
localization: Localization;
|
|
59
|
+
/**
|
|
60
|
+
* The metafields that apply to the current checkout.
|
|
61
|
+
*
|
|
62
|
+
* Metafields are stored locally on the client and are applied to the order object after the checkout completes.
|
|
63
|
+
* They are shared by all extensions running on checkout, and
|
|
64
|
+
* persist for as long as the customer is working on this checkout.
|
|
65
|
+
*
|
|
66
|
+
* Once the order is created, you can query these metafields using the
|
|
67
|
+
* [GraphQL Admin API](https://shopify.dev/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
|
|
68
|
+
*/
|
|
69
|
+
metafields: Metafield[];
|
|
70
|
+
/**
|
|
71
|
+
* The method used to query the Storefront GraphQL API with a prefetched token.
|
|
72
|
+
*
|
|
73
|
+
* Refer to [Storefront API access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.
|
|
74
|
+
*/
|
|
75
|
+
query: <Data = unknown, Variables = Record<string, unknown>>(query: string, options?: {
|
|
76
|
+
variables?: Variables;
|
|
77
|
+
version?: StorefrontApiVersion;
|
|
78
|
+
}) => Promise<{
|
|
79
|
+
data?: Data;
|
|
80
|
+
errors?: GraphQLError[];
|
|
81
|
+
}>;
|
|
82
|
+
/**
|
|
83
|
+
* The session token providing a set of claims as a signed JSON Web Token (JWT).
|
|
84
|
+
*
|
|
85
|
+
* The token has a TTL of 5 minutes.
|
|
86
|
+
*
|
|
87
|
+
* If the previous token expires, this value will reflect a new session token with a new signature and expiry.
|
|
88
|
+
*
|
|
89
|
+
* Refer to [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/session-token) for more information.
|
|
90
|
+
*/
|
|
91
|
+
sessionToken: SessionToken;
|
|
92
|
+
/**
|
|
93
|
+
* The settings matching the settings definition written in the
|
|
94
|
+
* [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
|
|
95
|
+
*
|
|
96
|
+
* Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.
|
|
97
|
+
*
|
|
98
|
+
* > Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor).
|
|
99
|
+
|
|
100
|
+
*/
|
|
101
|
+
settings: ExtensionSettings;
|
|
102
|
+
/**
|
|
103
|
+
* The proposed customer shipping address. During the information step,
|
|
104
|
+
* the address updates when the field is committed (on change) rather than every keystroke.
|
|
105
|
+
*
|
|
106
|
+
* > Note: An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.
|
|
107
|
+
*
|
|
108
|
+
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
|
|
109
|
+
*/
|
|
110
|
+
shippingAddress?: MailingAddress | undefined;
|
|
111
|
+
/** The shop where the checkout is taking place. */
|
|
112
|
+
shop: Shop;
|
|
113
|
+
/**
|
|
114
|
+
* The key-value storage for the extension.
|
|
115
|
+
*
|
|
116
|
+
* It uses `localStorage` and should persist across the customer's current checkout session.
|
|
117
|
+
*
|
|
118
|
+
* > Caution: Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.
|
|
119
|
+
*
|
|
120
|
+
* Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier,
|
|
121
|
+
* each activated extension target had its own storage.
|
|
122
|
+
*/
|
|
123
|
+
storage: Storage;
|
|
124
|
+
/**
|
|
125
|
+
* The runner version being used for the extension.
|
|
126
|
+
*
|
|
127
|
+
* @example 'unstable'
|
|
128
|
+
*/
|
|
129
|
+
version: Version;
|
|
130
|
+
}
|
|
131
|
+
interface Extension<Target extends 'purchase.address-autocomplete.suggest' | 'purchase.address-autocomplete.format-suggestion'> {
|
|
132
|
+
/**
|
|
133
|
+
* The API version that was set in the extension config file.
|
|
134
|
+
*
|
|
135
|
+
* @example '2023-07', '2023-10', '2024-01', '2024-04', 'unstable'
|
|
136
|
+
*/
|
|
137
|
+
apiVersion: ApiVersion;
|
|
138
|
+
/**
|
|
139
|
+
* The allowed capabilities of the extension, defined
|
|
140
|
+
* in your [shopify.extension.toml](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
|
|
141
|
+
*
|
|
142
|
+
* * [`api_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
|
|
143
|
+
*
|
|
144
|
+
* * [`network_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
|
|
145
|
+
*
|
|
146
|
+
* * [`block_progress`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior.
|
|
147
|
+
*
|
|
148
|
+
* * [`collect_buyer_consent.sms_marketing`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing.
|
|
149
|
+
*
|
|
150
|
+
* * [`collect_buyer_consent.customer_privacy`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register customer consent decisions that will be honored on Shopify-managed services.
|
|
151
|
+
*/
|
|
152
|
+
capabilities: Capability[];
|
|
153
|
+
/**
|
|
154
|
+
* The information about the editor where the extension is being rendered.
|
|
155
|
+
*
|
|
156
|
+
* If the value is undefined, then the extension is not running in an editor.
|
|
157
|
+
*/
|
|
158
|
+
editor?: Editor;
|
|
159
|
+
/**
|
|
160
|
+
* A Boolean to show whether your extension is currently rendered to the screen.
|
|
161
|
+
*
|
|
162
|
+
* Shopify might render your extension before it's visible in the UI,
|
|
163
|
+
* typically to pre-render extensions that will appear on a later step of the
|
|
164
|
+
* checkout.
|
|
165
|
+
*
|
|
166
|
+
* Your extension might also continue to run after the customer has navigated away
|
|
167
|
+
* from where it was rendered. The extension continues running so that
|
|
168
|
+
* your extension is immediately available to render if the customer navigates back.
|
|
169
|
+
*
|
|
170
|
+
* If the extension is not capable of rendering UI components, then the value will always be false.
|
|
171
|
+
*/
|
|
172
|
+
rendered: boolean;
|
|
173
|
+
/**
|
|
174
|
+
* The URL to the script that started the extension target.
|
|
175
|
+
*/
|
|
176
|
+
scriptUrl: string;
|
|
177
|
+
/**
|
|
178
|
+
* The identifier that specifies where in Shopify’s UI your code is being
|
|
179
|
+
* injected. This will be one of the targets you have included in your
|
|
180
|
+
* extension’s configuration file.
|
|
181
|
+
*
|
|
182
|
+
* @example 'purchase.checkout.block.render'
|
|
183
|
+
* @see https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview
|
|
184
|
+
* @see https://shopify.dev/docs/apps/app-extensions/configuration#targets
|
|
185
|
+
*/
|
|
186
|
+
target: Target;
|
|
187
|
+
/**
|
|
188
|
+
* The published version of the running extension target.
|
|
189
|
+
*
|
|
190
|
+
* For unpublished extensions, the value is `undefined`.
|
|
191
|
+
*
|
|
192
|
+
* @example 3.0.10
|
|
193
|
+
*/
|
|
194
|
+
version?: string;
|
|
195
|
+
}
|
|
196
|
+
interface Localization {
|
|
197
|
+
/**
|
|
198
|
+
* The currency that the customer sees for money amounts in the checkout.
|
|
199
|
+
*/
|
|
200
|
+
currency: Currency;
|
|
201
|
+
/**
|
|
202
|
+
* The buyer’s time zone.
|
|
203
|
+
*/
|
|
204
|
+
timezone: Timezone;
|
|
205
|
+
/**
|
|
206
|
+
* The language the customer sees in the checkout.
|
|
207
|
+
*/
|
|
208
|
+
language: Language;
|
|
209
|
+
/**
|
|
210
|
+
* This is the customer's language, as supported by the extension.
|
|
211
|
+
* If the customer's actual language is not supported by the extension,
|
|
212
|
+
* then this is the language that is used for translations.
|
|
213
|
+
*
|
|
214
|
+
* For example, if the customer's language is 'fr-CA' but your extension
|
|
215
|
+
* only supports translations for 'fr', then the `isoCode` for this
|
|
216
|
+
* language is 'fr'. If your extension does not provide french
|
|
217
|
+
* translations at all, then this value is the default locale for your
|
|
218
|
+
* extension (that is, the one matching your .default.json file).
|
|
219
|
+
*/
|
|
220
|
+
extensionLanguage: Language;
|
|
221
|
+
/**
|
|
222
|
+
* The country context of the checkout. This value carries over from the
|
|
223
|
+
* context of the cart, where it was used to contextualize the storefront
|
|
224
|
+
* experience. If the country is unknown, then the value is undefined.
|
|
225
|
+
*/
|
|
226
|
+
country: Country | undefined;
|
|
227
|
+
/**
|
|
228
|
+
* The [market](https://shopify.dev/docs/apps/markets) context of the
|
|
229
|
+
* checkout. This value carries over from the context of the cart, where it
|
|
230
|
+
* was used to contextualize the storefront experience. If the market is unknown,
|
|
231
|
+
* then the value is undefined.
|
|
232
|
+
*/
|
|
233
|
+
market: Market | undefined;
|
|
234
|
+
}
|
|
235
|
+
export {};
|
|
236
|
+
//# sourceMappingURL=standard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/api/address-autocomplete/standard.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import type { CountryCode } from '../../../checkout';
|
|
2
|
+
import type { AddressAutocompleteSuggestion } from './shared';
|
|
3
|
+
export interface AddressAutocompleteSuggestApi {
|
|
4
|
+
/**
|
|
5
|
+
* The signal that the extension should listen to for cancellation requests.
|
|
6
|
+
*
|
|
7
|
+
* If the signal is aborted, the extension should cancel any ongoing requests.
|
|
8
|
+
* The signal will be aborted either when the buyer navigates away from the
|
|
9
|
+
* address field or when the debounced query value changes.
|
|
10
|
+
*
|
|
11
|
+
* Pass this signal to any asynchronous operations that need to be cancelled,
|
|
12
|
+
* like `fetch`.
|
|
13
|
+
*/
|
|
14
|
+
signal: AbortSignal;
|
|
15
|
+
/**
|
|
16
|
+
* The current state of the address form that the buyer is interacting with.
|
|
17
|
+
*
|
|
18
|
+
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
|
|
19
|
+
*/
|
|
20
|
+
target: Target;
|
|
21
|
+
}
|
|
22
|
+
interface Target {
|
|
23
|
+
/**
|
|
24
|
+
* The current value of the `field` the buyer is interacting with.
|
|
25
|
+
*
|
|
26
|
+
* @example "123 M"
|
|
27
|
+
*/
|
|
28
|
+
value: string;
|
|
29
|
+
/**
|
|
30
|
+
* The `MailingAddress` field that the buyer is interacting with.
|
|
31
|
+
*
|
|
32
|
+
* This field can either be `address1` or `zip` depending on the country
|
|
33
|
+
* selected by the buyer during checkout.
|
|
34
|
+
*
|
|
35
|
+
* @example "address1"
|
|
36
|
+
*/
|
|
37
|
+
field: 'address1' | 'zip';
|
|
38
|
+
/**
|
|
39
|
+
* The `countryCode` selected in the address form that the buyer is interacting with.
|
|
40
|
+
*
|
|
41
|
+
* This code is in ISO 3166 Alpha-2 format representing the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.
|
|
42
|
+
*
|
|
43
|
+
* @example 'CA' for Canada.
|
|
44
|
+
*/
|
|
45
|
+
selectedCountryCode?: CountryCode;
|
|
46
|
+
}
|
|
47
|
+
export interface AddressAutocompleteSuggestOutput {
|
|
48
|
+
/**
|
|
49
|
+
* An array of address autocomplete suggestions to show to the buyer.
|
|
50
|
+
*
|
|
51
|
+
* > Note: Only the first five suggestions will be displayed to the buyer.
|
|
52
|
+
*/
|
|
53
|
+
suggestions: AddressAutocompleteSuggestion[];
|
|
54
|
+
}
|
|
55
|
+
export {};
|
|
56
|
+
//# sourceMappingURL=suggest.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"suggest.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/checkout/api/address-autocomplete/suggest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,UAAU,CAAC;AAE5D,MAAM,WAAW,6BAA6B;IAC5C;;;;;;;;;OASG;IACH,MAAM,EAAE,WAAW,CAAC;IAEpB;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,MAAM;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC;IAE1B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAC;CACnC;AAED,MAAM,WAAW,gCAAgC;IAC/C;;;;OAIG;IACH,WAAW,EAAE,6BAA6B,EAAE,CAAC;CAC9C"}
|