@dropins/storefront-checkout 0.1.0-alpha32 → 0.1.0-alpha33
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/chunks/LoginForm.js +1 -1
- package/chunks/LoginForm.js.map +1 -1
- package/chunks/PaymentMethods.js +1 -1
- package/chunks/PaymentMethods.js.map +1 -1
- package/chunks/ShippingMethods.js +1 -1
- package/chunks/ShippingMethods.js.map +1 -1
- package/chunks/getStoreConfig.js.map +1 -1
- package/containers/Checkout.js +1 -1
- package/containers/Checkout.js.map +1 -1
- package/package.json +1 -1
- package/render.js +1 -1
package/chunks/LoginForm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"@dropins/tools/event-bus.js";import{i as M,l as T,n as z}from"./getStoreConfig.js";import{i as V,s as $}from"./setGuestEmailOnCart.js";import{Field as j,Input as q}from"@dropins/tools/components.js";import{jsx as o,jsxs as m,Fragment as
|
|
1
|
+
import"@dropins/tools/event-bus.js";import{i as M,l as T,n as z}from"./getStoreConfig.js";import{i as V,s as $}from"./setGuestEmailOnCart.js";import{Field as j,Input as q,Divider as G}from"@dropins/tools/components.js";import{jsx as o,jsxs as m,Fragment as O}from"@dropins/tools/preact-jsx-runtime.js";import{H as P,p as w}from"./ToggleButton.js";import{useState as f,useEffect as R}from"@dropins/tools/preact-hooks.js";import{classes as N}from"@dropins/tools/lib.js";/* empty css */import{useText as k,Text as F}from"@dropins/tools/i18n.js";import{L as U}from"./constants2.js";const J=({value:r,error:l,hint:a,onChange:c,onBlur:u,onInvalid:n})=>{const i=k({LoginFormLabel:"Checkout.LoginForm.ariaLabel",LoginFormFloatingLabel:"Checkout.LoginForm.floatingLabel",LoginFormPlaceholder:"Checkout.LoginForm.placeholder"});return o(j,{size:"medium",error:l,hint:a,children:o(q,{id:"customer-email",name:"customer-email",type:"email",value:r,autocomplete:"email",placeholder:i.LoginFormPlaceholder,floatingLabel:i.LoginFormFloatingLabel,onChange:c,onBlur:u,onInvalid:n,required:!0,"aria-label":i.LoginFormLabel,"aria-required":!0})})},K=({onSignInClick:r,email:l})=>m("div",{className:"checkout-login-form__sign-in",children:[o(F,{id:"Checkout.LoginForm.account"}),o("a",{"data-testid":"sign-in-link",className:"checkout-login-form__link",href:"#",target:"_blank",rel:"noreferrer",onClick:a=>{a.preventDefault(),r==null||r(l)},children:o(F,{id:"Checkout.LoginForm.signIn"})})]}),Q=({name:r,className:l,currentEmail:a,hint:c,error:u=null,onEmailChange:n,onEmailBlur:i,onEmailInvalid:g,onSignInClick:L,onSignOutClick:v,isAuthenticated:p,customer:e,...h})=>{const d=k({Title:"Checkout.LoginForm.title"});return m("div",{...h,className:N(["checkout-login-form",l]),"data-testid":"checkout-login-form",children:[m("div",{className:"checkout-login-form__heading",children:[o(P,{level:2,className:"checkout-login-form__title",children:d.Title}),p?o(W,{onSignOutClick:v}):o(K,{onSignInClick:L,email:a})]}),e?m("div",{className:"checkout-login-form__customer-details",children:[o("div",{className:"checkout-login-form__customer-name",children:`${e==null?void 0:e.firstName} ${e==null?void 0:e.lastName}`}),o("div",{className:"checkout-login-form__customer-email",children:e==null?void 0:e.email})]}):o("div",{className:"checkout-login-form__content",children:m("form",{className:N(["dropin-login-form__form",l]),name:r,noValidate:!0,children:[o("button",{type:"submit",disabled:!0,style:"display: none","aria-hidden":"true"}),o(J,{value:a||void 0,error:u||"",hint:c,onChange:n,onBlur:i,onInvalid:g})]})}),o(G,{variant:"primary"})]})},W=({onSignOutClick:r})=>m("p",{className:"checkout-login-form__sign-out",children:[o(F,{id:"Checkout.LoginForm.switch"}),o("a",{className:"checkout-login-form__link",href:"#",target:"_blank",rel:"noreferrer",onClick:l=>{l.preventDefault(),r==null||r()},children:o(F,{id:"Checkout.LoginForm.signOut"})})]}),X=r=>w.email.test(r),Y=1e3,me=({className:r,email:l=null,onSignInClick:a,onSignOutClick:c,...u})=>{const n=k({LoginFormInvalidEmailError:"Checkout.LoginForm.invalidEmailError",LoginFormMissingEmailError:"Checkout.LoginForm.missingEmailError",LoginFormEmailExistsAlreadyHaveAccount:"Checkout.LoginForm.emailExists.alreadyHaveAccount",LoginFormEmailExistsSignInButton:"Checkout.LoginForm.emailExists.signInButton",LoginFormEmailExistsForFasterCheckout:"Checkout.LoginForm.emailExists.forFasterCheckout"}),{data:i}=M.value,g=(i==null?void 0:i.id)||"",L=!!i,[v,p]=f(!1),[e,h]=f(l),[d,E]=f(),[x,_]=f(!0),b=t=>t.valid?null:t.valueMissing?n.LoginFormMissingEmailError:n.LoginFormInvalidEmailError,C=T.value.data,y=t=>{const{value:s}=t.target;h(s),E(null),_(!0)},A=t=>{const{validity:s}=t.target;E(b(s))},I=t=>{const{validity:s}=t.target;E(b(s))};!v&&L&&(p(!0),h((i==null?void 0:i.email)||l)),R(()=>{if(!e||d)return;const t=setTimeout(()=>{V(e).then(s=>{_(s),(i==null?void 0:i.email)!==e&&$({cartId:g,email:e}).catch(H=>{console.log("set email failed",H)})}).catch(s=>{console.log(s),E(n.LoginFormInvalidEmailError),_(!0)})},Y);return()=>{t&&clearTimeout(t)}},[e,d,n.LoginFormInvalidEmailError,i==null?void 0:i.email,g]);const B=x?"":m(O,{children:[n.LoginFormEmailExistsAlreadyHaveAccount," ",o("a",{href:"#",onClick:t=>{t.preventDefault(),a==null||a(e)},children:n.LoginFormEmailExistsSignInButton})," ",n.LoginFormEmailExistsForFasterCheckout]});return o(Q,{className:r,currentEmail:e,error:d,hint:B,name:U,onEmailBlur:A,onEmailChange:y,onEmailInvalid:I,onSignInClick:t=>{const s=e?X(e):!1;a==null||a(s?t:null)},onSignOutClick:c,isAuthenticated:!!z.value,customer:C,...u})};export{me as L};
|
|
2
2
|
//# sourceMappingURL=LoginForm.js.map
|
package/chunks/LoginForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.js","sources":["../../src/components/LoginForm/Email.tsx","../../src/components/LoginForm/SignIn.tsx","../../src/components/LoginForm/LoginForm.tsx","../../src/components/LoginForm/SignOut.tsx","../../src/containers/LoginForm/LoginForm.tsx"],"sourcesContent":["import { Field, Input } from '@adobe/elsie/components';\nimport { useText } from '@adobe/elsie/i18n';\nimport { HTMLAttributes } from 'preact/compat';\nimport { FunctionComponent } from 'preact';\n\nexport interface LoginEmailProps extends HTMLAttributes<HTMLFormElement> {\n value?: string;\n error?: string;\n hint?: string;\n onChange: (e: any) => void;\n onBlur: (e: any) => void;\n onInvalid: (e: any) => 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 size=\"medium\" error={error} hint={hint}>\n <Input\n id=\"customer-email\"\n name=\"customer-email\"\n type=\"email\"\n value={value}\n autocomplete=\"email\"\n placeholder={translations.LoginFormPlaceholder}\n floatingLabel={translations.LoginFormFloatingLabel}\n onChange={onChange}\n onBlur={onBlur}\n onInvalid={onInvalid}\n required={true}\n aria-label={translations.LoginFormLabel}\n aria-required={true}\n />\n </Field>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Text } from '@adobe/elsie/i18n';\n\ntype SignInProps = {\n onSignInClick?: (email: string | null) => void;\n email: string | null;\n};\n\nexport const SignIn: FunctionComponent<SignInProps> = ({\n onSignInClick,\n email,\n}) => {\n return (\n <div className=\"checkout-login-form__sign-in\">\n <Text id=\"Checkout.LoginForm.account\" />\n\n <a\n data-testid=\"sign-in-link\"\n className=\"checkout-login-form__link\"\n href=\"#\"\n target=\"_blank\"\n rel=\"noreferrer\"\n onClick={(e) => {\n e.preventDefault();\n onSignInClick?.(email);\n }}\n >\n <Text id=\"Checkout.LoginForm.signIn\" />\n </a>\n </div>\n );\n};\n","import { Email, Heading } from '@/checkout/components';\nimport { SignOut, SignIn } from '@/checkout/components/LoginForm';\nimport '@/checkout/components/LoginForm/LoginForm.css';\nimport { Customer } from '@/checkout/data/models';\nimport { useText } from '@adobe/elsie/i18n';\nimport { classes } from '@adobe/elsie/lib';\nimport { FunctionComponent, HTMLAttributes } from 'preact/compat';\n\nexport interface LoginFormProps extends HTMLAttributes<HTMLDivElement> {\n currentEmail: string | null;\n hint?: string;\n error?: string | null;\n onEmailChange: (e: any) => void;\n onEmailBlur: (e: any) => void;\n onEmailInvalid: (e: any) => void;\n onSignInClick?: (email: string | null) => void;\n onSignOutClick?: () => void;\n isAuthenticated: boolean;\n customer?: Customer | null;\n}\n\nexport const LoginForm: FunctionComponent<LoginFormProps> = ({\n name,\n className,\n currentEmail,\n hint,\n error = null,\n onEmailChange,\n onEmailBlur,\n onEmailInvalid,\n onSignInClick,\n onSignOutClick,\n isAuthenticated,\n customer,\n ...props\n}) => {\n const translations = useText({\n Title: 'Checkout.LoginForm.title',\n });\n\n return (\n <div\n {...props}\n className={classes(['checkout-login-form', className])}\n data-testid=\"checkout-login-form\"\n >\n <div className=\"checkout-login-form__heading\">\n <Heading level={2} className=\"checkout-login-form__title\">\n {translations.Title}\n </Heading>\n {isAuthenticated ? (\n <SignOut onSignOutClick={onSignOutClick} />\n ) : (\n <SignIn onSignInClick={onSignInClick} email={currentEmail} />\n )}\n </div>\n {customer ? (\n <div className=\"checkout-login-form__customer-details\">\n <div className=\"checkout-login-form__customer-name\">{`${customer?.firstName} ${customer?.lastName}`}</div>\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 className={classes(['dropin-login-form__form', className])}\n name={name}\n noValidate\n >\n {/* Prevent 'Enter' key press from submitting this form. */}\n <button\n type=\"submit\"\n disabled\n style=\"display: none\"\n aria-hidden=\"true\"\n />\n <Email\n value={currentEmail || undefined}\n error={error || ''}\n hint={hint}\n onChange={onEmailChange}\n onBlur={onEmailBlur}\n onInvalid={onEmailInvalid}\n />\n </form>\n </div>\n )}\n </div>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Text } from '@adobe/elsie/i18n';\n\ntype SignOutProps = {\n onSignOutClick?: () => void;\n};\n\nexport const SignOut: FunctionComponent<SignOutProps> = ({\n onSignOutClick,\n}) => {\n return (\n <p className=\"checkout-login-form__sign-out\">\n <Text id=\"Checkout.LoginForm.switch\" />\n\n <a\n className=\"checkout-login-form__link\"\n href=\"#\"\n target=\"_blank\"\n rel=\"noreferrer\"\n onClick={(e) => {\n e.preventDefault();\n onSignOutClick?.();\n }}\n >\n <Text id=\"Checkout.LoginForm.signOut\" />\n </a>\n </p>\n );\n};\n","import { isEmailAvailable, setGuestEmailOnCart } from '@/checkout/api';\nimport { LoginForm as LoginFormComponent } from '@/checkout/components/LoginForm';\nimport { useText } from '@adobe/elsie/i18n';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useEffect, useState } from 'preact/hooks';\nimport { LOGIN_FORM_NAME } from './constants';\nimport {\n cartSignal,\n customerSignal,\n isAuthenticatedSignal,\n} from '@/checkout/signals';\nimport { FunctionComponent } from 'preact';\nimport { patterns } from '@/checkout/components';\n\nconst isValidEmail = (email: string) => patterns.email.test(email);\n\nexport interface LoginFormProps extends HTMLAttributes<HTMLDivElement> {\n email?: string;\n onSignInClick?: (email: string | null) => void;\n onSignOutClick?: () => void;\n}\n\nconst DEBOUNCE_TIME = 1000;\n\nexport const LoginForm: FunctionComponent<LoginFormProps> = ({\n className,\n email = null,\n onSignInClick,\n onSignOutClick,\n ...props\n}) => {\n const translations = useText({\n LoginFormInvalidEmailError: 'Checkout.LoginForm.invalidEmailError',\n LoginFormMissingEmailError: 'Checkout.LoginForm.missingEmailError',\n LoginFormEmailExistsAlreadyHaveAccount:\n 'Checkout.LoginForm.emailExists.alreadyHaveAccount',\n LoginFormEmailExistsSignInButton:\n 'Checkout.LoginForm.emailExists.signInButton',\n LoginFormEmailExistsForFasterCheckout:\n 'Checkout.LoginForm.emailExists.forFasterCheckout',\n });\n\n const { data: cartData } = cartSignal.value;\n const cartId = cartData?.id || '';\n const hasCartData = !!cartData;\n\n const [isInitialized, setIsInitialized] = useState(false);\n const [currentEmail, setCurrentEmail] = useState<string | null>(email);\n const [error, setError] = useState<string | null>();\n const [emailAvailability, setEmailAvailability] = useState<boolean>(true);\n\n const errorMessage = (validity: ValidityState): string | null => {\n if (validity.valid) return null;\n if (validity.valueMissing) return translations.LoginFormMissingEmailError;\n return translations.LoginFormInvalidEmailError;\n };\n\n const customer = customerSignal.value.data;\n\n const onEmailChange = (e: any) => {\n const { value } = e.target as HTMLInputElement;\n setCurrentEmail(value);\n setError(null);\n setEmailAvailability(true);\n };\n\n const onEmailBlur = (e: any) => {\n const { validity } = e.target as HTMLInputElement;\n setError(errorMessage(validity));\n };\n\n const onEmailInvalid = (e: any) => {\n const { validity } = e.target as HTMLInputElement;\n setError(errorMessage(validity));\n };\n\n if (!isInitialized && hasCartData) {\n setIsInitialized(true);\n setCurrentEmail(cartData?.email || email);\n }\n\n useEffect(() => {\n if (!currentEmail || error) return;\n\n const timer = setTimeout(() => {\n isEmailAvailable(currentEmail)\n .then((result) => {\n setEmailAvailability(result);\n\n if (cartData?.email === currentEmail) return;\n\n setGuestEmailOnCart({\n cartId,\n email: currentEmail,\n }).catch((e: any) => {\n console.log('set email failed', e);\n });\n })\n .catch((e: any) => {\n // TODO: handle error state\n console.log(e);\n setError(translations.LoginFormInvalidEmailError);\n setEmailAvailability(true);\n });\n }, DEBOUNCE_TIME);\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [\n currentEmail,\n error,\n translations.LoginFormInvalidEmailError,\n cartData?.email,\n cartId,\n ]);\n\n const hint = emailAvailability ? (\n ''\n ) : (\n <>\n {translations.LoginFormEmailExistsAlreadyHaveAccount}{' '}\n <a\n href=\"#\"\n onClick={(e) => {\n e.preventDefault();\n onSignInClick?.(currentEmail);\n }}\n >\n {translations.LoginFormEmailExistsSignInButton}\n </a>{' '}\n {translations.LoginFormEmailExistsForFasterCheckout}\n </>\n );\n\n const onSignInClickHandler = (email: string | null) => {\n const isCurrentEmailValid = currentEmail\n ? isValidEmail(currentEmail)\n : false;\n onSignInClick?.(isCurrentEmailValid ? email : null);\n };\n\n return (\n <LoginFormComponent\n className={className}\n currentEmail={currentEmail}\n error={error}\n hint={hint as any}\n name={LOGIN_FORM_NAME}\n onEmailBlur={onEmailBlur}\n onEmailChange={onEmailChange}\n onEmailInvalid={onEmailInvalid}\n onSignInClick={onSignInClickHandler}\n onSignOutClick={onSignOutClick}\n isAuthenticated={Boolean(isAuthenticatedSignal.value)}\n customer={customer}\n {...props}\n />\n );\n};\n"],"names":["Email","value","error","hint","onChange","onBlur","onInvalid","translations","useText","LoginFormLabel","LoginFormFloatingLabel","LoginFormPlaceholder","_jsx","Field","size","children","Input","id","name","type","autocomplete","placeholder","floatingLabel","required","SignIn","onSignInClick","email","_jsxs","className","Text","href","target","rel","onClick","e","preventDefault","LoginForm","currentEmail","onEmailChange","onEmailBlur","onEmailInvalid","onSignOutClick","isAuthenticated","customer","props","Title","classes","Heading","level","SignOut","firstName","lastName","noValidate","disabled","style","undefined","isValidEmail","patterns","test","DEBOUNCE_TIME","LoginFormInvalidEmailError","LoginFormMissingEmailError","LoginFormEmailExistsAlreadyHaveAccount","LoginFormEmailExistsSignInButton","LoginFormEmailExistsForFasterCheckout","data","cartData","cartSignal","cartId","hasCartData","isInitialized","setIsInitialized","useState","setCurrentEmail","setError","emailAvailability","setEmailAvailability","errorMessage","validity","valid","valueMissing","customerSignal","useEffect","timer","setTimeout","then","result","setGuestEmailOnCart","catch","log","console","clearTimeout","_Fragment","LoginFormComponent","LOGIN_FORM_NAME","isCurrentEmailValid","Boolean","isAuthenticatedSignal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LoginForm.js","sources":["../../src/components/LoginForm/Email.tsx","../../src/components/LoginForm/SignIn.tsx","../../src/components/LoginForm/LoginForm.tsx","../../src/components/LoginForm/SignOut.tsx","../../src/containers/LoginForm/LoginForm.tsx"],"sourcesContent":["import { Field, Input } from '@adobe/elsie/components';\nimport { useText } from '@adobe/elsie/i18n';\nimport { HTMLAttributes } from 'preact/compat';\nimport { FunctionComponent } from 'preact';\n\nexport interface LoginEmailProps extends HTMLAttributes<HTMLFormElement> {\n value?: string;\n error?: string;\n hint?: string;\n onChange: (e: any) => void;\n onBlur: (e: any) => void;\n onInvalid: (e: any) => 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 size=\"medium\" error={error} hint={hint}>\n <Input\n id=\"customer-email\"\n name=\"customer-email\"\n type=\"email\"\n value={value}\n autocomplete=\"email\"\n placeholder={translations.LoginFormPlaceholder}\n floatingLabel={translations.LoginFormFloatingLabel}\n onChange={onChange}\n onBlur={onBlur}\n onInvalid={onInvalid}\n required={true}\n aria-label={translations.LoginFormLabel}\n aria-required={true}\n />\n </Field>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Text } from '@adobe/elsie/i18n';\n\ntype SignInProps = {\n onSignInClick?: (email: string | null) => void;\n email: string | null;\n};\n\nexport const SignIn: FunctionComponent<SignInProps> = ({\n onSignInClick,\n email,\n}) => {\n return (\n <div className=\"checkout-login-form__sign-in\">\n <Text id=\"Checkout.LoginForm.account\" />\n\n <a\n data-testid=\"sign-in-link\"\n className=\"checkout-login-form__link\"\n href=\"#\"\n target=\"_blank\"\n rel=\"noreferrer\"\n onClick={(e) => {\n e.preventDefault();\n onSignInClick?.(email);\n }}\n >\n <Text id=\"Checkout.LoginForm.signIn\" />\n </a>\n </div>\n );\n};\n","import { Email, Heading } from '@/checkout/components';\nimport { SignOut, SignIn } from '@/checkout/components/LoginForm';\nimport '@/checkout/components/LoginForm/LoginForm.css';\nimport { Customer } from '@/checkout/data/models';\nimport { useText } from '@adobe/elsie/i18n';\nimport { classes } from '@adobe/elsie/lib';\nimport { FunctionComponent, HTMLAttributes } from 'preact/compat';\nimport { Divider } from '@adobe/elsie/components';\n\nexport interface LoginFormProps extends HTMLAttributes<HTMLDivElement> {\n currentEmail: string | null;\n hint?: string;\n error?: string | null;\n onEmailChange: (e: any) => void;\n onEmailBlur: (e: any) => void;\n onEmailInvalid: (e: any) => void;\n onSignInClick?: (email: string | null) => void;\n onSignOutClick?: () => void;\n isAuthenticated: boolean;\n customer?: Customer | null;\n}\n\nexport const LoginForm: FunctionComponent<LoginFormProps> = ({\n name,\n className,\n currentEmail,\n hint,\n error = null,\n onEmailChange,\n onEmailBlur,\n onEmailInvalid,\n onSignInClick,\n onSignOutClick,\n isAuthenticated,\n customer,\n ...props\n}) => {\n const translations = useText({\n Title: 'Checkout.LoginForm.title',\n });\n\n return (\n <div\n {...props}\n className={classes(['checkout-login-form', className])}\n data-testid=\"checkout-login-form\"\n >\n <div className=\"checkout-login-form__heading\">\n <Heading level={2} className=\"checkout-login-form__title\">\n {translations.Title}\n </Heading>\n {isAuthenticated ? (\n <SignOut onSignOutClick={onSignOutClick} />\n ) : (\n <SignIn onSignInClick={onSignInClick} email={currentEmail} />\n )}\n </div>\n {customer ? (\n <div className=\"checkout-login-form__customer-details\">\n <div className=\"checkout-login-form__customer-name\">{`${customer?.firstName} ${customer?.lastName}`}</div>\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 className={classes(['dropin-login-form__form', className])}\n name={name}\n noValidate\n >\n {/* Prevent 'Enter' key press from submitting this form. */}\n <button\n type=\"submit\"\n disabled\n style=\"display: none\"\n aria-hidden=\"true\"\n />\n <Email\n value={currentEmail || undefined}\n error={error || ''}\n hint={hint}\n onChange={onEmailChange}\n onBlur={onEmailBlur}\n onInvalid={onEmailInvalid}\n />\n </form>\n </div>\n )}\n <Divider variant=\"primary\" />\n </div>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Text } from '@adobe/elsie/i18n';\n\ntype SignOutProps = {\n onSignOutClick?: () => void;\n};\n\nexport const SignOut: FunctionComponent<SignOutProps> = ({\n onSignOutClick,\n}) => {\n return (\n <p className=\"checkout-login-form__sign-out\">\n <Text id=\"Checkout.LoginForm.switch\" />\n\n <a\n className=\"checkout-login-form__link\"\n href=\"#\"\n target=\"_blank\"\n rel=\"noreferrer\"\n onClick={(e) => {\n e.preventDefault();\n onSignOutClick?.();\n }}\n >\n <Text id=\"Checkout.LoginForm.signOut\" />\n </a>\n </p>\n );\n};\n","import { isEmailAvailable, setGuestEmailOnCart } from '@/checkout/api';\nimport { LoginForm as LoginFormComponent } from '@/checkout/components/LoginForm';\nimport { useText } from '@adobe/elsie/i18n';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useEffect, useState } from 'preact/hooks';\nimport { LOGIN_FORM_NAME } from './constants';\nimport {\n cartSignal,\n customerSignal,\n isAuthenticatedSignal,\n} from '@/checkout/signals';\nimport { FunctionComponent } from 'preact';\nimport { patterns } from '@/checkout/components';\n\nconst isValidEmail = (email: string) => patterns.email.test(email);\n\nexport interface LoginFormProps extends HTMLAttributes<HTMLDivElement> {\n email?: string;\n onSignInClick?: (email: string | null) => void;\n onSignOutClick?: () => void;\n}\n\nconst DEBOUNCE_TIME = 1000;\n\nexport const LoginForm: FunctionComponent<LoginFormProps> = ({\n className,\n email = null,\n onSignInClick,\n onSignOutClick,\n ...props\n}) => {\n const translations = useText({\n LoginFormInvalidEmailError: 'Checkout.LoginForm.invalidEmailError',\n LoginFormMissingEmailError: 'Checkout.LoginForm.missingEmailError',\n LoginFormEmailExistsAlreadyHaveAccount:\n 'Checkout.LoginForm.emailExists.alreadyHaveAccount',\n LoginFormEmailExistsSignInButton:\n 'Checkout.LoginForm.emailExists.signInButton',\n LoginFormEmailExistsForFasterCheckout:\n 'Checkout.LoginForm.emailExists.forFasterCheckout',\n });\n\n const { data: cartData } = cartSignal.value;\n const cartId = cartData?.id || '';\n const hasCartData = !!cartData;\n\n const [isInitialized, setIsInitialized] = useState(false);\n const [currentEmail, setCurrentEmail] = useState<string | null>(email);\n const [error, setError] = useState<string | null>();\n const [emailAvailability, setEmailAvailability] = useState<boolean>(true);\n\n const errorMessage = (validity: ValidityState): string | null => {\n if (validity.valid) return null;\n if (validity.valueMissing) return translations.LoginFormMissingEmailError;\n return translations.LoginFormInvalidEmailError;\n };\n\n const customer = customerSignal.value.data;\n\n const onEmailChange = (e: any) => {\n const { value } = e.target as HTMLInputElement;\n setCurrentEmail(value);\n setError(null);\n setEmailAvailability(true);\n };\n\n const onEmailBlur = (e: any) => {\n const { validity } = e.target as HTMLInputElement;\n setError(errorMessage(validity));\n };\n\n const onEmailInvalid = (e: any) => {\n const { validity } = e.target as HTMLInputElement;\n setError(errorMessage(validity));\n };\n\n if (!isInitialized && hasCartData) {\n setIsInitialized(true);\n setCurrentEmail(cartData?.email || email);\n }\n\n useEffect(() => {\n if (!currentEmail || error) return;\n\n const timer = setTimeout(() => {\n isEmailAvailable(currentEmail)\n .then((result) => {\n setEmailAvailability(result);\n\n if (cartData?.email === currentEmail) return;\n\n setGuestEmailOnCart({\n cartId,\n email: currentEmail,\n }).catch((e: any) => {\n console.log('set email failed', e);\n });\n })\n .catch((e: any) => {\n // TODO: handle error state\n console.log(e);\n setError(translations.LoginFormInvalidEmailError);\n setEmailAvailability(true);\n });\n }, DEBOUNCE_TIME);\n\n return () => {\n timer && clearTimeout(timer);\n };\n }, [\n currentEmail,\n error,\n translations.LoginFormInvalidEmailError,\n cartData?.email,\n cartId,\n ]);\n\n const hint = emailAvailability ? (\n ''\n ) : (\n <>\n {translations.LoginFormEmailExistsAlreadyHaveAccount}{' '}\n <a\n href=\"#\"\n onClick={(e) => {\n e.preventDefault();\n onSignInClick?.(currentEmail);\n }}\n >\n {translations.LoginFormEmailExistsSignInButton}\n </a>{' '}\n {translations.LoginFormEmailExistsForFasterCheckout}\n </>\n );\n\n const onSignInClickHandler = (email: string | null) => {\n const isCurrentEmailValid = currentEmail\n ? isValidEmail(currentEmail)\n : false;\n onSignInClick?.(isCurrentEmailValid ? email : null);\n };\n\n return (\n <LoginFormComponent\n className={className}\n currentEmail={currentEmail}\n error={error}\n hint={hint as any}\n name={LOGIN_FORM_NAME}\n onEmailBlur={onEmailBlur}\n onEmailChange={onEmailChange}\n onEmailInvalid={onEmailInvalid}\n onSignInClick={onSignInClickHandler}\n onSignOutClick={onSignOutClick}\n isAuthenticated={Boolean(isAuthenticatedSignal.value)}\n customer={customer}\n {...props}\n />\n );\n};\n"],"names":["Email","value","error","hint","onChange","onBlur","onInvalid","translations","useText","LoginFormLabel","LoginFormFloatingLabel","LoginFormPlaceholder","_jsx","Field","size","children","Input","id","name","type","autocomplete","placeholder","floatingLabel","required","SignIn","onSignInClick","email","_jsxs","className","Text","href","target","rel","onClick","e","preventDefault","LoginForm","currentEmail","onEmailChange","onEmailBlur","onEmailInvalid","onSignOutClick","isAuthenticated","customer","props","Title","classes","Heading","level","SignOut","firstName","lastName","noValidate","disabled","style","undefined","Divider","variant","isValidEmail","patterns","test","DEBOUNCE_TIME","LoginFormInvalidEmailError","LoginFormMissingEmailError","LoginFormEmailExistsAlreadyHaveAccount","LoginFormEmailExistsSignInButton","LoginFormEmailExistsForFasterCheckout","data","cartData","cartSignal","cartId","hasCartData","isInitialized","setIsInitialized","useState","setCurrentEmail","setError","emailAvailability","setEmailAvailability","errorMessage","validity","valid","valueMissing","customerSignal","useEffect","timer","setTimeout","then","result","setGuestEmailOnCart","catch","log","console","clearTimeout","_Fragment","LoginFormComponent","LOGIN_FORM_NAME","isCurrentEmailValid","Boolean","isAuthenticatedSignal"],"mappings":"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"}
|
package/chunks/PaymentMethods.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"@dropins/tools/event-bus.js";import{i as I}from"./getStoreConfig.js";import{s as
|
|
1
|
+
import"@dropins/tools/event-bus.js";import{i as I}from"./getStoreConfig.js";import{s as z}from"./setPaymentMethod.js";import{H as O}from"./ToggleButton.js";import"@dropins/tools/preact-hooks.js";import{classes as f,Slot as x}from"@dropins/tools/lib.js";import{IllustratedMessage as U,Icon as $,ProgressSpinner as q,Divider as Z,Skeleton as F,SkeletonRow as v,RadioButton as G}from"@dropins/tools/components.js";/* empty css */import{jsx as e,jsxs as y,Fragment as J}from"@dropins/tools/preact-jsx-runtime.js";import*as M from"@dropins/tools/preact-compat.js";import{useState as P,useCallback as N,useEffect as T}from"@dropins/tools/preact-compat.js";import{useText as K}from"@dropins/tools/i18n.js";const Q=t=>M.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},M.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17.93 14.8V18.75H5.97C4.75 18.75 3.75 17.97 3.75 17V6.5M3.75 6.5C3.75 5.53 4.74 4.75 5.97 4.75H15.94V8.25H5.97C4.75 8.25 3.75 7.47 3.75 6.5Z",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),M.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.35 11.64H14.04V14.81H19.35V11.64Z",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),M.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17.9304 11.64V8.25H15.1504",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"})),X=({code:t,isLoading:n,isSelected:d,onChange:s,title:o})=>e(ee,{className:"checkout-payment-methods__method",label:o,name:"payment-method",value:t,selected:d,onChange:s,radioButtonProps:{"aria-busy":n}}),Y=({className:t,paymentMethodContent:n,isLoading:d,onChange:s=()=>{},options:o,selection:u})=>{const l=K({Title:"Checkout.PaymentMethods.title",EmptyState:"Checkout.PaymentMethods.emptyState"});return o===void 0?e(D,{}):y("div",{className:f(["checkout-payment-methods",t]),children:[e(O,{level:2,className:"checkout-payment-methods__title",children:l.Title}),!d&&o.length===0&&e(U,{icon:e($,{source:Q}),message:e("p",{children:l.EmptyState})}),y("div",{className:f(["checkout-payment-methods__wrapper"]),children:[d&&e(q,{className:"checkout-payment-methods__spinner"}),e("div",{className:f(["checkout-payment-methods__methods",["checkout-payment-methods--loading",d],["checkout-payment-methods--full-width",o.length%2!==0]]),children:o==null?void 0:o.map(m=>e(X,{code:m.code,onChange:s,isSelected:m.code===u,title:m.title},m.code))}),n&&e("div",{className:"checkout-payment-methods__content",children:n})]}),e(Z,{variant:"primary"})]})},D=()=>y(F,{"data-testid":"payment-methods-skeleton",children:[e(v,{variant:"heading",size:"medium"}),e(v,{variant:"empty",size:"medium"}),e(v,{size:"xlarge",fullWidth:!0}),e(v,{size:"xlarge",fullWidth:!0})]}),ee=({label:t,name:n,value:d,icon:s,selected:o,onChange:u,className:l,children:m,radioButtonProps:g,...h})=>e("div",{className:f(["checkout-toggle-button",l,["checkout-toggle-button__selected",o]]),...h,children:y("label",{className:"checkout-toggle-button__actionButton",children:[e(G,{...g,label:"",name:n,value:d,checked:o,onChange:()=>u(d),"aria-label":t,className:f([l,"checkout-toggle-button__radioButton"])}),y("div",{className:"checkout-toggle-button__content",children:[s&&e(s.type,{...s==null?void 0:s.props,className:"checkout-toggle-button__icon"}),t]})]})}),L={free:{render:t=>{const n=document.createElement("div");n.innerText="",t.replaceHTML(n)}},checkmo:{render:t=>{const n=document.createElement("div");n.innerText="",t.replaceHTML(n)}}};function te(t){var E;const{onPlaceOrder:n,handleServerError:d,paymentMethodsSlot:s,isShippingInfoRequired:o}=t,[u,l]=P(),[m,g]=P(),[h,_]=P(L),[C,W]=P(!0),{data:a}=I.value,S=(a==null?void 0:a.id)??"",b=!!a,w=!!((E=a==null?void 0:a.shippingAddresses)!=null&&E[0]),i=a==null?void 0:a.availablePaymentMethods,c=a==null?void 0:a.selectedPaymentMethod,k=N(async r=>{try{if(l(r),!w&&o||r===(c==null?void 0:c.code))return;await z({cartId:S,paymentMethod:r})}catch(p){console.error("setting payment method failed:",p)}},[S,w,o,c]);T(()=>{b&&(c!=null&&c.code?(i==null?void 0:i.some(p=>p.code===c.code))?l(c.code):i!=null&&i.length?k(i[0].code):l(void 0):i[0]&&k(m||i[0].code))},[i,b,c,k,m]);const B=async r=>{await k(r),c!=null&&c.code||g(r)},V=N((r,p)=>{if(!r){console.warn("Payment method handler is ignored because it has no code");return}if(!p){console.warn("Payment method handler is ignored because it is empty");return}_(R=>({...R,[r]:p}))},[]),j=s?e(x,{name:"PaymentMethods",slot:s,context:{addPaymentMethodHandler:V,replaceHTML(r){this.replaceWith(r),W(!1)}}}):null,H=u?h[u]:null,A=H?e(x,{name:"PaymentMethodContent",slot:H.render,context:{cartId:S,onPlaceOrder:n,handleServerError:d,replaceHTML(r){this.replaceWith(r)}}},H):void 0;return T(()=>{!C&&h!=L&&console.warn("Payment method handlers you have added are ignored because the default content has been replaced")},[C,h]),{availablePaymentMethods:i,selectedPaymentMethod:u,onPaymentMethodChange:B,paymentMethodContent:A,mainSlotContent:j,isDefaultContentUsed:C}}const ue=t=>{const{onPlaceOrder:n,handleServerError:d,paymentMethodsSlot:s,isShippingInfoRequired:o=!0}=t,{availablePaymentMethods:u,selectedPaymentMethod:l,onPaymentMethodChange:m,paymentMethodContent:g,mainSlotContent:h,isDefaultContentUsed:_}=te({onPlaceOrder:n,handleServerError:d,paymentMethodsSlot:s,isShippingInfoRequired:o});return y(J,{children:[h&&e(h.type,{ref:h.ref,...h.props}),_&&e(Y,{options:u,selection:l,onChange:m,paymentMethodContent:g,isLoading:I.value.pending})]})};export{ue as P};
|
|
2
2
|
//# sourceMappingURL=PaymentMethods.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentMethods.js","sources":["../../node_modules/@adobe/elsie/src/icons/Wallet.svg","../../src/components/PaymentMethods/PaymentMethods.tsx","../../src/components/PaymentMethods/PaymentMethodsSkeleton.tsx","../../src/components/ToggleButton/ToggleButton.tsx","../../src/containers/PaymentMethods/defaultHandlers.tsx","../../src/containers/PaymentMethods/PaymentMethods.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgWallet = (props) => /* @__PURE__ */ React.createElement(\"svg\", { width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M17.93 14.8V18.75H5.97C4.75 18.75 3.75 17.97 3.75 17V6.5M3.75 6.5C3.75 5.53 4.74 4.75 5.97 4.75H15.94V8.25H5.97C4.75 8.25 3.75 7.47 3.75 6.5Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M19.35 11.64H14.04V14.81H19.35V11.64Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M17.9304 11.64V8.25H15.1504\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgWallet;\n","import { Heading, ToggleButton } from '@/checkout/components';\nimport { PaymentMethodsSkeleton } from '@/checkout/components/PaymentMethods';\nimport '@/checkout/components/PaymentMethods/PaymentMethods.css';\nimport { PaymentMethod } from '@/checkout/data/models/payment-method';\nimport {\n Icon,\n IllustratedMessage,\n ProgressSpinner,\n} from '@adobe/elsie/components';\nimport { useText } from '@adobe/elsie/i18n';\nimport { Wallet } from '@adobe/elsie/icons';\nimport { classes } from '@adobe/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface PaymentMethodsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n paymentMethodContent?: VNode;\n isLoading?: boolean;\n onChange?: (value: string) => void;\n options?: PaymentMethod[];\n selection?: string;\n}\n\ninterface PaymentOptionProps {\n code: string;\n isLoading?: boolean;\n isSelected: boolean;\n onChange: (value: string) => void;\n title: string;\n}\n\nconst PaymentOption: FunctionComponent<PaymentOptionProps> = ({\n code,\n isLoading,\n isSelected,\n onChange,\n title,\n}) => {\n return (\n <ToggleButton\n className=\"checkout-payment-methods__method\"\n label={title}\n name=\"payment-method\"\n value={code}\n selected={isSelected}\n onChange={onChange}\n radioButtonProps={{\n 'aria-busy': isLoading,\n }}\n // TODO: Add icon\n />\n );\n};\n\nexport const PaymentMethods: FunctionComponent<PaymentMethodsProps> = ({\n className,\n paymentMethodContent,\n isLoading,\n onChange = () => {},\n options,\n selection,\n}) => {\n const dictionary = useText({\n Title: 'Checkout.PaymentMethods.title',\n EmptyState: 'Checkout.PaymentMethods.emptyState',\n });\n\n if (options === undefined) return <PaymentMethodsSkeleton />;\n\n return (\n <div className={classes(['checkout-payment-methods', className])}>\n <Heading level={2} className=\"checkout-payment-methods__title\">\n {dictionary.Title}\n </Heading>\n\n {!isLoading && options!.length === 0 && (\n <IllustratedMessage\n icon={<Icon source={Wallet} />}\n message={<p>{dictionary.EmptyState}</p>}\n />\n )}\n\n <div className={classes(['checkout-payment-methods__wrapper'])}>\n {isLoading && (\n <ProgressSpinner className=\"checkout-payment-methods__spinner\" />\n )}\n\n <div\n className={classes([\n 'checkout-payment-methods__methods',\n ['checkout-payment-methods--loading', isLoading],\n ['checkout-payment-methods--full-width', options!.length % 2 !== 0],\n ])}\n >\n {options?.map((method) => (\n <PaymentOption\n code={method.code}\n key={method.code}\n onChange={onChange}\n isSelected={method.code === selection}\n title={method.title}\n />\n ))}\n </div>\n\n {paymentMethodContent && (\n <div className=\"checkout-payment-methods__content\">\n {paymentMethodContent}\n </div>\n )}\n </div>\n </div>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Skeleton, SkeletonRow } from '@adobe/elsie/components';\n\nexport const PaymentMethodsSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"payment-methods-skeleton\">\n <SkeletonRow variant=\"heading\" size=\"medium\" />\n <SkeletonRow variant=\"empty\" size=\"medium\" />\n <SkeletonRow size=\"xlarge\" fullWidth={true} />\n <SkeletonRow size=\"xlarge\" fullWidth={true} />\n </Skeleton>\n );\n};\n","import { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { classes } from '@adobe/elsie/lib';\nimport '@/checkout/components/ToggleButton/ToggleButton.css';\nimport { RadioButton } from '@adobe/elsie/components';\n\nexport interface ToggleButtonProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'icon'> {\n label: string;\n name: string;\n value: string;\n selected: boolean;\n onChange: (value: string) => void;\n icon?:\n | VNode<HTMLAttributes<SVGSVGElement>>\n | VNode<HTMLAttributes<HTMLImageElement>>;\n radioButtonProps?: Omit<\n HTMLAttributes<HTMLInputElement>,\n 'size' | 'label' | 'name' | 'value' | 'checked' | 'disabled'\n >;\n}\n\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = ({\n label,\n name,\n value,\n icon,\n selected,\n onChange,\n className,\n children,\n radioButtonProps,\n ...props\n}) => {\n return (\n <div\n className={classes([\n 'checkout-toggle-button',\n className,\n ['checkout-toggle-button__selected', selected],\n ])}\n {...props}\n >\n <label className=\"checkout-toggle-button__actionButton\">\n <RadioButton\n {...radioButtonProps}\n label=\"\"\n name={name}\n value={value}\n checked={selected}\n onChange={() => onChange(value)}\n aria-label={label}\n className={classes([\n className,\n 'checkout-toggle-button__radioButton',\n ])}\n />\n\n <div className=\"checkout-toggle-button__content\">\n {icon && (\n <icon.type\n {...icon?.props}\n className=\"checkout-toggle-button__icon\"\n />\n )}\n\n {label}\n </div>\n </label>\n </div>\n );\n};\n","import { SlotProps } from '@adobe/elsie/lib';\nimport { PaymentMethodContentSlotContext } from '.';\n\nexport interface PaymentMethodHandler {\n render: SlotProps<PaymentMethodContentSlotContext>;\n}\n\nexport interface PaymentMethodHandlers {\n [code: string]: PaymentMethodHandler;\n}\n\nexport const defaultHandlers: PaymentMethodHandlers = {\n free: {\n render: (context) => {\n const $content = document.createElement('div');\n $content.innerText = '';\n context.replaceHTML($content);\n },\n },\n checkmo: {\n render: (context) => {\n const $content = document.createElement('div');\n $content.innerText = '';\n context.replaceHTML($content);\n },\n },\n};\n","import { setPaymentMethod as setPaymentMethodOnCart } from '@/checkout/api';\nimport { PaymentMethods as PaymentMethodsComponent } from '@/checkout/components/PaymentMethods/PaymentMethods';\nimport {\n PaymentMethodHandler,\n defaultHandlers,\n} from '@/checkout/containers/PaymentMethods/defaultHandlers';\nimport { cartSignal } from '@/checkout/signals';\nimport { Container, Slot, SlotProps } from '@adobe/elsie/lib';\nimport {\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'preact/compat';\n\nexport interface PaymentMethodSlotContext {\n addPaymentMethodHandler: (\n code: string,\n handler: { render: SlotProps<PaymentMethodContentSlotContext> }\n ) => void;\n replaceHTML: (domElement: HTMLElement) => void;\n}\n\nexport interface PaymentMethodContentSlotContext {\n cartId: string;\n onPlaceOrder: (fn: () => Promise<void>) => void;\n handleServerError: (error: any) => void;\n replaceHTML: (domElement: HTMLElement) => void;\n}\n\nexport interface PaymentMethodsProps extends HTMLAttributes<HTMLDivElement> {\n paymentMethodsSlot?: SlotProps<PaymentMethodSlotContext>;\n onPlaceOrder: (fn: () => Promise<void>) => void;\n handleServerError: (error: any) => void;\n isShippingInfoRequired?: boolean;\n}\n\nfunction usePaymentMethods(props: PaymentMethodsProps) {\n const {\n onPlaceOrder,\n handleServerError,\n paymentMethodsSlot,\n isShippingInfoRequired,\n } = props;\n\n const prevPaymentMethodSent = useRef<string>();\n\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n string | undefined\n >();\n const [temporarySelectedPaymentMethod, setTemporarySelectedPaymentMethod] =\n useState<string | undefined>();\n\n const [paymentMethodHandlers, setPaymentMethodHandlers] =\n useState(defaultHandlers);\n\n const [isDefaultContentUsed, setIsDefaultContentUsed] = useState(true);\n\n const { data: cartData } = cartSignal.value;\n const cartId = cartData?.id ?? '';\n const hasCartData = !!cartData;\n const hasAddress = !!cartData?.shippingAddresses?.[0];\n const availablePaymentMethods = cartData?.availablePaymentMethods;\n const cartSelectedPaymentMethod = cartData?.selectedPaymentMethod;\n\n const setAndSelectPaymentMethod = useCallback(\n async (paymentMethod: string) => {\n try {\n setSelectedPaymentMethod(paymentMethod);\n\n if (!hasAddress && isShippingInfoRequired) return;\n\n const paymentMethodToSend = paymentMethod;\n if (paymentMethodToSend === prevPaymentMethodSent.current) return;\n prevPaymentMethodSent.current = paymentMethodToSend;\n\n await setPaymentMethodOnCart({ cartId, paymentMethod });\n } catch (error: any) {\n console.error('setting payment method failed:', error);\n }\n },\n [cartId, hasAddress, isShippingInfoRequired]\n );\n\n useEffect(() => {\n if (!hasCartData) return;\n\n if (cartSelectedPaymentMethod?.code) {\n const selectedPaymentMethodIsAvailable = availablePaymentMethods?.some(\n (method: any) => method.code === cartSelectedPaymentMethod.code\n );\n\n if (selectedPaymentMethodIsAvailable) {\n // select the method from the backend\n setSelectedPaymentMethod(cartSelectedPaymentMethod.code);\n } else if (availablePaymentMethods?.length) {\n // select the first available method\n setAndSelectPaymentMethod(availablePaymentMethods[0]!.code);\n } else {\n setSelectedPaymentMethod(undefined);\n }\n } else {\n // default to the temporarily selected one or the first one\n availablePaymentMethods![0] &&\n setAndSelectPaymentMethod(\n temporarySelectedPaymentMethod || availablePaymentMethods![0].code\n );\n }\n }, [\n availablePaymentMethods,\n hasCartData,\n cartSelectedPaymentMethod,\n setAndSelectPaymentMethod,\n temporarySelectedPaymentMethod,\n ]);\n\n const onPaymentMethodChange = async (value: string) => {\n await setAndSelectPaymentMethod(value);\n if (!cartSelectedPaymentMethod?.code) {\n setTemporarySelectedPaymentMethod(value);\n }\n };\n\n const addPaymentMethodHandler = useCallback(\n (code: string, handler: PaymentMethodHandler) => {\n if (!code) {\n console.warn(\n 'Payment method handler is ignored because it has no code'\n );\n return;\n }\n\n if (!handler) {\n console.warn('Payment method handler is ignored because it is empty');\n return;\n }\n\n setPaymentMethodHandlers((prevHandlers) => ({\n ...prevHandlers,\n [code]: handler,\n }));\n },\n []\n );\n\n // Run the main payment method container slot callback\n const mainSlotContent = paymentMethodsSlot ? (\n <Slot\n name=\"PaymentMethods\"\n slot={paymentMethodsSlot}\n context={{\n addPaymentMethodHandler,\n replaceHTML(domElement) {\n this.replaceWith(domElement);\n setIsDefaultContentUsed(false);\n },\n }}\n />\n ) : null;\n\n const selectedPaymentMethodHandler = selectedPaymentMethod\n ? paymentMethodHandlers[selectedPaymentMethod]\n : null;\n\n const paymentMethodContent = selectedPaymentMethodHandler ? (\n <Slot\n key={selectedPaymentMethodHandler}\n name=\"PaymentMethodContent\"\n slot={selectedPaymentMethodHandler.render}\n context={{\n cartId,\n onPlaceOrder,\n handleServerError,\n replaceHTML(domElement) {\n this.replaceWith(domElement);\n },\n }}\n />\n ) : undefined;\n\n useEffect(() => {\n // Content has been replaced but payment method handlers have been added\n if (!isDefaultContentUsed && paymentMethodHandlers != defaultHandlers) {\n console.warn(\n 'Payment method handlers you have added are ignored because the default content has been replaced'\n );\n }\n }, [isDefaultContentUsed, paymentMethodHandlers]);\n\n return {\n availablePaymentMethods,\n selectedPaymentMethod,\n onPaymentMethodChange,\n paymentMethodContent,\n mainSlotContent,\n isDefaultContentUsed,\n };\n}\n\nexport const PaymentMethods: Container<PaymentMethodsProps> = (props) => {\n const {\n onPlaceOrder,\n handleServerError,\n paymentMethodsSlot,\n isShippingInfoRequired = true,\n } = props;\n const {\n availablePaymentMethods,\n selectedPaymentMethod,\n onPaymentMethodChange,\n paymentMethodContent,\n mainSlotContent,\n isDefaultContentUsed,\n } = usePaymentMethods({\n onPlaceOrder,\n handleServerError,\n paymentMethodsSlot,\n isShippingInfoRequired,\n });\n\n return (\n <>\n {mainSlotContent && (\n // @ts-ignore\n <mainSlotContent.type\n ref={mainSlotContent.ref}\n {...mainSlotContent.props}\n />\n )}\n {isDefaultContentUsed && (\n <PaymentMethodsComponent\n options={availablePaymentMethods}\n selection={selectedPaymentMethod}\n onChange={onPaymentMethodChange}\n paymentMethodContent={paymentMethodContent}\n isLoading={cartSignal.value.pending}\n />\n )}\n </>\n );\n};\n"],"names":["SvgWallet","props","React","PaymentOption","code","isLoading","isSelected","onChange","title","_jsx","ToggleButton","className","label","name","value","selected","radioButtonProps","PaymentMethods","paymentMethodContent","options","selection","dictionary","useText","Title","EmptyState","undefined","PaymentMethodsSkeleton","_jsxs","classes","children","Heading","level","length","IllustratedMessage","icon","Icon","source","Wallet","message","ProgressSpinner","map","method","Skeleton","SkeletonRow","variant","size","fullWidth","RadioButton","checked","type","defaultHandlers","free","render","context","$content","document","createElement","innerText","replaceHTML","checkmo","usePaymentMethods","onPlaceOrder","handleServerError","paymentMethodsSlot","isShippingInfoRequired","prevPaymentMethodSent","useRef","selectedPaymentMethod","setSelectedPaymentMethod","useState","temporarySelectedPaymentMethod","setTemporarySelectedPaymentMethod","paymentMethodHandlers","setPaymentMethodHandlers","isDefaultContentUsed","setIsDefaultContentUsed","data","cartData","cartSignal","cartId","id","hasCartData","hasAddress","shippingAddresses","availablePaymentMethods","cartSelectedPaymentMethod","setAndSelectPaymentMethod","useCallback","paymentMethod","paymentMethodToSend","current","setPaymentMethodOnCart","error","useEffect","some","onPaymentMethodChange","addPaymentMethodHandler","handler","console","warn","prevHandlers","mainSlotContent","Slot","slot","domElement","replaceWith","selectedPaymentMethodHandler","_Fragment","ref","PaymentMethodsComponent","pending"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"PaymentMethods.js","sources":["../../node_modules/@adobe/elsie/src/icons/Wallet.svg","../../src/components/PaymentMethods/PaymentMethods.tsx","../../src/components/PaymentMethods/PaymentMethodsSkeleton.tsx","../../src/components/ToggleButton/ToggleButton.tsx","../../src/containers/PaymentMethods/defaultHandlers.tsx","../../src/containers/PaymentMethods/PaymentMethods.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgWallet = (props) => /* @__PURE__ */ React.createElement(\"svg\", { width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M17.93 14.8V18.75H5.97C4.75 18.75 3.75 17.97 3.75 17V6.5M3.75 6.5C3.75 5.53 4.74 4.75 5.97 4.75H15.94V8.25H5.97C4.75 8.25 3.75 7.47 3.75 6.5Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M19.35 11.64H14.04V14.81H19.35V11.64Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M17.9304 11.64V8.25H15.1504\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgWallet;\n","import { Heading, ToggleButton } from '@/checkout/components';\nimport { PaymentMethodsSkeleton } from '@/checkout/components/PaymentMethods';\nimport '@/checkout/components/PaymentMethods/PaymentMethods.css';\nimport { PaymentMethod } from '@/checkout/data/models/payment-method';\nimport {\n Divider,\n Icon,\n IllustratedMessage,\n ProgressSpinner,\n} from '@adobe/elsie/components';\nimport { useText } from '@adobe/elsie/i18n';\nimport { Wallet } from '@adobe/elsie/icons';\nimport { classes } from '@adobe/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface PaymentMethodsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n paymentMethodContent?: VNode;\n isLoading?: boolean;\n onChange?: (value: string) => void;\n options?: PaymentMethod[];\n selection?: string;\n}\n\ninterface PaymentOptionProps {\n code: string;\n isLoading?: boolean;\n isSelected: boolean;\n onChange: (value: string) => void;\n title: string;\n}\n\nconst PaymentOption: FunctionComponent<PaymentOptionProps> = ({\n code,\n isLoading,\n isSelected,\n onChange,\n title,\n}) => {\n return (\n <ToggleButton\n className=\"checkout-payment-methods__method\"\n label={title}\n name=\"payment-method\"\n value={code}\n selected={isSelected}\n onChange={onChange}\n radioButtonProps={{\n 'aria-busy': isLoading,\n }}\n // TODO: Add icon\n />\n );\n};\n\nexport const PaymentMethods: FunctionComponent<PaymentMethodsProps> = ({\n className,\n paymentMethodContent,\n isLoading,\n onChange = () => {},\n options,\n selection,\n}) => {\n const dictionary = useText({\n Title: 'Checkout.PaymentMethods.title',\n EmptyState: 'Checkout.PaymentMethods.emptyState',\n });\n\n if (options === undefined) return <PaymentMethodsSkeleton />;\n\n return (\n <div className={classes(['checkout-payment-methods', className])}>\n <Heading level={2} className=\"checkout-payment-methods__title\">\n {dictionary.Title}\n </Heading>\n\n {!isLoading && options!.length === 0 && (\n <IllustratedMessage\n icon={<Icon source={Wallet} />}\n message={<p>{dictionary.EmptyState}</p>}\n />\n )}\n\n <div className={classes(['checkout-payment-methods__wrapper'])}>\n {isLoading && (\n <ProgressSpinner className=\"checkout-payment-methods__spinner\" />\n )}\n\n <div\n className={classes([\n 'checkout-payment-methods__methods',\n ['checkout-payment-methods--loading', isLoading],\n ['checkout-payment-methods--full-width', options!.length % 2 !== 0],\n ])}\n >\n {options?.map((method) => (\n <PaymentOption\n code={method.code}\n key={method.code}\n onChange={onChange}\n isSelected={method.code === selection}\n title={method.title}\n />\n ))}\n </div>\n\n {paymentMethodContent && (\n <div className=\"checkout-payment-methods__content\">\n {paymentMethodContent}\n </div>\n )}\n </div>\n <Divider variant=\"primary\" />\n </div>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Skeleton, SkeletonRow } from '@adobe/elsie/components';\n\nexport const PaymentMethodsSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"payment-methods-skeleton\">\n <SkeletonRow variant=\"heading\" size=\"medium\" />\n <SkeletonRow variant=\"empty\" size=\"medium\" />\n <SkeletonRow size=\"xlarge\" fullWidth={true} />\n <SkeletonRow size=\"xlarge\" fullWidth={true} />\n </Skeleton>\n );\n};\n","import { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { classes } from '@adobe/elsie/lib';\nimport '@/checkout/components/ToggleButton/ToggleButton.css';\nimport { RadioButton } from '@adobe/elsie/components';\n\nexport interface ToggleButtonProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'icon'> {\n label: string;\n name: string;\n value: string;\n selected: boolean;\n onChange: (value: string) => void;\n icon?:\n | VNode<HTMLAttributes<SVGSVGElement>>\n | VNode<HTMLAttributes<HTMLImageElement>>;\n radioButtonProps?: Omit<\n HTMLAttributes<HTMLInputElement>,\n 'size' | 'label' | 'name' | 'value' | 'checked' | 'disabled'\n >;\n}\n\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = ({\n label,\n name,\n value,\n icon,\n selected,\n onChange,\n className,\n children,\n radioButtonProps,\n ...props\n}) => {\n return (\n <div\n className={classes([\n 'checkout-toggle-button',\n className,\n ['checkout-toggle-button__selected', selected],\n ])}\n {...props}\n >\n <label className=\"checkout-toggle-button__actionButton\">\n <RadioButton\n {...radioButtonProps}\n label=\"\"\n name={name}\n value={value}\n checked={selected}\n onChange={() => onChange(value)}\n aria-label={label}\n className={classes([\n className,\n 'checkout-toggle-button__radioButton',\n ])}\n />\n\n <div className=\"checkout-toggle-button__content\">\n {icon && (\n <icon.type\n {...icon?.props}\n className=\"checkout-toggle-button__icon\"\n />\n )}\n\n {label}\n </div>\n </label>\n </div>\n );\n};\n","import { SlotProps } from '@adobe/elsie/lib';\nimport { PaymentMethodContentSlotContext } from '.';\n\nexport interface PaymentMethodHandler {\n render: SlotProps<PaymentMethodContentSlotContext>;\n}\n\nexport interface PaymentMethodHandlers {\n [code: string]: PaymentMethodHandler;\n}\n\nexport const defaultHandlers: PaymentMethodHandlers = {\n free: {\n render: (context) => {\n const $content = document.createElement('div');\n $content.innerText = '';\n context.replaceHTML($content);\n },\n },\n checkmo: {\n render: (context) => {\n const $content = document.createElement('div');\n $content.innerText = '';\n context.replaceHTML($content);\n },\n },\n};\n","import { setPaymentMethod as setPaymentMethodOnCart } from '@/checkout/api';\nimport { PaymentMethods as PaymentMethodsComponent } from '@/checkout/components/PaymentMethods/PaymentMethods';\nimport {\n PaymentMethodHandler,\n defaultHandlers,\n} from '@/checkout/containers/PaymentMethods/defaultHandlers';\nimport { cartSignal } from '@/checkout/signals';\nimport { Container, Slot, SlotProps } from '@adobe/elsie/lib';\nimport {\n HTMLAttributes,\n useCallback,\n useEffect,\n useState,\n} from 'preact/compat';\n\nexport interface PaymentMethodSlotContext {\n addPaymentMethodHandler: (\n code: string,\n handler: { render: SlotProps<PaymentMethodContentSlotContext> }\n ) => void;\n replaceHTML: (domElement: HTMLElement) => void;\n}\n\nexport interface PaymentMethodContentSlotContext {\n cartId: string;\n onPlaceOrder: (fn: () => Promise<void>) => void;\n handleServerError: (error: any) => void;\n replaceHTML: (domElement: HTMLElement) => void;\n}\n\nexport interface PaymentMethodsProps extends HTMLAttributes<HTMLDivElement> {\n paymentMethodsSlot?: SlotProps<PaymentMethodSlotContext>;\n onPlaceOrder: (fn: () => Promise<void>) => void;\n handleServerError: (error: any) => void;\n isShippingInfoRequired?: boolean;\n}\n\nfunction usePaymentMethods(props: PaymentMethodsProps) {\n const {\n onPlaceOrder,\n handleServerError,\n paymentMethodsSlot,\n isShippingInfoRequired,\n } = props;\n\n const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<\n string | undefined\n >();\n const [temporarySelectedPaymentMethod, setTemporarySelectedPaymentMethod] =\n useState<string | undefined>();\n\n const [paymentMethodHandlers, setPaymentMethodHandlers] =\n useState(defaultHandlers);\n\n const [isDefaultContentUsed, setIsDefaultContentUsed] = useState(true);\n\n const { data: cartData } = cartSignal.value;\n const cartId = cartData?.id ?? '';\n const hasCartData = !!cartData;\n const hasAddress = !!cartData?.shippingAddresses?.[0];\n const availablePaymentMethods = cartData?.availablePaymentMethods;\n const cartSelectedPaymentMethod = cartData?.selectedPaymentMethod;\n\n const setAndSelectPaymentMethod = useCallback(\n async (paymentMethod: string) => {\n try {\n setSelectedPaymentMethod(paymentMethod);\n\n if (!hasAddress && isShippingInfoRequired) return;\n\n if (paymentMethod === cartSelectedPaymentMethod?.code) return;\n\n await setPaymentMethodOnCart({ cartId, paymentMethod });\n } catch (error: any) {\n console.error('setting payment method failed:', error);\n }\n },\n [cartId, hasAddress, isShippingInfoRequired, cartSelectedPaymentMethod]\n );\n\n useEffect(() => {\n if (!hasCartData) return;\n\n if (cartSelectedPaymentMethod?.code) {\n const selectedPaymentMethodIsAvailable = availablePaymentMethods?.some(\n (method: any) => method.code === cartSelectedPaymentMethod.code\n );\n\n if (selectedPaymentMethodIsAvailable) {\n // select the method from the backend\n setSelectedPaymentMethod(cartSelectedPaymentMethod.code);\n } else if (availablePaymentMethods?.length) {\n // select the first available method\n setAndSelectPaymentMethod(availablePaymentMethods[0]!.code);\n } else {\n setSelectedPaymentMethod(undefined);\n }\n } else {\n // default to the temporarily selected one or the first one\n availablePaymentMethods![0] &&\n setAndSelectPaymentMethod(\n temporarySelectedPaymentMethod || availablePaymentMethods![0].code\n );\n }\n }, [\n availablePaymentMethods,\n hasCartData,\n cartSelectedPaymentMethod,\n setAndSelectPaymentMethod,\n temporarySelectedPaymentMethod,\n ]);\n\n const onPaymentMethodChange = async (value: string) => {\n await setAndSelectPaymentMethod(value);\n if (!cartSelectedPaymentMethod?.code) {\n setTemporarySelectedPaymentMethod(value);\n }\n };\n\n const addPaymentMethodHandler = useCallback(\n (code: string, handler: PaymentMethodHandler) => {\n if (!code) {\n console.warn(\n 'Payment method handler is ignored because it has no code'\n );\n return;\n }\n\n if (!handler) {\n console.warn('Payment method handler is ignored because it is empty');\n return;\n }\n\n setPaymentMethodHandlers((prevHandlers) => ({\n ...prevHandlers,\n [code]: handler,\n }));\n },\n []\n );\n\n // Run the main payment method container slot callback\n const mainSlotContent = paymentMethodsSlot ? (\n <Slot\n name=\"PaymentMethods\"\n slot={paymentMethodsSlot}\n context={{\n addPaymentMethodHandler,\n replaceHTML(domElement) {\n this.replaceWith(domElement);\n setIsDefaultContentUsed(false);\n },\n }}\n />\n ) : null;\n\n const selectedPaymentMethodHandler = selectedPaymentMethod\n ? paymentMethodHandlers[selectedPaymentMethod]\n : null;\n\n const paymentMethodContent = selectedPaymentMethodHandler ? (\n <Slot\n key={selectedPaymentMethodHandler}\n name=\"PaymentMethodContent\"\n slot={selectedPaymentMethodHandler.render}\n context={{\n cartId,\n onPlaceOrder,\n handleServerError,\n replaceHTML(domElement) {\n this.replaceWith(domElement);\n },\n }}\n />\n ) : undefined;\n\n useEffect(() => {\n // Content has been replaced but payment method handlers have been added\n if (!isDefaultContentUsed && paymentMethodHandlers != defaultHandlers) {\n console.warn(\n 'Payment method handlers you have added are ignored because the default content has been replaced'\n );\n }\n }, [isDefaultContentUsed, paymentMethodHandlers]);\n\n return {\n availablePaymentMethods,\n selectedPaymentMethod,\n onPaymentMethodChange,\n paymentMethodContent,\n mainSlotContent,\n isDefaultContentUsed,\n };\n}\n\nexport const PaymentMethods: Container<PaymentMethodsProps> = (props) => {\n const {\n onPlaceOrder,\n handleServerError,\n paymentMethodsSlot,\n isShippingInfoRequired = true,\n } = props;\n const {\n availablePaymentMethods,\n selectedPaymentMethod,\n onPaymentMethodChange,\n paymentMethodContent,\n mainSlotContent,\n isDefaultContentUsed,\n } = usePaymentMethods({\n onPlaceOrder,\n handleServerError,\n paymentMethodsSlot,\n isShippingInfoRequired,\n });\n\n return (\n <>\n {mainSlotContent && (\n // @ts-ignore\n <mainSlotContent.type\n ref={mainSlotContent.ref}\n {...mainSlotContent.props}\n />\n )}\n {isDefaultContentUsed && (\n <PaymentMethodsComponent\n options={availablePaymentMethods}\n selection={selectedPaymentMethod}\n onChange={onPaymentMethodChange}\n paymentMethodContent={paymentMethodContent}\n isLoading={cartSignal.value.pending}\n />\n )}\n </>\n );\n};\n"],"names":["SvgWallet","props","React","PaymentOption","code","isLoading","isSelected","onChange","title","_jsx","ToggleButton","className","label","name","value","selected","radioButtonProps","PaymentMethods","paymentMethodContent","options","selection","dictionary","useText","Title","EmptyState","undefined","PaymentMethodsSkeleton","_jsxs","classes","children","Heading","level","length","IllustratedMessage","icon","Icon","source","Wallet","message","ProgressSpinner","map","method","Divider","variant","Skeleton","SkeletonRow","size","fullWidth","RadioButton","checked","type","defaultHandlers","free","render","context","$content","document","createElement","innerText","replaceHTML","checkmo","usePaymentMethods","onPlaceOrder","handleServerError","paymentMethodsSlot","isShippingInfoRequired","selectedPaymentMethod","setSelectedPaymentMethod","useState","temporarySelectedPaymentMethod","setTemporarySelectedPaymentMethod","paymentMethodHandlers","setPaymentMethodHandlers","isDefaultContentUsed","setIsDefaultContentUsed","data","cartData","cartSignal","cartId","id","hasCartData","hasAddress","shippingAddresses","availablePaymentMethods","cartSelectedPaymentMethod","setAndSelectPaymentMethod","useCallback","paymentMethod","setPaymentMethodOnCart","error","useEffect","some","onPaymentMethodChange","addPaymentMethodHandler","handler","console","warn","prevHandlers","mainSlotContent","Slot","slot","domElement","replaceWith","selectedPaymentMethodHandler","_Fragment","ref","PaymentMethodsComponent","pending"],"mappings":"+sBACA,MAAMA,EAAaC,GAA0BC,EAAM,cAAc,MAAO,CAAE,MAAO,GAAI,OAAQ,GAAI,QAAS,YAAa,KAAM,OAAQ,MAAO,6BAA8B,GAAGD,CAAO,EAAkBC,EAAM,cAAc,OAAQ,CAAE,aAAc,qBAAsB,EAAG,gJAAiJ,OAAQ,eAAgB,YAAa,EAAG,cAAe,QAAS,eAAgB,OAAO,CAAE,EAAmBA,EAAM,cAAc,OAAQ,CAAE,aAAc,qBAAsB,EAAG,wCAAyC,OAAQ,eAAgB,YAAa,EAAG,cAAe,QAAS,eAAgB,OAAS,CAAA,EAAmBA,EAAM,cAAc,OAAQ,CAAE,aAAc,qBAAsB,EAAG,8BAA+B,OAAQ,eAAgB,YAAa,EAAG,cAAe,QAAS,eAAgB,OAAO,CAAE,CAAC,ECgC15BC,EAAuDA,CAAC,CAC5DC,KAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,MAAAA,CACF,IAEIC,EAACC,GAAY,CACXC,UAAU,mCACVC,MAAOJ,EACPK,KAAK,iBACLC,MAAOV,EACPW,SAAUT,EACVC,SAAAA,EACAS,iBAAkB,CAChB,YAAaX,CACf,CAAA,CAED,EAIQY,EAAyDA,CAAC,CACrEN,UAAAA,EACAO,qBAAAA,EACAb,UAAAA,EACAE,SAAAA,EAAWA,IAAM,CAAC,EAClBY,QAAAA,EACAC,UAAAA,CACF,IAAM,CACJ,MAAMC,EAAaC,EAAQ,CACzBC,MAAO,gCACPC,WAAY,oCAAA,CACb,EAED,OAAIL,IAAYM,OAAkBhB,EAACiB,EAAsB,CAAA,CAAE,EAGzDC,EAAA,MAAA,CAAKhB,UAAWiB,EAAQ,CAAC,2BAA4BjB,CAAS,CAAC,EAAEkB,SAAA,CAC/DpB,EAACqB,EAAO,CAACC,MAAO,EAAGpB,UAAU,kCAAiCkB,SAC3DR,EAAWE,KAAAA,CACL,EAER,CAAClB,GAAac,EAASa,SAAW,GACjCvB,EAACwB,EAAkB,CACjBC,KAAMzB,EAAC0B,EAAI,CAACC,OAAQC,CAAAA,CAAS,EAC7BC,QAAS7B,EAAA,IAAA,CAAAoB,SAAIR,EAAWG,UAAAA,CAAc,CAAA,CACvC,EAGHG,EAAA,MAAA,CAAKhB,UAAWiB,EAAQ,CAAC,mCAAmC,CAAC,EAAEC,SAC5DxB,CAAAA,GACCI,EAAC8B,EAAe,CAAC5B,UAAU,mCAAA,CAAqC,EAGlEF,EAAA,MAAA,CACEE,UAAWiB,EAAQ,CACjB,oCACA,CAAC,oCAAqCvB,CAAS,EAC/C,CAAC,uCAAwCc,EAASa,OAAS,IAAM,CAAC,CAAC,CACpE,EAAEH,SAEFV,GAAAA,YAAAA,EAASqB,IAAKC,GACbhC,EAACN,EAAa,CACZC,KAAMqC,EAAOrC,KAEbG,SAAAA,EACAD,WAAYmC,EAAOrC,OAASgB,EAC5BZ,MAAOiC,EAAOjC,KAAAA,EAHTiC,EAAOrC,IAIb,EACF,CACE,EAEJc,GACCT,EAAA,MAAA,CAAKE,UAAU,oCAAmCkB,SAC/CX,CAAAA,CACE,CACN,CAAA,CACE,EACLT,EAACiC,EAAO,CAACC,QAAQ,SAAA,CAAW,CAAC,CAAA,CAC1B,CAET,ECjHajB,EAA4CA,IAErDC,EAACiB,EAAQ,CAAC,cAAY,2BAA0Bf,SAAA,CAC9CpB,EAACoC,EAAW,CAACF,QAAQ,UAAUG,KAAK,QAAA,CAAU,EAC9CrC,EAACoC,EAAW,CAACF,QAAQ,QAAQG,KAAK,QAAA,CAAU,EAC5CrC,EAACoC,EAAW,CAACC,KAAK,SAASC,UAAW,EAAA,CAAO,EAC7CtC,EAACoC,EAAW,CAACC,KAAK,SAASC,UAAW,EAAA,CAAO,CAAC,CAAA,CACtC,ECYDrC,GAAqDA,CAAC,CACjEE,MAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAoB,KAAAA,EACAnB,SAAAA,EACAR,SAAAA,EACAI,UAAAA,EACAkB,SAAAA,EACAb,iBAAAA,EACA,GAAGf,CACL,IAEIQ,EAAA,MAAA,CACEE,UAAWiB,EAAQ,CACjB,yBACAjB,EACA,CAAC,mCAAoCI,CAAQ,CAAC,CAC/C,EAAE,GACCd,EAAK4B,SAETF,EAAA,QAAA,CAAOhB,UAAU,uCAAsCkB,SAAA,CACrDpB,EAACuC,EAAW,CAAA,GACNhC,EACJJ,MAAM,GACNC,KAAAA,EACAC,MAAAA,EACAmC,QAASlC,EACTR,SAAUA,IAAMA,EAASO,CAAK,EAC9B,aAAYF,EACZD,UAAWiB,EAAQ,CACjBjB,EACA,qCAAqC,CACtC,CAAA,CACF,EAEDgB,EAAA,MAAA,CAAKhB,UAAU,kCAAiCkB,UAC7CK,GACCzB,EAACyB,EAAKgB,KAAI,CAAA,GACJhB,GAAAA,YAAAA,EAAMjC,MACVU,UAAU,8BACX,CAAA,EAGFC,CAAK,CAAA,CACH,CAAC,CAAA,CACD,CAAA,CACJ,EC1DIuC,EAAyC,CACpDC,KAAM,CACJC,OAAqBC,GAAA,CACbC,MAAAA,EAAWC,SAASC,cAAc,KAAK,EAC7CF,EAASG,UAAY,GACrBJ,EAAQK,YAAYJ,CAAQ,CAC9B,CACF,EACAK,QAAS,CACPP,OAAqBC,GAAA,CACbC,MAAAA,EAAWC,SAASC,cAAc,KAAK,EAC7CF,EAASG,UAAY,GACrBJ,EAAQK,YAAYJ,CAAQ,CAC9B,CACF,CACF,ECWA,SAASM,GAAkB5D,EAA4B,OAC/C,KAAA,CACJ6D,aAAAA,EACAC,kBAAAA,EACAC,mBAAAA,EACAC,uBAAAA,CACEhE,EAAAA,EAEE,CAACiE,EAAuBC,CAAwB,EAAIC,EAExD,EACI,CAACC,EAAgCC,CAAiC,EACtEF,EAA6B,EAEzB,CAACG,EAAuBC,CAAwB,EACpDJ,EAASjB,CAAe,EAEpB,CAACsB,EAAsBC,CAAuB,EAAIN,EAAS,EAAI,EAE/D,CAAEO,KAAMC,CAAAA,EAAaC,EAAW/D,MAChCgE,GAASF,GAAAA,YAAAA,EAAUG,KAAM,GACzBC,EAAc,CAAC,CAACJ,EAChBK,EAAa,CAAC,GAACL,EAAAA,GAAAA,YAAAA,EAAUM,oBAAVN,MAAAA,EAA8B,IAC7CO,EAA0BP,GAAAA,YAAAA,EAAUO,wBACpCC,EAA4BR,GAAAA,YAAAA,EAAUV,sBAEtCmB,EAA4BC,EAChC,MAAOC,GAA0B,CAC3B,GAAA,CAKF,GAJApB,EAAyBoB,CAAa,EAElC,CAACN,GAAchB,GAEfsB,KAAkBH,GAAAA,YAAAA,EAA2BhF,MAAM,OAEvD,MAAMoF,EAAuB,CAAEV,OAAAA,EAAQS,cAAAA,CAAAA,CAAe,QAC/CE,EAAY,CACXA,QAAAA,MAAM,iCAAkCA,CAAK,CACvD,GAEF,CAACX,EAAQG,EAAYhB,EAAwBmB,CAAyB,CACxE,EAEAM,EAAU,IAAM,CACTV,IAEDI,GAAAA,MAAAA,EAA2BhF,MACY+E,GAAAA,YAAAA,EAAyBQ,KAC/DlD,GAAgBA,EAAOrC,OAASgF,EAA0BhF,OAK3D+D,EAAyBiB,EAA0BhF,IAAI,EAC9C+E,GAAAA,MAAAA,EAAyBnD,OAERmD,EAAAA,EAAwB,CAAC,EAAG/E,IAAI,EAE1D+D,EAAyB1C,MAAS,EAIpC0D,EAAyB,CAAC,GACxBE,EACEhB,GAAkCc,EAAyB,CAAC,EAAE/E,IAChE,EACJ,EACC,CACD+E,EACAH,EACAI,EACAC,EACAhB,CAA8B,CAC/B,EAEKuB,MAAAA,EAAwB,MAAO9E,GAAkB,CACrD,MAAMuE,EAA0BvE,CAAK,EAChCsE,GAAAA,MAAAA,EAA2BhF,MAC9BkE,EAAkCxD,CAAK,CACzC,EAGI+E,EAA0BP,EAC9B,CAAClF,EAAc0F,IAAkC,CAC/C,GAAI,CAAC1F,EAAM,CACT2F,QAAQC,KACN,0DACF,EACA,MACF,CAEA,GAAI,CAACF,EAAS,CACZC,QAAQC,KAAK,uDAAuD,EACpE,MACF,CAEAxB,EAA4CyB,IAAA,CAC1C,GAAGA,EACH,CAAC7F,CAAI,EAAG0F,CACR,EAAA,CACJ,EACA,CACF,CAAA,EAGMI,EAAkBlC,EACtBvD,EAAC0F,EAAI,CACHtF,KAAK,iBACLuF,KAAMpC,EACNV,QAAS,CACPuC,wBAAAA,EACAlC,YAAY0C,EAAY,CACtB,KAAKC,YAAYD,CAAU,EAC3B3B,EAAwB,EAAK,CAC/B,CACF,CACD,CAAA,EACC,KAEE6B,EAA+BrC,EACjCK,EAAsBL,CAAqB,EAC3C,KAEEhD,EAAuBqF,EAC3B9F,EAAC0F,EAAI,CAEHtF,KAAK,uBACLuF,KAAMG,EAA6BlD,OACnCC,QAAS,CACPwB,OAAAA,EACAhB,aAAAA,EACAC,kBAAAA,EACAJ,YAAY0C,EAAY,CACtB,KAAKC,YAAYD,CAAU,CAC7B,CACF,CAAA,EAVKE,CAWN,EACC9E,OAEJiE,OAAAA,EAAU,IAAM,CAEV,CAACjB,GAAwBF,GAAyBpB,GACpD4C,QAAQC,KACN,kGACF,CACF,EACC,CAACvB,EAAsBF,CAAqB,CAAC,EAEzC,CACLY,wBAAAA,EACAjB,sBAAAA,EACA0B,sBAAAA,EACA1E,qBAAAA,EACAgF,gBAAAA,EACAzB,qBAAAA,CAAAA,CAEJ,CAEO,MAAMxD,GAA4DhB,GAAA,CACjE,KAAA,CACJ6D,aAAAA,EACAC,kBAAAA,EACAC,mBAAAA,EACAC,uBAAAA,EAAyB,EACvBhE,EAAAA,EACE,CACJkF,wBAAAA,EACAjB,sBAAAA,EACA0B,sBAAAA,EACA1E,qBAAAA,EACAgF,gBAAAA,EACAzB,qBAAAA,GACEZ,GAAkB,CACpBC,aAAAA,EACAC,kBAAAA,EACAC,mBAAAA,EACAC,uBAAAA,CAAAA,CACD,EAED,OACEtC,EAAA6E,EAAA,CAAA3E,UACGqE,GAECzF,EAACyF,EAAgBhD,KAAI,CACnBuD,IAAKP,EAAgBO,IAAI,GACrBP,EAAgBjG,KAAAA,CACrB,EAEFwE,GACChE,EAACiG,EAAuB,CACtBvF,QAASgE,EACT/D,UAAW8C,EACX3D,SAAUqF,EACV1E,qBAAAA,EACAb,UAAWwE,EAAW/D,MAAM6F,OAAAA,CAC7B,CACF,CAAA,CACD,CAEN","x_google_ignoreList":[0]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{e as I}from"./getMultilineValues.js";import{m as T,i as N}from"./getStoreConfig.js";import"@dropins/tools/event-bus.js";import{f as
|
|
1
|
+
import{e as I}from"./getMultilineValues.js";import{m as T,i as N}from"./getStoreConfig.js";import"@dropins/tools/event-bus.js";import{f as y,r as O}from"./transform-shipping-methods.js";import{s as j}from"./SelectedShippingMethodSignal.js";import{s as B}from"./setShippingMethods.js";import{classes as H}from"@dropins/tools/lib.js";import{H as D}from"./ToggleButton.js";import{IllustratedMessage as P,Icon as V,ProgressSpinner as Z,RadioButton as q,Price as F,Divider as $,Skeleton as A,SkeletonRow as C}from"@dropins/tools/components.js";import"@dropins/tools/preact-hooks.js";/* empty css */import{jsx as t,jsxs as E,Fragment as G}from"@dropins/tools/preact-jsx-runtime.js";import*as r from"@dropins/tools/preact-compat.js";import{useCallback as J,useMemo as K,useEffect as x}from"@dropins/tools/preact-compat.js";import{useText as Q}from"@dropins/tools/i18n.js";const U=e=>r.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M2.47266 4.90002H15.1851V10.9645H21.2495L23 12.715V17.6124H20.073",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M15.1758 5.87573H19.0019L21.0394 10.7636",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M9.76151 16.7898C9.76151 18.0525 8.72845 19.076 7.46582 19.076C6.20318 19.076 5.17969 18.0429 5.17969 16.7803C5.17969 15.5176 6.20318 14.4941 7.46582 14.4941C8.72845 14.4941 9.75195 15.5176 9.76151 16.7803C9.76151 16.7803 9.76151 16.7803 9.76151 16.7898Z",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.8726 16.7898C19.8726 18.062 18.8491 19.0855 17.5769 19.0855C16.3047 19.0855 15.2812 18.062 15.2812 16.7898C15.2812 15.5176 16.3047 14.4941 17.5769 14.4941C18.8491 14.4941 19.8726 15.5176 19.8726 16.7898Z",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M8.08792 7.63574H1.69824",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M7.11229 10.3619H1",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M5.16084 13.0402H1.92773",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M9.76172 16.7611H15.2809",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M2.38672 16.7611H5.17025",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"})),X=({className:e,isLoading:i=!1,onSelectionChange:s=()=>{},options:l,selection:o,...g})=>{const v=Q({Title:"Checkout.ShippingMethods.title",EmptyState:"Checkout.ShippingMethods.emptyState"});return l===void 0?t(Y,{}):E("div",{...g,className:H(["checkout-shipping-methods",e]),children:[t(D,{level:3,className:"checkout-shipping-methods__title",children:v.Title}),!i&&l.length===0&&t(P,{icon:t(V,{source:U}),message:t("p",{children:v.EmptyState})}),E("div",{className:H(["checkout-shipping-methods__content"]),children:[i&&t(Z,{className:"checkout-shipping-methods__spinner"}),t("div",{className:H(["checkout-shipping-methods__options",["checkout-shipping-methods__options--loading",i]]),children:l.map(n=>t(q,{"data-testid":"shipping-method-radiobutton","aria-busy":i,id:n.value,name:"shipping-method",className:"checkout-shipping-methods__method",label:E(G,{children:[t(F,{amount:n.amount.value,currency:n.amount.currency})," ",t("span",{children:n.carrier.title})]}),description:n.title,value:n.value,checked:(o==null?void 0:o.value)===n.value,onChange:()=>s(n)},n.value))})]}),t($,{variant:"primary"})]})},Y=()=>E(A,{"data-testid":"shipping-methods-skeleton",children:[t(C,{variant:"heading",size:"small"}),t(C,{variant:"empty",size:"small"}),t(C,{size:"medium",fullWidth:!0}),t(C,{size:"medium",fullWidth:!0})]}),W=(e,i)=>e.code===i.code&&e.carrier.code===i.carrier.code;function ee(e){const s=T().config,l=!s,o=N.value.data,g=N.value.pending,v=y.value.data,n=y.value.pending,m=j.value,u=o==null?void 0:o.id,L=o==null?void 0:o.shippingAddresses,p=L==null?void 0:L[0],b=!!p,M=p==null?void 0:p.availableShippingMethods,k=p==null?void 0:p.selectedShippingMethod,a=M||v,w=J(c=>{if(!u||!b)return;const h={method_code:c.code,carrier_code:c.carrier.code};B({cartId:u,shippingMethods:[h]}).catch(S=>{console.error("setting shipping methods on cart failed:",S)})},[u,b]),R=c=>{j.value=c},d=K(()=>{if(!(a!=null&&a.length))return;const c=a[0],h=m||k;return h?a.some(f=>W(f,h))?h:c:a.find(_=>_.carrier.code===(e==null?void 0:e.carrierCode)&&_.code===(e==null?void 0:e.methodCode))||c},[m,k,a,e]);return x(()=>{d&&((!m||!W(d,m))&&(j.value=d),(!k||!W(d,k))&&w(d))},[d,m,k,w]),x(()=>{if(!u||M)return;const{country:c,selectedRegion:h,selectedRegionId:S}=O.value,f=c||(s==null?void 0:s.defaultCountry);f&&I({cartId:u,criteria:{country_code:f,region_name:h,region_id:S}}).catch(z=>{y.value={pending:!1,data:[]},console.error("shipping methods estimation failed:",z)})},[u,M,s]),{isLoading:g||l||n,options:a,selection:d,onSelectionChange:R}}const me=({preSelectedMethod:e,...i})=>{const{isLoading:s,options:l,selection:o,onSelectionChange:g}=ee(e);return t(X,{...i,className:"checkout-shipping-methods",isLoading:s,onSelectionChange:g,options:l,selection:o})};export{me as S};
|
|
2
2
|
//# sourceMappingURL=ShippingMethods.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShippingMethods.js","sources":["../../node_modules/@adobe/elsie/src/icons/Delivery.svg","../../src/components/ShippingMethods/ShippingMethods.tsx","../../src/components/ShippingMethods/ShippingMethodsSkeleton.tsx","../../src/utils/shippingMethods/isEqual.ts","../../src/containers/ShippingMethods/ShippingMethods.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgDelivery = (props) => /* @__PURE__ */ React.createElement(\"svg\", { width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M2.47266 4.90002H15.1851V10.9645H21.2495L23 12.715V17.6124H20.073\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M15.1758 5.87573H19.0019L21.0394 10.7636\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M9.76151 16.7898C9.76151 18.0525 8.72845 19.076 7.46582 19.076C6.20318 19.076 5.17969 18.0429 5.17969 16.7803C5.17969 15.5176 6.20318 14.4941 7.46582 14.4941C8.72845 14.4941 9.75195 15.5176 9.76151 16.7803C9.76151 16.7803 9.76151 16.7803 9.76151 16.7898Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M19.8726 16.7898C19.8726 18.062 18.8491 19.0855 17.5769 19.0855C16.3047 19.0855 15.2812 18.062 15.2812 16.7898C15.2812 15.5176 16.3047 14.4941 17.5769 14.4941C18.8491 14.4941 19.8726 15.5176 19.8726 16.7898Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M8.08792 7.63574H1.69824\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M7.11229 10.3619H1\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M5.16084 13.0402H1.92773\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M9.76172 16.7611H15.2809\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M2.38672 16.7611H5.17025\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgDelivery;\n","import { classes } from '@adobe/elsie/lib';\nimport '@/checkout/components/ShippingMethods/ShippingMethods.css';\nimport {\n Icon,\n IllustratedMessage,\n Price,\n ProgressSpinner,\n RadioButton,\n} from '@adobe/elsie/components';\nimport { useText } from '@adobe/elsie/i18n';\nimport { Delivery } from '@adobe/elsie/icons';\nimport { Heading } from '@/checkout/components';\nimport { ShippingMethodsSkeleton } from '@/checkout/components/ShippingMethods';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { ShippingMethod } from '@/checkout/data/models';\n\nexport interface ShippingMethodsProps extends HTMLAttributes<HTMLDivElement> {\n isLoading?: boolean;\n onSelectionChange?: (method: ShippingMethod) => void;\n options?: ShippingMethod[];\n selection?: ShippingMethod;\n}\n\nexport const ShippingMethods: FunctionComponent<ShippingMethodsProps> = ({\n className,\n isLoading = false,\n onSelectionChange = () => {},\n options,\n selection,\n ...props\n}) => {\n const dictionary = useText({\n Title: 'Checkout.ShippingMethods.title',\n EmptyState: 'Checkout.ShippingMethods.emptyState',\n });\n\n if (options === undefined) return <ShippingMethodsSkeleton />;\n\n return (\n <div\n {...props}\n className={classes(['checkout-shipping-methods', className])}\n >\n <Heading level={3} className=\"checkout-shipping-methods__title\">\n {dictionary.Title}\n </Heading>\n\n {!isLoading && options.length === 0 && (\n <IllustratedMessage\n icon={<Icon source={Delivery} />}\n message={<p>{dictionary.EmptyState}</p>}\n />\n )}\n\n <div className={classes(['checkout-shipping-methods__content'])}>\n {isLoading && (\n <ProgressSpinner className=\"checkout-shipping-methods__spinner\" />\n )}\n\n <div\n className={classes([\n 'checkout-shipping-methods__options',\n ['checkout-shipping-methods__options--loading', isLoading],\n ])}\n >\n {options.map((method: ShippingMethod) => {\n return (\n <RadioButton\n data-testid=\"shipping-method-radiobutton\"\n aria-busy={isLoading}\n id={method.value}\n key={method.value}\n name=\"shipping-method\"\n className=\"checkout-shipping-methods__method\"\n label={\n <>\n <Price\n amount={method.amount.value}\n currency={method.amount.currency}\n />\n \n <span>{method.carrier.title}</span>\n </>\n }\n description={method.title}\n value={method.value}\n checked={selection?.value === method.value}\n onChange={() => onSelectionChange(method)}\n />\n );\n })}\n </div>\n </div>\n </div>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Skeleton, SkeletonRow } from '@adobe/elsie/components';\n\nexport const ShippingMethodsSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"shipping-methods-skeleton\">\n <SkeletonRow variant=\"heading\" size=\"small\" />\n <SkeletonRow variant=\"empty\" size=\"small\" />\n <SkeletonRow size=\"medium\" fullWidth={true} />\n <SkeletonRow size=\"medium\" fullWidth={true} />\n </Skeleton>\n );\n};\n","import { ShippingMethod } from '@/checkout/data/models';\n\nexport const isEqual = (a: ShippingMethod, b: ShippingMethod) => {\n return a.code === b.code && a.carrier.code === b.carrier.code;\n};\n","import {\n estimateShippingMethods,\n setShippingMethodsOnCart,\n} from '@/checkout/api';\nimport { ShippingMethods as ShippingMethodsList } from '@/checkout/components/ShippingMethods';\nimport { PreselectedShippingMethod } from '@/checkout/containers/Checkout';\nimport { useStore } from '@/checkout/context/store';\nimport { ShippingMethod } from '@/checkout/data/models';\nimport {\n cartSignal,\n estimateShippingMethodsSignal,\n regionsSignal,\n} from '@/checkout/signals';\nimport { selectedShippingMethodSignal } from '@/checkout/signals/SelectedShippingMethodSignal';\nimport { isEqual } from '@/checkout/utils/shippingMethods';\nimport { Container } from '@adobe/elsie/lib';\nimport { HTMLAttributes, useCallback, useEffect, useMemo } from 'preact/compat';\n\nexport interface ShippingMethodsProps extends HTMLAttributes<HTMLDivElement> {\n preSelectedMethod?: PreselectedShippingMethod;\n}\n\nfunction useShippingMethods(preselectedMethod?: PreselectedShippingMethod) {\n const store = useStore();\n const config = store.config;\n const isLoadingConfig = !config;\n\n const cart = cartSignal.value.data;\n const isLoadingCart = cartSignal.value.pending;\n const estimationShippingMethods = estimateShippingMethodsSignal.value.data;\n const isLoadingEstimation = estimateShippingMethodsSignal.value.pending;\n const localShippingSelection = selectedShippingMethodSignal.value;\n\n const cartId = cart?.id;\n const cartShippingAddresses = cart?.shippingAddresses;\n const primaryAddress = cartShippingAddresses?.[0];\n const isAbleToSetShippingMethod = !!primaryAddress;\n const cartShippingMethods = primaryAddress?.availableShippingMethods;\n const cartShippingSelection = primaryAddress?.selectedShippingMethod;\n\n const shippingOptions = cartShippingMethods || estimationShippingMethods;\n\n const setShippingMethodOnCart = useCallback(\n (method: ShippingMethod) => {\n if (!cartId || !isAbleToSetShippingMethod) return;\n\n const partialMethod = {\n method_code: method.code,\n carrier_code: method.carrier.code,\n };\n\n setShippingMethodsOnCart({\n cartId,\n shippingMethods: [partialMethod],\n }).catch((error) => {\n console.error('setting shipping methods on cart failed:', error);\n });\n },\n [cartId, isAbleToSetShippingMethod]\n );\n\n const onSelectionChange = (method: ShippingMethod) => {\n selectedShippingMethodSignal.value = method;\n };\n\n /**\n * This memo is responsible for determining the selected shipping method\n * based on the current state of the cart and the available shipping methods.\n */\n const selectedShippingOption: ShippingMethod | undefined = useMemo(() => {\n if (!shippingOptions?.length) return;\n\n const fallbackShippingOption = shippingOptions[0];\n const selection = localShippingSelection || cartShippingSelection;\n\n if (!selection) {\n const preselection = shippingOptions.find((method) => {\n return (\n method.carrier.code === preselectedMethod?.carrierCode &&\n method.code === preselectedMethod?.methodCode\n );\n });\n\n return preselection || fallbackShippingOption;\n }\n\n const isAvailable = shippingOptions.some((method) =>\n isEqual(method, selection)\n );\n\n return isAvailable ? selection : fallbackShippingOption;\n }, [\n localShippingSelection,\n cartShippingSelection,\n shippingOptions,\n preselectedMethod,\n ]);\n\n /**\n * This effect is responsible for syncing the local and cart state with the current selection.\n\n * - Initialize the local selection with the data from the cart when needed.\n * - Initialize the local selection and sync the cart when using the first available method.\n * - If the cart gets out of sync, update the cart with the local selection.\n */\n useEffect(() => {\n if (!selectedShippingOption) return;\n\n if (\n !localShippingSelection ||\n !isEqual(selectedShippingOption, localShippingSelection)\n ) {\n selectedShippingMethodSignal.value = selectedShippingOption;\n }\n\n if (\n !cartShippingSelection ||\n !isEqual(selectedShippingOption, cartShippingSelection)\n ) {\n setShippingMethodOnCart(selectedShippingOption);\n }\n }, [\n selectedShippingOption,\n localShippingSelection,\n cartShippingSelection,\n setShippingMethodOnCart,\n ]);\n\n /**\n * This effect is responsible for triggering the shipping methods estimation.\n *\n * - Only triggers if there is cart data and no available shipping methods.\n * - Builds the estimate shipping search fields using the current region data or defaults.\n * - Calls the estimateShipping function with the cartId and search fields.\n */\n useEffect(() => {\n if (!cartId || cartShippingMethods) return;\n\n const {\n country: regionCountry,\n selectedRegion,\n selectedRegionId,\n } = regionsSignal.value;\n\n const country = regionCountry || config?.defaultCountry;\n\n if (country) {\n const criteria = {\n country_code: country,\n region_name: selectedRegion,\n region_id: selectedRegionId,\n };\n\n estimateShippingMethods({ cartId, criteria }).catch((error: any) => {\n estimateShippingMethodsSignal.value = { pending: false, data: [] };\n console.error('shipping methods estimation failed:', error);\n });\n }\n }, [cartId, cartShippingMethods, config]);\n\n return {\n isLoading: isLoadingCart || isLoadingConfig || isLoadingEstimation,\n options: shippingOptions,\n selection: selectedShippingOption,\n onSelectionChange,\n };\n}\n\nexport const ShippingMethods: Container<ShippingMethodsProps> = ({\n preSelectedMethod,\n ...props\n}) => {\n const { isLoading, options, selection, onSelectionChange } =\n useShippingMethods(preSelectedMethod);\n\n return (\n <ShippingMethodsList\n {...props}\n className=\"checkout-shipping-methods\"\n isLoading={isLoading}\n onSelectionChange={onSelectionChange}\n options={options}\n selection={selection}\n />\n );\n};\n"],"names":["SvgDelivery","props","React","ShippingMethods","className","isLoading","onSelectionChange","options","selection","dictionary","useText","Title","EmptyState","undefined","_jsx","ShippingMethodsSkeleton","_jsxs","classes","children","Heading","level","length","IllustratedMessage","icon","Icon","source","Delivery","message","ProgressSpinner","map","method","RadioButton","id","value","name","label","_Fragment","Price","amount","currency","carrier","title","description","checked","onChange","Skeleton","SkeletonRow","variant","size","fullWidth","isEqual","a","b","code","useShippingMethods","preselectedMethod","config","useStore","isLoadingConfig","cart","cartSignal","data","isLoadingCart","pending","estimationShippingMethods","estimateShippingMethodsSignal","isLoadingEstimation","localShippingSelection","selectedShippingMethodSignal","cartId","cartShippingAddresses","shippingAddresses","primaryAddress","isAbleToSetShippingMethod","cartShippingMethods","availableShippingMethods","cartShippingSelection","selectedShippingMethod","shippingOptions","setShippingMethodOnCart","useCallback","partialMethod","method_code","carrier_code","setShippingMethodsOnCart","shippingMethods","catch","error","selectedShippingOption","useMemo","fallbackShippingOption","some","find","carrierCode","methodCode","useEffect","country","regionCountry","selectedRegion","selectedRegionId","regionsSignal","defaultCountry","estimateShippingMethods","criteria","country_code","region_name","region_id","preSelectedMethod","ShippingMethodsList"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"ShippingMethods.js","sources":["../../node_modules/@adobe/elsie/src/icons/Delivery.svg","../../src/components/ShippingMethods/ShippingMethods.tsx","../../src/components/ShippingMethods/ShippingMethodsSkeleton.tsx","../../src/utils/shippingMethods/isEqual.ts","../../src/containers/ShippingMethods/ShippingMethods.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgDelivery = (props) => /* @__PURE__ */ React.createElement(\"svg\", { width: 24, height: 24, viewBox: \"0 0 24 24\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M2.47266 4.90002H15.1851V10.9645H21.2495L23 12.715V17.6124H20.073\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M15.1758 5.87573H19.0019L21.0394 10.7636\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M9.76151 16.7898C9.76151 18.0525 8.72845 19.076 7.46582 19.076C6.20318 19.076 5.17969 18.0429 5.17969 16.7803C5.17969 15.5176 6.20318 14.4941 7.46582 14.4941C8.72845 14.4941 9.75195 15.5176 9.76151 16.7803C9.76151 16.7803 9.76151 16.7803 9.76151 16.7898Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M19.8726 16.7898C19.8726 18.062 18.8491 19.0855 17.5769 19.0855C16.3047 19.0855 15.2812 18.062 15.2812 16.7898C15.2812 15.5176 16.3047 14.4941 17.5769 14.4941C18.8491 14.4941 19.8726 15.5176 19.8726 16.7898Z\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M8.08792 7.63574H1.69824\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M7.11229 10.3619H1\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M5.16084 13.0402H1.92773\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M9.76172 16.7611H15.2809\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { vectorEffect: \"non-scaling-stroke\", d: \"M2.38672 16.7611H5.17025\", stroke: \"currentColor\", strokeWidth: 1, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgDelivery;\n","import { classes } from '@adobe/elsie/lib';\nimport '@/checkout/components/ShippingMethods/ShippingMethods.css';\nimport {\n Divider,\n Icon,\n IllustratedMessage,\n Price,\n ProgressSpinner,\n RadioButton,\n} from '@adobe/elsie/components';\nimport { useText } from '@adobe/elsie/i18n';\nimport { Delivery } from '@adobe/elsie/icons';\nimport { Heading } from '@/checkout/components';\nimport { ShippingMethodsSkeleton } from '@/checkout/components/ShippingMethods';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\nimport { ShippingMethod } from '@/checkout/data/models';\n\nexport interface ShippingMethodsProps extends HTMLAttributes<HTMLDivElement> {\n isLoading?: boolean;\n onSelectionChange?: (method: ShippingMethod) => void;\n options?: ShippingMethod[];\n selection?: ShippingMethod;\n}\n\nexport const ShippingMethods: FunctionComponent<ShippingMethodsProps> = ({\n className,\n isLoading = false,\n onSelectionChange = () => {},\n options,\n selection,\n ...props\n}) => {\n const dictionary = useText({\n Title: 'Checkout.ShippingMethods.title',\n EmptyState: 'Checkout.ShippingMethods.emptyState',\n });\n\n if (options === undefined) return <ShippingMethodsSkeleton />;\n\n return (\n <div\n {...props}\n className={classes(['checkout-shipping-methods', className])}\n >\n <Heading level={3} className=\"checkout-shipping-methods__title\">\n {dictionary.Title}\n </Heading>\n\n {!isLoading && options.length === 0 && (\n <IllustratedMessage\n icon={<Icon source={Delivery} />}\n message={<p>{dictionary.EmptyState}</p>}\n />\n )}\n\n <div className={classes(['checkout-shipping-methods__content'])}>\n {isLoading && (\n <ProgressSpinner className=\"checkout-shipping-methods__spinner\" />\n )}\n\n <div\n className={classes([\n 'checkout-shipping-methods__options',\n ['checkout-shipping-methods__options--loading', isLoading],\n ])}\n >\n {options.map((method: ShippingMethod) => {\n return (\n <RadioButton\n data-testid=\"shipping-method-radiobutton\"\n aria-busy={isLoading}\n id={method.value}\n key={method.value}\n name=\"shipping-method\"\n className=\"checkout-shipping-methods__method\"\n label={\n <>\n <Price\n amount={method.amount.value}\n currency={method.amount.currency}\n />\n \n <span>{method.carrier.title}</span>\n </>\n }\n description={method.title}\n value={method.value}\n checked={selection?.value === method.value}\n onChange={() => onSelectionChange(method)}\n />\n );\n })}\n </div>\n </div>\n <Divider variant=\"primary\" />\n </div>\n );\n};\n","import { FunctionComponent } from 'preact';\nimport { Skeleton, SkeletonRow } from '@adobe/elsie/components';\n\nexport const ShippingMethodsSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"shipping-methods-skeleton\">\n <SkeletonRow variant=\"heading\" size=\"small\" />\n <SkeletonRow variant=\"empty\" size=\"small\" />\n <SkeletonRow size=\"medium\" fullWidth={true} />\n <SkeletonRow size=\"medium\" fullWidth={true} />\n </Skeleton>\n );\n};\n","import { ShippingMethod } from '@/checkout/data/models';\n\nexport const isEqual = (a: ShippingMethod, b: ShippingMethod) => {\n return a.code === b.code && a.carrier.code === b.carrier.code;\n};\n","import {\n estimateShippingMethods,\n setShippingMethodsOnCart,\n} from '@/checkout/api';\nimport { ShippingMethods as ShippingMethodsList } from '@/checkout/components/ShippingMethods';\nimport { PreselectedShippingMethod } from '@/checkout/containers/Checkout';\nimport { useStore } from '@/checkout/context/store';\nimport { ShippingMethod } from '@/checkout/data/models';\nimport {\n cartSignal,\n estimateShippingMethodsSignal,\n regionsSignal,\n} from '@/checkout/signals';\nimport { selectedShippingMethodSignal } from '@/checkout/signals/SelectedShippingMethodSignal';\nimport { isEqual } from '@/checkout/utils/shippingMethods';\nimport { Container } from '@adobe/elsie/lib';\nimport { HTMLAttributes, useCallback, useEffect, useMemo } from 'preact/compat';\n\nexport interface ShippingMethodsProps extends HTMLAttributes<HTMLDivElement> {\n preSelectedMethod?: PreselectedShippingMethod;\n}\n\nfunction useShippingMethods(preselectedMethod?: PreselectedShippingMethod) {\n const store = useStore();\n const config = store.config;\n const isLoadingConfig = !config;\n\n const cart = cartSignal.value.data;\n const isLoadingCart = cartSignal.value.pending;\n const estimationShippingMethods = estimateShippingMethodsSignal.value.data;\n const isLoadingEstimation = estimateShippingMethodsSignal.value.pending;\n const localShippingSelection = selectedShippingMethodSignal.value;\n\n const cartId = cart?.id;\n const cartShippingAddresses = cart?.shippingAddresses;\n const primaryAddress = cartShippingAddresses?.[0];\n const isAbleToSetShippingMethod = !!primaryAddress;\n const cartShippingMethods = primaryAddress?.availableShippingMethods;\n const cartShippingSelection = primaryAddress?.selectedShippingMethod;\n\n const shippingOptions = cartShippingMethods || estimationShippingMethods;\n\n const setShippingMethodOnCart = useCallback(\n (method: ShippingMethod) => {\n if (!cartId || !isAbleToSetShippingMethod) return;\n\n const partialMethod = {\n method_code: method.code,\n carrier_code: method.carrier.code,\n };\n\n setShippingMethodsOnCart({\n cartId,\n shippingMethods: [partialMethod],\n }).catch((error) => {\n console.error('setting shipping methods on cart failed:', error);\n });\n },\n [cartId, isAbleToSetShippingMethod]\n );\n\n const onSelectionChange = (method: ShippingMethod) => {\n selectedShippingMethodSignal.value = method;\n };\n\n /**\n * This memo is responsible for determining the selected shipping method\n * based on the current state of the cart and the available shipping methods.\n */\n const selectedShippingOption: ShippingMethod | undefined = useMemo(() => {\n if (!shippingOptions?.length) return;\n\n const fallbackShippingOption = shippingOptions[0];\n const selection = localShippingSelection || cartShippingSelection;\n\n if (!selection) {\n const preselection = shippingOptions.find((method) => {\n return (\n method.carrier.code === preselectedMethod?.carrierCode &&\n method.code === preselectedMethod?.methodCode\n );\n });\n\n return preselection || fallbackShippingOption;\n }\n\n const isAvailable = shippingOptions.some((method) =>\n isEqual(method, selection)\n );\n\n return isAvailable ? selection : fallbackShippingOption;\n }, [\n localShippingSelection,\n cartShippingSelection,\n shippingOptions,\n preselectedMethod,\n ]);\n\n /**\n * This effect is responsible for syncing the local and cart state with the current selection.\n\n * - Initialize the local selection with the data from the cart when needed.\n * - Initialize the local selection and sync the cart when using the first available method.\n * - If the cart gets out of sync, update the cart with the local selection.\n */\n useEffect(() => {\n if (!selectedShippingOption) return;\n\n if (\n !localShippingSelection ||\n !isEqual(selectedShippingOption, localShippingSelection)\n ) {\n selectedShippingMethodSignal.value = selectedShippingOption;\n }\n\n if (\n !cartShippingSelection ||\n !isEqual(selectedShippingOption, cartShippingSelection)\n ) {\n setShippingMethodOnCart(selectedShippingOption);\n }\n }, [\n selectedShippingOption,\n localShippingSelection,\n cartShippingSelection,\n setShippingMethodOnCart,\n ]);\n\n /**\n * This effect is responsible for triggering the shipping methods estimation.\n *\n * - Only triggers if there is cart data and no available shipping methods.\n * - Builds the estimate shipping search fields using the current region data or defaults.\n * - Calls the estimateShipping function with the cartId and search fields.\n */\n useEffect(() => {\n if (!cartId || cartShippingMethods) return;\n\n const {\n country: regionCountry,\n selectedRegion,\n selectedRegionId,\n } = regionsSignal.value;\n\n const country = regionCountry || config?.defaultCountry;\n\n if (country) {\n const criteria = {\n country_code: country,\n region_name: selectedRegion,\n region_id: selectedRegionId,\n };\n\n estimateShippingMethods({ cartId, criteria }).catch((error: any) => {\n estimateShippingMethodsSignal.value = { pending: false, data: [] };\n console.error('shipping methods estimation failed:', error);\n });\n }\n }, [cartId, cartShippingMethods, config]);\n\n return {\n isLoading: isLoadingCart || isLoadingConfig || isLoadingEstimation,\n options: shippingOptions,\n selection: selectedShippingOption,\n onSelectionChange,\n };\n}\n\nexport const ShippingMethods: Container<ShippingMethodsProps> = ({\n preSelectedMethod,\n ...props\n}) => {\n const { isLoading, options, selection, onSelectionChange } =\n useShippingMethods(preSelectedMethod);\n\n return (\n <ShippingMethodsList\n {...props}\n className=\"checkout-shipping-methods\"\n isLoading={isLoading}\n onSelectionChange={onSelectionChange}\n options={options}\n selection={selection}\n />\n );\n};\n"],"names":["SvgDelivery","props","React","ShippingMethods","className","isLoading","onSelectionChange","options","selection","dictionary","useText","Title","EmptyState","undefined","_jsx","ShippingMethodsSkeleton","_jsxs","classes","children","Heading","level","length","IllustratedMessage","icon","Icon","source","Delivery","message","ProgressSpinner","map","method","RadioButton","id","value","name","label","_Fragment","Price","amount","currency","carrier","title","description","checked","onChange","Divider","variant","Skeleton","SkeletonRow","size","fullWidth","isEqual","a","b","code","useShippingMethods","preselectedMethod","config","useStore","isLoadingConfig","cart","cartSignal","data","isLoadingCart","pending","estimationShippingMethods","estimateShippingMethodsSignal","isLoadingEstimation","localShippingSelection","selectedShippingMethodSignal","cartId","cartShippingAddresses","shippingAddresses","primaryAddress","isAbleToSetShippingMethod","cartShippingMethods","availableShippingMethods","cartShippingSelection","selectedShippingMethod","shippingOptions","setShippingMethodOnCart","useCallback","partialMethod","method_code","carrier_code","setShippingMethodsOnCart","shippingMethods","catch","error","selectedShippingOption","useMemo","fallbackShippingOption","some","find","carrierCode","methodCode","useEffect","country","regionCountry","selectedRegion","selectedRegionId","regionsSignal","defaultCountry","estimateShippingMethods","criteria","country_code","region_name","region_id","preSelectedMethod","ShippingMethodsList"],"mappings":"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","x_google_ignoreList":[0]}
|