@dropins/storefront-checkout 2.0.1 → 2.1.0-alpha1
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/api/fragments.d.ts +4 -1
- package/api/getNegotiableQuote/getNegotiableQuote.d.ts +22 -0
- package/api/getNegotiableQuote/graphql/getNegotiableQuote.graphql.d.ts +18 -0
- package/{errors → api/getNegotiableQuote/graphql}/index.d.ts +2 -2
- package/{signals → api/getNegotiableQuote}/index.d.ts +2 -2
- package/api/getStoreConfig/getStoreConfig.d.ts +1 -0
- package/api/graphql/CartAddressFragment.graphql.d.ts +2 -2
- package/api/graphql/NegotiableQuoteAddressFragment.graphql.d.ts +19 -0
- package/api/graphql/NegotiableQuoteFragment.graphql.d.ts +18 -0
- package/api/graphql/{CartPaymentMethodFragment.graphql.d.ts → PaymentMethodFragment.graphql.d.ts} +1 -1
- package/api/graphql/ShippingMethodFragment.graphql.d.ts +19 -0
- package/api/index.d.ts +1 -2
- package/api/initialize/initialize.d.ts +3 -0
- package/api/initializeCheckout/initializeCheckout.d.ts +2 -2
- package/api/setBillingAddress/graphql/index.d.ts +19 -0
- package/api/{setPaymentMethod/graphql/setPaymentMethod.graphql.d.ts → setBillingAddress/graphql/setBillingAddressOnCartMutation.graphql.d.ts} +2 -2
- package/api/setBillingAddress/graphql/setBillingAddressOnQuoteMutation.graphql.d.ts +18 -0
- package/api/setBillingAddress/setBillingAddress.d.ts +2 -2
- package/api/setPaymentMethod/graphql/index.d.ts +19 -0
- package/api/{setBillingAddress/graphql/setBillingAddress.graphql.d.ts → setPaymentMethod/graphql/setPaymentMethodOnCart.graphql.d.ts} +2 -2
- package/api/setPaymentMethod/graphql/setPaymentMethodOnQuote.graphql.d.ts +18 -0
- package/api/setPaymentMethod/setPaymentMethod.d.ts +2 -2
- package/api/setShippingAddress/graphql/index.d.ts +21 -0
- package/api/setShippingAddress/graphql/{setShippingAddressAndUseAsBilling.graphql.d.ts → setShippingAddressOnCartAndUseAsBillingMutation.graphql.d.ts} +2 -2
- package/api/setShippingAddress/graphql/{setShippingAddress.graphql.d.ts → setShippingAddressOnCartMutation.graphql.d.ts} +2 -2
- package/api/setShippingAddress/graphql/setShippingAddressOnQuote.graphql.d.ts +18 -0
- package/api/setShippingAddress/graphql/setShippingAddressOnQuoteAndUseAsBillingMutation.graphql.d.ts +18 -0
- package/api/setShippingAddress/setShippingAddress.d.ts +1 -1
- package/api/setShippingMethods/graphql/index.d.ts +19 -0
- package/api/setShippingMethods/graphql/setShippingMethodsOnCart.graphql.d.ts +1 -1
- package/api/setShippingMethods/graphql/setShippingMethodsOnQuote.graphql.d.ts +18 -0
- package/api/setShippingMethods/index.d.ts +1 -0
- package/api/setShippingMethods/setShippingMethods.d.ts +3 -17
- package/api/synchronizeCheckout/synchronizeCheckout.d.ts +2 -2
- package/api.js +2 -66
- package/api.js.map +1 -1
- package/chunks/ConditionalWrapper.js +1 -1
- package/chunks/ConditionalWrapper.js.map +1 -1
- package/chunks/checkout.js.map +1 -1
- package/chunks/dom.js.map +1 -1
- package/chunks/events.js +4 -0
- package/chunks/events.js.map +1 -0
- package/chunks/events2.js +4 -0
- package/chunks/events2.js.map +1 -0
- package/chunks/fetch-graphql.js +14 -0
- package/chunks/fetch-graphql.js.map +1 -0
- package/chunks/guards.js +4 -0
- package/chunks/guards.js.map +1 -0
- package/chunks/setBillingAddress.js +25 -5
- package/chunks/setBillingAddress.js.map +1 -1
- package/chunks/setGuestEmailOnCart.js +3 -3
- package/chunks/setGuestEmailOnCart.js.map +1 -1
- package/chunks/setPaymentMethod.js +21 -6
- package/chunks/setPaymentMethod.js.map +1 -1
- package/chunks/setShippingAddress.js +109 -0
- package/chunks/setShippingAddress.js.map +1 -0
- package/chunks/setShippingMethods.js +19 -4
- package/chunks/setShippingMethods.js.map +1 -1
- package/chunks/synchronizeCheckout.js +11 -3
- package/chunks/synchronizeCheckout.js.map +1 -1
- package/chunks/transform-shipping-estimate.js +4 -0
- package/chunks/transform-shipping-estimate.js.map +1 -0
- package/chunks/transform-shipping-methods.js +4 -0
- package/chunks/transform-shipping-methods.js.map +1 -0
- package/chunks/values.js +1 -1
- package/chunks/values.js.map +1 -1
- package/components/AddressValidation/AddressValidation.d.ts +14 -0
- package/components/AddressValidation/index.d.ts +19 -0
- package/components/PaymentMethods/PaymentMethods.d.ts +1 -1
- package/components/ShippingMethods/ShippingMethods.d.ts +1 -1
- package/components/index.d.ts +1 -0
- package/containers/AddressValidation/AddressValidation.d.ts +12 -0
- package/containers/AddressValidation/index.d.ts +19 -0
- package/containers/AddressValidation.d.ts +3 -0
- package/containers/AddressValidation.js +4 -0
- package/containers/AddressValidation.js.map +1 -0
- package/containers/BillToShippingAddress.js +1 -1
- package/containers/BillToShippingAddress.js.map +1 -1
- package/containers/EstimateShipping.js +1 -1
- package/containers/EstimateShipping.js.map +1 -1
- package/containers/LoginForm/LoginForm.d.ts +1 -1
- package/containers/LoginForm.js +1 -1
- package/containers/LoginForm.js.map +1 -1
- package/containers/OutOfStock.js +1 -1
- package/containers/OutOfStock.js.map +1 -1
- package/containers/PaymentMethods/PaymentMethods.d.ts +1 -2
- package/containers/PaymentMethods.js +1 -1
- package/containers/PaymentMethods.js.map +1 -1
- package/containers/PlaceOrder.js +1 -1
- package/containers/PlaceOrder.js.map +1 -1
- package/containers/ServerError.js +1 -1
- package/containers/ServerError.js.map +1 -1
- package/containers/ShippingMethods/ShippingMethods.d.ts +1 -2
- package/containers/ShippingMethods.js +1 -1
- package/containers/ShippingMethods.js.map +1 -1
- package/containers/TermsAndConditions.js +1 -1
- package/containers/TermsAndConditions.js.map +1 -1
- package/containers/index.d.ts +1 -0
- package/data/models/address.d.ts +11 -6
- package/data/models/api.d.ts +23 -10
- package/data/models/cart.d.ts +7 -7
- package/data/models/checkout.d.ts +14 -0
- package/data/models/country.d.ts +1 -1
- package/data/models/index.d.ts +2 -1
- package/data/models/{price.d.ts → money.d.ts} +2 -2
- package/data/models/quote.d.ts +16 -0
- package/data/models/shipping-estimate.d.ts +4 -4
- package/data/models/shipping-method.d.ts +4 -4
- package/data/models/values.d.ts +1 -1
- package/data/transforms/index.d.ts +8 -1
- package/data/transforms/transform-api.d.ts +12 -0
- package/data/transforms/{transform-address.d.ts → transform-cart-address.d.ts} +39 -43
- package/data/transforms/transform-cart.d.ts +1 -1
- package/data/transforms/transform-country.d.ts +8 -0
- package/data/transforms/transform-custom-attributes.d.ts +5 -0
- package/data/transforms/transform-negotiable-quote.d.ts +7 -0
- package/data/transforms/transform-payment-methods.d.ts +1 -1
- package/data/transforms/transform-quote-address.d.ts +88 -0
- package/data/transforms/transform-region.d.ts +8 -0
- package/fragments.js +180 -71
- package/fragments.js.map +1 -1
- package/i18n/en_US.json.d.ts +6 -0
- package/lib/enqueueRequest.d.ts +2 -2
- package/lib/errors/classifiers.d.ts +36 -0
- package/lib/errors/customErrors.d.ts +42 -0
- package/lib/errors/index.d.ts +20 -0
- package/lib/errors/mapErrorToCode.d.ts +4 -0
- package/lib/events.d.ts +3 -2
- package/lib/guards.d.ts +18 -0
- package/lib/index.d.ts +2 -2
- package/lib/state.d.ts +5 -3
- package/lib/utils/api.d.ts +16 -0
- package/lib/utils/events.d.ts +10 -0
- package/lib/utils/forms.d.ts +5 -0
- package/lib/utils/fragments.d.ts +19 -0
- package/lib/utils/index.d.ts +24 -0
- package/lib/utils/meta.d.ts +19 -0
- package/lib/utils/transformers.d.ts +6 -0
- package/lib/utils.d.ts +1 -0
- package/lib/utils.js +4 -0
- package/lib/utils.js.map +1 -0
- package/package.json +1 -1
- package/render.js +3 -3
- package/render.js.map +1 -1
- package/tests/constants.d.ts +1 -0
- package/tests/fixtures/fragments/cart.d.ts +43 -42
- package/tests/fixtures/fragments/shipping-address.d.ts +2 -1
- package/tests/fixtures/models/index.d.ts +1 -1
- package/tests/fixtures/models/quote.d.ts +9 -0
- package/types/api.d.ts +6 -0
- package/types/{TitleProps.d.ts → components.d.ts} +2 -1
- package/types/guards.d.ts +5 -0
- package/types/index.d.ts +21 -0
- package/types/storefront.d.ts +165 -0
- package/chunks/ServerErrorSignal.js +0 -4
- package/chunks/ServerErrorSignal.js.map +0 -1
- package/chunks/errors.js +0 -14
- package/chunks/errors.js.map +0 -1
- package/errors/errors.d.ts +0 -30
- package/lib/network-error.d.ts +0 -22
- package/signals/ServerErrorSignal.d.ts +0 -18
- package/types/ComponentTypes.d.ts +0 -18
- /package/lib/{dom.d.ts → utils/dom.d.ts} +0 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Container } from '@dropins/tools/types/elsie/src/lib';
|
|
2
|
+
import { AddressInput } from '../../data/models';
|
|
3
|
+
|
|
4
|
+
export interface AddressValidationProps {
|
|
5
|
+
suggestedAddress: Partial<AddressInput> | null;
|
|
6
|
+
handleSelectedAddress?: (payload: {
|
|
7
|
+
selection: 'suggested' | 'original';
|
|
8
|
+
address: AddressInput | null | undefined;
|
|
9
|
+
}) => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const AddressValidation: Container<AddressValidationProps>;
|
|
12
|
+
//# sourceMappingURL=AddressValidation.d.ts.map
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/********************************************************************
|
|
2
|
+
* ADOBE CONFIDENTIAL
|
|
3
|
+
* __________________
|
|
4
|
+
*
|
|
5
|
+
* Copyright 2024 Adobe
|
|
6
|
+
* All Rights Reserved.
|
|
7
|
+
*
|
|
8
|
+
* NOTICE: All information contained herein is, and remains
|
|
9
|
+
* the property of Adobe and its suppliers, if any. The intellectual
|
|
10
|
+
* and technical concepts contained herein are proprietary to Adobe
|
|
11
|
+
* and its suppliers and are protected by all applicable intellectual
|
|
12
|
+
* property laws, including trade secret and copyright laws.
|
|
13
|
+
* Dissemination of this information or reproduction of this material
|
|
14
|
+
* is strictly forbidden unless prior written permission is obtained
|
|
15
|
+
* from Adobe.
|
|
16
|
+
*******************************************************************/
|
|
17
|
+
export * from './AddressValidation';
|
|
18
|
+
export { AddressValidation as default } from './AddressValidation';
|
|
19
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/*! Copyright 2025 Adobe
|
|
2
|
+
All Rights Reserved. */
|
|
3
|
+
import{jsxs as h,jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import{useState as p,useMemo as N,useCallback as k,useEffect as _}from"@dropins/tools/preact-hooks.js";import"../chunks/TermsAndConditions.js";import{classes as A}from"@dropins/tools/lib.js";import{Header as $,ToggleButton as b}from"@dropins/tools/components.js";import{useText as V}from"@dropins/tools/i18n.js";/* empty css *//* empty css */import"../chunks/fetch-graphql.js";import{t as x}from"../chunks/transform-shipping-methods.js";import{events as y}from"@dropins/tools/event-bus.js";import{g as B}from"../chunks/events.js";import"@dropins/tools/preact-compat.js";/* empty css *//* empty css */import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";function T(t){var f;if(!t)return[];const a=`${t.firstName} ${t.lastName}`.trim(),m=((f=t.street)==null?void 0:f[0])??"",r=t.city??"",s=t.region||"",n=t.postcode??"",c=t.countryCode??"";let e="";r&&s?e=`${r}, ${s}`:r?e=r:s&&(e=s);let d=e;n&&(d=e?`${e} ${n}`:n);let u=d;return c&&(u=d?`${d}, ${c}`:c),[a,m,u]}const C=({title:t,address:a,selected:m,busy:r,onChange:s})=>{const[n,c,e]=T(a);return o("div",{className:"checkout-address-validation__option",children:o(b,{busy:r,className:"checkout-address-validation__radio",label:h("div",{children:[o("div",{className:"checkout-address-validation__option-title",children:o("strong",{children:t})}),n&&o("div",{children:n}),c&&o("div",{children:c}),e&&o("div",{children:e})]}),name:"address-validation-choice",selected:m,value:t,onChange:s})})},j=({busy:t=!1,className:a,currentAddress:m,onSelectionChange:r,selection:s,suggestedAddress:n})=>{const c=!!n,e=V({title:"Checkout.AddressValidation.title",subtitle:"Checkout.AddressValidation.subtitle",suggestedAddress:"Checkout.AddressValidation.suggestedAddress",originalAddress:"Checkout.AddressValidation.originalAddress"});return h("div",{className:A(["checkout-address-validation",a]),children:[o($,{className:"checkout-address-validation__title",divider:!1,title:e.title}),o("div",{className:"checkout-address-validation__subtitle",children:e.subtitle}),h("div",{className:A(["checkout-address-validation__options",t&&"checkout-address-validation__options--busy"]),children:[c&&o(C,{address:n,busy:t,selected:s==="suggested",title:e.suggestedAddress,onChange:()=>r("suggested")}),o(C,{address:m,busy:t,selected:s==="original",title:e.originalAddress,onChange:()=>r("original")})]})]})},Q=({suggestedAddress:t,handleSelectedAddress:a})=>{const[m,r]=p(null),[s,n]=p(void 0),[c,e]=p(!1),d=N(()=>!t||!s?null:{...s,regionId:void 0,...t},[s,t]),u=k(i=>{var v;const l=(v=i==null?void 0:i.shippingAddresses)==null?void 0:v[0],g=x(l);n(g)},[]);_(()=>{const i=y.on("checkout/initialized",l=>{u(l)},{eager:!0});return()=>{i==null||i.off()}},[u]),_(()=>{const i=B();i&&u(i);const l=y.on("checkout/updated",g=>{u(g)},{eager:!1});return()=>{l==null||l.off()}},[u]);const f=k(async i=>{r(i);const l=i==="suggested"?d:s;e(!0);try{await(a==null?void 0:a({selection:i,address:l}))}finally{e(!1)}},[d,s,a]);return o(j,{busy:c,currentAddress:s,selection:m,suggestedAddress:d,onSelectionChange:f})};export{Q as AddressValidation,Q as default};
|
|
4
|
+
//# sourceMappingURL=AddressValidation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AddressValidation.js","sources":["/@dropins/storefront-checkout/src/components/AddressValidation/AddressValidation.tsx","/@dropins/storefront-checkout/src/containers/AddressValidation/AddressValidation.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/AddressValidation/AddressValidation.css';\nimport { AddressInput } from '@/checkout/data/models';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { Header, ToggleButton } from '@adobe-commerce/elsie/components';\n\nexport interface AddressValidationProps extends HTMLAttributes<HTMLDivElement> {\n busy?: boolean;\n currentAddress: AddressInput | null | undefined;\n selection: 'suggested' | 'original' | null;\n suggestedAddress: AddressInput | null;\n onSelectionChange: (selection: 'suggested' | 'original') => void;\n}\n\nexport function formatAddressLine(\n address: AddressInput | null | undefined\n): string[] {\n if (!address) return [];\n const name = `${address.firstName} ${address.lastName}`.trim();\n const street = address.street?.[0] ?? '';\n const city = address.city ?? '';\n const region = address.region || '';\n const post = address.postcode ?? '';\n const country = address.countryCode ?? '';\n\n let cityRegion = '';\n if (city && region) {\n cityRegion = `${city}, ${region}`;\n } else if (city) {\n cityRegion = city;\n } else if (region) {\n cityRegion = region;\n }\n\n let cityRegionPost = cityRegion;\n if (post) {\n cityRegionPost = cityRegion ? `${cityRegion} ${post}` : post;\n }\n\n let line3 = cityRegionPost;\n if (country) {\n line3 = cityRegionPost ? `${cityRegionPost}, ${country}` : country;\n }\n\n return [name, street, line3];\n}\n\nconst AddressBlock: FunctionComponent<{\n title: string;\n address: AddressInput | null | undefined;\n selected: boolean;\n busy?: boolean;\n onChange: () => void;\n}> = ({ title, address, selected, busy, onChange }) => {\n const [line1, line2, line3] = formatAddressLine(address);\n const label = (\n <div>\n <div className=\"checkout-address-validation__option-title\">\n <strong>{title}</strong>\n </div>\n {line1 && <div>{line1}</div>}\n {line2 && <div>{line2}</div>}\n {line3 && <div>{line3}</div>}\n </div>\n );\n return (\n <div className=\"checkout-address-validation__option\">\n <ToggleButton\n busy={busy}\n className=\"checkout-address-validation__radio\"\n label={label}\n name=\"address-validation-choice\"\n selected={selected}\n value={title}\n onChange={onChange}\n />\n </div>\n );\n};\n\nexport const AddressValidation: FunctionComponent<AddressValidationProps> = ({\n busy = false,\n className,\n currentAddress,\n onSelectionChange,\n selection,\n suggestedAddress,\n}) => {\n const hasSuggestion = !!suggestedAddress;\n const translations = useText({\n title: 'Checkout.AddressValidation.title',\n subtitle: 'Checkout.AddressValidation.subtitle',\n suggestedAddress: 'Checkout.AddressValidation.suggestedAddress',\n originalAddress: 'Checkout.AddressValidation.originalAddress',\n });\n\n return (\n <div className={classes(['checkout-address-validation', className])}>\n <Header\n className=\"checkout-address-validation__title\"\n divider={false}\n title={translations.title}\n />\n <div className=\"checkout-address-validation__subtitle\">\n {translations.subtitle}\n </div>\n\n <div\n className={classes([\n 'checkout-address-validation__options',\n busy && 'checkout-address-validation__options--busy',\n ])}\n >\n {hasSuggestion && (\n <AddressBlock\n address={suggestedAddress}\n busy={busy}\n selected={selection === 'suggested'}\n title={translations.suggestedAddress}\n onChange={() => onSelectionChange('suggested')}\n />\n )}\n\n <AddressBlock\n address={currentAddress}\n busy={busy}\n selected={selection === 'original'}\n title={translations.originalAddress}\n onChange={() => onSelectionChange('original')}\n />\n </div>\n </div>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { useCallback, useEffect, useMemo, useState } from 'preact/hooks';\nimport { AddressValidation as AddressValidationComponent } from '@/checkout/components';\nimport { Cart, AddressInput, NegotiableQuote } from '@/checkout/data/models';\nimport { getLatestCheckoutUpdate } from '@/checkout/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { transformAddressToCartAddressInput } from '@/checkout/data/transforms/transform-cart-address';\n\nexport interface AddressValidationProps {\n suggestedAddress: Partial<AddressInput> | null;\n handleSelectedAddress?: (payload: {\n selection: 'suggested' | 'original';\n address: AddressInput | null | undefined;\n }) => void;\n}\n\nexport const AddressValidation: Container<AddressValidationProps> = ({\n suggestedAddress,\n handleSelectedAddress,\n}) => {\n const [selection, setSelection] = useState<'suggested' | 'original' | null>(\n null\n );\n const [currentAddress, setCurrentAddress] = useState<\n AddressInput | null | undefined\n >(undefined);\n const [busy, setBusy] = useState(false);\n\n const mergedSuggestedAddress = useMemo<AddressInput | null>(() => {\n if (!suggestedAddress || !currentAddress) return null;\n return { ...currentAddress, regionId: undefined, ...suggestedAddress };\n }, [currentAddress, suggestedAddress]);\n\n const handleCheckoutData = useCallback(\n (data: Cart | NegotiableQuote | null) => {\n const addr = (data as Cart | null)?.shippingAddresses?.[0];\n const input = transformAddressToCartAddressInput(addr);\n setCurrentAddress(input);\n },\n []\n );\n\n useEffect(() => {\n const onCheckoutInitialized = events.on(\n 'checkout/initialized',\n (data: Cart | NegotiableQuote | null) => {\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInitialized?.off();\n };\n }, [handleCheckoutData]);\n\n useEffect(() => {\n const pastUpdate = getLatestCheckoutUpdate();\n if (pastUpdate) {\n handleCheckoutData(pastUpdate);\n }\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n (data: Cart | NegotiableQuote | null) => {\n handleCheckoutData(data);\n },\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [handleCheckoutData]);\n\n const onSelectionChange = useCallback(\n async (sel: 'suggested' | 'original') => {\n setSelection(sel);\n const chosen =\n sel === 'suggested' ? mergedSuggestedAddress : currentAddress;\n setBusy(true);\n try {\n await handleSelectedAddress?.({ selection: sel, address: chosen });\n } finally {\n setBusy(false);\n }\n },\n [mergedSuggestedAddress, currentAddress, handleSelectedAddress]\n );\n\n return (\n <AddressValidationComponent\n busy={busy}\n currentAddress={currentAddress}\n selection={selection}\n suggestedAddress={mergedSuggestedAddress}\n onSelectionChange={onSelectionChange}\n />\n );\n};\n"],"names":["formatAddressLine","address","name","street","_a","city","region","post","country","cityRegion","cityRegionPost","line3","AddressBlock","title","selected","busy","onChange","line1","line2","jsx","ToggleButton","AddressValidation","className","currentAddress","onSelectionChange","selection","suggestedAddress","hasSuggestion","translations","useText","jsxs","classes","Header","handleSelectedAddress","setSelection","useState","setCurrentAddress","setBusy","mergedSuggestedAddress","useMemo","handleCheckoutData","useCallback","data","addr","input","transformAddressToCartAddressInput","useEffect","onCheckoutInitialized","events","pastUpdate","getLatestCheckoutUpdate","onCheckoutUpdated","sel","chosen","AddressValidationComponent"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as
|
|
3
|
+
import{jsx as n,jsxs as z}from"@dropins/tools/preact-jsx-runtime.js";import{h as j}from"../chunks/fetch-graphql.js";import"@dropins/tools/lib.js";import{h as w,g as C}from"../chunks/events.js";import{n as L,g as R}from"../chunks/values.js";import{events as _}from"@dropins/tools/event-bus.js";import{c as U}from"../chunks/synchronizeCheckout.js";import{s as W}from"../chunks/setBillingAddress.js";/* empty css */import{Skeleton as y,SkeletonRow as P,Checkbox as $,InLineAlert as q}from"@dropins/tools/components.js";import{W as F}from"../chunks/ConditionalWrapper.js";import{c as G}from"../chunks/classes.js";import{useText as D}from"@dropins/tools/i18n.js";import{useState as k,useRef as H,useCallback as b,useEffect as A}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";import"../fragments.js";import"../chunks/transform-shipping-methods.js";import"../chunks/guards.js";const J=()=>n(y,{className:"bill-to-shipping-address__skeleton","data-testid":"bill-to-shipping-skeleton",children:n(P,{size:"small",variant:"row"})}),K=({className:i,checked:u,disabled:e,error:t=null,onChange:c=()=>{},onDismissError:p=()=>{}})=>{const m=D({title:"Checkout.BillToShippingAddress.title"}),f=t!==null,r=l=>{const a=l.target;c==null||c(a.checked)};return z("div",{className:"checkout-bill-to-shipping-address",children:[n($,{checked:u,className:G(["checkout-bill-to-shipping-address__checkbox",i]),"data-testid":"bill-to-shipping-checkbox",disabled:e,label:m.title,name:"checkout-bill-to-shipping-address__checkbox",onChange:r}),f&&n("div",{className:"checkout-bill-to-shipping-address__error","data-testid":"checkout-bill-to-shipping-address-alert",children:n(q,{heading:t,type:"error",variant:"primary",onDismiss:p})})]})},M=F(K,J),ms=({active:i=!0,autoSync:u=!0,onCartSyncError:e,onChange:t})=>{const[c,p]=k(null),[m,f]=k(!1),[r,l]=k(),a=H(!1),V=j.value,{cartSyncError:B}=D({cartSyncError:"Checkout.BillToShippingAddress.cartSyncError"}),E=b(()=>{p(null)},[]),I=b(s=>{p(null),l(s),t==null||t(s),!(!u||!s||!w())&&W({sameAsShipping:!0}).catch(o=>{l(!1),e==null||e({error:o}),e||p(B)})},[u,B,e,t]),d=b(s=>{var T;const o=!s||s.isEmpty,h=!!(s!=null&&s.isVirtual);if(o||h){f(h),l(!1),a.current=!1;return}if(a.current)return;const S=s,x=(T=S.shippingAddresses)==null?void 0:T[0],N=!!S.billingAddress;let g;if(x)g=x.sameAsBilling??!N;else{const{defaults:v}=U.getConfig();g=v.isBillToShipping}l(g),a.current=!0},[]);return A(()=>{!i||r===void 0||L({isBillToShipping:r})},[i,r]),A(()=>{if(!i)return;const s=C();if(s){const h=R("isBillToShipping");h!=null&&l(h),d(s);return}const o=_.on("checkout/initialized",d,{eager:!0});return()=>{o==null||o.off()}},[i,d]),A(()=>{if(!i)return;const s=_.on("checkout/updated",d,{eager:!1});return()=>{s==null||s.off()}},[i,d]),n(M,{checked:r,disabled:V,error:c,initialized:r!==void 0,visible:i&&!m,onChange:I,onDismissError:E})};export{ms as BillToShippingAddress,ms as default};
|
|
4
4
|
//# sourceMappingURL=BillToShippingAddress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BillToShippingAddress.js","sources":["/@dropins/storefront-checkout/src/components/BillToShippingAddress/BillToShippingAddressSkeleton.tsx","/@dropins/storefront-checkout/src/components/BillToShippingAddress/BillToShippingAddress.tsx","/@dropins/storefront-checkout/src/containers/BillToShippingAddress/BillToShippingAddress.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const BillToShippingAddressSkeleton: FunctionComponent = () => {\n return (\n <Skeleton\n className=\"bill-to-shipping-address__skeleton\"\n data-testid=\"bill-to-shipping-skeleton\"\n >\n <SkeletonRow size=\"small\" variant=\"row\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/BillToShippingAddress/BillToShippingAddress.css';\nimport { BillToShippingAddressSkeleton } from '@/checkout/components/BillToShippingAddress/BillToShippingAddressSkeleton';\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport { Checkbox, InLineAlert } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { classes } from '@adobe-commerce/elsie/lib/classes';\nimport { FunctionComponent } from 'preact';\nimport { ChangeEvent, HTMLAttributes } from 'preact/compat';\n\nexport interface BillToShippingAddressProps\n extends Omit<\n HTMLAttributes<HTMLInputElement>,\n 'loading' | 'disabled' | 'onChange'\n > {\n disabled?: boolean;\n error?: string | null;\n onChange?: (checked: boolean) => void;\n onDismissError?: () => void;\n}\n\nconst BillToShippingAddressComponent: FunctionComponent<\n BillToShippingAddressProps\n> = ({\n className,\n checked,\n disabled,\n error = null,\n onChange = () => {},\n onDismissError = () => {},\n}) => {\n const translations = useText({\n title: 'Checkout.BillToShippingAddress.title',\n });\n\n const hasError = error !== null;\n\n const handleChange = (event: Event | ChangeEvent<HTMLInputElement>) => {\n const checkbox = event.target as HTMLInputElement;\n onChange?.(checkbox.checked);\n };\n\n return (\n <div className=\"checkout-bill-to-shipping-address\">\n <Checkbox\n checked={checked}\n className={classes([\n 'checkout-bill-to-shipping-address__checkbox',\n className,\n ])}\n data-testid=\"bill-to-shipping-checkbox\"\n disabled={disabled}\n label={translations.title}\n name=\"checkout-bill-to-shipping-address__checkbox\"\n onChange={handleChange}\n />\n\n {hasError && (\n <div\n className=\"checkout-bill-to-shipping-address__error\"\n data-testid=\"checkout-bill-to-shipping-address-alert\"\n >\n <InLineAlert\n heading={error}\n type=\"error\"\n variant=\"primary\"\n onDismiss={onDismissError}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport const BillToShippingAddress = WithConditionals(\n BillToShippingAddressComponent,\n BillToShippingAddressSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { setBillingAddress } from '@/checkout/api';\nimport { BillToShippingAddress as BillToShippingAddressComponent } from '@/checkout/components/BillToShippingAddress';\nimport { Cart } from '@/checkout/data/models/cart';\nimport {\n getLatestCheckoutUpdate,\n getValue,\n hasPendingCartUpdates,\n hasShippingAddress,\n notifyValues,\n} from '@/checkout/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\n\ninterface CartSyncError {\n error: Error;\n}\n\nexport interface BillToShippingAddressProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n active?: boolean;\n autoSync?: boolean;\n onCartSyncError?: (error: CartSyncError) => void;\n onChange?: (checked: boolean) => void;\n}\n\nfunction isBillToShippingAddress(cart: Cart) {\n const shippingAddress = cart.shippingAddresses?.[0];\n const hasBillingAddress = !!cart.billingAddress;\n const sameAsBilling = shippingAddress?.sameAsBilling;\n return sameAsBilling ?? !hasBillingAddress;\n}\n\nexport const BillToShippingAddress: Container<BillToShippingAddressProps> = ({\n active = true,\n autoSync = true,\n onCartSyncError,\n onChange,\n}) => {\n const [error, setError] = useState<string | null>(null);\n const [isInitialized, setIsInitialized] = useState(false);\n const [isVirtual, setIsVirtual] = useState(false);\n const [isChecked, setIsChecked] = useState(true);\n\n const hasInitialCartData = useRef(false);\n\n const hasPendingUpdates = hasPendingCartUpdates.value;\n\n const { cartSyncError } = useText({\n cartSyncError: 'Checkout.BillToShippingAddress.cartSyncError',\n });\n\n const handleDismissError = useCallback(() => {\n setError(null);\n }, []);\n\n const setBillToShipping = useCallback(\n (value: boolean) => {\n setError(null);\n setIsChecked(value);\n notifyValues({ isBillToShipping: value });\n },\n []\n );\n\n const handleChange = useCallback(\n (checked: boolean) => {\n const isBillToShipping = checked;\n\n setBillToShipping(isBillToShipping);\n\n onChange?.(isBillToShipping);\n\n if (!autoSync || !isBillToShipping || !hasShippingAddress()) {\n return;\n }\n\n setBillingAddress({ sameAsShipping: true }).catch((error: any) => {\n setBillToShipping(false);\n onCartSyncError?.({ error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [autoSync, cartSyncError, onCartSyncError, onChange, setBillToShipping]\n );\n\n const handleCheckoutData = useCallback(\n (data: Cart | null) => {\n const isEmptyCart = !data || data?.isEmpty;\n const isVirtualCart = Boolean(data?.isVirtual);\n\n if (isEmptyCart || isVirtualCart) {\n setIsVirtual(isVirtualCart);\n setBillToShipping(false);\n hasInitialCartData.current = false;\n return;\n }\n\n if (!hasInitialCartData.current) {\n const billToShippingValue = isBillToShippingAddress(data);\n setBillToShipping(billToShippingValue);\n hasInitialCartData.current = true;\n }\n },\n [setBillToShipping]\n );\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore key state so handleCheckoutData can work properly\n const userBillToShipping = getValue('isBillToShipping');\n if (userBillToShipping != null) {\n setIsChecked(userBillToShipping);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n {\n eager: false,\n }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n return (\n <BillToShippingAddressComponent\n checked={isChecked}\n disabled={hasPendingUpdates}\n error={error}\n initialized={isInitialized}\n visible={active && !isVirtual}\n onChange={handleChange}\n onDismissError={handleDismissError}\n />\n );\n};\n"],"names":["BillToShippingAddressSkeleton","jsx","Skeleton","SkeletonRow","BillToShippingAddressComponent","className","checked","disabled","error","onChange","onDismissError","translations","useText","hasError","handleChange","event","checkbox","jsxs","Checkbox","classes","InLineAlert","BillToShippingAddress","WithConditionals","isBillToShippingAddress","cart","shippingAddress","_a","hasBillingAddress","active","autoSync","onCartSyncError","setError","useState","isInitialized","setIsInitialized","isVirtual","setIsVirtual","isChecked","setIsChecked","hasInitialCartData","useRef","hasPendingUpdates","hasPendingCartUpdates","cartSyncError","handleDismissError","useCallback","setBillToShipping","value","notifyValues","isBillToShipping","hasShippingAddress","setBillingAddress","handleCheckoutData","data","isEmptyCart","isVirtualCart","billToShippingValue","useEffect","pastUpdate","getLatestCheckoutUpdate","userBillToShipping","getValue","onCheckoutInit","events","onCheckoutUpdated"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BillToShippingAddress.js","sources":["/@dropins/storefront-checkout/src/components/BillToShippingAddress/BillToShippingAddressSkeleton.tsx","/@dropins/storefront-checkout/src/components/BillToShippingAddress/BillToShippingAddress.tsx","/@dropins/storefront-checkout/src/containers/BillToShippingAddress/BillToShippingAddress.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const BillToShippingAddressSkeleton: FunctionComponent = () => {\n return (\n <Skeleton\n className=\"bill-to-shipping-address__skeleton\"\n data-testid=\"bill-to-shipping-skeleton\"\n >\n <SkeletonRow size=\"small\" variant=\"row\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/BillToShippingAddress/BillToShippingAddress.css';\nimport { BillToShippingAddressSkeleton } from '@/checkout/components/BillToShippingAddress/BillToShippingAddressSkeleton';\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport { Checkbox, InLineAlert } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { classes } from '@adobe-commerce/elsie/lib/classes';\nimport { FunctionComponent } from 'preact';\nimport { ChangeEvent, HTMLAttributes } from 'preact/compat';\n\nexport interface BillToShippingAddressProps\n extends Omit<\n HTMLAttributes<HTMLInputElement>,\n 'loading' | 'disabled' | 'onChange'\n > {\n disabled?: boolean;\n error?: string | null;\n onChange?: (checked: boolean) => void;\n onDismissError?: () => void;\n}\n\nconst BillToShippingAddressComponent: FunctionComponent<\n BillToShippingAddressProps\n> = ({\n className,\n checked,\n disabled,\n error = null,\n onChange = () => {},\n onDismissError = () => {},\n}) => {\n const translations = useText({\n title: 'Checkout.BillToShippingAddress.title',\n });\n\n const hasError = error !== null;\n\n const handleChange = (event: Event | ChangeEvent<HTMLInputElement>) => {\n const checkbox = event.target as HTMLInputElement;\n onChange?.(checkbox.checked);\n };\n\n return (\n <div className=\"checkout-bill-to-shipping-address\">\n <Checkbox\n checked={checked}\n className={classes([\n 'checkout-bill-to-shipping-address__checkbox',\n className,\n ])}\n data-testid=\"bill-to-shipping-checkbox\"\n disabled={disabled}\n label={translations.title}\n name=\"checkout-bill-to-shipping-address__checkbox\"\n onChange={handleChange}\n />\n\n {hasError && (\n <div\n className=\"checkout-bill-to-shipping-address__error\"\n data-testid=\"checkout-bill-to-shipping-address-alert\"\n >\n <InLineAlert\n heading={error}\n type=\"error\"\n variant=\"primary\"\n onDismiss={onDismissError}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport const BillToShippingAddress = WithConditionals(\n BillToShippingAddressComponent,\n BillToShippingAddressSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { config, setBillingAddress } from '@/checkout/api';\nimport { BillToShippingAddress as BillToShippingAddressComponent } from '@/checkout/components/BillToShippingAddress';\nimport { Cart, NegotiableQuote } from '@/checkout/data/models';\nimport {\n getLatestCheckoutUpdate,\n getValue,\n hasPendingUpdates,\n hasShippingAddress,\n notifyValues,\n} from '@/checkout/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\n\ninterface CartSyncError {\n error: Error;\n}\n\nexport interface BillToShippingAddressProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n active?: boolean;\n autoSync?: boolean;\n onCartSyncError?: (error: CartSyncError) => void;\n onChange?: (checked: boolean) => void;\n}\n\nexport const BillToShippingAddress: Container<BillToShippingAddressProps> = ({\n active = true,\n autoSync = true,\n onCartSyncError,\n onChange,\n}) => {\n const [error, setError] = useState<string | null>(null);\n const [isVirtual, setIsVirtual] = useState(false);\n const [isChecked, setIsChecked] = useState<boolean | undefined>();\n\n const hasInitialCartData = useRef(false);\n\n const isDisabled = hasPendingUpdates.value;\n\n const { cartSyncError } = useText({\n cartSyncError: 'Checkout.BillToShippingAddress.cartSyncError',\n });\n\n const handleDismissError = useCallback(() => {\n setError(null);\n }, []);\n\n const handleChange = useCallback(\n (isBillToShipping: boolean) => {\n setError(null);\n setIsChecked(isBillToShipping);\n\n onChange?.(isBillToShipping);\n\n if (!autoSync || !isBillToShipping || !hasShippingAddress()) {\n return;\n }\n\n setBillingAddress({ sameAsShipping: true }).catch((error: any) => {\n setIsChecked(false);\n onCartSyncError?.({ error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [autoSync, cartSyncError, onCartSyncError, onChange]\n );\n\n const handleCheckoutData = useCallback(\n (data: Cart | NegotiableQuote | null) => {\n const isCartEmpty = !data || data.isEmpty;\n const isCartVirtual = !!data?.isVirtual;\n\n if (isCartEmpty || isCartVirtual) {\n setIsVirtual(isCartVirtual);\n setIsChecked(false);\n hasInitialCartData.current = false;\n return;\n }\n\n // If we've already set the initial state from cart data, don't override it.\n // This preserves any changes the user might have made.\n if (hasInitialCartData.current) {\n return;\n }\n\n const cart = data as Cart;\n const shippingAddress = cart.shippingAddresses?.[0];\n const hasBillingAddress = !!cart.billingAddress;\n\n let initialIsChecked: boolean;\n\n if (!shippingAddress) {\n const { defaults } = config.getConfig();\n initialIsChecked = defaults!.isBillToShipping!;\n } else {\n initialIsChecked = shippingAddress.sameAsBilling ?? !hasBillingAddress;\n }\n\n setIsChecked(initialIsChecked);\n hasInitialCartData.current = true;\n },\n []\n );\n\n useEffect(() => {\n if (!active || isChecked === undefined) return;\n notifyValues({ isBillToShipping: isChecked });\n }, [active, isChecked]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n // When component becomes active, restore key state so handleCheckoutData can work properly\n const userBillToShipping = getValue('isBillToShipping');\n if (userBillToShipping != null) {\n setIsChecked(userBillToShipping);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n handleCheckoutData,\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n {\n eager: false,\n }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n return (\n <BillToShippingAddressComponent\n checked={isChecked}\n disabled={isDisabled}\n error={error}\n initialized={isChecked !== undefined}\n visible={active && !isVirtual}\n onChange={handleChange}\n onDismissError={handleDismissError}\n />\n );\n};\n"],"names":["BillToShippingAddressSkeleton","jsx","Skeleton","SkeletonRow","BillToShippingAddressComponent","className","checked","disabled","error","onChange","onDismissError","translations","useText","hasError","handleChange","event","checkbox","jsxs","Checkbox","classes","InLineAlert","BillToShippingAddress","WithConditionals","active","autoSync","onCartSyncError","setError","useState","isVirtual","setIsVirtual","isChecked","setIsChecked","hasInitialCartData","useRef","isDisabled","hasPendingUpdates","cartSyncError","handleDismissError","useCallback","isBillToShipping","hasShippingAddress","setBillingAddress","handleCheckoutData","data","isCartEmpty","isCartVirtual","cart","shippingAddress","_a","hasBillingAddress","initialIsChecked","defaults","config","useEffect","notifyValues","pastUpdate","getLatestCheckoutUpdate","userBillToShipping","getValue","onCheckoutInit","events","onCheckoutUpdated"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as i,jsxs as k}from"@dropins/tools/preact-jsx-runtime.js"
|
|
3
|
+
import{jsx as i,jsxs as k}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/TermsAndConditions.js";import{VComponent as C,classes as D}from"@dropins/tools/lib.js";import{Skeleton as B,SkeletonRow as U,Price as h}from"@dropins/tools/components.js";/* empty css */import{W as z}from"../chunks/ConditionalWrapper.js";import{useText as _}from"@dropins/tools/i18n.js";/* empty css */import{s as G,T as I}from"../chunks/fetch-graphql.js";import{events as d}from"@dropins/tools/event-bus.js";import{g as P}from"../chunks/events.js";import"@dropins/tools/preact-compat.js";/* empty css *//* empty css */import{useState as V,useCallback as b,useEffect as x}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";const X=()=>i(B,{"data-testid":"estimate-shipping-skeleton",children:i(U,{size:"xsmall"})}),j=({label:n,price:t,priceExclTax:a,taxExcluded:o=!1,taxIncluded:c=!1})=>{const l=_({withTaxes:"Checkout.EstimateShipping.withTaxes",withoutTaxes:"Checkout.EstimateShipping.withoutTaxes"});return k("div",{className:"checkout-estimate-shipping","data-testid":"estimate-shipping",children:[i(C,{className:"checkout-estimate-shipping__label",node:n}),i(C,{className:"checkout-estimate-shipping__price",node:t}),c&&i("span",{className:D(["checkout-estimate-shipping__caption"]),"data-testid":"shipping-tax-included",children:l.withTaxes}),o&&k("span",{className:D(["checkout-estimate-shipping__caption"]),"data-testid":"shipping-tax-included-excluded",children:[a," ",l.withoutTaxes]})]})},v=z(j,X),at=({active:n=!0})=>{var T;const[t,a]=V(),o=(t==null?void 0:t.amount.value)===0,c=(T=G.config)==null?void 0:T.shoppingCartDisplaySetting.shipping,l=c===I.INCLUDING_EXCLUDING_TAX,g=c===I.INCLUDING_TAX,u=_({freeShipping:"Checkout.EstimateShipping.freeShipping",taxToBeDetermined:"Checkout.EstimateShipping.taxToBeDetermined",label:"Checkout.EstimateShipping.label",estimated:"Checkout.EstimateShipping.estimated"}),r=b(e=>{var S;const s=!e||e.isEmpty,p=!!(e!=null&&e.isVirtual);if(s||p){a(null);return}const m=(S=e.shippingAddresses)==null?void 0:S[0];if(!m)return;const E=m==null?void 0:m.selectedShippingMethod;if(!E){a(null);return}const{amount:w,amountExclTax:L,amountInclTax:M}=E;a({estimated:!1,amount:w,amountExclTax:L,amountInclTax:M})},[]),f=b(e=>{let s=null;if(e.shippingMethod){const p=e.shippingMethod;s={estimated:!0,amount:p.amount,amountExclTax:p.amountExclTax,amountInclTax:p.amountInclTax}}a(s)},[]);x(()=>{if(!n)return;const e=d.on("shipping/estimate",f,{eager:!0});return()=>{e==null||e.off()}},[n,f]),x(()=>{if(!n)return;const e=P();if(e){r(e);return}const s=d.on("checkout/initialized",r,{eager:!0});return()=>{s==null||s.off()}},[n,r]),x(()=>{if(!n)return;const e=d.on("checkout/updated",r,{eager:!1});return()=>{e==null||e.off()}},[n,r]);const y=()=>o?i("span",{"data-testid":"free-shipping",children:u.freeShipping}):g&&(t!=null&&t.amountInclTax)?i(h,{amount:t.amountInclTax.value,currency:t.amountInclTax.currency,"data-testid":"shipping"}):i(h,{amount:t==null?void 0:t.amount.value,currency:t==null?void 0:t.amount.currency,"data-testid":"shipping"}),N=()=>t!=null&&t.amountExclTax?i(h,{amount:t.amountExclTax.value,currency:t.amountExclTax.currency,"data-testid":"shipping-excluding-tax"}):i("span",{children:u.taxToBeDetermined});return i(v,{initialized:t!==void 0,label:(()=>{const e=t!=null&&t.estimated?u.estimated:u.label;return i("span",{"data-testid":"estimate-shipping-label",children:e})})(),price:y(),priceExclTax:N(),taxExcluded:l&&!o,taxIncluded:g&&!o,visible:n&&t!==null})};export{at as EstimateShipping,at as default};
|
|
4
4
|
//# sourceMappingURL=EstimateShipping.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EstimateShipping.js","sources":["/@dropins/storefront-checkout/src/components/EstimateShipping/EstimateShippingSkeleton.tsx","/@dropins/storefront-checkout/src/components/EstimateShipping/EstimateShipping.tsx","/@dropins/storefront-checkout/src/containers/EstimateShipping/EstimateShipping.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const EstimateShippingSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"estimate-shipping-skeleton\">\n <SkeletonRow size=\"xsmall\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper';\nimport '@/checkout/components/EstimateShipping/EstimateShipping.css';\nimport { EstimateShippingSkeleton } from '@/checkout/components/EstimateShipping/EstimateShippingSkeleton';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { VComponent, classes } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface EstimateShippingProps {\n label: VNode<HTMLAttributes<HTMLSpanElement>>;\n price: VNode<HTMLAttributes<HTMLSpanElement>>;\n priceExclTax?: VNode<HTMLAttributes<HTMLSpanElement>>;\n taxExcluded?: boolean;\n taxIncluded?: boolean;\n}\n\nconst EstimateShippingComponent: FunctionComponent<EstimateShippingProps> = ({\n label,\n price,\n priceExclTax,\n taxExcluded = false,\n taxIncluded = false,\n}) => {\n const translations = useText({\n withTaxes: 'Checkout.EstimateShipping.withTaxes',\n withoutTaxes: 'Checkout.EstimateShipping.withoutTaxes',\n });\n\n return (\n <div className=\"checkout-estimate-shipping\" data-testid=\"estimate-shipping\">\n <VComponent className=\"checkout-estimate-shipping__label\" node={label} />\n <VComponent className=\"checkout-estimate-shipping__price\" node={price} />\n\n {taxIncluded && (\n <span\n className={classes(['checkout-estimate-shipping__caption'])}\n data-testid=\"shipping-tax-included\"\n >\n {translations.withTaxes}\n </span>\n )}\n\n {taxExcluded && (\n <span\n className={classes(['checkout-estimate-shipping__caption'])}\n data-testid=\"shipping-tax-included-excluded\"\n >\n {priceExclTax} \n {translations.withoutTaxes}\n </span>\n )}\n </div>\n );\n};\n\nexport const EstimateShipping = WithConditionals(\n EstimateShippingComponent,\n EstimateShippingSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { EstimateShipping as EstimateShippingComponent } from '@/checkout/components';\nimport {\n Cart,\n Price as PriceModel,\n ShippingEstimate,\n TaxDisplay,\n} from '@/checkout/data/models';\nimport { getLatestCheckoutUpdate } from '@/checkout/lib';\nimport { state } from '@/checkout/lib/state';\nimport { Price } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\ninterface ShippingData {\n estimated?: boolean;\n amount: PriceModel;\n amountExclTax?: PriceModel;\n amountInclTax?: PriceModel;\n}\n\nexport interface EstimateShippingProps {\n active?: boolean;\n}\n\nexport const EstimateShipping: Container<EstimateShippingProps> = ({\n active = true,\n}) => {\n const [data, setData] = useState<ShippingData | null | undefined>();\n\n const isFreeShipping = data?.amount.value === 0;\n const shippingDisplay = state.config?.shoppingCartDisplaySetting.shipping;\n const taxExcluded = shippingDisplay === TaxDisplay.INCLUDING_EXCLUDING_TAX;\n const taxIncluded = shippingDisplay === TaxDisplay.INCLUDING_TAX;\n\n const translations = useText({\n freeShipping: 'Checkout.EstimateShipping.freeShipping',\n taxToBeDetermined: 'Checkout.EstimateShipping.taxToBeDetermined',\n label: 'Checkout.EstimateShipping.label',\n estimated: 'Checkout.EstimateShipping.estimated',\n });\n\n const handleCheckoutData = useCallback((data: Cart | null) => {\n const isEmptyCart = !data || data.isEmpty;\n const isVirtualCart = Boolean(data?.isVirtual);\n\n if (isEmptyCart || isVirtualCart) {\n setData(null);\n return;\n }\n\n const primaryAddress = data.shippingAddresses?.[0];\n\n if (!primaryAddress) {\n return;\n }\n\n const shippingMethod = primaryAddress?.selectedShippingMethod;\n\n if (!shippingMethod) {\n setData(null);\n return;\n }\n\n const { amount, amountExclTax, amountInclTax } = shippingMethod;\n setData({ estimated: false, amount, amountExclTax, amountInclTax });\n }, []);\n\n const handleShippingEstimate = useCallback((estimation: ShippingEstimate) => {\n let shippingData: ShippingData | null = null;\n\n if (estimation.shippingMethod) {\n const shippingMethod = estimation.shippingMethod;\n\n shippingData = {\n estimated: true,\n amount: shippingMethod.amount,\n amountExclTax: shippingMethod.amountExclTax,\n amountInclTax: shippingMethod.amountInclTax,\n };\n }\n\n setData(shippingData);\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onShippingEstimate = events.on(\n 'shipping/estimate',\n handleShippingEstimate,\n { eager: true }\n );\n\n return () => {\n onShippingEstimate?.off();\n };\n }, [active, handleShippingEstimate]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n handleCheckoutData,\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const renderPrice = () => {\n if (isFreeShipping) {\n return (\n <span data-testid=\"free-shipping\">{translations.freeShipping}</span>\n );\n }\n\n if (taxIncluded && data?.amountInclTax) {\n return (\n <Price\n amount={data.amountInclTax.value}\n currency={data.amountInclTax.currency}\n data-testid=\"shipping\"\n />\n );\n }\n\n return (\n <Price\n amount={data?.amount.value}\n currency={data?.amount.currency}\n data-testid=\"shipping\"\n />\n );\n };\n\n const renderPriceExclTax = () => {\n if (!data?.amountExclTax)\n return <span>{translations.taxToBeDetermined}</span>;\n\n return (\n <Price\n amount={data.amountExclTax.value}\n currency={data.amountExclTax.currency}\n data-testid=\"shipping-excluding-tax\"\n />\n );\n };\n\n const renderLabel = () => {\n const label = data?.estimated ? translations.estimated : translations.label;\n return <span data-testid=\"estimate-shipping-label\">{label}</span>;\n };\n\n return (\n <EstimateShippingComponent\n initialized={data !== undefined}\n label={renderLabel()}\n price={renderPrice()}\n priceExclTax={renderPriceExclTax()}\n taxExcluded={taxExcluded && !isFreeShipping}\n taxIncluded={taxIncluded && !isFreeShipping}\n visible={active && data !== null}\n />\n );\n};\n"],"names":["EstimateShippingSkeleton","jsx","Skeleton","SkeletonRow","EstimateShippingComponent","label","price","priceExclTax","taxExcluded","taxIncluded","translations","useText","jsxs","VComponent","classes","EstimateShipping","WithConditionals","active","data","setData","useState","isFreeShipping","shippingDisplay","_a","state","TaxDisplay","handleCheckoutData","useCallback","isEmptyCart","isVirtualCart","primaryAddress","shippingMethod","amount","amountExclTax","amountInclTax","handleShippingEstimate","estimation","shippingData","useEffect","onShippingEstimate","events","pastUpdate","getLatestCheckoutUpdate","onCheckoutInit","onCheckoutUpdated","renderPrice","Price","renderPriceExclTax"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EstimateShipping.js","sources":["/@dropins/storefront-checkout/src/components/EstimateShipping/EstimateShippingSkeleton.tsx","/@dropins/storefront-checkout/src/components/EstimateShipping/EstimateShipping.tsx","/@dropins/storefront-checkout/src/containers/EstimateShipping/EstimateShipping.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const EstimateShippingSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"estimate-shipping-skeleton\">\n <SkeletonRow size=\"xsmall\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper';\nimport '@/checkout/components/EstimateShipping/EstimateShipping.css';\nimport { EstimateShippingSkeleton } from '@/checkout/components/EstimateShipping/EstimateShippingSkeleton';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { VComponent, classes } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface EstimateShippingProps {\n label: VNode<HTMLAttributes<HTMLSpanElement>>;\n price: VNode<HTMLAttributes<HTMLSpanElement>>;\n priceExclTax?: VNode<HTMLAttributes<HTMLSpanElement>>;\n taxExcluded?: boolean;\n taxIncluded?: boolean;\n}\n\nconst EstimateShippingComponent: FunctionComponent<EstimateShippingProps> = ({\n label,\n price,\n priceExclTax,\n taxExcluded = false,\n taxIncluded = false,\n}) => {\n const translations = useText({\n withTaxes: 'Checkout.EstimateShipping.withTaxes',\n withoutTaxes: 'Checkout.EstimateShipping.withoutTaxes',\n });\n\n return (\n <div className=\"checkout-estimate-shipping\" data-testid=\"estimate-shipping\">\n <VComponent className=\"checkout-estimate-shipping__label\" node={label} />\n <VComponent className=\"checkout-estimate-shipping__price\" node={price} />\n\n {taxIncluded && (\n <span\n className={classes(['checkout-estimate-shipping__caption'])}\n data-testid=\"shipping-tax-included\"\n >\n {translations.withTaxes}\n </span>\n )}\n\n {taxExcluded && (\n <span\n className={classes(['checkout-estimate-shipping__caption'])}\n data-testid=\"shipping-tax-included-excluded\"\n >\n {priceExclTax} \n {translations.withoutTaxes}\n </span>\n )}\n </div>\n );\n};\n\nexport const EstimateShipping = WithConditionals(\n EstimateShippingComponent,\n EstimateShippingSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { EstimateShipping as EstimateShippingComponent } from '@/checkout/components';\nimport {\n Cart,\n Money as PriceModel,\n ShippingEstimate,\n TaxDisplay,\n} from '@/checkout/data/models';\nimport { getLatestCheckoutUpdate } from '@/checkout/lib';\nimport { state } from '@/checkout/lib/state';\nimport { Price } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\ninterface ShippingData {\n estimated?: boolean;\n amount: PriceModel;\n amountExclTax?: PriceModel;\n amountInclTax?: PriceModel;\n}\n\nexport interface EstimateShippingProps {\n active?: boolean;\n}\n\nexport const EstimateShipping: Container<EstimateShippingProps> = ({\n active = true,\n}) => {\n const [data, setData] = useState<ShippingData | null | undefined>();\n\n const isFreeShipping = data?.amount.value === 0;\n const shippingDisplay = state.config?.shoppingCartDisplaySetting.shipping;\n const taxExcluded = shippingDisplay === TaxDisplay.INCLUDING_EXCLUDING_TAX;\n const taxIncluded = shippingDisplay === TaxDisplay.INCLUDING_TAX;\n\n const translations = useText({\n freeShipping: 'Checkout.EstimateShipping.freeShipping',\n taxToBeDetermined: 'Checkout.EstimateShipping.taxToBeDetermined',\n label: 'Checkout.EstimateShipping.label',\n estimated: 'Checkout.EstimateShipping.estimated',\n });\n\n const handleCheckoutData = useCallback((data: Cart | null) => {\n const isEmptyCart = !data || data.isEmpty;\n const isVirtualCart = Boolean(data?.isVirtual);\n\n if (isEmptyCart || isVirtualCart) {\n setData(null);\n return;\n }\n\n const primaryAddress = data.shippingAddresses?.[0];\n\n if (!primaryAddress) {\n return;\n }\n\n const shippingMethod = primaryAddress?.selectedShippingMethod;\n\n if (!shippingMethod) {\n setData(null);\n return;\n }\n\n const { amount, amountExclTax, amountInclTax } = shippingMethod;\n setData({ estimated: false, amount, amountExclTax, amountInclTax });\n }, []);\n\n const handleShippingEstimate = useCallback((estimation: ShippingEstimate) => {\n let shippingData: ShippingData | null = null;\n\n if (estimation.shippingMethod) {\n const shippingMethod = estimation.shippingMethod;\n\n shippingData = {\n estimated: true,\n amount: shippingMethod.amount,\n amountExclTax: shippingMethod.amountExclTax,\n amountInclTax: shippingMethod.amountInclTax,\n };\n }\n\n setData(shippingData);\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onShippingEstimate = events.on(\n 'shipping/estimate',\n handleShippingEstimate,\n { eager: true }\n );\n\n return () => {\n onShippingEstimate?.off();\n };\n }, [active, handleShippingEstimate]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n handleCheckoutData,\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const renderPrice = () => {\n if (isFreeShipping) {\n return (\n <span data-testid=\"free-shipping\">{translations.freeShipping}</span>\n );\n }\n\n if (taxIncluded && data?.amountInclTax) {\n return (\n <Price\n amount={data.amountInclTax.value}\n currency={data.amountInclTax.currency}\n data-testid=\"shipping\"\n />\n );\n }\n\n return (\n <Price\n amount={data?.amount.value}\n currency={data?.amount.currency}\n data-testid=\"shipping\"\n />\n );\n };\n\n const renderPriceExclTax = () => {\n if (!data?.amountExclTax)\n return <span>{translations.taxToBeDetermined}</span>;\n\n return (\n <Price\n amount={data.amountExclTax.value}\n currency={data.amountExclTax.currency}\n data-testid=\"shipping-excluding-tax\"\n />\n );\n };\n\n const renderLabel = () => {\n const label = data?.estimated ? translations.estimated : translations.label;\n return <span data-testid=\"estimate-shipping-label\">{label}</span>;\n };\n\n return (\n <EstimateShippingComponent\n initialized={data !== undefined}\n label={renderLabel()}\n price={renderPrice()}\n priceExclTax={renderPriceExclTax()}\n taxExcluded={taxExcluded && !isFreeShipping}\n taxIncluded={taxIncluded && !isFreeShipping}\n visible={active && data !== null}\n />\n );\n};\n"],"names":["EstimateShippingSkeleton","jsx","Skeleton","SkeletonRow","EstimateShippingComponent","label","price","priceExclTax","taxExcluded","taxIncluded","translations","useText","jsxs","VComponent","classes","EstimateShipping","WithConditionals","active","data","setData","useState","isFreeShipping","shippingDisplay","_a","state","TaxDisplay","handleCheckoutData","useCallback","isEmptyCart","isVirtualCart","primaryAddress","shippingMethod","amount","amountExclTax","amountInclTax","handleShippingEstimate","estimation","shippingData","useEffect","onShippingEstimate","events","pastUpdate","getLatestCheckoutUpdate","onCheckoutInit","onCheckoutUpdated","renderPrice","Price","renderPriceExclTax"],"mappings":"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"}
|
package/containers/LoginForm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as r,jsxs as u,Fragment as le}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/
|
|
3
|
+
import{jsx as r,jsxs as u,Fragment as le}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/fetch-graphql.js";import{VComponent as G,classes as se,Slot as J}from"@dropins/tools/lib.js";import{a as ce,g as me}from"../chunks/events.js";import{n as H,g as K}from"../chunks/values.js";import{events as M}from"@dropins/tools/event-bus.js";import{i as ue,s as he,g as de}from"../chunks/setGuestEmailOnCart.js";import{Field as ge,Input as fe,Skeleton as pe,SkeletonRow as Q}from"@dropins/tools/components.js";import{useText as I}from"@dropins/tools/i18n.js";import"../chunks/TermsAndConditions.js";/* empty css */import{W as ke}from"../chunks/ConditionalWrapper.js";/* empty css */import"@dropins/tools/preact-compat.js";/* empty css *//* empty css */import{useState as k,useRef as Le,useCallback as d,useEffect as $,useMemo as B}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";import"../fragments.js";import"../chunks/synchronizeCheckout.js";import"../chunks/transform-shipping-methods.js";const ve={EMAIL:/^[a-z0-9,!#$%&'*+/=?^_`{|}~-]+(\.[a-z0-9,!#$%&'*+/=?^_`{|}~-]+)*@([a-z0-9-]+\.)+[a-z]{2,}$/i},D=o=>ve.EMAIL.test(o),Fe=({value:o,error:n,hint:a,onChange:g,onBlur:L,onInvalid:c})=>{const l=I({LoginFormLabel:"Checkout.LoginForm.ariaLabel",LoginFormFloatingLabel:"Checkout.LoginForm.floatingLabel",LoginFormPlaceholder:"Checkout.LoginForm.placeholder"});return r(ge,{error:n,hint:a,children:r(fe,{"aria-label":l.LoginFormLabel,"aria-required":!0,autocomplete:"email",floatingLabel:l.LoginFormFloatingLabel,id:"customer-email",name:"customer-email",placeholder:l.LoginFormPlaceholder,required:!0,type:"email",value:o,onBlur:L,onChange:g,onInvalid:c})})},_e=({onClick:o})=>{const n=I({account:"Checkout.LoginForm.account",signIn:"Checkout.LoginForm.signIn"});return u("div",{className:"checkout-login-form__sign-in",children:[n.account,r("a",{className:"checkout-login-form__link","data-testid":"sign-in-link",href:"#",rel:"noreferrer",target:"_blank",onClick:a=>{a.preventDefault(),o(a)},children:n.signIn})]})},Ee=()=>u(pe,{"data-testid":"login-form-skeleton",children:[r(Q,{fullWidth:!0,variant:"heading"}),r(Q,{fullWidth:!0,size:"medium"})]}),be=({className:o,customer:n,email:a,error:g,headingContent:L,hint:c,name:l,onEmailBlur:f,onEmailChange:m,onEmailInvalid:s,title:F,...A})=>u("div",{className:"checkout-login-form","data-testid":"checkout-login-form",children:[u("div",{className:"checkout-login-form__heading",children:[F&&r(G,{className:"checkout-login-form__title",node:F}),L&&r(G,{className:"checkout-login-form__heading-label",node:L})]}),n?u("div",{className:"checkout-login-form__customer-details",children:[r("div",{className:"checkout-login-form__customer-name",children:`${n.firstName} ${n.lastName}`}),r("div",{className:"checkout-login-form__customer-email",children:n.email})]}):r("div",{className:"checkout-login-form__content",children:u("form",{...A,noValidate:!0,className:se(["dropin-login-form__form",o]),name:l,children:[r("button",{disabled:!0,"aria-hidden":"true",style:"display: none",type:"submit"}),r(Fe,{error:g,hint:c,value:a,onBlur:f,onChange:m,onInvalid:s})]})})]}),Ce=ke(be,Ee),Ne=({onClick:o})=>{const n=I({switch:"Checkout.LoginForm.switch",signOut:"Checkout.LoginForm.signOut"});return u("p",{className:"checkout-login-form__sign-out",children:[n.switch,r("a",{className:"checkout-login-form__link",href:"#",rel:"noreferrer",target:"_blank",onClick:a=>{a.preventDefault(),o==null||o(a)},children:n.signOut})]})},Ie=1e3,Qe=({active:o=!0,autoSync:n=!0,displayHeadingContent:a=!0,displayTitle:g=!0,initialData:L,onCartSyncError:c,onSignInClick:l,onSignOutClick:f,onValidationError:m,slots:s,...F})=>{const[A,X]=k(null),[Y,y]=k(""),[Z,p]=k(""),[z,S]=k(!1),[w,_]=k(!0),[ee,V]=k(!1),h=Le(null),{alreadyHaveAccountHint:W,cartSyncError:P,defaultTitle:j,fasterCheckoutHint:q,invalidEmailError:E,missingEmailError:b,signInLabel:O}=I({alreadyHaveAccountHint:"Checkout.LoginForm.emailExists.alreadyHaveAccount",cartSyncError:"Checkout.LoginForm.cartSyncError",defaultTitle:"Checkout.LoginForm.title",fasterCheckoutHint:"Checkout.LoginForm.emailExists.forFasterCheckout",invalidEmailError:"Checkout.LoginForm.invalidEmailError",missingEmailError:"Checkout.LoginForm.missingEmailError",signInLabel:"Checkout.LoginForm.emailExists.signInButton"}),C=d(e=>{!D(e)||e===ce()||(ue(e).then(t=>{_(t)}).catch(t=>{console.error(t),_(!0)}),n&&he(e).catch(t=>{c==null||c({email:e,error:t}),c||p(P)}))},[n,c,P]),te=d(e=>{const i=e.target.value;y(i),_(!0),p(""),h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{C(i),H({email:i}),h.current=null},Ie)},[C]),ie=d(e=>{const t=e.target,i=t.value.trim();if(D(i)){if(p(""),t.setCustomValidity(""),!h.current)return;clearTimeout(h.current),h.current=null,C(i),H({email:i});return}const U=i===""?"missing":"invalid",T=U==="missing"?b:E;if(m){m({email:i,message:T,type:U});return}p(T),t.setCustomValidity(T)},[E,b,m,C]),re=d(e=>{const t=e.target,i=t.validity,x=i.valueMissing?b:E;if(!m){p(x);return}m({email:t.value,message:x,type:i.valueMissing?"missing":"invalid"})},[b,E,m]),N=d(()=>{const e=K("email")??"",t=D(e);l==null||l(t?e:"")},[l]),R=d(()=>{f==null||f()},[f]),v=d(e=>{const t=K("email")??"",i=(e==null?void 0:e.email)??"";i!==t&&(y(i),p(""),_(!0),H({email:i}))},[]);$(()=>{if(!o)return;const e=M.on("authenticated",t=>{S(t),de().then(i=>{X(i)}).catch(console.error)},{eager:!0});return()=>{e==null||e.off()}},[o]),$(()=>{if(!o)return;const e=me();if(e){V(!0);const i=e.email??"";i&&y(i),v(e);return}const t=M.on("checkout/initialized",i=>{V(!0),v(i)},{eager:!0});return()=>{t==null||t.off()}},[o,v]),$(()=>{if(!o)return;const e=M.on("checkout/updated",v,{eager:!1});return()=>{e==null||e.off()}},[o,v]);const oe=B(()=>{if(g)return r(J,{name:"checkout-login-form-title",slot:s==null?void 0:s.Title,children:r("h2",{children:j})})},[g,s,j]),ne=B(()=>{if(a)return r(J,{context:{authenticated:z},name:"checkout-login-form-heading-label",slot:s==null?void 0:s.Heading,children:z?r(Ne,{onClick:R}):r(_e,{onClick:N})})},[a,z,s,N,R]),ae=B(()=>w?"":u(le,{children:[W," ",r("a",{href:"#",onClick:N,children:O})," ",q]}),[w,W,O,q,N]);return r(Ce,{...F,customer:A,email:Y,error:Z,headingContent:ne,hint:ae,initialized:ee,title:oe,visible:o,onEmailBlur:ie,onEmailChange:te,onEmailInvalid:re})};export{Qe as LoginForm,Qe as default};
|
|
4
4
|
//# sourceMappingURL=LoginForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.js","sources":["/@dropins/storefront-checkout/src/lib/validation.ts","/@dropins/storefront-checkout/src/components/LoginForm/Email.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignIn.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginFormSkeleton.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginForm.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignOut.tsx","/@dropins/storefront-checkout/src/containers/LoginForm/LoginForm.tsx"],"sourcesContent":["export const validationPatterns = {\n EMAIL:\n /^[a-z0-9,!#$%&'*+/=?^_`{|}~-]+(\\.[a-z0-9,!#$%&'*+/=?^_`{|}~-]+)*@([a-z0-9-]+\\.)+[a-z]{2,}$/i,\n};\n\nexport const validateEmail = (email: string): boolean => {\n return validationPatterns.EMAIL.test(email);\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Field, Input } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginEmailProps extends HTMLAttributes<HTMLInputElement> {\n value: string;\n error: string;\n hint: string;\n onChange: (event: Event) => void;\n onBlur: (event: Event) => void;\n onInvalid: (event: Event) => void;\n}\n\nexport const Email: FunctionComponent<LoginEmailProps> = ({\n value,\n error,\n hint,\n onChange,\n onBlur,\n onInvalid,\n}) => {\n const translations = useText({\n LoginFormLabel: 'Checkout.LoginForm.ariaLabel',\n LoginFormFloatingLabel: 'Checkout.LoginForm.floatingLabel',\n LoginFormPlaceholder: 'Checkout.LoginForm.placeholder',\n });\n\n return (\n <Field error={error} hint={hint}>\n <Input\n aria-label={translations.LoginFormLabel}\n aria-required={true}\n autocomplete=\"email\"\n floatingLabel={translations.LoginFormFloatingLabel}\n id=\"customer-email\"\n name=\"customer-email\"\n placeholder={translations.LoginFormPlaceholder}\n required={true}\n type=\"email\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onInvalid={onInvalid}\n />\n </Field>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignInProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignIn: FunctionComponent<SignInProps> = ({ onClick }) => {\n const translations = useText({\n account: 'Checkout.LoginForm.account',\n signIn: 'Checkout.LoginForm.signIn'\n });\n\n return (\n <div className=\"checkout-login-form__sign-in\">\n {translations.account}\n\n <a\n className=\"checkout-login-form__link\"\n data-testid=\"sign-in-link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick(event);\n }}\n >\n {translations.signIn}\n </a>\n </div>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const LoginFormSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"login-form-skeleton\">\n <SkeletonRow fullWidth={true} variant=\"heading\" />\n <SkeletonRow fullWidth={true} size=\"medium\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Email } from '@/checkout/components';\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport '@/checkout/components/LoginForm/LoginForm.css';\nimport { LoginFormSkeleton } from '@/checkout/components/LoginForm/LoginFormSkeleton';\nimport { Customer } from '@/checkout/data/models';\nimport { classes, VComponent } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginFormProps\n extends Omit<HTMLAttributes<HTMLFormElement>, 'title'> {\n customer: Customer | null;\n email: string;\n error: string;\n headingContent?: VNode;\n hint: string | VNode;\n onEmailBlur: (event: Event) => void;\n onEmailChange: (event: Event) => void;\n onEmailInvalid: (event: Event) => void;\n title?: VNode;\n}\n\nconst LoginFormComponent: FunctionComponent<LoginFormProps> = ({\n className,\n customer,\n email,\n error,\n headingContent,\n hint,\n name,\n onEmailBlur,\n onEmailChange,\n onEmailInvalid,\n title,\n ...props\n}) => {\n return (\n <div className=\"checkout-login-form\" data-testid=\"checkout-login-form\">\n <div className=\"checkout-login-form__heading\">\n {title && (\n <VComponent className=\"checkout-login-form__title\" node={title} />\n )}\n\n {headingContent && (\n <VComponent\n className=\"checkout-login-form__heading-label\"\n node={headingContent}\n />\n )}\n </div>\n\n {customer ? (\n <div className=\"checkout-login-form__customer-details\">\n <div className=\"checkout-login-form__customer-name\">\n {`${customer.firstName} ${customer.lastName}`}\n </div>\n\n <div className=\"checkout-login-form__customer-email\">\n {customer.email}\n </div>\n </div>\n ) : (\n <div className=\"checkout-login-form__content\">\n <form\n {...props}\n noValidate\n className={classes(['dropin-login-form__form', className])}\n name={name}\n >\n {/* Prevent 'Enter' key press from submitting this form. */}\n <button\n disabled\n aria-hidden=\"true\"\n style=\"display: none\"\n type=\"submit\"\n />\n <Email\n error={error}\n hint={hint as any}\n value={email}\n onBlur={onEmailBlur}\n onChange={onEmailChange}\n onInvalid={onEmailInvalid}\n />\n </form>\n </div>\n )}\n </div>\n );\n};\n\nexport const LoginForm = WithConditionals(\n LoginFormComponent,\n LoginFormSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignOutProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignOut: FunctionComponent<SignOutProps> = ({ onClick }) => {\n const translations = useText({\n switch: 'Checkout.LoginForm.switch',\n signOut: 'Checkout.LoginForm.signOut'\n });\n\n return (\n <p className=\"checkout-login-form__sign-out\">\n {translations.switch}\n\n <a\n className=\"checkout-login-form__link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick?.(event);\n }}\n >\n {translations.signOut}\n </a>\n </p>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n getCustomer,\n isEmailAvailable,\n setGuestEmailOnCart,\n} from '@/checkout/api';\nimport {\n LoginForm as LoginFormComponent,\n SignIn,\n SignOut,\n} from '@/checkout/components/LoginForm';\nimport { Cart, Customer } from '@/checkout/data/models';\nimport {\n getCartEmail,\n getLatestCheckoutUpdate,\n getValue,\n notifyValues,\n validateEmail,\n} from '@/checkout/lib';\nimport { TitleProps } from '@/checkout/types/TitleProps';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'preact/hooks';\n\ninterface ValidationError {\n email: string;\n message: string;\n type: 'missing' | 'invalid';\n}\n\ninterface CartSyncError {\n email: string;\n error: Error;\n}\n\nexport interface LoginFormProps\n extends HTMLAttributes<HTMLFormElement>,\n TitleProps {\n active?: boolean;\n autoSync?: boolean;\n displayHeadingContent?: boolean;\n onSignInClick?: (email: string) => void;\n onSignOutClick?: () => void;\n onCartSyncError?: (error: CartSyncError) => void;\n onValidationError?: (error: ValidationError) => void;\n slots?: {\n Heading?: SlotProps<{\n authenticated: boolean;\n }>;\n } & TitleProps['slots'];\n}\n\nconst DEBOUNCE_TIME = 1000;\n\nexport const LoginForm: Container<LoginFormProps> = ({\n active = true,\n autoSync = true,\n displayHeadingContent = true,\n displayTitle = true,\n initialData,\n onCartSyncError,\n onSignInClick,\n onSignOutClick,\n onValidationError,\n slots,\n ...props\n}) => {\n const [customer, setCustomer] = useState<Customer | null>(null);\n const [email, setEmail] = useState<string>('');\n const [error, setError] = useState<string>('');\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isAvailable, setIsAvailable] = useState<boolean>(true);\n const [isInitialized, setIsInitialized] = useState<boolean>(false);\n\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const {\n alreadyHaveAccountHint,\n cartSyncError,\n defaultTitle,\n fasterCheckoutHint,\n invalidEmailError,\n missingEmailError,\n signInLabel,\n } = useText({\n alreadyHaveAccountHint: 'Checkout.LoginForm.emailExists.alreadyHaveAccount',\n cartSyncError: 'Checkout.LoginForm.cartSyncError',\n defaultTitle: 'Checkout.LoginForm.title',\n fasterCheckoutHint: 'Checkout.LoginForm.emailExists.forFasterCheckout',\n invalidEmailError: 'Checkout.LoginForm.invalidEmailError',\n missingEmailError: 'Checkout.LoginForm.missingEmailError',\n signInLabel: 'Checkout.LoginForm.emailExists.signInButton',\n });\n\n const setEmailAndCheckAvailability = useCallback(\n (email: string) => {\n if (!validateEmail(email) || email === getCartEmail()) return;\n\n isEmailAvailable(email)\n .then((availability) => {\n setIsAvailable(availability);\n })\n .catch((error) => {\n console.error(error);\n setIsAvailable(true);\n });\n\n if (!autoSync) return;\n\n setGuestEmailOnCart(email).catch((error) => {\n onCartSyncError?.({ email, error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [autoSync, onCartSyncError, cartSyncError]\n );\n\n const handleChange = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value;\n\n setEmail(email);\n setIsAvailable(true);\n setError('');\n\n if (debounceTimer.current) {\n clearTimeout(debounceTimer.current);\n }\n\n debounceTimer.current = setTimeout(() => {\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n debounceTimer.current = null;\n }, DEBOUNCE_TIME);\n },\n [setEmailAndCheckAvailability]\n );\n\n const handleBlur = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value.trim();\n const isValid = validateEmail(email);\n\n if (isValid) {\n setError('');\n target.setCustomValidity('');\n\n if (!debounceTimer.current) return;\n\n clearTimeout(debounceTimer.current);\n debounceTimer.current = null;\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n return;\n }\n\n const type = email === '' ? 'missing' : 'invalid';\n const message =\n type === 'missing' ? missingEmailError : invalidEmailError;\n\n if (onValidationError) {\n onValidationError({ email, message, type });\n return;\n }\n\n setError(message);\n target.setCustomValidity(message);\n },\n [\n invalidEmailError,\n missingEmailError,\n onValidationError,\n setEmailAndCheckAvailability,\n ]\n );\n\n const handleInvalid = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const validity = target.validity;\n\n const message = validity.valueMissing\n ? missingEmailError\n : invalidEmailError;\n\n if (!onValidationError) {\n setError(message);\n return;\n }\n\n onValidationError({\n email: target.value,\n message,\n type: validity.valueMissing ? 'missing' : 'invalid',\n });\n },\n [missingEmailError, invalidEmailError, onValidationError]\n );\n\n const handleSignIn = useCallback(() => {\n const email = getValue('email') ?? '';\n const isValid = validateEmail(email);\n onSignInClick?.(isValid ? email : '');\n }, [onSignInClick]);\n\n const handleSignOut = useCallback(() => {\n onSignOutClick?.();\n }, [onSignOutClick]);\n\n const handleCheckoutData = useCallback((data: Cart | null) => {\n const prevEmail = getValue('email') ?? '';\n const email = data?.email ?? '';\n\n if (email !== prevEmail) {\n setEmail(email);\n setError('');\n setIsAvailable(true);\n notifyValues({ email });\n }\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onAuthenticated = events.on(\n 'authenticated',\n (authenticated) => {\n setIsAuthenticated(authenticated);\n\n getCustomer()\n .then((customer) => {\n setCustomer(customer);\n })\n .catch(console.error);\n },\n { eager: true }\n );\n\n return () => {\n onAuthenticated?.off();\n };\n }, [active]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore local state from checkout data\n const checkoutEmail = pastUpdate.email ?? '';\n if (checkoutEmail) {\n setEmail(checkoutEmail);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const titleContent = useMemo(() => {\n if (!displayTitle) return undefined;\n\n return (\n <Slot name=\"checkout-login-form-title\" slot={slots?.Title}>\n <h2>{defaultTitle}</h2>\n </Slot>\n );\n }, [displayTitle, slots, defaultTitle]);\n\n const headingContent = useMemo(() => {\n if (!displayHeadingContent) return undefined;\n\n return (\n <Slot\n context={{ authenticated: isAuthenticated }}\n name=\"checkout-login-form-heading-label\"\n slot={slots?.Heading}\n >\n {isAuthenticated ? (\n <SignOut onClick={handleSignOut} />\n ) : (\n <SignIn onClick={handleSignIn} />\n )}\n </Slot>\n );\n }, [\n displayHeadingContent,\n isAuthenticated,\n slots,\n handleSignIn,\n handleSignOut,\n ]);\n\n const hintContent = useMemo(() => {\n if (isAvailable) return '';\n\n return (\n <>\n {alreadyHaveAccountHint}{' '}\n <a href=\"#\" onClick={handleSignIn}>\n {signInLabel}\n </a>{' '}\n {fasterCheckoutHint}\n </>\n );\n }, [\n isAvailable,\n alreadyHaveAccountHint,\n signInLabel,\n fasterCheckoutHint,\n handleSignIn,\n ]);\n\n return (\n <LoginFormComponent\n {...props}\n customer={customer}\n email={email}\n error={error}\n headingContent={headingContent}\n hint={hintContent}\n initialized={isInitialized}\n title={titleContent}\n visible={active}\n onEmailBlur={handleBlur}\n onEmailChange={handleChange}\n onEmailInvalid={handleInvalid}\n />\n );\n};\n"],"names":["validationPatterns","validateEmail","email","Email","value","error","hint","onChange","onBlur","onInvalid","translations","useText","jsx","Field","Input","SignIn","onClick","jsxs","event","LoginFormSkeleton","Skeleton","SkeletonRow","LoginFormComponent","className","customer","headingContent","name","onEmailBlur","onEmailChange","onEmailInvalid","title","props","VComponent","classes","LoginForm","WithConditionals","SignOut","DEBOUNCE_TIME","active","autoSync","displayHeadingContent","displayTitle","initialData","onCartSyncError","onSignInClick","onSignOutClick","onValidationError","slots","setCustomer","useState","setEmail","setError","isAuthenticated","setIsAuthenticated","isAvailable","setIsAvailable","isInitialized","setIsInitialized","debounceTimer","useRef","alreadyHaveAccountHint","cartSyncError","defaultTitle","fasterCheckoutHint","invalidEmailError","missingEmailError","signInLabel","setEmailAndCheckAvailability","useCallback","getCartEmail","isEmailAvailable","availability","setGuestEmailOnCart","handleChange","notifyValues","handleBlur","target","type","message","handleInvalid","validity","handleSignIn","getValue","isValid","handleSignOut","handleCheckoutData","data","prevEmail","useEffect","onAuthenticated","events","authenticated","getCustomer","pastUpdate","getLatestCheckoutUpdate","checkoutEmail","onCheckoutInit","onCheckoutUpdated","titleContent","useMemo","Slot","hintContent","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LoginForm.js","sources":["/@dropins/storefront-checkout/src/lib/validation.ts","/@dropins/storefront-checkout/src/components/LoginForm/Email.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignIn.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginFormSkeleton.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginForm.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignOut.tsx","/@dropins/storefront-checkout/src/containers/LoginForm/LoginForm.tsx"],"sourcesContent":["export const validationPatterns = {\n EMAIL:\n /^[a-z0-9,!#$%&'*+/=?^_`{|}~-]+(\\.[a-z0-9,!#$%&'*+/=?^_`{|}~-]+)*@([a-z0-9-]+\\.)+[a-z]{2,}$/i,\n};\n\nexport const validateEmail = (email: string): boolean => {\n return validationPatterns.EMAIL.test(email);\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Field, Input } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginEmailProps extends HTMLAttributes<HTMLInputElement> {\n value: string;\n error: string;\n hint: string;\n onChange: (event: Event) => void;\n onBlur: (event: Event) => void;\n onInvalid: (event: Event) => void;\n}\n\nexport const Email: FunctionComponent<LoginEmailProps> = ({\n value,\n error,\n hint,\n onChange,\n onBlur,\n onInvalid,\n}) => {\n const translations = useText({\n LoginFormLabel: 'Checkout.LoginForm.ariaLabel',\n LoginFormFloatingLabel: 'Checkout.LoginForm.floatingLabel',\n LoginFormPlaceholder: 'Checkout.LoginForm.placeholder',\n });\n\n return (\n <Field error={error} hint={hint}>\n <Input\n aria-label={translations.LoginFormLabel}\n aria-required={true}\n autocomplete=\"email\"\n floatingLabel={translations.LoginFormFloatingLabel}\n id=\"customer-email\"\n name=\"customer-email\"\n placeholder={translations.LoginFormPlaceholder}\n required={true}\n type=\"email\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onInvalid={onInvalid}\n />\n </Field>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignInProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignIn: FunctionComponent<SignInProps> = ({ onClick }) => {\n const translations = useText({\n account: 'Checkout.LoginForm.account',\n signIn: 'Checkout.LoginForm.signIn'\n });\n\n return (\n <div className=\"checkout-login-form__sign-in\">\n {translations.account}\n\n <a\n className=\"checkout-login-form__link\"\n data-testid=\"sign-in-link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick(event);\n }}\n >\n {translations.signIn}\n </a>\n </div>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const LoginFormSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"login-form-skeleton\">\n <SkeletonRow fullWidth={true} variant=\"heading\" />\n <SkeletonRow fullWidth={true} size=\"medium\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Email } from '@/checkout/components';\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport '@/checkout/components/LoginForm/LoginForm.css';\nimport { LoginFormSkeleton } from '@/checkout/components/LoginForm/LoginFormSkeleton';\nimport { Customer } from '@/checkout/data/models';\nimport { classes, VComponent } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginFormProps\n extends Omit<HTMLAttributes<HTMLFormElement>, 'title'> {\n customer: Customer | null;\n email: string;\n error: string;\n headingContent?: VNode;\n hint: string | VNode;\n onEmailBlur: (event: Event) => void;\n onEmailChange: (event: Event) => void;\n onEmailInvalid: (event: Event) => void;\n title?: VNode;\n}\n\nconst LoginFormComponent: FunctionComponent<LoginFormProps> = ({\n className,\n customer,\n email,\n error,\n headingContent,\n hint,\n name,\n onEmailBlur,\n onEmailChange,\n onEmailInvalid,\n title,\n ...props\n}) => {\n return (\n <div className=\"checkout-login-form\" data-testid=\"checkout-login-form\">\n <div className=\"checkout-login-form__heading\">\n {title && (\n <VComponent className=\"checkout-login-form__title\" node={title} />\n )}\n\n {headingContent && (\n <VComponent\n className=\"checkout-login-form__heading-label\"\n node={headingContent}\n />\n )}\n </div>\n\n {customer ? (\n <div className=\"checkout-login-form__customer-details\">\n <div className=\"checkout-login-form__customer-name\">\n {`${customer.firstName} ${customer.lastName}`}\n </div>\n\n <div className=\"checkout-login-form__customer-email\">\n {customer.email}\n </div>\n </div>\n ) : (\n <div className=\"checkout-login-form__content\">\n <form\n {...props}\n noValidate\n className={classes(['dropin-login-form__form', className])}\n name={name}\n >\n {/* Prevent 'Enter' key press from submitting this form. */}\n <button\n disabled\n aria-hidden=\"true\"\n style=\"display: none\"\n type=\"submit\"\n />\n <Email\n error={error}\n hint={hint as any}\n value={email}\n onBlur={onEmailBlur}\n onChange={onEmailChange}\n onInvalid={onEmailInvalid}\n />\n </form>\n </div>\n )}\n </div>\n );\n};\n\nexport const LoginForm = WithConditionals(\n LoginFormComponent,\n LoginFormSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignOutProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignOut: FunctionComponent<SignOutProps> = ({ onClick }) => {\n const translations = useText({\n switch: 'Checkout.LoginForm.switch',\n signOut: 'Checkout.LoginForm.signOut'\n });\n\n return (\n <p className=\"checkout-login-form__sign-out\">\n {translations.switch}\n\n <a\n className=\"checkout-login-form__link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick?.(event);\n }}\n >\n {translations.signOut}\n </a>\n </p>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n getCustomer,\n isEmailAvailable,\n setGuestEmailOnCart,\n} from '@/checkout/api';\nimport {\n LoginForm as LoginFormComponent,\n SignIn,\n SignOut,\n} from '@/checkout/components/LoginForm';\nimport { Cart, Customer } from '@/checkout/data/models';\nimport {\n getCartEmail,\n getLatestCheckoutUpdate,\n getValue,\n notifyValues,\n validateEmail,\n} from '@/checkout/lib';\nimport { TitleProps } from '@/checkout/types';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'preact/hooks';\n\ninterface ValidationError {\n email: string;\n message: string;\n type: 'missing' | 'invalid';\n}\n\ninterface CartSyncError {\n email: string;\n error: Error;\n}\n\nexport interface LoginFormProps\n extends HTMLAttributes<HTMLFormElement>,\n TitleProps {\n active?: boolean;\n autoSync?: boolean;\n displayHeadingContent?: boolean;\n onSignInClick?: (email: string) => void;\n onSignOutClick?: () => void;\n onCartSyncError?: (error: CartSyncError) => void;\n onValidationError?: (error: ValidationError) => void;\n slots?: {\n Heading?: SlotProps<{\n authenticated: boolean;\n }>;\n } & TitleProps['slots'];\n}\n\nconst DEBOUNCE_TIME = 1000;\n\nexport const LoginForm: Container<LoginFormProps> = ({\n active = true,\n autoSync = true,\n displayHeadingContent = true,\n displayTitle = true,\n initialData,\n onCartSyncError,\n onSignInClick,\n onSignOutClick,\n onValidationError,\n slots,\n ...props\n}) => {\n const [customer, setCustomer] = useState<Customer | null>(null);\n const [email, setEmail] = useState<string>('');\n const [error, setError] = useState<string>('');\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isAvailable, setIsAvailable] = useState<boolean>(true);\n const [isInitialized, setIsInitialized] = useState<boolean>(false);\n\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const {\n alreadyHaveAccountHint,\n cartSyncError,\n defaultTitle,\n fasterCheckoutHint,\n invalidEmailError,\n missingEmailError,\n signInLabel,\n } = useText({\n alreadyHaveAccountHint: 'Checkout.LoginForm.emailExists.alreadyHaveAccount',\n cartSyncError: 'Checkout.LoginForm.cartSyncError',\n defaultTitle: 'Checkout.LoginForm.title',\n fasterCheckoutHint: 'Checkout.LoginForm.emailExists.forFasterCheckout',\n invalidEmailError: 'Checkout.LoginForm.invalidEmailError',\n missingEmailError: 'Checkout.LoginForm.missingEmailError',\n signInLabel: 'Checkout.LoginForm.emailExists.signInButton',\n });\n\n const setEmailAndCheckAvailability = useCallback(\n (email: string) => {\n if (!validateEmail(email) || email === getCartEmail()) return;\n\n isEmailAvailable(email)\n .then((availability) => {\n setIsAvailable(availability);\n })\n .catch((error) => {\n console.error(error);\n setIsAvailable(true);\n });\n\n if (!autoSync) return;\n\n setGuestEmailOnCart(email).catch((error) => {\n onCartSyncError?.({ email, error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [autoSync, onCartSyncError, cartSyncError]\n );\n\n const handleChange = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value;\n\n setEmail(email);\n setIsAvailable(true);\n setError('');\n\n if (debounceTimer.current) {\n clearTimeout(debounceTimer.current);\n }\n\n debounceTimer.current = setTimeout(() => {\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n debounceTimer.current = null;\n }, DEBOUNCE_TIME);\n },\n [setEmailAndCheckAvailability]\n );\n\n const handleBlur = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value.trim();\n const isValid = validateEmail(email);\n\n if (isValid) {\n setError('');\n target.setCustomValidity('');\n\n if (!debounceTimer.current) return;\n\n clearTimeout(debounceTimer.current);\n debounceTimer.current = null;\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n return;\n }\n\n const type = email === '' ? 'missing' : 'invalid';\n const message =\n type === 'missing' ? missingEmailError : invalidEmailError;\n\n if (onValidationError) {\n onValidationError({ email, message, type });\n return;\n }\n\n setError(message);\n target.setCustomValidity(message);\n },\n [\n invalidEmailError,\n missingEmailError,\n onValidationError,\n setEmailAndCheckAvailability,\n ]\n );\n\n const handleInvalid = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const validity = target.validity;\n\n const message = validity.valueMissing\n ? missingEmailError\n : invalidEmailError;\n\n if (!onValidationError) {\n setError(message);\n return;\n }\n\n onValidationError({\n email: target.value,\n message,\n type: validity.valueMissing ? 'missing' : 'invalid',\n });\n },\n [missingEmailError, invalidEmailError, onValidationError]\n );\n\n const handleSignIn = useCallback(() => {\n const email = getValue('email') ?? '';\n const isValid = validateEmail(email);\n onSignInClick?.(isValid ? email : '');\n }, [onSignInClick]);\n\n const handleSignOut = useCallback(() => {\n onSignOutClick?.();\n }, [onSignOutClick]);\n\n const handleCheckoutData = useCallback((data: Cart | null) => {\n const prevEmail = getValue('email') ?? '';\n const email = data?.email ?? '';\n\n if (email !== prevEmail) {\n setEmail(email);\n setError('');\n setIsAvailable(true);\n notifyValues({ email });\n }\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onAuthenticated = events.on(\n 'authenticated',\n (authenticated) => {\n setIsAuthenticated(authenticated);\n\n getCustomer()\n .then((customer) => {\n setCustomer(customer);\n })\n .catch(console.error);\n },\n { eager: true }\n );\n\n return () => {\n onAuthenticated?.off();\n };\n }, [active]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore local state from checkout data\n const checkoutEmail = pastUpdate.email ?? '';\n if (checkoutEmail) {\n setEmail(checkoutEmail);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const titleContent = useMemo(() => {\n if (!displayTitle) return undefined;\n\n return (\n <Slot name=\"checkout-login-form-title\" slot={slots?.Title}>\n <h2>{defaultTitle}</h2>\n </Slot>\n );\n }, [displayTitle, slots, defaultTitle]);\n\n const headingContent = useMemo(() => {\n if (!displayHeadingContent) return undefined;\n\n return (\n <Slot\n context={{ authenticated: isAuthenticated }}\n name=\"checkout-login-form-heading-label\"\n slot={slots?.Heading}\n >\n {isAuthenticated ? (\n <SignOut onClick={handleSignOut} />\n ) : (\n <SignIn onClick={handleSignIn} />\n )}\n </Slot>\n );\n }, [\n displayHeadingContent,\n isAuthenticated,\n slots,\n handleSignIn,\n handleSignOut,\n ]);\n\n const hintContent = useMemo(() => {\n if (isAvailable) return '';\n\n return (\n <>\n {alreadyHaveAccountHint}{' '}\n <a href=\"#\" onClick={handleSignIn}>\n {signInLabel}\n </a>{' '}\n {fasterCheckoutHint}\n </>\n );\n }, [\n isAvailable,\n alreadyHaveAccountHint,\n signInLabel,\n fasterCheckoutHint,\n handleSignIn,\n ]);\n\n return (\n <LoginFormComponent\n {...props}\n customer={customer}\n email={email}\n error={error}\n headingContent={headingContent}\n hint={hintContent}\n initialized={isInitialized}\n title={titleContent}\n visible={active}\n onEmailBlur={handleBlur}\n onEmailChange={handleChange}\n onEmailInvalid={handleInvalid}\n />\n );\n};\n"],"names":["validationPatterns","validateEmail","email","Email","value","error","hint","onChange","onBlur","onInvalid","translations","useText","jsx","Field","Input","SignIn","onClick","jsxs","event","LoginFormSkeleton","Skeleton","SkeletonRow","LoginFormComponent","className","customer","headingContent","name","onEmailBlur","onEmailChange","onEmailInvalid","title","props","VComponent","classes","LoginForm","WithConditionals","SignOut","DEBOUNCE_TIME","active","autoSync","displayHeadingContent","displayTitle","initialData","onCartSyncError","onSignInClick","onSignOutClick","onValidationError","slots","setCustomer","useState","setEmail","setError","isAuthenticated","setIsAuthenticated","isAvailable","setIsAvailable","isInitialized","setIsInitialized","debounceTimer","useRef","alreadyHaveAccountHint","cartSyncError","defaultTitle","fasterCheckoutHint","invalidEmailError","missingEmailError","signInLabel","setEmailAndCheckAvailability","useCallback","getCartEmail","isEmailAvailable","availability","setGuestEmailOnCart","handleChange","notifyValues","handleBlur","target","type","message","handleInvalid","validity","handleSignIn","getValue","isValid","handleSignOut","handleCheckoutData","data","prevEmail","useEffect","onAuthenticated","events","authenticated","getCustomer","pastUpdate","getLatestCheckoutUpdate","checkoutEmail","onCheckoutInit","onCheckoutUpdated","titleContent","useMemo","Slot","hintContent","Fragment"],"mappings":"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"}
|
package/containers/OutOfStock.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsxs as n,jsx as o}from"@dropins/tools/preact-jsx-runtime.js"
|
|
3
|
+
import{jsxs as n,jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/TermsAndConditions.js";import{classes as l}from"@dropins/tools/lib.js";import{Card as h,Icon as O,Image as d}from"@dropins/tools/components.js";/* empty css */import{S as p}from"../chunks/OrderError.js";import{useText as S}from"@dropins/tools/i18n.js";/* empty css */import"../chunks/fetch-graphql.js";import{events as _}from"@dropins/tools/event-bus.js";import"@dropins/tools/preact-compat.js";/* empty css *//* empty css */import{useState as g,useCallback as v,useEffect as N}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";const w=({className:r,items:u,onRemoveOutOfStock:s,routeCart:t,...a})=>{const i=S({title:"Checkout.OutOfStock.title",message:"Checkout.OutOfStock.message",reviewCart:"Checkout.OutOfStock.actions.reviewCart",removeOutOfStock:"Checkout.OutOfStock.actions.removeOutOfStock"});return n(h,{className:l(["checkout-out-of-stock",r]),"data-testid":"checkout-out-of-stock",variant:"secondary",...a,children:[n("h4",{className:"checkout-out-of-stock__title",children:[o(O,{size:"16",source:p,stroke:"1"}),i.title]}),o("p",{className:"checkout-out-of-stock__message",children:i.message}),o("ol",{className:"checkout-out-of-stock__items",children:u.map(m=>o("li",{className:"checkout-out-of-stock__item","data-testid":"out-of-stock-item",children:o(d,{alt:m.image.alt,height:"100",loading:"eager",params:{width:100},src:m.image.src,width:"100"})},m.sku))}),n("div",{className:"checkout-out-of-stock__actions",children:[t&&o("a",{className:"checkout-out-of-stock__action","data-testid":"review-cart",href:t,children:i.reviewCart}),s&&o("button",{className:"checkout-out-of-stock__action","data-testid":"remove-out-of-stock",type:"button",onClick:s,children:i.removeOutOfStock})]})]})},G=({onCartProductsUpdate:r,routeCart:u,active:s=!0})=>{const[t,a]=g([]),i=v(()=>{if(!r)return;const e=t.filter(c=>c.outOfStock).map(c=>({uid:c.uid,quantity:0}));r(e)},[t,r]);if(N(()=>{if(!s)return;const e=_.on("cart/data",c=>{const k=(c==null?void 0:c.items)||[];a(k.filter(f=>f.outOfStock||f.insufficientQuantity))},{eager:!0});return()=>{e==null||e.off()}},[s]),!s||t.length===0)return null;const m=!t.some(e=>e.insufficientQuantity);return o(w,{items:t,routeCart:u==null?void 0:u(),onRemoveOutOfStock:m?i:void 0})};export{G as OutOfStock,G as default};
|
|
4
4
|
//# sourceMappingURL=OutOfStock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutOfStock.js","sources":["/@dropins/storefront-checkout/src/components/OutOfStock/OutOfStock.tsx","/@dropins/storefront-checkout/src/containers/OutOfStock/OutOfStock.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/OutOfStock/OutOfStock.css';\nimport { Item as CartItem } from '@/checkout/types/cart';\nimport { Card, Icon, Image } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { OrderError } from '@adobe-commerce/elsie/icons';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface OutOfStockProps extends HTMLAttributes<HTMLDivElement> {\n items: CartItem[];\n onRemoveOutOfStock?: (event: Event) => void;\n routeCart?: string;\n}\n\nexport const OutOfStock: FunctionComponent<OutOfStockProps> = ({\n className,\n items,\n onRemoveOutOfStock,\n routeCart,\n ...props\n}) => {\n const translations = useText({\n title: 'Checkout.OutOfStock.title',\n message: 'Checkout.OutOfStock.message',\n reviewCart: 'Checkout.OutOfStock.actions.reviewCart',\n removeOutOfStock: 'Checkout.OutOfStock.actions.removeOutOfStock',\n });\n\n return (\n <Card\n className={classes(['checkout-out-of-stock', className])}\n data-testid=\"checkout-out-of-stock\"\n variant=\"secondary\"\n {...props}\n >\n <h4 className=\"checkout-out-of-stock__title\">\n <Icon size=\"16\" source={OrderError} stroke=\"1\" />\n {translations.title}\n </h4>\n\n <p className=\"checkout-out-of-stock__message\">{translations.message}</p>\n\n <ol className=\"checkout-out-of-stock__items\">\n {items.map((item) => (\n <li\n key={item.sku}\n className=\"checkout-out-of-stock__item\"\n data-testid=\"out-of-stock-item\"\n >\n <Image\n alt={item.image.alt}\n height=\"100\"\n loading=\"eager\"\n params={{ width: 100 }}\n src={item.image.src}\n width=\"100\"\n />\n </li>\n ))}\n </ol>\n\n <div className=\"checkout-out-of-stock__actions\">\n {routeCart && (\n <a\n className=\"checkout-out-of-stock__action\"\n data-testid=\"review-cart\"\n href={routeCart}\n >\n {translations.reviewCart}\n </a>\n )}\n\n {onRemoveOutOfStock && (\n <button\n className=\"checkout-out-of-stock__action\"\n data-testid=\"remove-out-of-stock\"\n type=\"button\"\n onClick={onRemoveOutOfStock}\n >\n {translations.removeOutOfStock}\n </button>\n )}\n </div>\n </Card>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { OutOfStock as OutOfStockComponent } from '@/checkout/components';\nimport { Item as ItemModel } from '@/checkout/types/cart';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nexport type UpdateProductsFromCart = Array<{\n uid: string;\n quantity: number;\n}>;\n\nexport interface OutOfStockProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {\n onCartProductsUpdate?: (items: UpdateProductsFromCart) => void;\n routeCart?: () => string;\n active?: boolean;\n}\n\nexport const OutOfStock: Container<OutOfStockProps> = ({\n onCartProductsUpdate,\n routeCart,\n active = true,\n}) => {\n const [items, setItems] = useState<ItemModel[]>([]);\n\n const removeOutOfStockItems = useCallback(() => {\n if (!onCartProductsUpdate) return;\n\n const update = items\n .filter((item) => item.outOfStock)\n .map((item) => ({ uid: item.uid, quantity: 0 }));\n\n onCartProductsUpdate(update);\n }, [items, onCartProductsUpdate]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartData = events.on(\n 'cart/data',\n (data) => {\n const items = (data?.items || []) as ItemModel[];\n setItems(\n items.filter((item: ItemModel) => {\n return item.outOfStock || item.insufficientQuantity;\n })\n );\n },\n { eager: true }\n );\n\n return () => {\n onCartData?.off();\n };\n }, [active]);\n\n if (!active || items.length === 0) return null;\n\n const canRemoveOutOfStock = !items.some((item) => item.insufficientQuantity);\n\n return (\n <OutOfStockComponent\n items={items}\n routeCart={routeCart?.()}\n onRemoveOutOfStock={\n canRemoveOutOfStock ? removeOutOfStockItems : undefined\n }\n />\n );\n};\n"],"names":["OutOfStock","className","items","onRemoveOutOfStock","routeCart","props","translations","useText","jsxs","Card","classes","jsx","Icon","OrderError","item","Image","onCartProductsUpdate","active","setItems","useState","removeOutOfStockItems","useCallback","update","useEffect","onCartData","events","data","canRemoveOutOfStock","OutOfStockComponent"],"mappings":"
|
|
1
|
+
{"version":3,"file":"OutOfStock.js","sources":["/@dropins/storefront-checkout/src/components/OutOfStock/OutOfStock.tsx","/@dropins/storefront-checkout/src/containers/OutOfStock/OutOfStock.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/OutOfStock/OutOfStock.css';\nimport { Item as CartItem } from '@/checkout/types/cart';\nimport { Card, Icon, Image } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { OrderError } from '@adobe-commerce/elsie/icons';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface OutOfStockProps extends HTMLAttributes<HTMLDivElement> {\n items: CartItem[];\n onRemoveOutOfStock?: (event: Event) => void;\n routeCart?: string;\n}\n\nexport const OutOfStock: FunctionComponent<OutOfStockProps> = ({\n className,\n items,\n onRemoveOutOfStock,\n routeCart,\n ...props\n}) => {\n const translations = useText({\n title: 'Checkout.OutOfStock.title',\n message: 'Checkout.OutOfStock.message',\n reviewCart: 'Checkout.OutOfStock.actions.reviewCart',\n removeOutOfStock: 'Checkout.OutOfStock.actions.removeOutOfStock',\n });\n\n return (\n <Card\n className={classes(['checkout-out-of-stock', className])}\n data-testid=\"checkout-out-of-stock\"\n variant=\"secondary\"\n {...props}\n >\n <h4 className=\"checkout-out-of-stock__title\">\n <Icon size=\"16\" source={OrderError} stroke=\"1\" />\n {translations.title}\n </h4>\n\n <p className=\"checkout-out-of-stock__message\">{translations.message}</p>\n\n <ol className=\"checkout-out-of-stock__items\">\n {items.map((item) => (\n <li\n key={item.sku}\n className=\"checkout-out-of-stock__item\"\n data-testid=\"out-of-stock-item\"\n >\n <Image\n alt={item.image.alt}\n height=\"100\"\n loading=\"eager\"\n params={{ width: 100 }}\n src={item.image.src}\n width=\"100\"\n />\n </li>\n ))}\n </ol>\n\n <div className=\"checkout-out-of-stock__actions\">\n {routeCart && (\n <a\n className=\"checkout-out-of-stock__action\"\n data-testid=\"review-cart\"\n href={routeCart}\n >\n {translations.reviewCart}\n </a>\n )}\n\n {onRemoveOutOfStock && (\n <button\n className=\"checkout-out-of-stock__action\"\n data-testid=\"remove-out-of-stock\"\n type=\"button\"\n onClick={onRemoveOutOfStock}\n >\n {translations.removeOutOfStock}\n </button>\n )}\n </div>\n </Card>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { OutOfStock as OutOfStockComponent } from '@/checkout/components';\nimport { Item as ItemModel } from '@/checkout/types/cart';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nexport type UpdateProductsFromCart = Array<{\n uid: string;\n quantity: number;\n}>;\n\nexport interface OutOfStockProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {\n onCartProductsUpdate?: (items: UpdateProductsFromCart) => void;\n routeCart?: () => string;\n active?: boolean;\n}\n\nexport const OutOfStock: Container<OutOfStockProps> = ({\n onCartProductsUpdate,\n routeCart,\n active = true,\n}) => {\n const [items, setItems] = useState<ItemModel[]>([]);\n\n const removeOutOfStockItems = useCallback(() => {\n if (!onCartProductsUpdate) return;\n\n const update = items\n .filter((item) => item.outOfStock)\n .map((item) => ({ uid: item.uid, quantity: 0 }));\n\n onCartProductsUpdate(update);\n }, [items, onCartProductsUpdate]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartData = events.on(\n 'cart/data',\n (data) => {\n const items = (data?.items || []) as ItemModel[];\n setItems(\n items.filter((item: ItemModel) => {\n return item.outOfStock || item.insufficientQuantity;\n })\n );\n },\n { eager: true }\n );\n\n return () => {\n onCartData?.off();\n };\n }, [active]);\n\n if (!active || items.length === 0) return null;\n\n const canRemoveOutOfStock = !items.some((item) => item.insufficientQuantity);\n\n return (\n <OutOfStockComponent\n items={items}\n routeCart={routeCart?.()}\n onRemoveOutOfStock={\n canRemoveOutOfStock ? removeOutOfStockItems : undefined\n }\n />\n );\n};\n"],"names":["OutOfStock","className","items","onRemoveOutOfStock","routeCart","props","translations","useText","jsxs","Card","classes","jsx","Icon","OrderError","item","Image","onCartProductsUpdate","active","setItems","useState","removeOutOfStockItems","useCallback","update","useEffect","onCartData","events","data","canRemoveOutOfStock","OutOfStockComponent"],"mappings":"2vBAgCO,MAAMA,EAAiD,CAAC,CAC7D,UAAAC,EACA,MAAAC,EACA,mBAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAeC,EAAQ,CAC3B,MAAO,4BACP,QAAS,8BACT,WAAY,yCACZ,iBAAkB,8CAAA,CACnB,EAGC,OAAAC,EAACC,EAAA,CACC,UAAWC,EAAQ,CAAC,wBAAyBT,CAAS,CAAC,EACvD,cAAY,wBACZ,QAAQ,YACP,GAAGI,EAEJ,SAAA,CAACG,EAAA,KAAA,CAAG,UAAU,+BACZ,SAAA,CAAAG,EAACC,GAAK,KAAK,KAAK,OAAQC,EAAY,OAAO,IAAI,EAC9CP,EAAa,KAAA,EAChB,EAECK,EAAA,IAAA,CAAE,UAAU,iCAAkC,WAAa,QAAQ,IAEnE,KAAG,CAAA,UAAU,+BACX,SAAMT,EAAA,IAAKY,GACVH,EAAC,KAAA,CAEC,UAAU,8BACV,cAAY,oBAEZ,SAAAA,EAACI,EAAA,CACC,IAAKD,EAAK,MAAM,IAChB,OAAO,MACP,QAAQ,QACR,OAAQ,CAAE,MAAO,GAAI,EACrB,IAAKA,EAAK,MAAM,IAChB,MAAM,KAAA,CAAA,CACR,EAXKA,EAAK,GAab,CAAA,EACH,EAEAN,EAAC,MAAI,CAAA,UAAU,iCACZ,SAAA,CACCJ,GAAAO,EAAC,IAAA,CACC,UAAU,gCACV,cAAY,cACZ,KAAMP,EAEL,SAAaE,EAAA,UAAA,CAChB,EAGDH,GACCQ,EAAC,SAAA,CACC,UAAU,gCACV,cAAY,sBACZ,KAAK,SACL,QAASR,EAER,SAAaG,EAAA,gBAAA,CAAA,CAChB,CAEJ,CAAA,CAAA,CAAA,CACF,CAEJ,ECnEaN,EAAyC,CAAC,CACrD,qBAAAgB,EACA,UAAAZ,EACA,OAAAa,EAAS,EACX,IAAM,CACJ,KAAM,CAACf,EAAOgB,CAAQ,EAAIC,EAAsB,CAAA,CAAE,EAE5CC,EAAwBC,EAAY,IAAM,CAC9C,GAAI,CAACL,EAAsB,OAE3B,MAAMM,EAASpB,EACZ,OAAQY,GAASA,EAAK,UAAU,EAChC,IAAKA,IAAU,CAAE,IAAKA,EAAK,IAAK,SAAU,GAAI,EAEjDE,EAAqBM,CAAM,CAAA,EAC1B,CAACpB,EAAOc,CAAoB,CAAC,EAuBhC,GArBAO,EAAU,IAAM,CACd,GAAI,CAACN,EAAQ,OAEb,MAAMO,EAAaC,EAAO,GACxB,YACCC,GAAS,CACFxB,MAAAA,GAASwB,GAAA,YAAAA,EAAM,QAAS,CAAC,EAC/BR,EACEhB,EAAM,OAAQY,GACLA,EAAK,YAAcA,EAAK,oBAChC,CACH,CACF,EACA,CAAE,MAAO,EAAK,CAChB,EAEA,MAAO,IAAM,CACXU,GAAA,MAAAA,EAAY,KACd,CAAA,EACC,CAACP,CAAM,CAAC,EAEP,CAACA,GAAUf,EAAM,SAAW,EAAU,OAAA,KAE1C,MAAMyB,EAAsB,CAACzB,EAAM,KAAMY,GAASA,EAAK,oBAAoB,EAGzE,OAAAH,EAACiB,EAAA,CACC,MAAA1B,EACA,UAAWE,GAAA,YAAAA,IACX,mBACEuB,EAAsBP,EAAwB,MAAA,CAElD,CAEJ"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { PaymentMethod } from '../../data/models/payment-method';
|
|
2
|
-
import { UIComponentType } from '../../types
|
|
3
|
-
import { TitleProps } from '../../types/TitleProps';
|
|
2
|
+
import { TitleProps, UIComponentType } from '../../types';
|
|
4
3
|
import { Container, SlotProps } from '@dropins/tools/types/elsie/src/lib';
|
|
5
4
|
import { HTMLAttributes } from 'preact/compat';
|
|
6
5
|
|