From b2e3780e791496ebf9dc36934d5c27485c56284c Mon Sep 17 00:00:00 2001 From: hheyhhay <78764587+hheyhhay@users.noreply.github.com> Date: Tue, 24 Sep 2024 15:13:35 +0000 Subject: [PATCH 01/13] [checkout] Update to f76fe1735c53f90687115a153885b835657ef9e7 --- .../basic-consent-checkbox.example.tsx | 2 - ...t-phone-field-consent-checkbox.example.tsx | 2 - .../basic-consent-phone-field.example.tsx | 2 - ...t-checkbox-consent-phone-field.example.tsx | 2 - .../examples/time-picking-select.example.tsx | 2 - .../surfaces/checkout/hooks/tests/mount.tsx | 1 - .../checkout/hooks/tests/translate.test.tsx | 2 - .../checkout/hooks/tests/tsconfig.json | 2 +- .../docs/surfaces/checkout/build-docs.sh | 53 +++++-------- .../checkout/reference/apis/storage.doc.ts | 2 + .../examples/analytics-publish.example.tsx | 2 +- .../examples/analytics-visitor.example.tsx | 2 +- .../customer-privacy/default.example.tsx | 2 +- .../default.example.tsx | 1 - .../default.example.tsx | 1 - .../default.example.tsx | 1 - .../default.example.tsx | 1 - .../reference/examples/storage.example.tsx | 45 +++++++++++ .../checkout/reference/helper.docs.ts | 7 ++ ...ank-you.cart-line-item.render-after.doc.ts | 6 +- packages/ui-extensions/src/shared.ts | 2 +- .../ui-extensions/src/surfaces/checkout.ts | 1 + .../address-autocomplete/format-suggestion.ts | 12 +++ .../api/address-autocomplete/shared.ts | 75 +++++++++++++++++++ .../api/address-autocomplete/standard.ts | 2 +- .../api/address-autocomplete/suggest.ts | 19 ++++- .../checkout/api/standard/standard.ts | 2 +- .../surfaces/checkout/components/Chat/Chat.ts | 6 +- .../surfaces/checkout/components/shared.ts | 27 +++++-- .../src/surfaces/checkout/targets.ts | 20 ++--- 30 files changed, 219 insertions(+), 85 deletions(-) create mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/examples/storage.example.tsx diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/basic-consent-checkbox.example.tsx b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/basic-consent-checkbox.example.tsx index c7380bf55..9ea6eb45b 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/basic-consent-checkbox.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/basic-consent-checkbox.example.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { reactExtension, ConsentCheckbox, diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/with-consent-phone-field-consent-checkbox.example.tsx b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/with-consent-phone-field-consent-checkbox.example.tsx index 25e0a7847..2a57eb73b 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/with-consent-phone-field-consent-checkbox.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentCheckbox/examples/with-consent-phone-field-consent-checkbox.example.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { reactExtension, BlockStack, diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/basic-consent-phone-field.example.tsx b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/basic-consent-phone-field.example.tsx index 405b0b1c8..1c4cf701e 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/basic-consent-phone-field.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/basic-consent-phone-field.example.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { reactExtension, ConsentPhoneField, diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/with-consent-checkbox-consent-phone-field.example.tsx b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/with-consent-checkbox-consent-phone-field.example.tsx index 25e0a7847..2a57eb73b 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/with-consent-checkbox-consent-phone-field.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/components/ConsentPhoneField/examples/with-consent-checkbox-consent-phone-field.example.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { reactExtension, BlockStack, diff --git a/packages/ui-extensions-react/src/surfaces/checkout/components/Select/examples/time-picking-select.example.tsx b/packages/ui-extensions-react/src/surfaces/checkout/components/Select/examples/time-picking-select.example.tsx index e0fbc5770..9e59d8398 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/components/Select/examples/time-picking-select.example.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/components/Select/examples/time-picking-select.example.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { reactExtension, Select, diff --git a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/mount.tsx b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/mount.tsx index 6141eb04c..b633b5ddb 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/mount.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/mount.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import {createRender} from '@quilted/react-testing'; import type { ApiForExtension, diff --git a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/translate.test.tsx b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/translate.test.tsx index 5a097d73c..8ab6f28b3 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/translate.test.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/translate.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import {useTranslate} from '../translate'; import {mount} from './mount'; diff --git a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/tsconfig.json b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/tsconfig.json index 6cf0618e4..aba2e3952 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/tsconfig.json +++ b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "../../../tsconfig.json", "compilerOptions": { - "jsx": "react" + "jsx": "react-jsx" }, "include": ["./**/*"], "exclude": [] diff --git a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh index d65549413..48b46ee0e 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh +++ b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh @@ -1,7 +1,6 @@ API_VERSION=$1 DOCS_PATH=docs/surfaces/checkout SRC_PATH=src/surfaces/checkout -SHOPIFY_DEV_PATH="../../../shopify-dev" fail_and_exit() { echo "** Failed to generate docs" @@ -9,28 +8,18 @@ fail_and_exit() { exit $1 } -run_sed() { - if [[ "$OSTYPE" == "darwin"* ]]; then - # macOS - sed -i '' "$1" "$2" - else - # Linux and other Unix-like systems - sed -i "$1" "$2" - fi -} - if [ -z $API_VERSION ] then API_VERSION="unstable" - echo "Building docs for 'unstable' checkout UI extensions API. You can add a calver version argument (e.g. 'yarn docs:checkout 2023-07') to generate the docs for a stable version." + echo "Building docs for 'unstable' checkout UI extensions API. You can add a calver version argument (e.g. 'pnpm docs:checkout 2023-07') to generate the docs for a stable version." else echo "Building docs for '$API_VERSION' checkout UI extensions API." echo "When generating docs for a stable version, 'unstable' docs are not regenerated. This avoids overwriting other unstable changes that are not included in this version." echo "If you need to update the 'unstable' version, run this command again without the '$API_VERSION' parameter." fi -COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated" -COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" +COMPILE_DOCS="pnpm tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node --target esNext --module CommonJS && pnpm generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated" +COMPILE_STATIC_PAGES="pnpm tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && pnpm generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" if echo "$PWD" | grep -q '\checkout-web'; then @@ -43,17 +32,11 @@ else echo "export {}" > src/surfaces/customer-account.ts echo "export {}" > src/surfaces/admin.ts echo "export {}" > src/surfaces/point-of-sale.ts - echo "export {}" > ../ui-extensions-react/src/surfaces/customer-account.ts - echo "export {}" > ../ui-extensions-react/src/surfaces/admin.ts - echo "export {}" > ../ui-extensions-react/src/surfaces/point-of-sale.ts eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES build_exit=$? git checkout HEAD -- src/surfaces/customer-account.ts git checkout HEAD -- src/surfaces/admin.ts git checkout HEAD -- src/surfaces/point-of-sale.ts - git checkout HEAD -- ../ui-extensions-react/src/surfaces/customer-account.ts - git checkout HEAD -- ../ui-extensions-react/src/surfaces/admin.ts - git checkout HEAD -- ../ui-extensions-react/src/surfaces/point-of-sale.ts fi # TODO: get generate-docs to stop requiring JS files: @@ -66,31 +49,31 @@ fi # Make sure https://shopify.dev URLs are relative so they work in Spin. # See https://github.com/Shopify/generate-docs/issues/181 -run_sed 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data.json +sed -i 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data.json sed_exit=$? if [ $sed_exit -ne 0 ]; then fail_and_exit $sed_exit fi # Copy the generated docs to shopify-dev -if [ -d $SHOPIFY_DEV_PATH ]; then - mkdir -p $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - cp ./$DOCS_PATH/generated/* $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - # Replace 'unstable' with the exact API version in relative doc links - run_sed \ - "s/\/docs\/api\/checkout-ui-extensions\/unstable/\/docs\/api\/checkout-ui-extensions\/$API_VERSION/gi" \ - $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION/generated_docs_data.json - sed_exit=$? - if [ $sed_exit -ne 0 ]; then - fail_and_exit $sed_exit - fi - rsync -a --delete ./$DOCS_PATH/screenshots/ $SHOPIFY_DEV_PATH/app/assets/images/templated-apis-screenshots/checkout-ui-extensions/$API_VERSION +if [ -d ../../../shopify-dev ]; then + mkdir -p ../../../shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION + cp ./$DOCS_PATH/generated/* ../../../shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION + # Replace 'unstable' with the exact API version in relative doc links + sed -i \ + "s/\/docs\/api\/checkout-ui-extensions\/unstable/\/docs\/api\/checkout-ui-extensions\/$API_VERSION/gi" \ + ../../../shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION/generated_docs_data.json + sed_exit=$? + if [ $sed_exit -ne 0 ]; then + fail_and_exit $sed_exit + fi + rsync -a --delete ./$DOCS_PATH/screenshots/ ../../../shopify-dev/app/assets/images/templated-apis-screenshots/checkout-ui-extensions/$API_VERSION if [ -n "$SPIN_SHOPIFY_DEV_SERVICE_FQDN" ]; then echo "Docs: https://$SPIN_SHOPIFY_DEV_SERVICE_FQDN/docs/api/checkout-ui-extensions" else - echo "Docs: https://shopify-dev.myshopify.io/docs/api/checkout-ui-extensions" + echo "If you include shopify-dev in your Spin constellation, we can generate a preview link for the docs!" fi else - echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH." + echo "Not copying docs to shopify-dev because it was not found at ../../../shopify-dev." fi diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts index 3e53bc57c..931efadbf 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts @@ -1,6 +1,7 @@ import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; import { + getExample, getLinksByTag, STANDARD_API_PROPERTIES_DESCRIPTION, } from '../helper.docs'; @@ -24,6 +25,7 @@ const data: ReferenceEntityTemplateSchema = { type: 'UseStorageGeneratedType', }, ], + defaultExample: getExample('storage', ['jsx']), related: getLinksByTag('apis'), }; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.tsx index f85323aae..763b13f5b 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react'; +import {useState, useEffect} from 'react'; import { Banner, reactExtension, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-visitor.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-visitor.example.tsx index 161637114..c8b9cd21f 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-visitor.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-visitor.example.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react'; +import {useState, useEffect} from 'react'; import { Banner, reactExtension, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/customer-privacy/default.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/customer-privacy/default.example.tsx index 81bbfe282..acbd01058 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/customer-privacy/default.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/customer-privacy/default.example.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import {useState} from 'react'; import { reactExtension, useCustomerPrivacy, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.footer.render-after/default.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.footer.render-after/default.example.tsx index 43e137969..2bb429531 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.footer.render-after/default.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.footer.render-after/default.example.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BlockStack, reactExtension, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.header.render-after/default.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.header.render-after/default.example.tsx index c2b9d2816..2511cab23 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.header.render-after/default.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.header.render-after/default.example.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BlockStack, reactExtension, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.footer.render-after/default.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.footer.render-after/default.example.tsx index 17dd86e88..a448b8bd4 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.footer.render-after/default.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.footer.render-after/default.example.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BlockStack, reactExtension, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.header.render-after/default.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.header.render-after/default.example.tsx index 0b20411e2..843163fe1 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.header.render-after/default.example.tsx +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.header.render-after/default.example.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BlockStack, reactExtension, diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/storage.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/storage.example.tsx new file mode 100644 index 000000000..9d28fc51a --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/storage.example.tsx @@ -0,0 +1,45 @@ +import {useEffect, useState} from 'react'; +import { + reactExtension, + Checkbox, + useApi, +} from '@shopify/ui-extensions-react/checkout'; + +export default reactExtension( + 'purchase.checkout.block.render', + () => , +); + +function Extension() { + const {storage} = useApi(); + const [tosConsent, setTosConsent] = + useState(false); + + useEffect(() => { + async function readFromStorage() { + const tosConsent = await storage.read( + 'tos-consent', + ); + + setTosConsent(Boolean(tosConsent)); + } + + readFromStorage(); + }, [storage]); + + async function cacheConsent(value: boolean) { + setTosConsent(value); + await storage.write('tos-consent', value); + } + + return ( + + I agree with the terms of service + + ); +} diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts index bc6dbaf86..f82957bd2 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts @@ -456,6 +456,13 @@ The contents of the token are signed using your shared app secret. The optional ], }, }, + storage: { + description: '', + codeblock: { + title: 'Storage', + tabs: getExtensionCodeTabs('storage'), + }, + }, 'delivery-groups': { description: '', codeblock: { diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts index 4cacbc365..123384c3f 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts +++ b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts @@ -10,9 +10,9 @@ const data: ReferenceEntityTemplateSchema = { name: 'purchase.thank-you.cart-line-item.render-after', description: `A static extension target that renders on every line item, inside the details under the line item properties element. - > Caution: - > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - `, + > Caution: + > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. + `, defaultExample: getExample( 'purchase.thank-you.cart-line-item.render-after/default', ['jsx', 'js'], diff --git a/packages/ui-extensions/src/shared.ts b/packages/ui-extensions/src/shared.ts index f15cfd411..9fe8f7248 100644 --- a/packages/ui-extensions/src/shared.ts +++ b/packages/ui-extensions/src/shared.ts @@ -37,7 +37,7 @@ export type ApiVersion = * * * [`collect_buyer_consent.customer_privacy`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register buyer consent decisions that will be honored on Shopify-managed services. * - * * `iframe.sources`: the extension can embed an external URL in an iframe. + * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. */ export type Capability = diff --git a/packages/ui-extensions/src/surfaces/checkout.ts b/packages/ui-extensions/src/surfaces/checkout.ts index 9539e9657..8336be0af 100644 --- a/packages/ui-extensions/src/surfaces/checkout.ts +++ b/packages/ui-extensions/src/surfaces/checkout.ts @@ -171,6 +171,7 @@ export type { AddressAutocompleteSuggestion, MatchedSubstring, AutocompleteAddress, + AddressFormField, } from './checkout/api/address-autocomplete/shared'; export type {AddressAutocompleteStandardApi} from './checkout/api/address-autocomplete/standard'; diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts index f0816945d..0f4167894 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts @@ -1,5 +1,6 @@ import type { AddressAutocompleteSuggestion, + AddressFormField, AutocompleteAddress, } from './shared'; @@ -13,6 +14,17 @@ export interface AddressAutocompleteFormatSuggestionApi { } interface Target { + /** + * The fields of the address form that are visible to the buyer. + * + * @example ['address1', 'address2', 'city', 'company', 'countryCode', 'provinceCode', 'zip'] + * + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + * - Make this a required field once the feature is supported by checkout-web. + */ + fields?: AddressFormField[]; + selectedSuggestion: AddressAutocompleteSuggestion; } diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts index 30620433c..36eda8ac8 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts @@ -25,6 +25,20 @@ export interface AutocompleteAddress */ latitude?: number; + /** + * Additional information about the buyer's address. In supported countries, the `address2` form field is replaced with the additional `line2` and `neighbourhood` fields. + * + * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. + * + * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). + * + * @example "apartamento 42" + * + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + */ + line2?: string; + /** * The longitude coordinates of the buyer. * @@ -33,6 +47,48 @@ export interface AutocompleteAddress * @example -79.38681079999999 */ longitude?: number; + + /** + * The neighbourhood of the buyer's address. In supported countries, the `address2` form field is replaced with the additional `line2` and `neighbourhood` fields. + * + * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. + * + * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). + * + * @example "Centro" + * + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + */ + neighborhood?: string; + + /** + * The street name of the buyer's address. In supported countries, the `address1` form field is replaced with the additional `streetName` and `streetNumber` fields. + * + * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. + * + * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). + * + * @example "Av. Paulista" + * + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + */ + streetName?: string; + + /** + * The street number of the buyer's address. In supported countries, the `address1` form field is replaced with the additional `streetName` and `streetNumber` fields. + * + * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. + * + * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). + * + * @example "1578" + * + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + */ + streetNumber?: string; } export interface AddressAutocompleteSuggestion { @@ -82,3 +138,22 @@ export interface MatchedSubstring { */ length: number; } + +/** + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + */ +export type AddressFormField = Extract< + keyof AutocompleteAddress, + | 'address1' + | 'address2' + | 'city' + | 'company' + | 'countryCode' + | 'line2' + | 'neighborhood' + | 'provinceCode' + | 'streetName' + | 'streetNumber' + | 'zip' +>; diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts index 41be95039..179a68347 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts @@ -194,7 +194,7 @@ interface Extension< * * * [`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. * - * * `iframe.sources`: the extension can embed an external URL in an iframe. + * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. */ capabilities: Capability[]; diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts index 5a147d127..451018461 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts @@ -1,6 +1,6 @@ import type {CountryCode} from '../../../checkout'; -import type {AddressAutocompleteSuggestion} from './shared'; +import type {AddressAutocompleteSuggestion, AddressFormField} from './shared'; export interface AddressAutocompleteSuggestApi { /** @@ -32,14 +32,25 @@ interface Target { value: string; /** - * The `MailingAddress` field that the buyer is interacting with. + * The field of the address form that the buyer is interacting with. * - * This field can either be `address1` or `zip` depending on the country + * This field can be one of `address1`, `zip`, or `streetName` depending on the country * selected by the buyer during checkout. * * @example "address1" */ - field: 'address1' | 'zip'; + field: Extract; + + /** + * The fields of the address form that are visible to the buyer. + * + * @example ['address1', 'address2', 'city', 'company', 'countryCode', 'provinceCode', 'zip'] + * + * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. + * - DO NOT SHIP TO `shopify/ui-extensions`!! + * - Make this a required field once the feature is supported by checkout-web. + */ + fields?: AddressFormField[]; /** * The `countryCode` selected in the address form that the buyer is interacting with. diff --git a/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts b/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts index 583e13037..670e184cc 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts @@ -79,7 +79,7 @@ export interface Extension { * * * [`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. * - * * `iframe.sources`: the extension can embed an external URL in an iframe. + * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. */ capabilities: StatefulRemoteSubscribable; diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts index b7d895186..b8c955ddb 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts @@ -15,11 +15,10 @@ export interface ChatProps extends IdProps { * may not be the actual size rendered. * * - `number`: size in pixels. - * - `` `${number}%` ``: size in percentages of the available space. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size */ - inlineSize?: number | `${number}%`; + inlineSize?: number; /** * Adjust the block size. @@ -28,11 +27,10 @@ export interface ChatProps extends IdProps { * may not be the actual size rendered. * * - `number`: size in pixels. - * - `` `${number}%` ``: size in percentages of the available space. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size */ - blockSize?: number | `${number}%`; + blockSize?: number; /** * A label that describes the purpose or contents of the component. When set, diff --git a/packages/ui-extensions/src/surfaces/checkout/components/shared.ts b/packages/ui-extensions/src/surfaces/checkout/components/shared.ts index 7343aa1fb..82a7c6ea3 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/shared.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/shared.ts @@ -349,7 +349,7 @@ export interface SpacingProps { * * - [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none` * - * - [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight` + * - [`base`, `none`, `large200`, `small200`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `large200` and blockStart padding is `small200` */ padding?: MaybeResponsiveConditionalStyle>; } @@ -503,11 +503,28 @@ export type Size = export type Spacing = | 'none' - | 'extraTight' - | 'tight' + | 'small500' + | 'small400' + | 'small300' + | 'small200' + | 'small100' | 'base' - | 'loose' - | 'extraLoose'; + | 'large100' + | 'large200' + | 'large300' + | 'large400' + | 'large500' + | SpacingDeprecated; + +/** @deprecated These values are deprecated and will eventually be removed. + * Use the new values. + * + * `extraTight`: `small400` + * `tight`: `small200` + * `loose`: `large200` + * `extraLoose`: `large500` + */ +export type SpacingDeprecated = 'extraTight' | 'tight' | 'loose' | 'extraLoose'; export type Alignment = 'start' | 'center' | 'end'; export type InlineAlignment = 'start' | 'center' | 'end'; diff --git a/packages/ui-extensions/src/surfaces/checkout/targets.ts b/packages/ui-extensions/src/surfaces/checkout/targets.ts index 5ec0b737d..49e2c5bbf 100644 --- a/packages/ui-extensions/src/surfaces/checkout/targets.ts +++ b/packages/ui-extensions/src/surfaces/checkout/targets.ts @@ -709,14 +709,6 @@ export interface RenderExtensionTargets { CheckoutApi & StandardApi<'purchase.checkout.footer.render-after'>, AnyComponent >; - /** - * A static extension target that is rendered on top of the Checkout page as an overlay. - * It is positioned in the bottom right corner of the screen. - */ - 'purchase.checkout.chat.render': RenderExtension< - CheckoutApi & StandardApi<'purchase.checkout.chat.render'>, - AllowedComponents<'Chat'> - >; /** * A static extension target that is rendered below the header on the **Thank you** page. */ @@ -734,13 +726,21 @@ export interface RenderExtensionTargets { AnyComponent >; /** - * A static extension target that is rendered on top of the **Thank you** page as an overlay. + * A static extension target that is rendered on top of the Checkout page as an overlay. * It is positioned in the bottom right corner of the screen. */ - 'purchase.thank-you.chat.render': RenderExtension< + 'purchase.checkout.chat.render': RenderExtension< CheckoutApi & StandardApi<'purchase.checkout.chat.render'>, AllowedComponents<'Chat'> >; + /** + * A static extension target that is rendered on top of the **Thank you page** as an overlay. + * It is positioned in the bottom right corner of the screen. + */ + 'purchase.thank-you.chat.render': RenderExtension< + CheckoutApi & StandardApi<'purchase.thank-you.chat.render'>, + AllowedComponents<'Chat'> + >; } export interface RunnableExtensionTargets { From d401abab35ad56da9f73ed1cde859666710dc699 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 18:46:45 +0000 Subject: [PATCH 02/13] remove components/shared.ts filefrom unstable release --- .../surfaces/checkout/components/shared.ts | 27 ++++--------------- 1 file changed, 5 insertions(+), 22 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/checkout/components/shared.ts b/packages/ui-extensions/src/surfaces/checkout/components/shared.ts index 82a7c6ea3..7343aa1fb 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/shared.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/shared.ts @@ -349,7 +349,7 @@ export interface SpacingProps { * * - [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none` * - * - [`base`, `none`, `large200`, `small200`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `large200` and blockStart padding is `small200` + * - [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight` */ padding?: MaybeResponsiveConditionalStyle>; } @@ -503,28 +503,11 @@ export type Size = export type Spacing = | 'none' - | 'small500' - | 'small400' - | 'small300' - | 'small200' - | 'small100' + | 'extraTight' + | 'tight' | 'base' - | 'large100' - | 'large200' - | 'large300' - | 'large400' - | 'large500' - | SpacingDeprecated; - -/** @deprecated These values are deprecated and will eventually be removed. - * Use the new values. - * - * `extraTight`: `small400` - * `tight`: `small200` - * `loose`: `large200` - * `extraLoose`: `large500` - */ -export type SpacingDeprecated = 'extraTight' | 'tight' | 'loose' | 'extraLoose'; + | 'loose' + | 'extraLoose'; export type Alignment = 'start' | 'center' | 'end'; export type InlineAlignment = 'start' | 'center' | 'end'; From 7c9f68660781cb8b5dfb6e9d6b1fec50bcce7880 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 18:48:19 +0000 Subject: [PATCH 03/13] remove link from iframe sources in src/shared.ts --- packages/ui-extensions/src/shared.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/shared.ts b/packages/ui-extensions/src/shared.ts index 9fe8f7248..f15cfd411 100644 --- a/packages/ui-extensions/src/shared.ts +++ b/packages/ui-extensions/src/shared.ts @@ -37,7 +37,7 @@ export type ApiVersion = * * * [`collect_buyer_consent.customer_privacy`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register buyer consent decisions that will be honored on Shopify-managed services. * - * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. + * * `iframe.sources`: the extension can embed an external URL in an iframe. */ export type Capability = From 0c46b6637998d37f59e8f709986bbf89c83f13fe Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 19:36:56 +0000 Subject: [PATCH 04/13] remove Chat and Chat target from release --- .../surfaces/checkout/components/Chat/Chat.ts | 6 ++++-- .../src/surfaces/checkout/targets.ts | 20 +++++++++---------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts index b8c955ddb..b7d895186 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts @@ -15,10 +15,11 @@ export interface ChatProps extends IdProps { * may not be the actual size rendered. * * - `number`: size in pixels. + * - `` `${number}%` ``: size in percentages of the available space. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size */ - inlineSize?: number; + inlineSize?: number | `${number}%`; /** * Adjust the block size. @@ -27,10 +28,11 @@ export interface ChatProps extends IdProps { * may not be the actual size rendered. * * - `number`: size in pixels. + * - `` `${number}%` ``: size in percentages of the available space. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size */ - blockSize?: number; + blockSize?: number | `${number}%`; /** * A label that describes the purpose or contents of the component. When set, diff --git a/packages/ui-extensions/src/surfaces/checkout/targets.ts b/packages/ui-extensions/src/surfaces/checkout/targets.ts index 49e2c5bbf..5ec0b737d 100644 --- a/packages/ui-extensions/src/surfaces/checkout/targets.ts +++ b/packages/ui-extensions/src/surfaces/checkout/targets.ts @@ -709,6 +709,14 @@ export interface RenderExtensionTargets { CheckoutApi & StandardApi<'purchase.checkout.footer.render-after'>, AnyComponent >; + /** + * A static extension target that is rendered on top of the Checkout page as an overlay. + * It is positioned in the bottom right corner of the screen. + */ + 'purchase.checkout.chat.render': RenderExtension< + CheckoutApi & StandardApi<'purchase.checkout.chat.render'>, + AllowedComponents<'Chat'> + >; /** * A static extension target that is rendered below the header on the **Thank you** page. */ @@ -726,19 +734,11 @@ export interface RenderExtensionTargets { AnyComponent >; /** - * A static extension target that is rendered on top of the Checkout page as an overlay. - * It is positioned in the bottom right corner of the screen. - */ - 'purchase.checkout.chat.render': RenderExtension< - CheckoutApi & StandardApi<'purchase.checkout.chat.render'>, - AllowedComponents<'Chat'> - >; - /** - * A static extension target that is rendered on top of the **Thank you page** as an overlay. + * A static extension target that is rendered on top of the **Thank you** page as an overlay. * It is positioned in the bottom right corner of the screen. */ 'purchase.thank-you.chat.render': RenderExtension< - CheckoutApi & StandardApi<'purchase.thank-you.chat.render'>, + CheckoutApi & StandardApi<'purchase.checkout.chat.render'>, AllowedComponents<'Chat'> >; } From 8cbe5deea3cd80d944c7b865e5e85b02a9403aa9 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 19:38:52 +0000 Subject: [PATCH 05/13] remove link from iframe sources --- .../src/surfaces/checkout/api/address-autocomplete/standard.ts | 2 +- .../src/surfaces/checkout/api/standard/standard.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts index 179a68347..41be95039 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/standard.ts @@ -194,7 +194,7 @@ interface Extension< * * * [`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. * - * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. + * * `iframe.sources`: the extension can embed an external URL in an iframe. */ capabilities: Capability[]; diff --git a/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts b/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts index 670e184cc..583e13037 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts @@ -79,7 +79,7 @@ export interface Extension { * * * [`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. * - * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. + * * `iframe.sources`: the extension can embed an external URL in an iframe. */ capabilities: StatefulRemoteSubscribable; From dbe16babd32b6721be9727c2242333b6788f2ac3 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 20:12:40 +0000 Subject: [PATCH 06/13] remove address autocomplete from PR --- .../ui-extensions/src/surfaces/checkout.ts | 1 - .../address-autocomplete/format-suggestion.ts | 12 --- .../api/address-autocomplete/shared.ts | 75 ------------------- .../api/address-autocomplete/suggest.ts | 19 +---- 4 files changed, 4 insertions(+), 103 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/checkout.ts b/packages/ui-extensions/src/surfaces/checkout.ts index 8336be0af..9539e9657 100644 --- a/packages/ui-extensions/src/surfaces/checkout.ts +++ b/packages/ui-extensions/src/surfaces/checkout.ts @@ -171,7 +171,6 @@ export type { AddressAutocompleteSuggestion, MatchedSubstring, AutocompleteAddress, - AddressFormField, } from './checkout/api/address-autocomplete/shared'; export type {AddressAutocompleteStandardApi} from './checkout/api/address-autocomplete/standard'; diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts index 0f4167894..f0816945d 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/format-suggestion.ts @@ -1,6 +1,5 @@ import type { AddressAutocompleteSuggestion, - AddressFormField, AutocompleteAddress, } from './shared'; @@ -14,17 +13,6 @@ export interface AddressAutocompleteFormatSuggestionApi { } interface Target { - /** - * The fields of the address form that are visible to the buyer. - * - * @example ['address1', 'address2', 'city', 'company', 'countryCode', 'provinceCode', 'zip'] - * - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - * - Make this a required field once the feature is supported by checkout-web. - */ - fields?: AddressFormField[]; - selectedSuggestion: AddressAutocompleteSuggestion; } diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts index 36eda8ac8..30620433c 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/shared.ts @@ -25,20 +25,6 @@ export interface AutocompleteAddress */ latitude?: number; - /** - * Additional information about the buyer's address. In supported countries, the `address2` form field is replaced with the additional `line2` and `neighbourhood` fields. - * - * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. - * - * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). - * - * @example "apartamento 42" - * - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - */ - line2?: string; - /** * The longitude coordinates of the buyer. * @@ -47,48 +33,6 @@ export interface AutocompleteAddress * @example -79.38681079999999 */ longitude?: number; - - /** - * The neighbourhood of the buyer's address. In supported countries, the `address2` form field is replaced with the additional `line2` and `neighbourhood` fields. - * - * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. - * - * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). - * - * @example "Centro" - * - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - */ - neighborhood?: string; - - /** - * The street name of the buyer's address. In supported countries, the `address1` form field is replaced with the additional `streetName` and `streetNumber` fields. - * - * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. - * - * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). - * - * @example "Av. Paulista" - * - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - */ - streetName?: string; - - /** - * The street number of the buyer's address. In supported countries, the `address1` form field is replaced with the additional `streetName` and `streetNumber` fields. - * - * For more information, see https://shopify.dev/docs/apps/build/checkout/delivery-shipping/additional-address-fields. - * - * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). - * - * @example "1578" - * - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - */ - streetNumber?: string; } export interface AddressAutocompleteSuggestion { @@ -138,22 +82,3 @@ export interface MatchedSubstring { */ length: number; } - -/** - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - */ -export type AddressFormField = Extract< - keyof AutocompleteAddress, - | 'address1' - | 'address2' - | 'city' - | 'company' - | 'countryCode' - | 'line2' - | 'neighborhood' - | 'provinceCode' - | 'streetName' - | 'streetNumber' - | 'zip' ->; diff --git a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts index 451018461..5a147d127 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/address-autocomplete/suggest.ts @@ -1,6 +1,6 @@ import type {CountryCode} from '../../../checkout'; -import type {AddressAutocompleteSuggestion, AddressFormField} from './shared'; +import type {AddressAutocompleteSuggestion} from './shared'; export interface AddressAutocompleteSuggestApi { /** @@ -32,25 +32,14 @@ interface Target { value: string; /** - * The field of the address form that the buyer is interacting with. + * The `MailingAddress` field that the buyer is interacting with. * - * This field can be one of `address1`, `zip`, or `streetName` depending on the country + * This field can either be `address1` or `zip` depending on the country * selected by the buyer during checkout. * * @example "address1" */ - field: Extract; - - /** - * The fields of the address form that are visible to the buyer. - * - * @example ['address1', 'address2', 'city', 'company', 'countryCode', 'provinceCode', 'zip'] - * - * TODO('nabeel.ahsen@shopify.com): Remove this once this feature is supported by checkout-web. - * - DO NOT SHIP TO `shopify/ui-extensions`!! - * - Make this a required field once the feature is supported by checkout-web. - */ - fields?: AddressFormField[]; + field: 'address1' | 'zip'; /** * The `countryCode` selected in the address form that the buyer is interacting with. From add7b47c48569196c18c153f821187186f0c9a63 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 20:50:39 +0000 Subject: [PATCH 07/13] remove chat from stable release --- .../ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts index b7d895186..dbda1d815 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts @@ -19,7 +19,7 @@ export interface ChatProps extends IdProps { * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size */ - inlineSize?: number | `${number}%`; + inlineSize?: number; /** * Adjust the block size. From b8b504246ff61560a2b229556909fd078a181e79 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Tue, 24 Sep 2024 20:54:16 +0000 Subject: [PATCH 08/13] add payment option to stable release --- .../checkout/hooks/payment-options.ts | 35 +++++-------------- .../hooks/tests/payment-options.test.tsx | 10 +++--- 2 files changed, 13 insertions(+), 32 deletions(-) diff --git a/packages/ui-extensions-react/src/surfaces/checkout/hooks/payment-options.ts b/packages/ui-extensions-react/src/surfaces/checkout/hooks/payment-options.ts index c87a91b41..bea0176b4 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/hooks/payment-options.ts +++ b/packages/ui-extensions-react/src/surfaces/checkout/hooks/payment-options.ts @@ -1,8 +1,8 @@ import type { RenderExtensionTarget, PaymentOption, + SelectedPaymentOption, } from '@shopify/ui-extensions/checkout'; -import {useMemo} from 'react'; import {ExtensionHasNoMethodError} from '../errors'; @@ -32,34 +32,15 @@ export function useAvailablePaymentOptions< */ export function useSelectedPaymentOptions< Target extends RenderExtensionTarget = RenderExtensionTarget, ->(): PaymentOption[] { +>(): SelectedPaymentOption[] { const api = useApi(); - if ( - !('selectedPaymentOptions' in api) || - !('availablePaymentOptions' in api) - ) { - throw new ExtensionHasNoMethodError( - 'selectedPaymentOptions', - api.extension.target, - ); + if ('selectedPaymentOptions' in api) { + return useSubscription(api.selectedPaymentOptions); } - const selectedPaymentOptions = useSubscription(api.selectedPaymentOptions); - const availablePaymentOptions = useSubscription(api.availablePaymentOptions); - - return useMemo(() => { - const availablePaymentOptionsMap: Record = {}; - - for (const option of availablePaymentOptions) { - availablePaymentOptionsMap[option.handle] = option; - } - - return selectedPaymentOptions.map((paymentOption) => { - return { - handle: paymentOption.handle, - type: availablePaymentOptionsMap[paymentOption.handle]?.type, - }; - }); - }, [availablePaymentOptions, selectedPaymentOptions]); + throw new ExtensionHasNoMethodError( + 'selectedPaymentOptions', + api.extension.target, + ); } diff --git a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/payment-options.test.tsx b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/payment-options.test.tsx index f5ac22754..8b6567d16 100644 --- a/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/payment-options.test.tsx +++ b/packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/payment-options.test.tsx @@ -40,10 +40,10 @@ describe('Payment Methods API hooks', () => { ]; const selectedPaymentOptionHandles: SelectedPaymentOption[] = [ - {handle: 'bogus'}, + {handle: 'bogus', type: 'other'}, ]; - const selectedPaymentOptions: PaymentOption[] = [ + const selectedPaymentOptions: SelectedPaymentOption[] = [ {handle: 'bogus', type: 'other'}, ]; @@ -70,11 +70,11 @@ describe('Payment Methods API hooks', () => { ]; const selectedPaymentOptionHandles: SelectedPaymentOption[] = [ - {handle: 'bogus'}, - {handle: 'direct'}, + {handle: 'bogus', type: 'other'}, + {handle: 'direct', type: 'creditCard'}, ]; - const selectedPaymentOptions: PaymentOption[] = [ + const selectedPaymentOptions: SelectedPaymentOption[] = [ {handle: 'bogus', type: 'other'}, {handle: 'direct', type: 'creditCard'}, ]; From cedda2ad1eb97f1134ef9fad000770ee6d8c9cdf Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Wed, 25 Sep 2024 13:21:04 +0000 Subject: [PATCH 09/13] add type checkout for payment option in standard --- .../src/surfaces/checkout/api/standard/standard.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts b/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts index 583e13037..e5c79f0fa 100644 --- a/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts +++ b/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts @@ -1167,17 +1167,7 @@ export interface PaymentOption { handle: string; } -/** - * A payment option selected by the buyer. - */ -export interface SelectedPaymentOption { - /** - * The unique handle referencing `PaymentOption.handle`. - * - * Refer to [availablePaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/apis/payments#standardapi-propertydetail-availablepaymentoptions). - */ - handle: string; -} +export type SelectedPaymentOption = PaymentOption; export interface CartDiscountCode { /** From 7d9d541e18c33b41dd95bab47383137a02979113 Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Wed, 25 Sep 2024 18:02:36 +0000 Subject: [PATCH 10/13] restore build-docs file to original to prevent failing --- .../docs/surfaces/checkout/build-docs.sh | 53 ++++++++++++------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh index 48b46ee0e..d65549413 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh +++ b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh @@ -1,6 +1,7 @@ API_VERSION=$1 DOCS_PATH=docs/surfaces/checkout SRC_PATH=src/surfaces/checkout +SHOPIFY_DEV_PATH="../../../shopify-dev" fail_and_exit() { echo "** Failed to generate docs" @@ -8,18 +9,28 @@ fail_and_exit() { exit $1 } +run_sed() { + if [[ "$OSTYPE" == "darwin"* ]]; then + # macOS + sed -i '' "$1" "$2" + else + # Linux and other Unix-like systems + sed -i "$1" "$2" + fi +} + if [ -z $API_VERSION ] then API_VERSION="unstable" - echo "Building docs for 'unstable' checkout UI extensions API. You can add a calver version argument (e.g. 'pnpm docs:checkout 2023-07') to generate the docs for a stable version." + echo "Building docs for 'unstable' checkout UI extensions API. You can add a calver version argument (e.g. 'yarn docs:checkout 2023-07') to generate the docs for a stable version." else echo "Building docs for '$API_VERSION' checkout UI extensions API." echo "When generating docs for a stable version, 'unstable' docs are not regenerated. This avoids overwriting other unstable changes that are not included in this version." echo "If you need to update the 'unstable' version, run this command again without the '$API_VERSION' parameter." fi -COMPILE_DOCS="pnpm tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node --target esNext --module CommonJS && pnpm generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated" -COMPILE_STATIC_PAGES="pnpm tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && pnpm generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" +COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated" +COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" if echo "$PWD" | grep -q '\checkout-web'; then @@ -32,11 +43,17 @@ else echo "export {}" > src/surfaces/customer-account.ts echo "export {}" > src/surfaces/admin.ts echo "export {}" > src/surfaces/point-of-sale.ts + echo "export {}" > ../ui-extensions-react/src/surfaces/customer-account.ts + echo "export {}" > ../ui-extensions-react/src/surfaces/admin.ts + echo "export {}" > ../ui-extensions-react/src/surfaces/point-of-sale.ts eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES build_exit=$? git checkout HEAD -- src/surfaces/customer-account.ts git checkout HEAD -- src/surfaces/admin.ts git checkout HEAD -- src/surfaces/point-of-sale.ts + git checkout HEAD -- ../ui-extensions-react/src/surfaces/customer-account.ts + git checkout HEAD -- ../ui-extensions-react/src/surfaces/admin.ts + git checkout HEAD -- ../ui-extensions-react/src/surfaces/point-of-sale.ts fi # TODO: get generate-docs to stop requiring JS files: @@ -49,31 +66,31 @@ fi # Make sure https://shopify.dev URLs are relative so they work in Spin. # See https://github.com/Shopify/generate-docs/issues/181 -sed -i 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data.json +run_sed 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data.json sed_exit=$? if [ $sed_exit -ne 0 ]; then fail_and_exit $sed_exit fi # Copy the generated docs to shopify-dev -if [ -d ../../../shopify-dev ]; then - mkdir -p ../../../shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - cp ./$DOCS_PATH/generated/* ../../../shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - # Replace 'unstable' with the exact API version in relative doc links - sed -i \ - "s/\/docs\/api\/checkout-ui-extensions\/unstable/\/docs\/api\/checkout-ui-extensions\/$API_VERSION/gi" \ - ../../../shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION/generated_docs_data.json - sed_exit=$? - if [ $sed_exit -ne 0 ]; then - fail_and_exit $sed_exit - fi - rsync -a --delete ./$DOCS_PATH/screenshots/ ../../../shopify-dev/app/assets/images/templated-apis-screenshots/checkout-ui-extensions/$API_VERSION +if [ -d $SHOPIFY_DEV_PATH ]; then + mkdir -p $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION + cp ./$DOCS_PATH/generated/* $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION + # Replace 'unstable' with the exact API version in relative doc links + run_sed \ + "s/\/docs\/api\/checkout-ui-extensions\/unstable/\/docs\/api\/checkout-ui-extensions\/$API_VERSION/gi" \ + $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION/generated_docs_data.json + sed_exit=$? + if [ $sed_exit -ne 0 ]; then + fail_and_exit $sed_exit + fi + rsync -a --delete ./$DOCS_PATH/screenshots/ $SHOPIFY_DEV_PATH/app/assets/images/templated-apis-screenshots/checkout-ui-extensions/$API_VERSION if [ -n "$SPIN_SHOPIFY_DEV_SERVICE_FQDN" ]; then echo "Docs: https://$SPIN_SHOPIFY_DEV_SERVICE_FQDN/docs/api/checkout-ui-extensions" else - echo "If you include shopify-dev in your Spin constellation, we can generate a preview link for the docs!" + echo "Docs: https://shopify-dev.myshopify.io/docs/api/checkout-ui-extensions" fi else - echo "Not copying docs to shopify-dev because it was not found at ../../../shopify-dev." + echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH." fi From 5b787962f0f0fa3f8c1a844536e9935ae990cffe Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Wed, 25 Sep 2024 18:12:06 +0000 Subject: [PATCH 11/13] remove chat from unstable --- .../ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts index dbda1d815..b7d895186 100644 --- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts +++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts @@ -19,7 +19,7 @@ export interface ChatProps extends IdProps { * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size */ - inlineSize?: number; + inlineSize?: number | `${number}%`; /** * Adjust the block size. From 28edde440ceee584c71c5ac983252ca71a7f853a Mon Sep 17 00:00:00 2001 From: Hayley Dixon Date: Wed, 25 Sep 2024 18:42:49 +0000 Subject: [PATCH 12/13] add changeset log --- .changeset/breezy-mangos-fry.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/breezy-mangos-fry.md diff --git a/.changeset/breezy-mangos-fry.md b/.changeset/breezy-mangos-fry.md new file mode 100644 index 000000000..75233b798 --- /dev/null +++ b/.changeset/breezy-mangos-fry.md @@ -0,0 +1,8 @@ +--- +'@shopify/ui-extensions-react': minor +'@shopify/ui-extensions': minor +--- + +Adds type property to selectedPaymentOption + +Added React example code block for the storage APIs From c9620ac0b25010e76d6e00a2b63d860817435cdd Mon Sep 17 00:00:00 2001 From: Hayley Dixon <78764587+hheyhhay@users.noreply.github.com> Date: Thu, 26 Sep 2024 16:36:14 -0400 Subject: [PATCH 13/13] Update breezy-mangos-fry.md --- .changeset/breezy-mangos-fry.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.changeset/breezy-mangos-fry.md b/.changeset/breezy-mangos-fry.md index 75233b798..32a945930 100644 --- a/.changeset/breezy-mangos-fry.md +++ b/.changeset/breezy-mangos-fry.md @@ -3,6 +3,4 @@ '@shopify/ui-extensions': minor --- -Adds type property to selectedPaymentOption - -Added React example code block for the storage APIs +Adds `type` property to `selectedPaymentOption`