@vtex/faststore 0.0.7 → 0.0.10
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/CHANGELOG.md +102 -0
- package/dist/actions.json +194 -1
- package/dist/catalog.json +3449 -1612
- package/dist/cli/index.d.ts +512 -63
- package/dist/cli/index.js +2098 -686
- package/dist/cli/index.js.map +1 -1
- package/dist/cli/server-runtime.js +44 -24
- package/dist/cli/server-runtime.js.map +1 -1
- package/dist/client.d.ts +5 -1
- package/dist/client.js +5 -1
- package/dist/components.d.ts +42 -10
- package/dist/components.js +47 -15
- package/dist/content-types.json +823 -0
- package/dist/core/dist/define-component.d.ts +12 -2
- package/dist/docs/account-access-gate.md +4 -4
- package/dist/docs/account-address-book.md +519 -0
- package/dist/docs/account-entry-point.md +5 -5
- package/dist/docs/account-menu.md +7 -7
- package/dist/docs/account-saved-cards.md +301 -0
- package/dist/docs/alert-dialog.md +2 -2
- package/dist/docs/billing-address.md +17 -9
- package/dist/docs/binding-switcher.md +154 -0
- package/dist/docs/card-entry.md +38 -7
- package/dist/docs/card-summary.md +175 -0
- package/dist/docs/cardholder-document.md +16 -14
- package/dist/docs/cart-destination.md +238 -0
- package/dist/docs/cart-item.md +22 -4
- package/dist/docs/cart-totalizer.md +1 -1
- package/dist/docs/cart.md +126 -19
- package/dist/docs/client-profile-fieldset.md +7 -5
- package/dist/docs/copy-text.md +84 -0
- package/dist/docs/document-field.md +8 -8
- package/dist/docs/footer-link-group.md +2 -2
- package/dist/docs/footer-social.md +1 -1
- package/dist/docs/free-shipping-progress.md +13 -9
- package/dist/docs/header-root.md +1 -1
- package/dist/docs/incentives.md +4 -4
- package/dist/docs/logo.md +6 -6
- package/dist/docs/my-account-profile.md +4 -4
- package/dist/docs/navigation-link-list.md +2 -2
- package/dist/docs/navigation-link.md +3 -3
- package/dist/docs/order-cancel.md +52 -0
- package/dist/docs/order-delivery-address.md +63 -0
- package/dist/docs/order-delivery-group.md +83 -0
- package/dist/docs/order-details-back.md +41 -0
- package/dist/docs/order-details-header.md +48 -0
- package/dist/docs/order-list-row.md +46 -0
- package/dist/docs/order-list-search.md +101 -0
- package/dist/docs/order-list-views.md +97 -0
- package/dist/docs/order-list.md +94 -0
- package/dist/docs/order-payment.md +94 -0
- package/dist/docs/order-placed-date.md +49 -0
- package/dist/docs/order-placed-payment-summary.md +13 -15
- package/dist/docs/order-placed.md +225 -0
- package/dist/docs/order-progress.md +88 -0
- package/dist/docs/order-status-badge.md +91 -0
- package/dist/docs/order-summary.md +53 -0
- package/dist/docs/payment-method-badges.md +16 -5
- package/dist/docs/payment-methods.md +1 -1
- package/dist/docs/place-order.md +13 -9
- package/dist/docs/product-information.md +2 -2
- package/dist/docs/product-shelf.md +7 -0
- package/dist/docs/saved-cards.md +2 -2
- package/dist/docs/select.md +22 -10
- package/dist/docs/session.md +1 -1
- package/dist/docs/shipping-address.md +1 -1
- package/dist/docs/sign-in-redirect.md +7 -7
- package/dist/docs/toast.md +35 -13
- package/dist/index.d.ts +7 -2
- package/dist/index.js +2 -1
- package/dist/internal/client.d.ts +9 -1
- package/dist/internal/client.js +10 -2
- package/dist/internal/server.d.ts +8 -2
- package/dist/internal/server.js +8 -2
- package/dist/matter/account-access-gate/account-access-gate.d.ts +2 -1
- package/dist/matter/account-access-gate/account-access-gate.js +19 -16
- package/dist/matter/account-access-gate/account-access-gate.js.map +1 -1
- package/dist/matter/account-address-book/account-address-book-delete.d.ts +60 -0
- package/dist/matter/account-address-book/account-address-book-delete.js +184 -0
- package/dist/matter/account-address-book/account-address-book-delete.js.map +1 -0
- package/dist/matter/account-address-book/account-address-book-deliverability.d.ts +19 -0
- package/dist/matter/account-address-book/account-address-book-deliverability.js +50 -0
- package/dist/matter/account-address-book/account-address-book-deliverability.js.map +1 -0
- package/dist/matter/account-address-book/account-address-book-form-parts.d.ts +42 -0
- package/dist/matter/account-address-book/account-address-book-form-parts.js +146 -0
- package/dist/matter/account-address-book/account-address-book-form-parts.js.map +1 -0
- package/dist/matter/account-address-book/account-address-book-profile-notice.d.ts +25 -0
- package/dist/matter/account-address-book/account-address-book-profile-notice.js +72 -0
- package/dist/matter/account-address-book/account-address-book-profile-notice.js.map +1 -0
- package/dist/matter/account-address-book/account-address-book.d.ts +120 -0
- package/dist/matter/account-address-book/account-address-book.js +469 -0
- package/dist/matter/account-address-book/account-address-book.js.map +1 -0
- package/dist/matter/account-address-book/account-address-country-switch.js +59 -0
- package/dist/matter/account-address-book/account-address-country-switch.js.map +1 -0
- package/dist/matter/account-address-book/account-address-country.d.ts +36 -0
- package/dist/matter/account-address-book/account-address-country.js +151 -0
- package/dist/matter/account-address-book/account-address-country.js.map +1 -0
- package/dist/matter/account-address-book/account-address-first-line.js +11 -0
- package/dist/matter/account-address-book/account-address-first-line.js.map +1 -0
- package/dist/matter/account-address-book/account-address-form-context.d.ts +55 -0
- package/dist/matter/account-address-book/account-address-form-context.js +14 -0
- package/dist/matter/account-address-book/account-address-form-context.js.map +1 -0
- package/dist/matter/account-address-book/account-address-form.d.ts +85 -0
- package/dist/matter/account-address-book/account-address-form.js +946 -0
- package/dist/matter/account-address-book/account-address-form.js.map +1 -0
- package/dist/matter/account-address-book/account-address-postal-autofill.js +189 -0
- package/dist/matter/account-address-book/account-address-postal-autofill.js.map +1 -0
- package/dist/matter/account-address-book/account-address-record.d.ts +26 -0
- package/dist/matter/account-address-book/account-address-record.js +138 -0
- package/dist/matter/account-address-book/account-address-record.js.map +1 -0
- package/dist/matter/account-entry-point/account-entry-point.js +11 -11
- package/dist/matter/account-entry-point/account-entry-point.js.map +1 -1
- package/dist/matter/account-menu/account-menu.d.ts +7 -3
- package/dist/matter/account-menu/account-menu.js +69 -28
- package/dist/matter/account-menu/account-menu.js.map +1 -1
- package/dist/matter/account-saved-cards/account-saved-cards.d.ts +383 -0
- package/dist/matter/account-saved-cards/account-saved-cards.js +956 -0
- package/dist/matter/account-saved-cards/account-saved-cards.js.map +1 -0
- package/dist/matter/billing-address/billing-address.d.ts +30 -17
- package/dist/matter/billing-address/billing-address.js +128 -33
- package/dist/matter/billing-address/billing-address.js.map +1 -1
- package/dist/matter/breadcrumb/breadcrumb.js +2 -2
- package/dist/matter/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/matter/card-entry/card-capture.js +4 -3
- package/dist/matter/card-entry/card-capture.js.map +1 -1
- package/dist/matter/card-entry/card-entry.d.ts +5 -3
- package/dist/matter/card-entry/card-entry.js +77 -27
- package/dist/matter/card-entry/card-entry.js.map +1 -1
- package/dist/matter/cardholder-document/cardholder-document.d.ts +10 -9
- package/dist/matter/cardholder-document/cardholder-document.js +36 -16
- package/dist/matter/cardholder-document/cardholder-document.js.map +1 -1
- package/dist/matter/cart/cart-namespace.d.ts +5 -1
- package/dist/matter/cart/cart-namespace.js +5 -1
- package/dist/matter/cart/cart-namespace.js.map +1 -1
- package/dist/matter/cart/cart.d.ts +41 -6
- package/dist/matter/cart/cart.js +267 -54
- package/dist/matter/cart/cart.js.map +1 -1
- package/dist/matter/cart-destination/cart-destination.d.ts +222 -0
- package/dist/matter/cart-destination/cart-destination.js +613 -0
- package/dist/matter/cart-destination/cart-destination.js.map +1 -0
- package/dist/matter/cart-item/cart-item.d.ts +4 -2
- package/dist/matter/cart-item/cart-item.js +76 -17
- package/dist/matter/cart-item/cart-item.js.map +1 -1
- package/dist/matter/cart-totalizer/cart-totalizer.js +3 -2
- package/dist/matter/cart-totalizer/cart-totalizer.js.map +1 -1
- package/dist/matter/client-preferences/client-preferences-fieldset.js +1 -1
- package/dist/matter/client-profile-form/client-profile-fieldset.js +8 -5
- package/dist/matter/client-profile-form/client-profile-fieldset.js.map +1 -1
- package/dist/matter/free-shipping-progress/free-shipping-progress.d.ts +6 -3
- package/dist/matter/free-shipping-progress/free-shipping-progress.js +76 -33
- package/dist/matter/free-shipping-progress/free-shipping-progress.js.map +1 -1
- package/dist/matter/identity-edit/identity-edit.js +3 -3
- package/dist/matter/identity-edit/identity-edit.js.map +1 -1
- package/dist/matter/identity-summary/identity-summary.js +2 -2
- package/dist/matter/identity-summary/identity-summary.js.map +1 -1
- package/dist/matter/my-account-profile/my-account-profile.d.ts +3 -3
- package/dist/matter/my-account-profile/my-account-profile.js +4 -4
- package/dist/matter/my-account-profile/my-account-profile.js.map +1 -1
- package/dist/matter/order-cancel/order-cancel.d.ts +110 -0
- package/dist/matter/order-cancel/order-cancel.js +344 -0
- package/dist/matter/order-cancel/order-cancel.js.map +1 -0
- package/dist/matter/order-delivery-address/order-delivery-address.d.ts +73 -0
- package/dist/matter/order-delivery-address/order-delivery-address.js +172 -0
- package/dist/matter/order-delivery-address/order-delivery-address.js.map +1 -0
- package/dist/matter/order-delivery-group/order-delivery-group.d.ts +128 -0
- package/dist/matter/order-delivery-group/order-delivery-group.js +408 -0
- package/dist/matter/order-delivery-group/order-delivery-group.js.map +1 -0
- package/dist/matter/order-details-header/order-details-header.d.ts +104 -0
- package/dist/matter/order-details-header/order-details-header.js +190 -0
- package/dist/matter/order-details-header/order-details-header.js.map +1 -0
- package/dist/matter/order-list/customer-orders-filter.d.ts +12 -0
- package/dist/matter/order-list/customer-orders-filter.js +30 -0
- package/dist/matter/order-list/customer-orders-filter.js.map +1 -0
- package/dist/matter/order-list/order-list.d.ts +121 -0
- package/dist/matter/order-list/order-list.js +395 -0
- package/dist/matter/order-list/order-list.js.map +1 -0
- package/dist/matter/order-list-row/order-list-row.d.ts +44 -0
- package/dist/matter/order-list-row/order-list-row.js +127 -0
- package/dist/matter/order-list-row/order-list-row.js.map +1 -0
- package/dist/matter/order-list-search/order-list-search.d.ts +72 -0
- package/dist/matter/order-list-search/order-list-search.js +296 -0
- package/dist/matter/order-list-search/order-list-search.js.map +1 -0
- package/dist/matter/order-list-views/order-list-views.d.ts +65 -0
- package/dist/matter/order-list-views/order-list-views.js +154 -0
- package/dist/matter/order-list-views/order-list-views.js.map +1 -0
- package/dist/matter/order-payment/order-payment.d.ts +83 -0
- package/dist/matter/order-payment/order-payment.js +258 -0
- package/dist/matter/order-payment/order-payment.js.map +1 -0
- package/dist/matter/order-placed/order-placed-deliveries.d.ts +145 -0
- package/dist/matter/order-placed/order-placed-deliveries.js +380 -0
- package/dist/matter/order-placed/order-placed-deliveries.js.map +1 -0
- package/dist/matter/order-placed/order-placed.d.ts +122 -0
- package/dist/matter/order-placed/order-placed.js +452 -0
- package/dist/matter/order-placed/order-placed.js.map +1 -0
- package/dist/matter/order-placed-date/order-placed-date.d.ts +45 -0
- package/dist/matter/order-placed-date/order-placed-date.js +92 -0
- package/dist/matter/order-placed-date/order-placed-date.js.map +1 -0
- package/dist/matter/order-placed-payment-summary/order-placed-payment-summary.d.ts +5 -8
- package/dist/matter/order-placed-payment-summary/order-placed-payment-summary.js +29 -81
- package/dist/matter/order-placed-payment-summary/order-placed-payment-summary.js.map +1 -1
- package/dist/matter/order-progress/order-progress.d.ts +85 -0
- package/dist/matter/order-progress/order-progress.js +203 -0
- package/dist/matter/order-progress/order-progress.js.map +1 -0
- package/dist/matter/order-summary/order-summary.d.ts +81 -0
- package/dist/matter/order-summary/order-summary.js +192 -0
- package/dist/matter/order-summary/order-summary.js.map +1 -0
- package/dist/matter/payment/cardholder-document-rule.d.ts +35 -0
- package/dist/matter/payment/cardholder-document-rule.js +35 -0
- package/dist/matter/payment/cardholder-document-rule.js.map +1 -0
- package/dist/matter/payment/payment-card-capture.js +38 -23
- package/dist/matter/payment/payment-card-capture.js.map +1 -1
- package/dist/matter/payment/payment-controller.js +11 -0
- package/dist/matter/payment/payment-controller.js.map +1 -1
- package/dist/matter/payment/payment-method-badges.js +4 -2
- package/dist/matter/payment/payment-method-badges.js.map +1 -1
- package/dist/matter/payment/payment.js +11 -0
- package/dist/matter/payment/payment.js.map +1 -1
- package/dist/matter/payment/use-payment-method-selection.d.ts +39 -0
- package/dist/matter/payment/use-payment-method-selection.js +30 -2
- package/dist/matter/payment/use-payment-method-selection.js.map +1 -1
- package/dist/matter/payment/use-payment-submit-gate.d.ts +16 -2
- package/dist/matter/payment/use-payment-submit-gate.js +42 -14
- package/dist/matter/payment/use-payment-submit-gate.js.map +1 -1
- package/dist/matter/place-order/place-order.d.ts +12 -7
- package/dist/matter/place-order/place-order.js +126 -103
- package/dist/matter/place-order/place-order.js.map +1 -1
- package/dist/matter/pricing/pricing.js +5 -5
- package/dist/matter/pricing/pricing.js.map +1 -1
- package/dist/matter/product-shelf/product-shelf.d.ts +7 -0
- package/dist/matter/product-shelf/product-shelf.js +115 -1
- package/dist/matter/product-shelf/product-shelf.js.map +1 -1
- package/dist/matter/region/region.js +1 -1
- package/dist/matter/saved-cards/saved-cards.js +26 -15
- package/dist/matter/saved-cards/saved-cards.js.map +1 -1
- package/dist/matter/session/session.js +2 -2
- package/dist/matter/session/session.js.map +1 -1
- package/dist/matter/shipping-address/country-descriptors.d.ts +1 -0
- package/dist/matter/shipping-address/country-descriptors.js +23 -1
- package/dist/matter/shipping-address/country-descriptors.js.map +1 -1
- package/dist/matter/shipping-address/shipping-address.js +62 -14
- package/dist/matter/shipping-address/shipping-address.js.map +1 -1
- package/dist/matter/shipping-simulator/shipping-simulator.d.ts +2 -2
- package/dist/matter/shipping-simulator/shipping-simulator.js +6 -2
- package/dist/matter/shipping-simulator/shipping-simulator.js.map +1 -1
- package/dist/matter/sign-in-redirect/sign-in-redirect.js +48 -10
- package/dist/matter/sign-in-redirect/sign-in-redirect.js.map +1 -1
- package/dist/matter/variant-selector/variant-selector.js +2 -2
- package/dist/matter/variant-selector/variant-selector.js.map +1 -1
- package/dist/particles/address-summary/address-summary.js +2 -2
- package/dist/particles/address-summary/address-summary.js.map +1 -1
- package/dist/particles/alert-dialog/alert-dialog.d.ts +5 -1
- package/dist/particles/alert-dialog/alert-dialog.js +5 -2
- package/dist/particles/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/particles/binding-switcher/binding-switcher.d.ts +38 -0
- package/dist/particles/binding-switcher/binding-switcher.js +183 -0
- package/dist/particles/binding-switcher/binding-switcher.js.map +1 -0
- package/dist/particles/card-summary/card-network.d.ts +17 -0
- package/dist/particles/card-summary/card-network.js +25 -0
- package/dist/particles/card-summary/card-network.js.map +1 -0
- package/dist/particles/card-summary/card-summary.d.ts +83 -0
- package/dist/particles/card-summary/card-summary.js +188 -0
- package/dist/particles/card-summary/card-summary.js.map +1 -0
- package/dist/particles/copy-text/copy-text.d.ts +28 -0
- package/dist/particles/copy-text/copy-text.js +140 -0
- package/dist/particles/copy-text/copy-text.js.map +1 -0
- package/dist/particles/document-field/document-field.d.ts +34 -5
- package/dist/particles/document-field/document-field.js +115 -19
- package/dist/particles/document-field/document-field.js.map +1 -1
- package/dist/particles/field/field.js +1 -1
- package/dist/particles/field/field.js.map +1 -1
- package/dist/particles/footer-link-group/footer-link-group.d.ts +6 -2
- package/dist/particles/footer-link-group/footer-link-group.js +18 -7
- package/dist/particles/footer-link-group/footer-link-group.js.map +1 -1
- package/dist/particles/footer-social/footer-social.d.ts +1 -1
- package/dist/particles/footer-social/footer-social.js +1 -1
- package/dist/particles/footer-social/footer-social.js.map +1 -1
- package/dist/particles/incentives/incentives.d.ts +7 -3
- package/dist/particles/incentives/incentives.js +8 -3
- package/dist/particles/incentives/incentives.js.map +1 -1
- package/dist/particles/logo/logo.d.ts +3 -2
- package/dist/particles/logo/logo.js +20 -8
- package/dist/particles/logo/logo.js.map +1 -1
- package/dist/particles/navigation-link/navigation-link.d.ts +2 -3
- package/dist/particles/navigation-link/navigation-link.js +4 -4
- package/dist/particles/navigation-link/navigation-link.js.map +1 -1
- package/dist/particles/navigation-link-list/navigation-link-list.d.ts +6 -2
- package/dist/particles/navigation-link-list/navigation-link-list.js +18 -7
- package/dist/particles/navigation-link-list/navigation-link-list.js.map +1 -1
- package/dist/particles/order-details-back/order-details-back.d.ts +28 -0
- package/dist/particles/order-details-back/order-details-back.js +52 -0
- package/dist/particles/order-details-back/order-details-back.js.map +1 -0
- package/dist/particles/order-status-badge/order-status-badge.d.ts +19 -0
- package/dist/particles/order-status-badge/order-status-badge.js +50 -0
- package/dist/particles/order-status-badge/order-status-badge.js.map +1 -0
- package/dist/particles/payment-methods/payment-methods.d.ts +1 -1
- package/dist/particles/payment-methods/payment-methods.js +1 -1
- package/dist/particles/payment-methods/payment-methods.js.map +1 -1
- package/dist/particles/phone-field/phone-field.js +2 -2
- package/dist/particles/phone-field/phone-field.js.map +1 -1
- package/dist/particles/select/select.js +6 -6
- package/dist/particles/select/select.js.map +1 -1
- package/dist/particles/toast/toast.d.ts +21 -7
- package/dist/particles/toast/toast.js +76 -8
- package/dist/particles/toast/toast.js.map +1 -1
- package/dist/schema.graphql +1376 -126
- package/dist/sdk/actions/address-action-provider.d.ts +16 -0
- package/dist/sdk/actions/address-action-provider.js +20 -0
- package/dist/sdk/actions/address-action-provider.js.map +1 -0
- package/dist/sdk/actions/analytics-action-provider.js +1 -1
- package/dist/sdk/actions/index.d.ts +5 -1
- package/dist/sdk/actions/index.js +5 -1
- package/dist/sdk/actions/locale-action-provider.d.ts +16 -0
- package/dist/sdk/actions/locale-action-provider.js +20 -0
- package/dist/sdk/actions/locale-action-provider.js.map +1 -0
- package/dist/sdk/actions/order-action-provider.d.ts +12 -0
- package/dist/sdk/actions/order-action-provider.js +16 -0
- package/dist/sdk/actions/order-action-provider.js.map +1 -0
- package/dist/sdk/actions/saved-card-action-provider.d.ts +12 -0
- package/dist/sdk/actions/saved-card-action-provider.js +16 -0
- package/dist/sdk/actions/saved-card-action-provider.js.map +1 -0
- package/dist/sdk/actions/types.d.ts +10 -2
- package/dist/sdk/address/address-fields.js +38 -0
- package/dist/sdk/address/address-fields.js.map +1 -0
- package/dist/sdk/address/checkout-readiness.js +17 -0
- package/dist/sdk/address/checkout-readiness.js.map +1 -0
- package/dist/sdk/address/constants.js +60 -0
- package/dist/sdk/address/constants.js.map +1 -0
- package/dist/sdk/address/country-display.js +19 -0
- package/dist/sdk/address/country-display.js.map +1 -0
- package/dist/sdk/address/country-rules.js +30 -0
- package/dist/sdk/address/country-rules.js.map +1 -0
- package/dist/sdk/address/format-address.js +18 -0
- package/dist/sdk/address/format-address.js.map +1 -0
- package/dist/sdk/address/iso-countries.js +262 -0
- package/dist/sdk/address/iso-countries.js.map +1 -0
- package/dist/sdk/address/layouts.js +56 -0
- package/dist/sdk/address/layouts.js.map +1 -0
- package/dist/sdk/address/messages.js +97 -0
- package/dist/sdk/address/messages.js.map +1 -0
- package/dist/sdk/address/operations.d.ts +54 -0
- package/dist/sdk/address/operations.js +83 -0
- package/dist/sdk/address/operations.js.map +1 -0
- package/dist/sdk/address/postal-code-lookup-operations.js +23 -0
- package/dist/sdk/address/postal-code-lookup-operations.js.map +1 -0
- package/dist/sdk/address/postal-code.js +11 -0
- package/dist/sdk/address/postal-code.js.map +1 -0
- package/dist/sdk/address/schema.js +14 -0
- package/dist/sdk/address/schema.js.map +1 -0
- package/dist/sdk/address/server-fields.js +25 -0
- package/dist/sdk/address/server-fields.js.map +1 -0
- package/dist/sdk/address/switch-country.js +57 -0
- package/dist/sdk/address/switch-country.js.map +1 -0
- package/dist/sdk/address/types.d.ts +26 -0
- package/dist/sdk/address/use-address-actions.d.ts +29 -0
- package/dist/sdk/address/use-address-actions.js +247 -0
- package/dist/sdk/address/use-address-actions.js.map +1 -0
- package/dist/sdk/address/use-address-by-postal-code.js +57 -0
- package/dist/sdk/address/use-address-by-postal-code.js.map +1 -0
- package/dist/sdk/address/validate-address.js +62 -0
- package/dist/sdk/address/validate-address.js.map +1 -0
- package/dist/sdk/cache/storefront-cache.js +30 -4
- package/dist/sdk/cache/storefront-cache.js.map +1 -1
- package/dist/sdk/cart/operations.d.ts +2 -1
- package/dist/sdk/cart/operations.js +55 -1
- package/dist/sdk/cart/operations.js.map +1 -1
- package/dist/sdk/cart/optimistic.d.ts +30 -7
- package/dist/sdk/cart/optimistic.js +78 -41
- package/dist/sdk/cart/optimistic.js.map +1 -1
- package/dist/sdk/cart/use-cart-actions.d.ts +7 -0
- package/dist/sdk/cart/use-cart-actions.js +61 -15
- package/dist/sdk/cart/use-cart-actions.js.map +1 -1
- package/dist/sdk/cart/use-cart-sync-sales-channel.js +70 -0
- package/dist/sdk/cart/use-cart-sync-sales-channel.js.map +1 -0
- package/dist/sdk/client/fetch-page-data.d.ts +11 -0
- package/dist/sdk/client/fetch-page-data.js +12 -1
- package/dist/sdk/client/fetch-page-data.js.map +1 -1
- package/dist/sdk/content/create-content-runtime.js +1 -8
- package/dist/sdk/content/create-content-runtime.js.map +1 -1
- package/dist/sdk/data/failed-fields.js +23 -0
- package/dist/sdk/data/failed-fields.js.map +1 -0
- package/dist/sdk/data/index.js +2 -2
- package/dist/sdk/data/page-reactive-data-root.d.ts +45 -7
- package/dist/sdk/data/page-reactive-data-root.js +88 -12
- package/dist/sdk/data/page-reactive-data-root.js.map +1 -1
- package/dist/sdk/data/reactive-list-item-data-provider.js +2 -2
- package/dist/sdk/generated/fragment-types.js +2 -0
- package/dist/sdk/generated/fragment-types.js.map +1 -1
- package/dist/sdk/generated/gql.js +17 -11
- package/dist/sdk/generated/gql.js.map +1 -1
- package/dist/sdk/generated/graphql.d.ts +185 -46
- package/dist/sdk/generated/graphql.js +2587 -155
- package/dist/sdk/generated/graphql.js.map +1 -1
- package/dist/sdk/i18n/messages/en-US.js +157 -1
- package/dist/sdk/i18n/messages/en-US.json +157 -1
- package/dist/sdk/i18n/messages/en-US.json.d.ts +156 -0
- package/dist/sdk/i18n/messages/es-ES.js +157 -1
- package/dist/sdk/i18n/messages/es-ES.json +157 -1
- package/dist/sdk/i18n/messages/pt-BR.js +157 -1
- package/dist/sdk/i18n/messages/pt-BR.json +157 -1
- package/dist/sdk/i18n/provider.js +1 -1
- package/dist/sdk/i18n/provider.js.map +1 -1
- package/dist/sdk/locale/binding-switch-provider.d.ts +13 -0
- package/dist/sdk/locale/binding-switch-provider.js +20 -0
- package/dist/sdk/locale/binding-switch-provider.js.map +1 -0
- package/dist/sdk/locale/use-locale-actions.d.ts +16 -0
- package/dist/sdk/locale/use-locale-actions.js +70 -0
- package/dist/sdk/locale/use-locale-actions.js.map +1 -0
- package/dist/sdk/navigation/binding-switch.d.ts +39 -0
- package/dist/sdk/navigation/binding-switch.js +129 -0
- package/dist/sdk/navigation/binding-switch.js.map +1 -0
- package/dist/sdk/navigation/current-page.js +30 -0
- package/dist/sdk/navigation/current-page.js.map +1 -0
- package/dist/sdk/navigation/decode-route-params.d.ts +11 -0
- package/dist/sdk/navigation/decode-route-params.js +32 -0
- package/dist/sdk/navigation/decode-route-params.js.map +1 -0
- package/dist/sdk/navigation/not-found-log.d.ts +28 -0
- package/dist/sdk/navigation/not-found-log.js +133 -0
- package/dist/sdk/navigation/not-found-log.js.map +1 -0
- package/dist/sdk/navigation/path.js +25 -0
- package/dist/sdk/navigation/path.js.map +1 -0
- package/dist/sdk/navigation/redirect.d.ts +11 -0
- package/dist/sdk/navigation/redirect.js +22 -0
- package/dist/sdk/navigation/redirect.js.map +1 -0
- package/dist/sdk/navigation/report.js +70 -0
- package/dist/sdk/navigation/report.js.map +1 -0
- package/dist/sdk/navigation/resolve-storefront-href.d.ts +12 -0
- package/dist/sdk/navigation/resolve-storefront-href.js +214 -0
- package/dist/sdk/navigation/resolve-storefront-href.js.map +1 -0
- package/dist/sdk/navigation/route-identity-provider.d.ts +11 -0
- package/dist/sdk/navigation/route-identity-provider.js +20 -0
- package/dist/sdk/navigation/route-identity-provider.js.map +1 -0
- package/dist/sdk/navigation/route-map-provider.d.ts +19 -0
- package/dist/sdk/navigation/route-map-provider.js +29 -0
- package/dist/sdk/navigation/route-map-provider.js.map +1 -0
- package/dist/sdk/navigation/storefront-link.d.ts +16 -0
- package/dist/sdk/navigation/storefront-link.js +66 -0
- package/dist/sdk/navigation/storefront-link.js.map +1 -0
- package/dist/sdk/navigation/types.d.ts +45 -0
- package/dist/sdk/navigation/use-storefront-navigation.d.ts +26 -0
- package/dist/sdk/navigation/use-storefront-navigation.js +73 -0
- package/dist/sdk/navigation/use-storefront-navigation.js.map +1 -0
- package/dist/sdk/navigation/use-storefront-route.d.ts +26 -0
- package/dist/sdk/navigation/use-storefront-route.js +87 -0
- package/dist/sdk/navigation/use-storefront-route.js.map +1 -0
- package/dist/sdk/navigation/use-storefront-search-params.d.ts +11 -0
- package/dist/sdk/navigation/use-storefront-search-params.js +16 -0
- package/dist/sdk/navigation/use-storefront-search-params.js.map +1 -0
- package/dist/sdk/orders/completion-badge.d.ts +8 -0
- package/dist/sdk/orders/completion-badge.js +47 -0
- package/dist/sdk/orders/completion-badge.js.map +1 -0
- package/dist/sdk/orders/order-operations.d.ts +19 -0
- package/dist/sdk/orders/order-operations.js +21 -0
- package/dist/sdk/orders/order-operations.js.map +1 -0
- package/dist/sdk/orders/use-order-actions.d.ts +23 -0
- package/dist/sdk/orders/use-order-actions.js +62 -0
- package/dist/sdk/orders/use-order-actions.js.map +1 -0
- package/dist/sdk/payment/gateway-origin.js +26 -13
- package/dist/sdk/payment/gateway-origin.js.map +1 -1
- package/dist/sdk/payment/gateway.d.ts +14 -2
- package/dist/sdk/payment/gateway.js +32 -14
- package/dist/sdk/payment/gateway.js.map +1 -1
- package/dist/sdk/payment/operations.js +11 -0
- package/dist/sdk/payment/operations.js.map +1 -1
- package/dist/sdk/payment/submission-registry.d.ts +2 -1
- package/dist/sdk/payment/submission-registry.js +12 -8
- package/dist/sdk/payment/submission-registry.js.map +1 -1
- package/dist/sdk/payment/use-payment-actions.d.ts +5 -3
- package/dist/sdk/payment/use-payment-actions.js +5 -2
- package/dist/sdk/payment/use-payment-actions.js.map +1 -1
- package/dist/sdk/payment/use-place-order.d.ts +6 -3
- package/dist/sdk/payment/use-place-order.js +333 -143
- package/dist/sdk/payment/use-place-order.js.map +1 -1
- package/dist/sdk/saved-cards/operations.d.ts +16 -0
- package/dist/sdk/saved-cards/operations.js +41 -0
- package/dist/sdk/saved-cards/operations.js.map +1 -0
- package/dist/sdk/saved-cards/use-saved-card-actions.d.ts +26 -0
- package/dist/sdk/saved-cards/use-saved-card-actions.js +86 -0
- package/dist/sdk/saved-cards/use-saved-card-actions.js.map +1 -0
- package/dist/sdk/seo/page-alternates.d.ts +57 -0
- package/dist/sdk/seo/page-alternates.js +127 -0
- package/dist/sdk/seo/page-alternates.js.map +1 -0
- package/dist/sdk/shipping/shipping-operations.d.ts +1 -1
- package/dist/sdk/shipping/shipping-operations.js +13 -0
- package/dist/sdk/shipping/shipping-operations.js.map +1 -1
- package/dist/sdk/state/cart.d.ts +9 -2
- package/dist/sdk/state/cart.js +9 -2
- package/dist/sdk/state/cart.js.map +1 -1
- package/dist/utils/own-value.js +19 -0
- package/dist/utils/own-value.js.map +1 -0
- package/dist/utils/safe-href.d.ts +4 -4
- package/dist/utils/safe-href.js +31 -22
- package/dist/utils/safe-href.js.map +1 -1
- package/package.json +5 -1
- package/skills/storefront-asset/SKILL.md +111 -0
- package/skills/storefront-asset/references/api-side.md +153 -0
- package/skills/storefront-asset/references/findings.md +40 -0
- package/skills/storefront-asset/references/ui-side.md +94 -0
- package/src/styles/tailwind.css +28 -2
|
@@ -9,7 +9,7 @@ export interface EditorMetadata {
|
|
|
9
9
|
description?: string;
|
|
10
10
|
icon?: string;
|
|
11
11
|
}
|
|
12
|
-
export type PropType = 'string' | 'number' | 'boolean' | 'object' | 'array' | readonly string[];
|
|
12
|
+
export type PropType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'link' | readonly string[];
|
|
13
13
|
export type PropSchemaField = {
|
|
14
14
|
/**
|
|
15
15
|
* Prop type keyword. The catalog wire value `"icon"` is a sukima convention (collected at
|
|
@@ -23,10 +23,20 @@ export type PropSchemaField = {
|
|
|
23
23
|
*/
|
|
24
24
|
items?: readonly string[];
|
|
25
25
|
default?: unknown;
|
|
26
|
+
/**
|
|
27
|
+
* The route params the component supplies when it navigates, honored only when `type === 'link'`
|
|
28
|
+
* (e.g. `{ type: 'link', default: { standard: 'order-placed' }, fills: ['orderGroup'] }`).
|
|
29
|
+
*/
|
|
30
|
+
fills?: readonly string[];
|
|
26
31
|
label?: string;
|
|
27
32
|
};
|
|
28
33
|
export type PropSchema = Record<string, PropSchemaField>;
|
|
29
|
-
export type FetchStrategy = 'static' | 'lazy' | 'reactive' | 'reactive-list-item'
|
|
34
|
+
export type FetchStrategy = 'static' | 'lazy' | 'reactive' | 'reactive-list-item' |
|
|
35
|
+
/**
|
|
36
|
+
* The component's data is fetched by the client when the element mounts, in its own operation:
|
|
37
|
+
* never in the page query, and absent from the server HTML. Meant for a conditional branch.
|
|
38
|
+
*/
|
|
39
|
+
'lazy-on-mount';
|
|
30
40
|
/**
|
|
31
41
|
* How one fragment variable reads the element's configuration when the by-name convention cannot
|
|
32
42
|
* express it (config-sourced fragment variables RFC). By convention `$first` reads the content-model
|
|
@@ -21,7 +21,7 @@ The image is the source of truth for layout, and this component is not in any la
|
|
|
21
21
|
|
|
22
22
|
- On an individual account section, to repeat the rule → the layout already made it. A second gate is a second decision to keep in agreement with the first.
|
|
23
23
|
- To show or hide a subtree by session state, with nothing else riding on it → use `SessionGuard`, which is the declarative show/hide. This component navigates, remembers, and is meant to own a whole page.
|
|
24
|
-
- On the
|
|
24
|
+
- On the sign-in page → that page is [[sign-in-redirect]], and this component redirects *to* it. Gating it closes a loop the shopper cannot leave.
|
|
25
25
|
- To decide whether a shopper may read *this particular order* or *that address* → the gate answers "is anyone signed in", never "is this record theirs". Record-level authorization belongs to the resolver.
|
|
26
26
|
|
|
27
27
|
---
|
|
@@ -64,7 +64,7 @@ Content model (`account-access-gate`) fields, edited in the CMS — the same fou
|
|
|
64
64
|
|
|
65
65
|
**`identified` counts as signed out.** A shopper the platform recognizes but has not authenticated cannot reach their account, which is the same reading [[account-entry-point]] applies to its own label.
|
|
66
66
|
|
|
67
|
-
**A visitor who arrived signed out is sent, not told.** The redirect replaces the history entry rather than pushing one, carrying the page they were trying to reach as the return, query string included — so back from the platform's login reaches the page they were reading rather than the first page of it, and never bounces off the gate again.
|
|
67
|
+
**A visitor who arrived signed out is sent, not told.** The redirect replaces the history entry rather than pushing one, carrying the page they were trying to reach as the return, query string included, as a logical path the sign-in page prefixes on the way back — so back from the platform's login reaches the page they were reading rather than the first page of it, and never bounces off the gate again.
|
|
68
68
|
|
|
69
69
|
**A session that ended mid-visit is told, not sent.** Past a redirect there is no surface left to say anything on, so the gate keeps the page and renders the notice with a sign-in link the shopper may take. This is a deliberate departure from "redirect whenever signed out", and it applies only when the gate has already rendered the account for this shopper.
|
|
70
70
|
|
|
@@ -113,7 +113,7 @@ Bound to a CMS entry, the element authors no messages at all — the entry suppl
|
|
|
113
113
|
|
|
114
114
|
- **`AccountGate`, `AuthGuard`, `RequireLogin`, `ProtectedRoute`.** The correct name is `AccountAccessGate`.
|
|
115
115
|
- **Repeating it per account section.** It belongs once in the layout, wrapping the body. Two gates are two decisions that can disagree.
|
|
116
|
-
- **Putting [[sign-in-redirect]] under it.** The gate redirects to
|
|
116
|
+
- **Putting [[sign-in-redirect]] under it.** The gate redirects to the sign-in page `{ standard: 'sign-in' }`; a gated sign-in page redirects to itself.
|
|
117
117
|
- **Placing it outside `SessionRoot`.** It declares `requiresContext: 'session'` and has nothing to read without one.
|
|
118
118
|
- **Reaching for `SessionGuard when={['loggedIn']}` instead.** That expresses one of the five outcomes. It cannot redirect, cannot carry a return, cannot tell an arrival from an expiry, and renders nothing while the session is still resolving.
|
|
119
119
|
- **Expecting it to redirect an expired session.** It renders a notice on purpose — see above.
|
|
@@ -148,6 +148,6 @@ Styling the gate's swatch reaches the loading part and both notices, which is us
|
|
|
148
148
|
|
|
149
149
|
## Related
|
|
150
150
|
|
|
151
|
-
- [[sign-in-redirect]] — the
|
|
151
|
+
- [[sign-in-redirect]] — the sign-in page this component sends a signed-out visitor to, and which reads back the return this one encoded. Never place it under the gate.
|
|
152
152
|
- [[account-entry-point]] — the header control that offers sign-in to a shopper who chose to go there. It asks; this one insists.
|
|
153
153
|
- [[session]] — the context both read. `SessionGuard`, in the same group, is the declarative show/hide for a subtree with no navigation, no memory, and no loading state of its own.
|
|
@@ -0,0 +1,519 @@
|
|
|
1
|
+
# AccountAddressBook
|
|
2
|
+
|
|
3
|
+
**Category:** identity
|
|
4
|
+
**Purpose:** The My Account > Addresses surface — every address the signed-in shopper saved, each written in its own country's format, with loading, empty, and error states, an optional notice that explains when the checkout will not offer these addresses, and the form that adds an address or corrects a saved one.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Visual cues (how to identify in an image)
|
|
9
|
+
|
|
10
|
+
- A My Account page listing the shopper's saved addresses as a stack of entries, one per address.
|
|
11
|
+
- Each entry starts with the recipient's name, then the street lines, then the country's name on the last line.
|
|
12
|
+
- Entries from different countries break their lines differently: a Brazilian entry shows the neighborhood on its own line and `city - state`; a US entry shows `number street` and `city, state ZIP`.
|
|
13
|
+
- A short "no saved addresses" message in place of the list, a "couldn't load your addresses" message with a "Try again" button, or a skeleton of three grey lines while loading.
|
|
14
|
+
- Optionally, a notice above or below the list telling the shopper to complete their profile (add a phone number) with a link to the profile page.
|
|
15
|
+
- An "Add address" button, and an "Edit" button on each entry.
|
|
16
|
+
- Optionally, a short line inside an entry saying the store does not deliver to that address's country ("We don't deliver to this country at the moment."), on the entries it applies to and not the others.
|
|
17
|
+
- A form with a "Country" list on top (or the country written as plain text), then a recipient name, then the fields that country asks for (a Brazilian form has a CEP, street, number, neighborhood, a state list, and a city list), then an optional reference, then "Save" and "Cancel". It opens under the list or in a dialog. After a country change, a line under the list can say which fields stay behind.
|
|
18
|
+
|
|
19
|
+
The image is the source of truth for layout.
|
|
20
|
+
|
|
21
|
+
Use `AccountAddressBook` and `AccountAddressForm` (not `ShippingAddress` or `BillingAddress`) when the image shows the shopper's saved addresses, or the form that adds or corrects one, on an account page.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## When to use
|
|
26
|
+
|
|
27
|
+
- The My Account > Addresses page: the list of saved addresses, the form that adds or corrects one, and the confirmation that deletes one.
|
|
28
|
+
- Any page that needs to display the shopper's saved addresses and has no checkout form around them.
|
|
29
|
+
|
|
30
|
+
## When NOT to use
|
|
31
|
+
|
|
32
|
+
- Changing the country of a saved address — an edit keeps its country.
|
|
33
|
+
- Giving an address a name of its own — a saved address has no name field. The SDK's field model (`AccountFieldName`, `fs/address.field.name`) still lists `name`, so adding it later does not change the model, but no component renders or saves it.
|
|
34
|
+
- The address a shopper picks or types during checkout — use `ShippingAddress` / `BillingAddress`.
|
|
35
|
+
- A single address summary with no saved list behind it — compose `AddressSummary` directly.
|
|
36
|
+
- The signed-out prompt — compose `SignInForm` next to a `SessionGuard`. The root renders nothing for a shopper who is not logged in.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Composition
|
|
41
|
+
|
|
42
|
+
Every part except `AccountAddressBookProfileNotice` must sit inside `AccountAddressBookRoot`. The notice has its own data and needs only a `SessionRoot` ancestor. `AccountAddressFormRoot` and `AccountAddressBookDeleteConfirm` also need a `ToastProvider` ancestor, because a save and a delete show a toast.
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
SessionRoot (required ancestor; must resolve to loggedIn)
|
|
46
|
+
├── AccountAddressBookProfileNotice (optional; own data; renders nothing when the profile is complete)
|
|
47
|
+
└── AccountAddressBookRoot (own data; owns the state)
|
|
48
|
+
├── AccountAddressBookLoading (visible only while loading)
|
|
49
|
+
├── AccountAddressBookError (visible on error and while its retry loads; retry button inside)
|
|
50
|
+
├── AccountAddressBookEmpty (visible only when the book has no addresses)
|
|
51
|
+
└── AccountAddressBookList (visible only when the book has addresses)
|
|
52
|
+
└── AccountAddressBookItem (repeated once per address)
|
|
53
|
+
├── AddressSummaryRecipient (optional; default entry already has it)
|
|
54
|
+
├── AccountAddressBookItemLines (the address lines in the country's format)
|
|
55
|
+
├── AddressSummaryCountry
|
|
56
|
+
├── AccountAddressBookItemDeliverability (optional; own data; marks an address in a country the store does not ship to)
|
|
57
|
+
├── AccountAddressBookEditTrigger (optional; opens the form in edit mode for this entry)
|
|
58
|
+
└── AccountAddressBookDeleteTrigger (optional; asks to delete this entry's address)
|
|
59
|
+
|
|
60
|
+
├── AccountAddressBookDeleteConfirm (optional; the one alert dialog every delete trigger opens)
|
|
61
|
+
├── AccountAddressBookAddTrigger (optional; opens the form in add mode; shown in every state)
|
|
62
|
+
└── AccountAddressBookFormSlot (or AccountAddressBookFormDialog; shows the form while one is open)
|
|
63
|
+
└── AccountAddressFormRoot (the form; with no children it renders the parts below in this order)
|
|
64
|
+
├── AddressCountryControl (own data; the country list, or the country as text)
|
|
65
|
+
├── AccountAddressCountryNotice (what a country change left behind)
|
|
66
|
+
├── AccountAddressFormRecipientName
|
|
67
|
+
├── AccountAddressFormFields (one field per field the country asks for)
|
|
68
|
+
├── AccountAddressFormReference
|
|
69
|
+
├── AccountAddressFormError (the error about the whole form)
|
|
70
|
+
├── AccountAddressFormSubmit
|
|
71
|
+
└── AccountAddressFormCancel
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**On its own page**, the same form needs no book. The add page places `AccountAddressFormRoot` directly under `SessionRoot`. The edit page's route ends in `[id]`, and the form sits inside an `AccountAddressRecord`:
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
SessionRoot
|
|
78
|
+
└── AccountAddressRecord (route /pvt/address/[id]; reads the one address the route names)
|
|
79
|
+
├── AccountAddressRecordError (optional; visible only when the read failed)
|
|
80
|
+
└── AccountAddressFormRoot (opens in edit mode, seeded with the address)
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Compose all four state parts as **siblings** inside the root. Each one decides for itself whether to render, so the schema never switches between them. Child order reflects visual order.
|
|
84
|
+
|
|
85
|
+
`AccountAddressBookItem` with no children already renders the default entry (recipient, lines, country). Give it children only to reorder or restyle the entry, or to add the edit trigger; when you do, compose the summary yourself inside an `AddressSummary`. Put the `AddressSummary*` parts and `AccountAddressBookItemLines` inside it, never outside. `AccountAddressBookItemDeliverability` also sits inside the item, beside the summary, because it reads the entry's country: it is not part of the default entry, so compose the summary yourself when you add it.
|
|
86
|
+
|
|
87
|
+
The form opens where you place it. `AccountAddressBookFormSlot` shows it in place under the list; `AccountAddressBookFormDialog` shows it in a modal dialog. Place one of them, not both. No prop picks the layout.
|
|
88
|
+
|
|
89
|
+
Deleting needs two parts: an `AccountAddressBookDeleteTrigger` inside each entry, and one `AccountAddressBookDeleteConfirm` under the root. The confirmation is an alert dialog, so wherever you place it, it shows over the page.
|
|
90
|
+
|
|
91
|
+
To let the shopper choose the country of a new address, compose `AddressCountryControl` explicitly under `AccountAddressFormRoot`, with `AccountAddressCountryNotice` right after it. The control reads where the store ships through its own fragment, and that fragment joins the page query only when the control is in the schema. In the root's default composition the control gets no list, so it shows the root's `defaultCountry` as text.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Behavior
|
|
96
|
+
|
|
97
|
+
- **One state at a time.** The root reads the book, the loading flag, and the error: a resolved book is `empty` (no addresses) or `ready`; no book while loading is `loading`; no book, not loading, with an error is `error`; anything else renders nothing. The state is exposed as `data-fs-account-address-book-state`.
|
|
98
|
+
- **The loading part stays mounted.** It is a polite live region (`<output aria-live="polite">`) with content only while loading, so a screen reader announces the change. The message is `sr-only`, so it is announced but not seen; the skeleton is the visible placeholder.
|
|
99
|
+
- **Country order.** The lines follow the country's own convention (BRA, USA, and the other registered countries). A field the address does not have drops its separator instead of leaving a stray comma or dash.
|
|
100
|
+
- **Country name.** The address stores a three-letter code (`BRA`). The entry shows the country's name in the shopper's language (`Brasil`, `Brazil`). An unregistered code is shown as it is; an empty one shows nothing.
|
|
101
|
+
- **Retry loads the book again in place.** The retry button re-runs the page query through the page root, so the shopper stays on the page. While it runs, the error stays on screen beside the loading part, and the button stays mounted with `aria-disabled` and `aria-busy`, so focus stays on it and a second press sends nothing. If the read fails again, the same button is enabled again. When the list or the empty message replaces it, focus moves to the book, unless the shopper moved focus elsewhere meanwhile. Under a root that offers no `refetch`, it reloads the page.
|
|
102
|
+
- **Self-gate.** The root and the form render nothing unless the session is `loggedIn`.
|
|
103
|
+
- **Deliverability marker.** The marker shows on an address only when the store's own shipping countries are known (`PLATFORM`) and the address's country, trimmed and upper-cased, is not among them. It renders nothing under the single-country fallback, when the shipping-country read failed, when the page does not carry it, or when the address has no country, so it never flags an address on a guess. It is plain text read with the address, not a live region. Marked or not, the entry's edit and delete controls work the same.
|
|
104
|
+
- **A failed shipping-country read costs only the marker.** The list keeps its state and its addresses.
|
|
105
|
+
- **Notice rule.** The notice shows only when the profile has resolved and has no home phone, because the checkout drops saved addresses for a profile without one.
|
|
106
|
+
- **One form at a time.** The book's root holds which form is open. A trigger opens it and replaces any open one; closing it returns focus to the trigger that opened it. If the save removed that trigger (the address no longer existed), focus moves to the book.
|
|
107
|
+
- **A new draft each time.** Every open starts from the saved address, or from nothing for an add. Cancel, Escape, and a saved form drop the draft.
|
|
108
|
+
- **The country's rules decide the fields.** The form shows the fields, labels, limits, and lists of the address's country, in that country's order. A country the rules library does not cover gets a street field alone. A list can depend on another: Brazil's city list follows its state, and changing the state clears the city. Fields show once the country's rules have loaded, and saving stays disabled until then.
|
|
109
|
+
- **A new address picks a country the store ships to.** `AddressCountryControl` lists the store's shipping countries by name, in the shopper's language and sorted for it. The form starts on the root's `defaultCountry` (`BRA` unless set) when the store ships there, and otherwise on the first country of the list. With one country there is no choice: the control renders nothing and the address takes that country. Only the shown country's rules load.
|
|
110
|
+
- **The country is text when there is nothing to choose.** A saved address keeps its own country, shown as text. When the list could not be read, or the control is not in the page query, a new address takes `defaultCountry`, shown as text, and saving still works; the server refuses a country the store does not ship to.
|
|
111
|
+
- **Changing the country keeps what fits.** The recipient, the reference, and every value the new country takes stay. The rest is kept for the old country and comes back on switching back to it, also after a third country; a value typed meanwhile in the same field wins. While the new country's rules load, the old fields stay editable, Save is disabled, the form is `aria-busy`, and only the last pick applies. Picking the current country again cancels the change. A change that fails to load keeps everything as it was and shows an error; the next pick retries.
|
|
112
|
+
- **The notice says what stayed behind.** After a change, `AccountAddressCountryNotice` names the fields the new country left out, with the labels the old country showed, and says they come back on switching back. It is a polite live region that stays mounted, and it is empty when the change carried everything. It changes only with the next country change, never on typing or a blocked save.
|
|
113
|
+
- **The whole address is checked on every save.** The server checks the whole record, so an untouched gap in a saved address blocks the save too. A saved address with gaps shows them when the form opens, without moving focus.
|
|
114
|
+
- **A blocked save names the fields.** The form marks each field in error, moves focus to the first one in form order, keeps what was typed, and announces "Address not saved" and how many fields need attention through a polite status region that stays mounted.
|
|
115
|
+
- **The server's refusal lands on the field it names.** Its message is never shown; the field shows the catalog message for its code (`This field is required.` or `Check this field.`). A refusal that names a field the form does not show, no field at all, or a country, shows an error about the whole form, so a save never fails silently. Each of `NOT_FOUND`, `UNAUTHORIZED`, `UNSUPPORTED_COUNTRY` (the store does not deliver to the country), and the rest has its own message.
|
|
116
|
+
- **What is sent.** An add sends the country and every field on screen that has text; the values kept for another country are never sent. An edit sends the address id and only the fields that changed; a field the shopper cleared goes as an empty string, which erases it. An edit with no change closes without a call. A second submit while one is in flight does nothing.
|
|
117
|
+
- **Only Save submits.** Enter in a text field does not save, so a shopper who presses it mid-address is not sent a half-typed one. Enter on the Save button still saves.
|
|
118
|
+
- **On success.** A toast confirms, the form closes, and the list shows the result with no reload.
|
|
119
|
+
- **On its own page, leaving navigates.** With no book above it, a save, a save with no changes, and Cancel all go to `returnHref` (default: the store's `address` page). Under a book the form closes and `returnHref` is not used. A `returnHref` given as a string that is not site-relative is refused: the shopper stays on the form and a console warning names the value. A save has already happened by then, so its toast still shows.
|
|
120
|
+
- **The toast has to outlive the navigation.** Mount the `ToastProvider` in the layout, not in the page, or the confirmation disappears with the form.
|
|
121
|
+
- **Delete asks first.** The trigger only asks. The confirmation opens as an alert dialog that names the address, puts focus on Cancel, and closes only on Cancel or Escape: a click outside does not answer it. Declining changes nothing and returns focus to the trigger.
|
|
122
|
+
- **Deleting waits for the server.** Confirming sends one removal. While it runs, the Delete button is disabled and `aria-busy`, Cancel is disabled, and Escape does nothing, so the outcome always lands in front of the shopper. The entry leaves the list only once the server says so.
|
|
123
|
+
- **A refused delete keeps the address.** The dialog stays open with an alert that says the address was not deleted (or that the session expired), and Delete works again to try once more. The server's message is never shown. An address the server no longer has counts as deleted.
|
|
124
|
+
- **After a delete.** A toast confirms, the dialog closes, and focus moves to the book, because the trigger left with its entry. Deleting the last address leaves the book `empty`, so compose an `AccountAddressBookEmpty`. An open edit form for the deleted address closes with it; a form for another address stays open.
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## Components
|
|
129
|
+
|
|
130
|
+
### AccountAddressBookRoot
|
|
131
|
+
|
|
132
|
+
No props beyond `className`. Fetches `customerAddressBook` (the address ids) with `fetchStrategy: 'reactive'`, requires `session`, provides `account-address-book`, and declares a skeleton.
|
|
133
|
+
|
|
134
|
+
### AccountAddressBookList
|
|
135
|
+
|
|
136
|
+
No props beyond `className`. Renders a `<ul>` with one `<li>` per address and repeats its children inside each `<li>`.
|
|
137
|
+
|
|
138
|
+
### AccountAddressBookItem
|
|
139
|
+
|
|
140
|
+
No props beyond `className` and `children`. Fetches the address fields with `fetchStrategy: 'reactive-list-item'`, provides `account-address-book-item` and `address-summary`.
|
|
141
|
+
|
|
142
|
+
### AccountAddressBookItemLines
|
|
143
|
+
|
|
144
|
+
No props beyond `className`. Renders one `<p>` per address line.
|
|
145
|
+
|
|
146
|
+
### AccountAddressBookLoading
|
|
147
|
+
|
|
148
|
+
| Prop | Type | Default | Notes |
|
|
149
|
+
|------|------|---------|-------|
|
|
150
|
+
| `message` | string | catalog copy | Loading message. A blank value falls back to the catalog. |
|
|
151
|
+
|
|
152
|
+
### AccountAddressBookEmpty
|
|
153
|
+
|
|
154
|
+
| Prop | Type | Default | Notes |
|
|
155
|
+
|------|------|---------|-------|
|
|
156
|
+
| `message` | string | catalog copy | Empty message. A blank value falls back to the catalog. |
|
|
157
|
+
|
|
158
|
+
### AccountAddressBookError
|
|
159
|
+
|
|
160
|
+
| Prop | Type | Default | Notes |
|
|
161
|
+
|------|------|---------|-------|
|
|
162
|
+
| `message` | string | catalog copy | Error message. A blank value falls back to the catalog. |
|
|
163
|
+
| `retryLabel` | string | catalog copy | Retry button label. A blank value falls back to the catalog. |
|
|
164
|
+
|
|
165
|
+
### AccountAddressBookAddTrigger
|
|
166
|
+
|
|
167
|
+
| Prop | Type | Default | Notes |
|
|
168
|
+
|------|------|---------|-------|
|
|
169
|
+
| `label` | string | catalog copy | Button text. A blank value falls back to the catalog. |
|
|
170
|
+
|
|
171
|
+
A button that opens the form in add mode. It shows in every state of the book, the empty one too.
|
|
172
|
+
|
|
173
|
+
### AccountAddressBookEditTrigger
|
|
174
|
+
|
|
175
|
+
| Prop | Type | Default | Notes |
|
|
176
|
+
|------|------|---------|-------|
|
|
177
|
+
| `label` | string | catalog copy | Visible text. A blank value falls back to the catalog. |
|
|
178
|
+
|
|
179
|
+
A button inside `AccountAddressBookItem` that opens the form in edit mode for that entry. Its accessible name is the visible text followed by the address's first line, so each button in a list is told apart.
|
|
180
|
+
|
|
181
|
+
### AccountAddressBookFormSlot
|
|
182
|
+
|
|
183
|
+
No props of its own; `className` and the other `div` attributes land on its element. Shows its children in place while a form is open, and nothing otherwise. Each open starts a new draft.
|
|
184
|
+
|
|
185
|
+
### AccountAddressBookFormDialog
|
|
186
|
+
|
|
187
|
+
| Prop | Type | Default | Notes |
|
|
188
|
+
|------|------|---------|-------|
|
|
189
|
+
| `title` | string | catalog copy for the mode | Dialog title. A blank value falls back to the catalog. |
|
|
190
|
+
| `className` | string | none | Goes on the dialog's popup. The dialog renders in a portal outside the page, so this is the element a store sizes and places. |
|
|
191
|
+
|
|
192
|
+
Shows its children in a modal dialog while a form is open. Escape and the close button cancel the form.
|
|
193
|
+
|
|
194
|
+
### AccountAddressBookDeleteTrigger
|
|
195
|
+
|
|
196
|
+
| Prop | Type | Default | Notes |
|
|
197
|
+
|------|------|---------|-------|
|
|
198
|
+
| `label` | string | catalog copy | Visible text. A blank value falls back to the catalog. |
|
|
199
|
+
|
|
200
|
+
A button inside `AccountAddressBookItem` that asks to delete that entry's address. It deletes nothing by itself. Its accessible name is the visible text followed by the address's first line, so each button in a list is told apart.
|
|
201
|
+
|
|
202
|
+
### AccountAddressBookDeleteConfirm
|
|
203
|
+
|
|
204
|
+
| Prop | Type | Default | Notes |
|
|
205
|
+
|------|------|---------|-------|
|
|
206
|
+
| `title` | string | catalog copy | The question. |
|
|
207
|
+
| `description` | string | catalog copy | What deleting means. The address's first line always shows before it. |
|
|
208
|
+
| `cancelLabel` | string | catalog copy | The control that backs out. |
|
|
209
|
+
| `confirmLabel` | string | catalog copy | The control that deletes. |
|
|
210
|
+
| `deletedMessage` | string | catalog copy | Toast after the address is deleted. |
|
|
211
|
+
| `failedMessage` | string | catalog copy | Shown in the dialog when the address was not deleted. |
|
|
212
|
+
| `unauthorizedMessage` | string | catalog copy | Shown in the dialog when the session expired. |
|
|
213
|
+
| `className` | string | none | Goes on the dialog's popup. The dialog renders in a portal outside the page, so this is the element a store sizes and places. |
|
|
214
|
+
|
|
215
|
+
One per address book, under `AccountAddressBookRoot`. It opens for the entry whose trigger was activated, and it needs a `ToastProvider` ancestor.
|
|
216
|
+
|
|
217
|
+
### AccountAddressFormRoot
|
|
218
|
+
|
|
219
|
+
| Prop | Type | Default | Notes |
|
|
220
|
+
|------|------|---------|-------|
|
|
221
|
+
| `defaultCountry` | string | `BRA` | ISO 3166-1 alpha-3 code of the country a new address prefers: taken when the store ships there or its list is unknown. A blank value falls back to `BRA`. |
|
|
222
|
+
| `addedMessage` | string | catalog copy | Toast after an address is added. |
|
|
223
|
+
| `savedMessage` | string | catalog copy | Toast after an address is saved. |
|
|
224
|
+
| `blockedMessage` | string | catalog copy | What the status region announces when a save is blocked. |
|
|
225
|
+
| `returnHref` | link | `{ standard: 'address' }` | Where leaving the form goes on its own page: a page reference, or a site-relative string (an off-site string is refused). Ignored under an address book. |
|
|
226
|
+
|
|
227
|
+
Requires `session`, provides `account-address-form`, and declares `actions: { address: ['create', 'update'] }`. Needs a `ToastProvider` ancestor. With no children it renders its parts in the default order.
|
|
228
|
+
|
|
229
|
+
The address to edit comes from the book's open edit form, else from an `AccountAddressRecord` above it, else the form opens empty to add.
|
|
230
|
+
|
|
231
|
+
It renders the shared `FormRoot` and registers itself as the form's only fieldset, so react-hook-form holds the draft. Each field part registers under the `accountAddress` namespace while it is on screen. The address rules still decide what is valid and what is sent: the root checks the draft with the country's rules on Save and never hands a rule to react-hook-form. The form particle's `FormClear`, `FormReset` and `FormError` are not part of this anatomy; `AccountAddressFormCancel` and `AccountAddressFormError` cover them.
|
|
232
|
+
|
|
233
|
+
### AccountAddressRecord
|
|
234
|
+
|
|
235
|
+
The one saved address a page's route names. Place it on a page whose route ends in `[id]`; the segment feeds `customerAddress(id: $id)`. It has no props. Requires `session`, provides `account-address-record`, and renders nothing unless the session is `loggedIn`.
|
|
236
|
+
|
|
237
|
+
An id that is not the shopper's and an id that never existed are the same response: the server answers `null` for both, the page returns 404, and the layout's not-found page renders. This component never sees that case. While no address has resolved, an `AccountAddressFormRoot` beneath it renders nothing, so it never falls back to adding.
|
|
238
|
+
|
|
239
|
+
### AccountAddressRecordError
|
|
240
|
+
|
|
241
|
+
| Prop | Type | Default | Notes |
|
|
242
|
+
|------|------|---------|-------|
|
|
243
|
+
| `message` | string | catalog copy | Shown when the address could not be read. |
|
|
244
|
+
| `retryLabel` | string | catalog copy | The retry control's text. Retry reloads the page. |
|
|
245
|
+
|
|
246
|
+
Visible only when the read failed and no address resolved, as an alert. Must be inside `AccountAddressRecord`.
|
|
247
|
+
|
|
248
|
+
### AddressCountryControl
|
|
249
|
+
|
|
250
|
+
| Prop | Type | Default | Notes |
|
|
251
|
+
|------|------|---------|-------|
|
|
252
|
+
| `label` | string | catalog copy | The list's label. A blank value falls back to the catalog. |
|
|
253
|
+
|
|
254
|
+
Fetches `shippingCountries` (`countries` and `source`) with `fetchStrategy: 'reactive'`, requires `account-address-form`, and declares a skeleton. In add mode with two or more countries it renders a list; with one it renders nothing; in edit mode, or with no list, it renders the country as text.
|
|
255
|
+
|
|
256
|
+
### AccountAddressCountryNotice
|
|
257
|
+
|
|
258
|
+
| Prop | Type | Default | Notes |
|
|
259
|
+
|------|------|---------|-------|
|
|
260
|
+
| `message` | string | catalog copy | Replaces the whole sentence. Takes the ICU arguments `count`, `country`, `previous`, and `fields`. A blank or malformed value falls back to the catalog. |
|
|
261
|
+
|
|
262
|
+
Requires `account-address-form`. An `<output aria-live="polite">` that stays mounted, empty until a country change leaves fields behind.
|
|
263
|
+
|
|
264
|
+
### AccountAddressFormRecipientName and AccountAddressFormReference
|
|
265
|
+
|
|
266
|
+
| Prop | Type | Default | Notes |
|
|
267
|
+
|------|------|---------|-------|
|
|
268
|
+
| `label` | string | catalog copy | Field label. A blank value falls back to the catalog. |
|
|
269
|
+
|
|
270
|
+
The recipient name is required for every country. The reference is optional.
|
|
271
|
+
|
|
272
|
+
### AccountAddressFormFields
|
|
273
|
+
|
|
274
|
+
No props beyond `className`, which goes on every field's wrapper. One field per field the country asks for, in the country's order.
|
|
275
|
+
|
|
276
|
+
### AccountAddressFormError
|
|
277
|
+
|
|
278
|
+
| Prop | Type | Default | Notes |
|
|
279
|
+
|------|------|---------|-------|
|
|
280
|
+
| `unrenderedFieldMessage` | string | catalog copy | A refusal on a field the form does not show. |
|
|
281
|
+
| `notFoundMessage` | string | catalog copy | The address no longer exists. |
|
|
282
|
+
| `unauthorizedMessage` | string | catalog copy | The session expired. |
|
|
283
|
+
| `saveFailedMessage` | string | catalog copy | The save failed for any other reason. |
|
|
284
|
+
| `rulesFailedMessage` | string | catalog copy | The country's rules did not load. |
|
|
285
|
+
| `countrySwitchFailedMessage` | string | catalog copy | A country change could not load. |
|
|
286
|
+
| `unsupportedCountryMessage` | string | catalog copy | The store does not deliver to the country. |
|
|
287
|
+
|
|
288
|
+
An alert for the whole form. Renders nothing when there is no error.
|
|
289
|
+
|
|
290
|
+
### AccountAddressFormSubmit and AccountAddressFormCancel
|
|
291
|
+
|
|
292
|
+
| Prop | Type | Default | Notes |
|
|
293
|
+
|------|------|---------|-------|
|
|
294
|
+
| `label` | string | catalog copy | Button text. A blank value falls back to the catalog. |
|
|
295
|
+
|
|
296
|
+
Submit is disabled until the rules load, while a country change loads, and while a save is in flight, and is marked busy then. Cancel closes the form, or, on its own page, goes to the form root's `returnHref`. Cancel is disabled while a save is in flight, and under a book's `AccountAddressBookFormDialog` Escape and the close control wait for the save to settle, so a refusal is never lost.
|
|
297
|
+
|
|
298
|
+
### AccountAddressBookProfileNotice
|
|
299
|
+
|
|
300
|
+
| Prop | Type | Default | Notes |
|
|
301
|
+
|------|------|---------|-------|
|
|
302
|
+
| `href` | link | `{ standard: 'profile' }` | Where the link goes: a page reference, or a site-relative string. |
|
|
303
|
+
| `message` | string | catalog copy | Notice text. |
|
|
304
|
+
| `linkLabel` | string | catalog copy | Link label. |
|
|
305
|
+
|
|
306
|
+
Fetches `customerProfile` with `fetchStrategy: 'reactive'` and requires `session`.
|
|
307
|
+
|
|
308
|
+
### AccountAddressBookItemDeliverability
|
|
309
|
+
|
|
310
|
+
| Prop | Type | Default | Notes |
|
|
311
|
+
|------|------|---------|-------|
|
|
312
|
+
| `message` | string | catalog copy | Marker text. A blank value falls back to the catalog. |
|
|
313
|
+
|
|
314
|
+
Fetches `shippingCountries` with `fetchStrategy: 'reactive'` and requires `account-address-book-item`. Renders one `<p>` when it marks an address, and nothing otherwise.
|
|
315
|
+
|
|
316
|
+
---
|
|
317
|
+
|
|
318
|
+
## Canonical schema example
|
|
319
|
+
|
|
320
|
+
```json
|
|
321
|
+
{
|
|
322
|
+
"session": { "type": "SessionRoot", "children": ["profile-notice", "address-book"] },
|
|
323
|
+
"profile-notice": { "type": "AccountAddressBookProfileNotice", "children": [] },
|
|
324
|
+
"address-book": {
|
|
325
|
+
"type": "AccountAddressBookRoot",
|
|
326
|
+
"children": ["address-loading", "address-error", "address-empty", "address-list"]
|
|
327
|
+
},
|
|
328
|
+
"address-loading": { "type": "AccountAddressBookLoading", "children": [] },
|
|
329
|
+
"address-error": { "type": "AccountAddressBookError", "children": [] },
|
|
330
|
+
"address-empty": { "type": "AccountAddressBookEmpty", "children": [] },
|
|
331
|
+
"address-list": { "type": "AccountAddressBookList", "children": ["address-item"] },
|
|
332
|
+
"address-item": { "type": "AccountAddressBookItem", "children": [] }
|
|
333
|
+
}
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
`address-item` appears once in the schema and renders once per saved address. Do not repeat it.
|
|
337
|
+
|
|
338
|
+
With the form, the same book adds an add trigger, an edit trigger inside the item, and a slot holding the form root. A root with no children renders the default form:
|
|
339
|
+
|
|
340
|
+
```json
|
|
341
|
+
{
|
|
342
|
+
"session": { "type": "SessionRoot", "children": ["address-book"] },
|
|
343
|
+
"address-book": {
|
|
344
|
+
"type": "AccountAddressBookRoot",
|
|
345
|
+
"children": ["address-add", "address-list", "address-form-slot"]
|
|
346
|
+
},
|
|
347
|
+
"address-add": { "type": "AccountAddressBookAddTrigger", "children": [] },
|
|
348
|
+
"address-list": { "type": "AccountAddressBookList", "children": ["address-item"] },
|
|
349
|
+
"address-item": { "type": "AccountAddressBookItem", "children": ["address-summary", "address-edit"] },
|
|
350
|
+
"address-summary": {
|
|
351
|
+
"type": "AddressSummary",
|
|
352
|
+
"children": ["address-recipient", "address-lines", "address-country"]
|
|
353
|
+
},
|
|
354
|
+
"address-recipient": { "type": "AddressSummaryRecipient", "children": [] },
|
|
355
|
+
"address-lines": { "type": "AccountAddressBookItemLines", "children": [] },
|
|
356
|
+
"address-country": { "type": "AddressSummaryCountry", "children": [] },
|
|
357
|
+
"address-edit": { "type": "AccountAddressBookEditTrigger", "children": [] },
|
|
358
|
+
"address-form-slot": { "type": "AccountAddressBookFormSlot", "children": ["address-form"] },
|
|
359
|
+
"address-form": { "type": "AccountAddressFormRoot", "props": { "defaultCountry": "BRA" }, "children": [] }
|
|
360
|
+
}
|
|
361
|
+
```
|
|
362
|
+
|
|
363
|
+
To open the form in a dialog, swap `AccountAddressBookFormSlot` for `AccountAddressBookFormDialog`. The page needs a `ToastProvider` above it.
|
|
364
|
+
|
|
365
|
+
To offer the country choice, give the form root its parts, with the control first:
|
|
366
|
+
|
|
367
|
+
```json
|
|
368
|
+
{
|
|
369
|
+
"address-form": {
|
|
370
|
+
"type": "AccountAddressFormRoot",
|
|
371
|
+
"props": { "defaultCountry": "BRA" },
|
|
372
|
+
"children": [
|
|
373
|
+
"form-country",
|
|
374
|
+
"form-country-notice",
|
|
375
|
+
"form-recipient",
|
|
376
|
+
"form-fields",
|
|
377
|
+
"form-reference",
|
|
378
|
+
"form-error",
|
|
379
|
+
"form-submit",
|
|
380
|
+
"form-cancel"
|
|
381
|
+
]
|
|
382
|
+
},
|
|
383
|
+
"form-country": { "type": "AddressCountryControl", "children": [] },
|
|
384
|
+
"form-country-notice": { "type": "AccountAddressCountryNotice", "children": [] },
|
|
385
|
+
"form-recipient": { "type": "AccountAddressFormRecipientName", "children": [] },
|
|
386
|
+
"form-fields": { "type": "AccountAddressFormFields", "children": [] },
|
|
387
|
+
"form-reference": { "type": "AccountAddressFormReference", "children": [] },
|
|
388
|
+
"form-error": { "type": "AccountAddressFormError", "children": [] },
|
|
389
|
+
"form-submit": { "type": "AccountAddressFormSubmit", "children": [] },
|
|
390
|
+
"form-cancel": { "type": "AccountAddressFormCancel", "children": [] }
|
|
391
|
+
}
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
To delete, add an `AccountAddressBookDeleteTrigger` to the item's children, and one `AccountAddressBookDeleteConfirm` to the root's:
|
|
395
|
+
|
|
396
|
+
```json
|
|
397
|
+
{
|
|
398
|
+
"address-book": {
|
|
399
|
+
"type": "AccountAddressBookRoot",
|
|
400
|
+
"children": ["address-empty", "address-list", "address-delete-confirm"]
|
|
401
|
+
},
|
|
402
|
+
"address-item": { "type": "AccountAddressBookItem", "children": ["address-summary", "address-delete"] },
|
|
403
|
+
"address-delete": { "type": "AccountAddressBookDeleteTrigger", "children": [] },
|
|
404
|
+
"address-delete-confirm": { "type": "AccountAddressBookDeleteConfirm", "children": [] }
|
|
405
|
+
}
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
To mark the addresses the store does not ship to, add an `AccountAddressBookItemDeliverability` to the item's children. The item then composes its own summary, because children replace the default entry:
|
|
409
|
+
|
|
410
|
+
```json
|
|
411
|
+
{
|
|
412
|
+
"address-item": {
|
|
413
|
+
"type": "AccountAddressBookItem",
|
|
414
|
+
"children": ["address-summary", "address-deliverability"]
|
|
415
|
+
},
|
|
416
|
+
"address-summary": {
|
|
417
|
+
"type": "AddressSummary",
|
|
418
|
+
"children": ["address-recipient", "address-lines", "address-country"]
|
|
419
|
+
},
|
|
420
|
+
"address-recipient": { "type": "AddressSummaryRecipient", "children": [] },
|
|
421
|
+
"address-lines": { "type": "AccountAddressBookItemLines", "children": [] },
|
|
422
|
+
"address-country": { "type": "AddressSummaryCountry", "children": [] },
|
|
423
|
+
"address-deliverability": { "type": "AccountAddressBookItemDeliverability", "children": [] }
|
|
424
|
+
}
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
---
|
|
428
|
+
|
|
429
|
+
## Common mistakes
|
|
430
|
+
|
|
431
|
+
- **Using `ShippingAddress` or `BillingAddress` for a saved-address list.** Those are checkout forms. The list is `AccountAddressBookRoot` with `AccountAddressBookList`.
|
|
432
|
+
- **Switching between the state parts in the schema.** Compose loading, error, empty, and list together as siblings. Each renders only in its own state.
|
|
433
|
+
- **Repeating `AccountAddressBookItem` once per address in the schema.** Compose it once inside `AccountAddressBookList`. The list repeats it.
|
|
434
|
+
- **Rendering `AccountAddressBookItem` outside `AccountAddressBookList`.** It needs the address that the list hands it.
|
|
435
|
+
- **Putting `AccountAddressBookProfileNotice` inside `AccountAddressBookRoot` for data reasons.** It needs nothing from the root; place it anywhere under `SessionRoot`.
|
|
436
|
+
- **Rendering any part outside `SessionRoot`.** The session hook throws.
|
|
437
|
+
- **Styling the loading message with `display: none`.** It is already visually hidden with `sr-only`; `display: none` would stop the live region from announcing it.
|
|
438
|
+
- **Placing `AccountAddressBookDeleteTrigger` without an `AccountAddressBookDeleteConfirm`.** The trigger only asks; with no confirmation under the root, nothing opens and nothing is deleted.
|
|
439
|
+
- **Placing a confirmation per entry.** Place one `AccountAddressBookDeleteConfirm` under the root. Every trigger opens it.
|
|
440
|
+
- **Placing `AccountAddressBookDeleteTrigger` outside `AccountAddressBookItem`.** It needs the address that the entry hands it.
|
|
441
|
+
- **Rendering the confirmation without a `ToastProvider`.** A delete shows a toast, and the toast hook throws without a provider.
|
|
442
|
+
- **Closing the confirmation on a click outside.** It is an alert dialog on purpose: a stray click must not answer it. Do not swap in a `Dialog`.
|
|
443
|
+
- **Placing the form outside the slot or the dialog.** The form shows only where a placement part puts it. Place `AccountAddressFormRoot` inside `AccountAddressBookFormSlot` or `AccountAddressBookFormDialog`, and place one of them, not both.
|
|
444
|
+
- **Placing `AccountAddressBookEditTrigger` outside `AccountAddressBookItem`.** It needs the address that the entry hands it.
|
|
445
|
+
- **Giving `AccountAddressBookItem` children and dropping the summary.** Children replace the default entry. Compose the `AddressSummary` parts yourself next to the edit trigger.
|
|
446
|
+
- **Rendering the form without a `ToastProvider`.** Saving shows a toast, and the toast hook throws without a provider.
|
|
447
|
+
- **Placing `AccountAddressBookItemDeliverability` outside `AccountAddressBookItem`.** It needs the country that the entry hands it, and throws without it.
|
|
448
|
+
- **Expecting the marker to appear when the store ships to one country.** Under the single-country fallback it renders nothing on purpose: one guessed country cannot tell a deliverable address from an undeliverable one.
|
|
449
|
+
- **Listing the form's fields in the schema.** `AccountAddressFormFields` renders the ones the country asks for. Do not compose a field per country.
|
|
450
|
+
- **Expecting the default form to offer a country choice.** A childless `AccountAddressFormRoot` shows `defaultCountry` as text. Compose `AddressCountryControl` explicitly to offer the countries the store ships to.
|
|
451
|
+
- **Placing `AddressCountryControl` or `AccountAddressCountryNotice` outside `AccountAddressFormRoot`.** Both need the form; the hook throws without it.
|
|
452
|
+
- **Using `ShippingAddress*` for the account form.** Those parts are the checkout form.
|
|
453
|
+
|
|
454
|
+
---
|
|
455
|
+
|
|
456
|
+
## Styling
|
|
457
|
+
|
|
458
|
+
| Component | What you style | Plausible classes |
|
|
459
|
+
|---|---|---|
|
|
460
|
+
| `AccountAddressBookRoot` | `[data-fs-account-address-book]`; carries `-state` | `flex flex-col gap-4` |
|
|
461
|
+
| `AccountAddressBookList` | `[data-fs-account-address-book-list]`, items via `[data-fs-account-address-book-list-item]` | `flex flex-col gap-4` |
|
|
462
|
+
| `AccountAddressBookItem` | `[data-fs-account-address-book-item]` | `flex flex-col gap-1 rounded-md border border-[#D4D4D4] p-4` |
|
|
463
|
+
| `AccountAddressBookItemLines` | each line `[data-fs-account-address-book-line]` | `text-[14px] text-[#404040]` |
|
|
464
|
+
| `AccountAddressBookLoading` | `[data-fs-account-address-book-loading]`, message via `-loading-message` | Leave the message as is: it is already `sr-only` |
|
|
465
|
+
| `AccountAddressBookSkeleton` | `[data-fs-account-address-book-skeleton]`, lines via `-skeleton-line` | `animate-pulse` |
|
|
466
|
+
| `AccountAddressBookEmpty` | `[data-fs-account-address-book-empty]` | `text-[14px] text-[#737373]` |
|
|
467
|
+
| `AccountAddressBookError` | `[data-fs-account-address-book-error]`, message via `-error-message`, button via `[data-fs-account-address-book-retry]` | `flex flex-col gap-2 text-[#B91C1C]` |
|
|
468
|
+
| `AccountAddressBookAddTrigger` | `[data-fs-account-address-book-add]` | `rounded-md bg-[#2563EB] px-4 py-2 font-semibold text-white` |
|
|
469
|
+
| `AccountAddressBookEditTrigger` | `[data-fs-account-address-book-edit]` | `text-[14px] font-semibold text-[#2563EB]` |
|
|
470
|
+
| `AccountAddressBookFormSlot` | `[data-fs-account-address-book-form-slot]` | `rounded-md border border-[#D4D4D4] p-4` |
|
|
471
|
+
| `AccountAddressBookFormDialog` | popup via `[data-fs-account-address-book-form-dialog]`, with the `Dialog` particle's own `data-fs-dialog-*` attributes | `w-full max-w-md rounded-md bg-white p-6` |
|
|
472
|
+
| `AccountAddressBookDeleteTrigger` | `[data-fs-account-address-book-delete]` | `text-[14px] font-semibold text-[#B91C1C]` |
|
|
473
|
+
| `AccountAddressBookDeleteConfirm` | popup via `[data-fs-account-address-book-delete-confirm]`, with the `AlertDialog` particle's own `data-fs-alert-dialog-*` attributes; the address via `-delete-address`; the refusal via `-delete-error`; the confirming button via `-delete-submit` | `w-full max-w-md rounded-md bg-white p-6` |
|
|
474
|
+
| `AccountAddressFormRoot` | `[data-fs-account-address-form]`, with the form particle's own `data-fs-form` and `data-fs-form-pending`; carries `-mode` (`add` or `edit`); status region via `-status` | `flex flex-col gap-3` |
|
|
475
|
+
| `AddressCountryControl` | `[data-fs-address-country-control]`; carries `-mode` (`select` or `text`) and `-pending` while a change loads; the text via `-text`; the list's trigger via `[data-fs-account-address-form-control]` | `flex flex-col gap-1 text-[14px] text-[#404040]` |
|
|
476
|
+
| `AccountAddressCountryNotice` | `[data-fs-account-address-country-notice]` | `text-[14px] text-[#404040]` |
|
|
477
|
+
| `AccountAddressFormRecipientName`, `AccountAddressFormFields`, `AccountAddressFormReference` | each field's wrapper `[data-fs-account-address-form-field="<name>"]`; a list field's error via `-field-error` | `flex flex-col gap-1` |
|
|
478
|
+
| `AccountAddressFormError` | `[data-fs-account-address-form-error]`, whose value is the kind of error | `text-[14px] text-[#B91C1C]` |
|
|
479
|
+
| `AccountAddressFormSubmit` | `[data-fs-account-address-form-submit]` | `rounded-md bg-[#2563EB] px-4 py-2 font-semibold text-white` |
|
|
480
|
+
| `AccountAddressFormCancel` | `[data-fs-account-address-form-cancel]` | `rounded-md border border-[#D4D4D4] px-4 py-2` |
|
|
481
|
+
| `AccountAddressBookProfileNotice` | `[data-fs-account-address-book-profile-notice]`, text via `-message`, link via `-link` | `rounded-md border border-[#FBBF24] bg-[#FFFBEB] p-3 text-[14px]` |
|
|
482
|
+
| `AccountAddressBookItemDeliverability` | `[data-fs-account-address-book-item-deliverability]` | `text-[14px] text-[#B45309]` |
|
|
483
|
+
|
|
484
|
+
```json
|
|
485
|
+
{
|
|
486
|
+
"address-list": {
|
|
487
|
+
"type": "AccountAddressBookList",
|
|
488
|
+
"style": ["flex", "flex-col", "gap-[16px]"],
|
|
489
|
+
"children": ["address-item"]
|
|
490
|
+
},
|
|
491
|
+
"address-item": {
|
|
492
|
+
"type": "AccountAddressBookItem",
|
|
493
|
+
"style": ["flex", "flex-col", "gap-[4px]", "rounded-[6px]", "border", "border-[#D4D4D4]", "p-[16px]"],
|
|
494
|
+
"children": []
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
```
|
|
498
|
+
|
|
499
|
+
---
|
|
500
|
+
|
|
501
|
+
## Known gaps
|
|
502
|
+
|
|
503
|
+
- **A failed profile read fails the whole book.** The notice and the book share one page query, and both roots are non-null. If the profile read fails, the list also goes to its error state. The same limit applies to any later part that joins the page query.
|
|
504
|
+
- **The deliverability marker reads the store's shipping countries when the page loads.** It does not refresh until the page loads again, and it stays silent if that first read failed.
|
|
505
|
+
- **The default form offers no country choice.** A childless form root shows `defaultCountry` as text, because only a control placed in the schema joins the page query. Compose `AddressCountryControl` to offer the choice.
|
|
506
|
+
- **The shipping countries are read once per page.** The list comes with the page; a store that changes where it ships shows the change on the next page load.
|
|
507
|
+
- **The postal code has no mask.** It is a plain text field. After the shopper stops typing for 400 ms, a complete code fills the state, city, neighborhood and street the country shows (Argentina, Brazil, Canada, France, Mexico, Spain and the United States). A field the shopper typed or saved is never changed, and a select the shopper's own city depends on is left alone. A field an earlier code filled and the new code does not cover is cleared. A reply for a code or country that changed meanwhile is dropped. A code the platform does not know and a lookup that fails change nothing and say nothing. The merchant cannot turn the fill off.
|
|
508
|
+
- **The fill remembers only the last code asked.** Typing the same code again after another one asks again.
|
|
509
|
+
- **The form does not see another tab's change.** An open edit submits what the shopper sees; if the address was removed meanwhile, the save says it no longer exists.
|
|
510
|
+
|
|
511
|
+
---
|
|
512
|
+
|
|
513
|
+
## Related
|
|
514
|
+
|
|
515
|
+
- [[address-summary]] — the presentational parts an entry composes; an entry renders its recipient, lines, and country through it.
|
|
516
|
+
- [[shipping-address]] — the checkout form for choosing or typing an address; do not use it for the saved list.
|
|
517
|
+
- [[session]] — provides the required `SessionRoot` ancestor.
|
|
518
|
+
- [[toast]] — the particle the form's confirmation uses; the page needs its provider.
|
|
519
|
+
- [[navigation-link]] — the particle the profile notice renders its link with.
|