@dropins/storefront-checkout 2.1.0-alpha1 → 2.1.0-alpha2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api/getCompanyCredit/getCompanyCredit.d.ts +4 -0
- package/api/getCompanyCredit/graphql/getCompanyCredit.graphql.d.ts +18 -0
- package/api/getCompanyCredit/graphql/index.d.ts +18 -0
- package/api/getCompanyCredit/index.d.ts +18 -0
- package/api/graphql/PaymentMethodFragment.graphql.d.ts +1 -1
- package/api/index.d.ts +1 -0
- package/api/initialize/initialize.d.ts +18 -3
- package/api/initialize/listeners.d.ts +3 -17
- package/api.js +2 -2
- package/api.js.map +1 -1
- package/chunks/PaymentOnAccount2.js +4 -0
- package/chunks/PaymentOnAccount2.js.map +1 -0
- package/chunks/PurchaseOrder.js +4 -0
- package/chunks/PurchaseOrder.js.map +1 -0
- package/chunks/classifiers.js +4 -0
- package/chunks/classifiers.js.map +1 -0
- package/chunks/events.js +1 -1
- package/chunks/events.js.map +1 -1
- package/chunks/events2.js +1 -1
- package/chunks/events2.js.map +1 -1
- package/chunks/fetch-graphql.js +2 -2
- package/chunks/fetch-graphql.js.map +1 -1
- package/chunks/getCompanyCredit.js +15 -0
- package/chunks/getCompanyCredit.js.map +1 -0
- package/chunks/guards.js +1 -1
- package/chunks/render.js +10 -0
- package/chunks/render.js.map +1 -0
- package/chunks/setBillingAddress.js +1 -1
- package/chunks/setGuestEmailOnCart.js +1 -1
- package/chunks/setGuestEmailOnCart.js.map +1 -1
- package/chunks/setShippingAddress.js +10 -10
- package/chunks/setShippingAddress.js.map +1 -1
- package/chunks/setShippingMethods.js +2 -2
- package/chunks/synchronizeCheckout.js +7 -7
- package/chunks/synchronizeCheckout.js.map +1 -1
- package/components/PaymentOnAccount/PaymentOnAccount.d.ts +17 -0
- package/components/PaymentOnAccount/PaymentOnAccountSkeleton.d.ts +4 -0
- package/components/PaymentOnAccount/index.d.ts +20 -0
- package/components/PurchaseOrder/PurchaseOrder.d.ts +10 -0
- package/components/PurchaseOrder/index.d.ts +19 -0
- package/components/index.d.ts +3 -1
- package/containers/AddressValidation.js +1 -1
- package/containers/AddressValidation.js.map +1 -1
- package/containers/BillToShippingAddress.js +1 -1
- package/containers/BillToShippingAddress.js.map +1 -1
- package/containers/EstimateShipping.js +1 -1
- package/containers/EstimateShipping.js.map +1 -1
- package/containers/LoginForm.js +1 -1
- package/containers/LoginForm.js.map +1 -1
- package/containers/MergedCartBanner.js +1 -1
- package/containers/MergedCartBanner.js.map +1 -1
- package/containers/OutOfStock.js +1 -1
- package/containers/OutOfStock.js.map +1 -1
- package/containers/PaymentMethods/PaymentMethods.d.ts +8 -6
- package/containers/PaymentMethods/handlers.d.ts +11 -0
- package/containers/PaymentMethods.js +1 -1
- package/containers/PaymentMethods.js.map +1 -1
- package/containers/PaymentOnAccount/PaymentOnAccount.d.ts +10 -0
- package/containers/PaymentOnAccount/index.d.ts +11 -0
- package/containers/PaymentOnAccount.d.ts +3 -0
- package/containers/PaymentOnAccount.js +4 -0
- package/containers/PaymentOnAccount.js.map +1 -0
- package/containers/PlaceOrder/PlaceOrder.d.ts +2 -1
- package/containers/PlaceOrder.js +1 -1
- package/containers/PlaceOrder.js.map +1 -1
- package/containers/PurchaseOrder/PurchaseOrder.d.ts +10 -0
- package/containers/PurchaseOrder/index.d.ts +19 -0
- package/containers/PurchaseOrder.d.ts +3 -0
- package/containers/PurchaseOrder.js +4 -0
- package/containers/PurchaseOrder.js.map +1 -0
- package/containers/ServerError/ServerError.d.ts +2 -1
- package/containers/ServerError.js +1 -1
- package/containers/ServerError.js.map +1 -1
- package/containers/ShippingMethods/ShippingMethods.d.ts +2 -1
- package/containers/ShippingMethods.js +1 -1
- package/containers/ShippingMethods.js.map +1 -1
- package/containers/TermsAndConditions.js +1 -1
- package/containers/TermsAndConditions.js.map +1 -1
- package/containers/index.d.ts +2 -0
- package/data/models/company-credit.d.ts +7 -0
- package/data/models/index.d.ts +1 -0
- package/data/models/payment-method.d.ts +2 -0
- package/data/transforms/index.d.ts +1 -0
- package/data/transforms/transform-cart-address.d.ts +2 -0
- package/data/transforms/transform-company-credit.d.ts +7 -0
- package/data/transforms/transform-quote-address.d.ts +2 -0
- package/fragments.js +8 -7
- package/fragments.js.map +1 -1
- package/i18n/en_US.json.d.ts +20 -0
- package/lib/errors/classifiers.d.ts +3 -1
- package/lib/utils/api.d.ts +1 -1
- package/lib/utils.js +1 -1
- package/lib/utils.js.map +1 -1
- package/package.json +1 -1
- package/render.js +5 -5
- package/render.js.map +1 -1
- package/tests/fixtures/fragments/cart.d.ts +4 -0
- package/tests/fixtures/helpers/session-storage.d.ts +68 -0
- package/tests/fixtures/index.d.ts +1 -0
- package/tests/fixtures/queries/get-company-credit.d.ts +14 -0
- package/tests/fixtures/queries/index.d.ts +1 -0
- package/types/index.d.ts +2 -1
- package/types/storefront.d.ts +1 -1
- package/types/utils.d.ts +19 -0
package/containers/LoginForm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as r,jsxs as u,Fragment as le}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/fetch-graphql.js";import{VComponent as G,classes as se,Slot as J}from"@dropins/tools/lib.js";import{
|
|
3
|
+
import{jsx as r,jsxs as u,Fragment as le}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/fetch-graphql.js";import{VComponent as G,classes as se,Slot as J}from"@dropins/tools/lib.js";import{b as ce,a as me}from"../chunks/events2.js";import{n as H,g as K}from"../chunks/values.js";import{events as M}from"@dropins/tools/event-bus.js";import{i as ue,s as he,g as de}from"../chunks/setGuestEmailOnCart.js";import{Field as ge,Input as fe,Skeleton as pe,SkeletonRow as Q}from"@dropins/tools/components.js";import{useText as I}from"@dropins/tools/i18n.js";import"../chunks/TermsAndConditions.js";/* empty css */import{W as ke}from"../chunks/ConditionalWrapper.js";import"@dropins/tools/preact-compat.js";/* empty css *//* empty css *//* empty css */import{useState as k,useRef as Le,useCallback as d,useEffect as $,useMemo as B}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";import"../fragments.js";import"../chunks/synchronizeCheckout.js";import"../chunks/transform-shipping-methods.js";import"../chunks/classifiers.js";const ve={EMAIL:/^[a-z0-9,!#$%&'*+/=?^_`{|}~-]+(\.[a-z0-9,!#$%&'*+/=?^_`{|}~-]+)*@([a-z0-9-]+\.)+[a-z]{2,}$/i},D=o=>ve.EMAIL.test(o),Fe=({value:o,error:n,hint:a,onChange:g,onBlur:L,onInvalid:c})=>{const l=I({LoginFormLabel:"Checkout.LoginForm.ariaLabel",LoginFormFloatingLabel:"Checkout.LoginForm.floatingLabel",LoginFormPlaceholder:"Checkout.LoginForm.placeholder"});return r(ge,{error:n,hint:a,children:r(fe,{"aria-label":l.LoginFormLabel,"aria-required":!0,autocomplete:"email",floatingLabel:l.LoginFormFloatingLabel,id:"customer-email",name:"customer-email",placeholder:l.LoginFormPlaceholder,required:!0,type:"email",value:o,onBlur:L,onChange:g,onInvalid:c})})},_e=({onClick:o})=>{const n=I({account:"Checkout.LoginForm.account",signIn:"Checkout.LoginForm.signIn"});return u("div",{className:"checkout-login-form__sign-in",children:[n.account,r("a",{className:"checkout-login-form__link","data-testid":"sign-in-link",href:"#",rel:"noreferrer",target:"_blank",onClick:a=>{a.preventDefault(),o(a)},children:n.signIn})]})},Ee=()=>u(pe,{"data-testid":"login-form-skeleton",children:[r(Q,{fullWidth:!0,variant:"heading"}),r(Q,{fullWidth:!0,size:"medium"})]}),be=({className:o,customer:n,email:a,error:g,headingContent:L,hint:c,name:l,onEmailBlur:f,onEmailChange:m,onEmailInvalid:s,title:F,...A})=>u("div",{className:"checkout-login-form","data-testid":"checkout-login-form",children:[u("div",{className:"checkout-login-form__heading",children:[F&&r(G,{className:"checkout-login-form__title",node:F}),L&&r(G,{className:"checkout-login-form__heading-label",node:L})]}),n?u("div",{className:"checkout-login-form__customer-details",children:[r("div",{className:"checkout-login-form__customer-name",children:`${n.firstName} ${n.lastName}`}),r("div",{className:"checkout-login-form__customer-email",children:n.email})]}):r("div",{className:"checkout-login-form__content",children:u("form",{...A,noValidate:!0,className:se(["dropin-login-form__form",o]),name:l,children:[r("button",{disabled:!0,"aria-hidden":"true",style:"display: none",type:"submit"}),r(Fe,{error:g,hint:c,value:a,onBlur:f,onChange:m,onInvalid:s})]})})]}),Ce=ke(be,Ee),Ne=({onClick:o})=>{const n=I({switch:"Checkout.LoginForm.switch",signOut:"Checkout.LoginForm.signOut"});return u("p",{className:"checkout-login-form__sign-out",children:[n.switch,r("a",{className:"checkout-login-form__link",href:"#",rel:"noreferrer",target:"_blank",onClick:a=>{a.preventDefault(),o==null||o(a)},children:n.signOut})]})},Ie=1e3,Xe=({active:o=!0,autoSync:n=!0,displayHeadingContent:a=!0,displayTitle:g=!0,initialData:L,onCartSyncError:c,onSignInClick:l,onSignOutClick:f,onValidationError:m,slots:s,...F})=>{const[A,X]=k(null),[Y,y]=k(""),[Z,p]=k(""),[z,S]=k(!1),[w,_]=k(!0),[ee,V]=k(!1),h=Le(null),{alreadyHaveAccountHint:W,cartSyncError:P,defaultTitle:j,fasterCheckoutHint:q,invalidEmailError:E,missingEmailError:b,signInLabel:O}=I({alreadyHaveAccountHint:"Checkout.LoginForm.emailExists.alreadyHaveAccount",cartSyncError:"Checkout.LoginForm.cartSyncError",defaultTitle:"Checkout.LoginForm.title",fasterCheckoutHint:"Checkout.LoginForm.emailExists.forFasterCheckout",invalidEmailError:"Checkout.LoginForm.invalidEmailError",missingEmailError:"Checkout.LoginForm.missingEmailError",signInLabel:"Checkout.LoginForm.emailExists.signInButton"}),C=d(e=>{!D(e)||e===ce()||(ue(e).then(t=>{_(t)}).catch(t=>{console.error(t),_(!0)}),n&&he(e).catch(t=>{c==null||c({email:e,error:t}),c||p(P)}))},[n,c,P]),te=d(e=>{const i=e.target.value;y(i),_(!0),p(""),h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{C(i),H({email:i}),h.current=null},Ie)},[C]),ie=d(e=>{const t=e.target,i=t.value.trim();if(D(i)){if(p(""),t.setCustomValidity(""),!h.current)return;clearTimeout(h.current),h.current=null,C(i),H({email:i});return}const U=i===""?"missing":"invalid",T=U==="missing"?b:E;if(m){m({email:i,message:T,type:U});return}p(T),t.setCustomValidity(T)},[E,b,m,C]),re=d(e=>{const t=e.target,i=t.validity,x=i.valueMissing?b:E;if(!m){p(x);return}m({email:t.value,message:x,type:i.valueMissing?"missing":"invalid"})},[b,E,m]),N=d(()=>{const e=K("email")??"",t=D(e);l==null||l(t?e:"")},[l]),R=d(()=>{f==null||f()},[f]),v=d(e=>{const t=K("email")??"",i=(e==null?void 0:e.email)??"";i!==t&&(y(i),p(""),_(!0),H({email:i}))},[]);$(()=>{if(!o)return;const e=M.on("authenticated",t=>{S(t),de().then(i=>{X(i)}).catch(console.error)},{eager:!0});return()=>{e==null||e.off()}},[o]),$(()=>{if(!o)return;const e=me();if(e){V(!0);const i=e.email??"";i&&y(i),v(e);return}const t=M.on("checkout/initialized",i=>{V(!0),v(i)},{eager:!0});return()=>{t==null||t.off()}},[o,v]),$(()=>{if(!o)return;const e=M.on("checkout/updated",v,{eager:!1});return()=>{e==null||e.off()}},[o,v]);const oe=B(()=>{if(g)return r(J,{name:"checkout-login-form-title",slot:s==null?void 0:s.Title,children:r("h2",{children:j})})},[g,s,j]),ne=B(()=>{if(a)return r(J,{context:{authenticated:z},name:"checkout-login-form-heading-label",slot:s==null?void 0:s.Heading,children:z?r(Ne,{onClick:R}):r(_e,{onClick:N})})},[a,z,s,N,R]),ae=B(()=>w?"":u(le,{children:[W," ",r("a",{href:"#",onClick:N,children:O})," ",q]}),[w,W,O,q,N]);return r(Ce,{...F,customer:A,email:Y,error:Z,headingContent:ne,hint:ae,initialized:ee,title:oe,visible:o,onEmailBlur:ie,onEmailChange:te,onEmailInvalid:re})};export{Xe as LoginForm,Xe as default};
|
|
4
4
|
//# sourceMappingURL=LoginForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoginForm.js","sources":["/@dropins/storefront-checkout/src/lib/validation.ts","/@dropins/storefront-checkout/src/components/LoginForm/Email.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignIn.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginFormSkeleton.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginForm.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignOut.tsx","/@dropins/storefront-checkout/src/containers/LoginForm/LoginForm.tsx"],"sourcesContent":["export const validationPatterns = {\n EMAIL:\n /^[a-z0-9,!#$%&'*+/=?^_`{|}~-]+(\\.[a-z0-9,!#$%&'*+/=?^_`{|}~-]+)*@([a-z0-9-]+\\.)+[a-z]{2,}$/i,\n};\n\nexport const validateEmail = (email: string): boolean => {\n return validationPatterns.EMAIL.test(email);\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Field, Input } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginEmailProps extends HTMLAttributes<HTMLInputElement> {\n value: string;\n error: string;\n hint: string;\n onChange: (event: Event) => void;\n onBlur: (event: Event) => void;\n onInvalid: (event: Event) => void;\n}\n\nexport const Email: FunctionComponent<LoginEmailProps> = ({\n value,\n error,\n hint,\n onChange,\n onBlur,\n onInvalid,\n}) => {\n const translations = useText({\n LoginFormLabel: 'Checkout.LoginForm.ariaLabel',\n LoginFormFloatingLabel: 'Checkout.LoginForm.floatingLabel',\n LoginFormPlaceholder: 'Checkout.LoginForm.placeholder',\n });\n\n return (\n <Field error={error} hint={hint}>\n <Input\n aria-label={translations.LoginFormLabel}\n aria-required={true}\n autocomplete=\"email\"\n floatingLabel={translations.LoginFormFloatingLabel}\n id=\"customer-email\"\n name=\"customer-email\"\n placeholder={translations.LoginFormPlaceholder}\n required={true}\n type=\"email\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onInvalid={onInvalid}\n />\n </Field>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignInProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignIn: FunctionComponent<SignInProps> = ({ onClick }) => {\n const translations = useText({\n account: 'Checkout.LoginForm.account',\n signIn: 'Checkout.LoginForm.signIn'\n });\n\n return (\n <div className=\"checkout-login-form__sign-in\">\n {translations.account}\n\n <a\n className=\"checkout-login-form__link\"\n data-testid=\"sign-in-link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick(event);\n }}\n >\n {translations.signIn}\n </a>\n </div>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const LoginFormSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"login-form-skeleton\">\n <SkeletonRow fullWidth={true} variant=\"heading\" />\n <SkeletonRow fullWidth={true} size=\"medium\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Email } from '@/checkout/components';\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport '@/checkout/components/LoginForm/LoginForm.css';\nimport { LoginFormSkeleton } from '@/checkout/components/LoginForm/LoginFormSkeleton';\nimport { Customer } from '@/checkout/data/models';\nimport { classes, VComponent } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginFormProps\n extends Omit<HTMLAttributes<HTMLFormElement>, 'title'> {\n customer: Customer | null;\n email: string;\n error: string;\n headingContent?: VNode;\n hint: string | VNode;\n onEmailBlur: (event: Event) => void;\n onEmailChange: (event: Event) => void;\n onEmailInvalid: (event: Event) => void;\n title?: VNode;\n}\n\nconst LoginFormComponent: FunctionComponent<LoginFormProps> = ({\n className,\n customer,\n email,\n error,\n headingContent,\n hint,\n name,\n onEmailBlur,\n onEmailChange,\n onEmailInvalid,\n title,\n ...props\n}) => {\n return (\n <div className=\"checkout-login-form\" data-testid=\"checkout-login-form\">\n <div className=\"checkout-login-form__heading\">\n {title && (\n <VComponent className=\"checkout-login-form__title\" node={title} />\n )}\n\n {headingContent && (\n <VComponent\n className=\"checkout-login-form__heading-label\"\n node={headingContent}\n />\n )}\n </div>\n\n {customer ? (\n <div className=\"checkout-login-form__customer-details\">\n <div className=\"checkout-login-form__customer-name\">\n {`${customer.firstName} ${customer.lastName}`}\n </div>\n\n <div className=\"checkout-login-form__customer-email\">\n {customer.email}\n </div>\n </div>\n ) : (\n <div className=\"checkout-login-form__content\">\n <form\n {...props}\n noValidate\n className={classes(['dropin-login-form__form', className])}\n name={name}\n >\n {/* Prevent 'Enter' key press from submitting this form. */}\n <button\n disabled\n aria-hidden=\"true\"\n style=\"display: none\"\n type=\"submit\"\n />\n <Email\n error={error}\n hint={hint as any}\n value={email}\n onBlur={onEmailBlur}\n onChange={onEmailChange}\n onInvalid={onEmailInvalid}\n />\n </form>\n </div>\n )}\n </div>\n );\n};\n\nexport const LoginForm = WithConditionals(\n LoginFormComponent,\n LoginFormSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignOutProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignOut: FunctionComponent<SignOutProps> = ({ onClick }) => {\n const translations = useText({\n switch: 'Checkout.LoginForm.switch',\n signOut: 'Checkout.LoginForm.signOut'\n });\n\n return (\n <p className=\"checkout-login-form__sign-out\">\n {translations.switch}\n\n <a\n className=\"checkout-login-form__link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick?.(event);\n }}\n >\n {translations.signOut}\n </a>\n </p>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n getCustomer,\n isEmailAvailable,\n setGuestEmailOnCart,\n} from '@/checkout/api';\nimport {\n LoginForm as LoginFormComponent,\n SignIn,\n SignOut,\n} from '@/checkout/components/LoginForm';\nimport { Cart, Customer } from '@/checkout/data/models';\nimport {\n getCartEmail,\n getLatestCheckoutUpdate,\n getValue,\n notifyValues,\n validateEmail,\n} from '@/checkout/lib';\nimport { TitleProps } from '@/checkout/types';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'preact/hooks';\n\ninterface ValidationError {\n email: string;\n message: string;\n type: 'missing' | 'invalid';\n}\n\ninterface CartSyncError {\n email: string;\n error: Error;\n}\n\nexport interface LoginFormProps\n extends HTMLAttributes<HTMLFormElement>,\n TitleProps {\n active?: boolean;\n autoSync?: boolean;\n displayHeadingContent?: boolean;\n onSignInClick?: (email: string) => void;\n onSignOutClick?: () => void;\n onCartSyncError?: (error: CartSyncError) => void;\n onValidationError?: (error: ValidationError) => void;\n slots?: {\n Heading?: SlotProps<{\n authenticated: boolean;\n }>;\n } & TitleProps['slots'];\n}\n\nconst DEBOUNCE_TIME = 1000;\n\nexport const LoginForm: Container<LoginFormProps> = ({\n active = true,\n autoSync = true,\n displayHeadingContent = true,\n displayTitle = true,\n initialData,\n onCartSyncError,\n onSignInClick,\n onSignOutClick,\n onValidationError,\n slots,\n ...props\n}) => {\n const [customer, setCustomer] = useState<Customer | null>(null);\n const [email, setEmail] = useState<string>('');\n const [error, setError] = useState<string>('');\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isAvailable, setIsAvailable] = useState<boolean>(true);\n const [isInitialized, setIsInitialized] = useState<boolean>(false);\n\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const {\n alreadyHaveAccountHint,\n cartSyncError,\n defaultTitle,\n fasterCheckoutHint,\n invalidEmailError,\n missingEmailError,\n signInLabel,\n } = useText({\n alreadyHaveAccountHint: 'Checkout.LoginForm.emailExists.alreadyHaveAccount',\n cartSyncError: 'Checkout.LoginForm.cartSyncError',\n defaultTitle: 'Checkout.LoginForm.title',\n fasterCheckoutHint: 'Checkout.LoginForm.emailExists.forFasterCheckout',\n invalidEmailError: 'Checkout.LoginForm.invalidEmailError',\n missingEmailError: 'Checkout.LoginForm.missingEmailError',\n signInLabel: 'Checkout.LoginForm.emailExists.signInButton',\n });\n\n const setEmailAndCheckAvailability = useCallback(\n (email: string) => {\n if (!validateEmail(email) || email === getCartEmail()) return;\n\n isEmailAvailable(email)\n .then((availability) => {\n setIsAvailable(availability);\n })\n .catch((error) => {\n console.error(error);\n setIsAvailable(true);\n });\n\n if (!autoSync) return;\n\n setGuestEmailOnCart(email).catch((error) => {\n onCartSyncError?.({ email, error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [autoSync, onCartSyncError, cartSyncError]\n );\n\n const handleChange = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value;\n\n setEmail(email);\n setIsAvailable(true);\n setError('');\n\n if (debounceTimer.current) {\n clearTimeout(debounceTimer.current);\n }\n\n debounceTimer.current = setTimeout(() => {\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n debounceTimer.current = null;\n }, DEBOUNCE_TIME);\n },\n [setEmailAndCheckAvailability]\n );\n\n const handleBlur = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value.trim();\n const isValid = validateEmail(email);\n\n if (isValid) {\n setError('');\n target.setCustomValidity('');\n\n if (!debounceTimer.current) return;\n\n clearTimeout(debounceTimer.current);\n debounceTimer.current = null;\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n return;\n }\n\n const type = email === '' ? 'missing' : 'invalid';\n const message =\n type === 'missing' ? missingEmailError : invalidEmailError;\n\n if (onValidationError) {\n onValidationError({ email, message, type });\n return;\n }\n\n setError(message);\n target.setCustomValidity(message);\n },\n [\n invalidEmailError,\n missingEmailError,\n onValidationError,\n setEmailAndCheckAvailability,\n ]\n );\n\n const handleInvalid = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const validity = target.validity;\n\n const message = validity.valueMissing\n ? missingEmailError\n : invalidEmailError;\n\n if (!onValidationError) {\n setError(message);\n return;\n }\n\n onValidationError({\n email: target.value,\n message,\n type: validity.valueMissing ? 'missing' : 'invalid',\n });\n },\n [missingEmailError, invalidEmailError, onValidationError]\n );\n\n const handleSignIn = useCallback(() => {\n const email = getValue('email') ?? '';\n const isValid = validateEmail(email);\n onSignInClick?.(isValid ? email : '');\n }, [onSignInClick]);\n\n const handleSignOut = useCallback(() => {\n onSignOutClick?.();\n }, [onSignOutClick]);\n\n const handleCheckoutData = useCallback((data: Cart | null) => {\n const prevEmail = getValue('email') ?? '';\n const email = data?.email ?? '';\n\n if (email !== prevEmail) {\n setEmail(email);\n setError('');\n setIsAvailable(true);\n notifyValues({ email });\n }\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onAuthenticated = events.on(\n 'authenticated',\n (authenticated) => {\n setIsAuthenticated(authenticated);\n\n getCustomer()\n .then((customer) => {\n setCustomer(customer);\n })\n .catch(console.error);\n },\n { eager: true }\n );\n\n return () => {\n onAuthenticated?.off();\n };\n }, [active]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore local state from checkout data\n const checkoutEmail = pastUpdate.email ?? '';\n if (checkoutEmail) {\n setEmail(checkoutEmail);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const titleContent = useMemo(() => {\n if (!displayTitle) return undefined;\n\n return (\n <Slot name=\"checkout-login-form-title\" slot={slots?.Title}>\n <h2>{defaultTitle}</h2>\n </Slot>\n );\n }, [displayTitle, slots, defaultTitle]);\n\n const headingContent = useMemo(() => {\n if (!displayHeadingContent) return undefined;\n\n return (\n <Slot\n context={{ authenticated: isAuthenticated }}\n name=\"checkout-login-form-heading-label\"\n slot={slots?.Heading}\n >\n {isAuthenticated ? (\n <SignOut onClick={handleSignOut} />\n ) : (\n <SignIn onClick={handleSignIn} />\n )}\n </Slot>\n );\n }, [\n displayHeadingContent,\n isAuthenticated,\n slots,\n handleSignIn,\n handleSignOut,\n ]);\n\n const hintContent = useMemo(() => {\n if (isAvailable) return '';\n\n return (\n <>\n {alreadyHaveAccountHint}{' '}\n <a href=\"#\" onClick={handleSignIn}>\n {signInLabel}\n </a>{' '}\n {fasterCheckoutHint}\n </>\n );\n }, [\n isAvailable,\n alreadyHaveAccountHint,\n signInLabel,\n fasterCheckoutHint,\n handleSignIn,\n ]);\n\n return (\n <LoginFormComponent\n {...props}\n customer={customer}\n email={email}\n error={error}\n headingContent={headingContent}\n hint={hintContent}\n initialized={isInitialized}\n title={titleContent}\n visible={active}\n onEmailBlur={handleBlur}\n onEmailChange={handleChange}\n onEmailInvalid={handleInvalid}\n />\n );\n};\n"],"names":["validationPatterns","validateEmail","email","Email","value","error","hint","onChange","onBlur","onInvalid","translations","useText","jsx","Field","Input","SignIn","onClick","jsxs","event","LoginFormSkeleton","Skeleton","SkeletonRow","LoginFormComponent","className","customer","headingContent","name","onEmailBlur","onEmailChange","onEmailInvalid","title","props","VComponent","classes","LoginForm","WithConditionals","SignOut","DEBOUNCE_TIME","active","autoSync","displayHeadingContent","displayTitle","initialData","onCartSyncError","onSignInClick","onSignOutClick","onValidationError","slots","setCustomer","useState","setEmail","setError","isAuthenticated","setIsAuthenticated","isAvailable","setIsAvailable","isInitialized","setIsInitialized","debounceTimer","useRef","alreadyHaveAccountHint","cartSyncError","defaultTitle","fasterCheckoutHint","invalidEmailError","missingEmailError","signInLabel","setEmailAndCheckAvailability","useCallback","getCartEmail","isEmailAvailable","availability","setGuestEmailOnCart","handleChange","notifyValues","handleBlur","target","type","message","handleInvalid","validity","handleSignIn","getValue","isValid","handleSignOut","handleCheckoutData","data","prevEmail","useEffect","onAuthenticated","events","authenticated","getCustomer","pastUpdate","getLatestCheckoutUpdate","checkoutEmail","onCheckoutInit","onCheckoutUpdated","titleContent","useMemo","Slot","hintContent","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LoginForm.js","sources":["/@dropins/storefront-checkout/src/lib/validation.ts","/@dropins/storefront-checkout/src/components/LoginForm/Email.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignIn.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginFormSkeleton.tsx","/@dropins/storefront-checkout/src/components/LoginForm/LoginForm.tsx","/@dropins/storefront-checkout/src/components/LoginForm/SignOut.tsx","/@dropins/storefront-checkout/src/containers/LoginForm/LoginForm.tsx"],"sourcesContent":["export const validationPatterns = {\n EMAIL:\n /^[a-z0-9,!#$%&'*+/=?^_`{|}~-]+(\\.[a-z0-9,!#$%&'*+/=?^_`{|}~-]+)*@([a-z0-9-]+\\.)+[a-z]{2,}$/i,\n};\n\nexport const validateEmail = (email: string): boolean => {\n return validationPatterns.EMAIL.test(email);\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Field, Input } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginEmailProps extends HTMLAttributes<HTMLInputElement> {\n value: string;\n error: string;\n hint: string;\n onChange: (event: Event) => void;\n onBlur: (event: Event) => void;\n onInvalid: (event: Event) => void;\n}\n\nexport const Email: FunctionComponent<LoginEmailProps> = ({\n value,\n error,\n hint,\n onChange,\n onBlur,\n onInvalid,\n}) => {\n const translations = useText({\n LoginFormLabel: 'Checkout.LoginForm.ariaLabel',\n LoginFormFloatingLabel: 'Checkout.LoginForm.floatingLabel',\n LoginFormPlaceholder: 'Checkout.LoginForm.placeholder',\n });\n\n return (\n <Field error={error} hint={hint}>\n <Input\n aria-label={translations.LoginFormLabel}\n aria-required={true}\n autocomplete=\"email\"\n floatingLabel={translations.LoginFormFloatingLabel}\n id=\"customer-email\"\n name=\"customer-email\"\n placeholder={translations.LoginFormPlaceholder}\n required={true}\n type=\"email\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onInvalid={onInvalid}\n />\n </Field>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignInProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignIn: FunctionComponent<SignInProps> = ({ onClick }) => {\n const translations = useText({\n account: 'Checkout.LoginForm.account',\n signIn: 'Checkout.LoginForm.signIn'\n });\n\n return (\n <div className=\"checkout-login-form__sign-in\">\n {translations.account}\n\n <a\n className=\"checkout-login-form__link\"\n data-testid=\"sign-in-link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick(event);\n }}\n >\n {translations.signIn}\n </a>\n </div>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const LoginFormSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"login-form-skeleton\">\n <SkeletonRow fullWidth={true} variant=\"heading\" />\n <SkeletonRow fullWidth={true} size=\"medium\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Email } from '@/checkout/components';\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport '@/checkout/components/LoginForm/LoginForm.css';\nimport { LoginFormSkeleton } from '@/checkout/components/LoginForm/LoginFormSkeleton';\nimport { Customer } from '@/checkout/data/models';\nimport { classes, VComponent } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface LoginFormProps\n extends Omit<HTMLAttributes<HTMLFormElement>, 'title'> {\n customer: Customer | null;\n email: string;\n error: string;\n headingContent?: VNode;\n hint: string | VNode;\n onEmailBlur: (event: Event) => void;\n onEmailChange: (event: Event) => void;\n onEmailInvalid: (event: Event) => void;\n title?: VNode;\n}\n\nconst LoginFormComponent: FunctionComponent<LoginFormProps> = ({\n className,\n customer,\n email,\n error,\n headingContent,\n hint,\n name,\n onEmailBlur,\n onEmailChange,\n onEmailInvalid,\n title,\n ...props\n}) => {\n return (\n <div className=\"checkout-login-form\" data-testid=\"checkout-login-form\">\n <div className=\"checkout-login-form__heading\">\n {title && (\n <VComponent className=\"checkout-login-form__title\" node={title} />\n )}\n\n {headingContent && (\n <VComponent\n className=\"checkout-login-form__heading-label\"\n node={headingContent}\n />\n )}\n </div>\n\n {customer ? (\n <div className=\"checkout-login-form__customer-details\">\n <div className=\"checkout-login-form__customer-name\">\n {`${customer.firstName} ${customer.lastName}`}\n </div>\n\n <div className=\"checkout-login-form__customer-email\">\n {customer.email}\n </div>\n </div>\n ) : (\n <div className=\"checkout-login-form__content\">\n <form\n {...props}\n noValidate\n className={classes(['dropin-login-form__form', className])}\n name={name}\n >\n {/* Prevent 'Enter' key press from submitting this form. */}\n <button\n disabled\n aria-hidden=\"true\"\n style=\"display: none\"\n type=\"submit\"\n />\n <Email\n error={error}\n hint={hint as any}\n value={email}\n onBlur={onEmailBlur}\n onChange={onEmailChange}\n onInvalid={onEmailInvalid}\n />\n </form>\n </div>\n )}\n </div>\n );\n};\n\nexport const LoginForm = WithConditionals(\n LoginFormComponent,\n LoginFormSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { FunctionComponent } from 'preact';\n\ninterface SignOutProps {\n onClick: (event: Event) => void;\n}\n\nexport const SignOut: FunctionComponent<SignOutProps> = ({ onClick }) => {\n const translations = useText({\n switch: 'Checkout.LoginForm.switch',\n signOut: 'Checkout.LoginForm.signOut'\n });\n\n return (\n <p className=\"checkout-login-form__sign-out\">\n {translations.switch}\n\n <a\n className=\"checkout-login-form__link\"\n href=\"#\"\n rel=\"noreferrer\"\n target=\"_blank\"\n onClick={(event) => {\n event.preventDefault();\n onClick?.(event);\n }}\n >\n {translations.signOut}\n </a>\n </p>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport {\n getCustomer,\n isEmailAvailable,\n setGuestEmailOnCart,\n} from '@/checkout/api';\nimport {\n LoginForm as LoginFormComponent,\n SignIn,\n SignOut,\n} from '@/checkout/components/LoginForm';\nimport { Cart, Customer } from '@/checkout/data/models';\nimport {\n getCartEmail,\n getLatestCheckoutUpdate,\n getValue,\n notifyValues,\n validateEmail,\n} from '@/checkout/lib';\nimport { TitleProps } from '@/checkout/types';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'preact/hooks';\n\ninterface ValidationError {\n email: string;\n message: string;\n type: 'missing' | 'invalid';\n}\n\ninterface CartSyncError {\n email: string;\n error: Error;\n}\n\nexport interface LoginFormProps\n extends HTMLAttributes<HTMLFormElement>,\n TitleProps {\n active?: boolean;\n autoSync?: boolean;\n displayHeadingContent?: boolean;\n onSignInClick?: (email: string) => void;\n onSignOutClick?: () => void;\n onCartSyncError?: (error: CartSyncError) => void;\n onValidationError?: (error: ValidationError) => void;\n slots?: {\n Heading?: SlotProps<{\n authenticated: boolean;\n }>;\n } & TitleProps['slots'];\n}\n\nconst DEBOUNCE_TIME = 1000;\n\nexport const LoginForm: Container<LoginFormProps> = ({\n active = true,\n autoSync = true,\n displayHeadingContent = true,\n displayTitle = true,\n initialData,\n onCartSyncError,\n onSignInClick,\n onSignOutClick,\n onValidationError,\n slots,\n ...props\n}) => {\n const [customer, setCustomer] = useState<Customer | null>(null);\n const [email, setEmail] = useState<string>('');\n const [error, setError] = useState<string>('');\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [isAvailable, setIsAvailable] = useState<boolean>(true);\n const [isInitialized, setIsInitialized] = useState<boolean>(false);\n\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const {\n alreadyHaveAccountHint,\n cartSyncError,\n defaultTitle,\n fasterCheckoutHint,\n invalidEmailError,\n missingEmailError,\n signInLabel,\n } = useText({\n alreadyHaveAccountHint: 'Checkout.LoginForm.emailExists.alreadyHaveAccount',\n cartSyncError: 'Checkout.LoginForm.cartSyncError',\n defaultTitle: 'Checkout.LoginForm.title',\n fasterCheckoutHint: 'Checkout.LoginForm.emailExists.forFasterCheckout',\n invalidEmailError: 'Checkout.LoginForm.invalidEmailError',\n missingEmailError: 'Checkout.LoginForm.missingEmailError',\n signInLabel: 'Checkout.LoginForm.emailExists.signInButton',\n });\n\n const setEmailAndCheckAvailability = useCallback(\n (email: string) => {\n if (!validateEmail(email) || email === getCartEmail()) return;\n\n isEmailAvailable(email)\n .then((availability) => {\n setIsAvailable(availability);\n })\n .catch((error) => {\n console.error(error);\n setIsAvailable(true);\n });\n\n if (!autoSync) return;\n\n setGuestEmailOnCart(email).catch((error) => {\n onCartSyncError?.({ email, error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [autoSync, onCartSyncError, cartSyncError]\n );\n\n const handleChange = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value;\n\n setEmail(email);\n setIsAvailable(true);\n setError('');\n\n if (debounceTimer.current) {\n clearTimeout(debounceTimer.current);\n }\n\n debounceTimer.current = setTimeout(() => {\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n debounceTimer.current = null;\n }, DEBOUNCE_TIME);\n },\n [setEmailAndCheckAvailability]\n );\n\n const handleBlur = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const email = target.value.trim();\n const isValid = validateEmail(email);\n\n if (isValid) {\n setError('');\n target.setCustomValidity('');\n\n if (!debounceTimer.current) return;\n\n clearTimeout(debounceTimer.current);\n debounceTimer.current = null;\n setEmailAndCheckAvailability(email);\n notifyValues({ email });\n return;\n }\n\n const type = email === '' ? 'missing' : 'invalid';\n const message =\n type === 'missing' ? missingEmailError : invalidEmailError;\n\n if (onValidationError) {\n onValidationError({ email, message, type });\n return;\n }\n\n setError(message);\n target.setCustomValidity(message);\n },\n [\n invalidEmailError,\n missingEmailError,\n onValidationError,\n setEmailAndCheckAvailability,\n ]\n );\n\n const handleInvalid = useCallback(\n (event: Event) => {\n const target = event.target as HTMLInputElement;\n const validity = target.validity;\n\n const message = validity.valueMissing\n ? missingEmailError\n : invalidEmailError;\n\n if (!onValidationError) {\n setError(message);\n return;\n }\n\n onValidationError({\n email: target.value,\n message,\n type: validity.valueMissing ? 'missing' : 'invalid',\n });\n },\n [missingEmailError, invalidEmailError, onValidationError]\n );\n\n const handleSignIn = useCallback(() => {\n const email = getValue('email') ?? '';\n const isValid = validateEmail(email);\n onSignInClick?.(isValid ? email : '');\n }, [onSignInClick]);\n\n const handleSignOut = useCallback(() => {\n onSignOutClick?.();\n }, [onSignOutClick]);\n\n const handleCheckoutData = useCallback((data: Cart | null) => {\n const prevEmail = getValue('email') ?? '';\n const email = data?.email ?? '';\n\n if (email !== prevEmail) {\n setEmail(email);\n setError('');\n setIsAvailable(true);\n notifyValues({ email });\n }\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onAuthenticated = events.on(\n 'authenticated',\n (authenticated) => {\n setIsAuthenticated(authenticated);\n\n getCustomer()\n .then((customer) => {\n setCustomer(customer);\n })\n .catch(console.error);\n },\n { eager: true }\n );\n\n return () => {\n onAuthenticated?.off();\n };\n }, [active]);\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore local state from checkout data\n const checkoutEmail = pastUpdate.email ?? '';\n if (checkoutEmail) {\n setEmail(checkoutEmail);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const titleContent = useMemo(() => {\n if (!displayTitle) return undefined;\n\n return (\n <Slot name=\"checkout-login-form-title\" slot={slots?.Title}>\n <h2>{defaultTitle}</h2>\n </Slot>\n );\n }, [displayTitle, slots, defaultTitle]);\n\n const headingContent = useMemo(() => {\n if (!displayHeadingContent) return undefined;\n\n return (\n <Slot\n context={{ authenticated: isAuthenticated }}\n name=\"checkout-login-form-heading-label\"\n slot={slots?.Heading}\n >\n {isAuthenticated ? (\n <SignOut onClick={handleSignOut} />\n ) : (\n <SignIn onClick={handleSignIn} />\n )}\n </Slot>\n );\n }, [\n displayHeadingContent,\n isAuthenticated,\n slots,\n handleSignIn,\n handleSignOut,\n ]);\n\n const hintContent = useMemo(() => {\n if (isAvailable) return '';\n\n return (\n <>\n {alreadyHaveAccountHint}{' '}\n <a href=\"#\" onClick={handleSignIn}>\n {signInLabel}\n </a>{' '}\n {fasterCheckoutHint}\n </>\n );\n }, [\n isAvailable,\n alreadyHaveAccountHint,\n signInLabel,\n fasterCheckoutHint,\n handleSignIn,\n ]);\n\n return (\n <LoginFormComponent\n {...props}\n customer={customer}\n email={email}\n error={error}\n headingContent={headingContent}\n hint={hintContent}\n initialized={isInitialized}\n title={titleContent}\n visible={active}\n onEmailBlur={handleBlur}\n onEmailChange={handleChange}\n onEmailInvalid={handleInvalid}\n />\n );\n};\n"],"names":["validationPatterns","validateEmail","email","Email","value","error","hint","onChange","onBlur","onInvalid","translations","useText","jsx","Field","Input","SignIn","onClick","jsxs","event","LoginFormSkeleton","Skeleton","SkeletonRow","LoginFormComponent","className","customer","headingContent","name","onEmailBlur","onEmailChange","onEmailInvalid","title","props","VComponent","classes","LoginForm","WithConditionals","SignOut","DEBOUNCE_TIME","active","autoSync","displayHeadingContent","displayTitle","initialData","onCartSyncError","onSignInClick","onSignOutClick","onValidationError","slots","setCustomer","useState","setEmail","setError","isAuthenticated","setIsAuthenticated","isAvailable","setIsAvailable","isInitialized","setIsInitialized","debounceTimer","useRef","alreadyHaveAccountHint","cartSyncError","defaultTitle","fasterCheckoutHint","invalidEmailError","missingEmailError","signInLabel","setEmailAndCheckAvailability","useCallback","getCartEmail","isEmailAvailable","availability","setGuestEmailOnCart","handleChange","notifyValues","handleBlur","target","type","message","handleInvalid","validity","handleSignIn","getValue","isValid","handleSignOut","handleCheckoutData","data","prevEmail","useEffect","onAuthenticated","events","authenticated","getCustomer","pastUpdate","getLatestCheckoutUpdate","checkoutEmail","onCheckoutInit","onCheckoutUpdated","titleContent","useMemo","Slot","hintContent","Fragment"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as t}from"@dropins/tools/preact-jsx-runtime.js"
|
|
3
|
+
import{jsx as t}from"@dropins/tools/preact-jsx-runtime.js";/* empty css */import{AlertBanner as h,Icon as I}from"@dropins/tools/components.js";import{c as B}from"../chunks/classes.js";import{events as c}from"@dropins/tools/event-bus.js";import{useState as M,useCallback as w,useEffect as u}from"@dropins/tools/preact-hooks.js";import*as f from"@dropins/tools/preact-compat.js";import{useText as x,Text as H}from"@dropins/tools/i18n.js";const V=n=>f.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...n},f.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0 12C0 5.37931 5.37931 0 12 0C18.6207 0 24 5.37931 24 12C24 18.6207 18.6207 24 12 24C5.37931 24 0 18.6207 0 12ZM11.8885 5.06101C11.1405 5.06101 10.5357 5.66579 10.5357 6.4138V6.57295C10.5835 7.27321 11.1882 7.81433 11.8885 7.76658H12.0795C12.7797 7.70292 13.289 7.09815 13.2413 6.4138C13.2413 5.66579 12.6365 5.06101 11.8885 5.06101ZM13.1935 16.8223H14.1007C14.2599 16.8223 14.4031 16.9655 14.4031 17.1247V17.7294C14.4031 17.9045 14.2599 18.0318 14.1007 18.0318H9.8832C9.70813 18.0318 9.58081 17.8886 9.58081 17.7294V17.1247C9.58081 16.9496 9.72405 16.8223 9.8832 16.8223H10.7904V10.7905H9.8832C9.70813 10.7905 9.58081 10.6472 9.58081 10.4881V9.88329C9.58081 9.70823 9.72405 9.58091 9.8832 9.58091H12.5888C12.923 9.58091 13.1935 9.85146 13.1935 10.1857V16.8223Z",fill:"currentColor"})),S=({className:n,initialData:b,active:r=!0,...C})=>{const[o,s]=M(0),a=x({mergedCartBannerItems:t(H,{fields:{count:o},id:"Checkout.MergedCartBanner.items",plural:o})}),d=()=>{s(0)},l=w(e=>{var i;const m=(i=e==null?void 0:e.oldCartItems)==null?void 0:i.reduce((g,p)=>g+p.quantity,0);m>0&&s(m)},[]);return u(()=>{if(!r)return;const e=c.on("cart/merged",l,{eager:!0});return()=>{e==null||e.off()}},[r,l]),u(()=>{if(!r)return;const e=c.on("cart/reset",()=>{s(0)},{eager:!1});return()=>{e==null||e.off()}},[r]),!r||!o?null:t(h,{...C,"aria-label":a.mergedCartBannerItems,className:B(["checkout__banner",n]),"data-testid":"merged-cart-banner",icon:t(I,{source:V}),message:t("span",{children:a.mergedCartBannerItems}),variant:"neutral",onDismiss:d})};export{S as MergedCartBanner,S as default};
|
|
4
4
|
//# sourceMappingURL=MergedCartBanner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MergedCartBanner.js","sources":["../../node_modules/@adobe-commerce/elsie/src/icons/InfoFilled.svg","/@dropins/storefront-checkout/src/containers/MergedCartBanner/MergedCartBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgInfoFilled = (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\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M0 12C0 5.37931 5.37931 0 12 0C18.6207 0 24 5.37931 24 12C24 18.6207 18.6207 24 12 24C5.37931 24 0 18.6207 0 12ZM11.8885 5.06101C11.1405 5.06101 10.5357 5.66579 10.5357 6.4138V6.57295C10.5835 7.27321 11.1882 7.81433 11.8885 7.76658H12.0795C12.7797 7.70292 13.289 7.09815 13.2413 6.4138C13.2413 5.66579 12.6365 5.06101 11.8885 5.06101ZM13.1935 16.8223H14.1007C14.2599 16.8223 14.4031 16.9655 14.4031 17.1247V17.7294C14.4031 17.9045 14.2599 18.0318 14.1007 18.0318H9.8832C9.70813 18.0318 9.58081 17.8886 9.58081 17.7294V17.1247C9.58081 16.9496 9.72405 16.8223 9.8832 16.8223H10.7904V10.7905H9.8832C9.70813 10.7905 9.58081 10.6472 9.58081 10.4881V9.88329C9.58081 9.70823 9.72405 9.58091 9.8832 9.58091H12.5888C12.923 9.58091 13.1935 9.85146 13.1935 10.1857V16.8223Z\", fill: \"currentColor\" }));\nexport default SvgInfoFilled;\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/containers/MergedCartBanner/MergedCartBanner.css';\nimport {\n AlertBanner,\n AlertBannerProps,\n Icon,\n} from '@adobe-commerce/elsie/components';\nimport { Text, useText } from '@adobe-commerce/elsie/i18n';\nimport { InfoFilled } from '@adobe-commerce/elsie/icons';\nimport { classes } from '@adobe-commerce/elsie/lib/classes';\nimport { Container } from '@adobe-commerce/elsie/lib/types';\nimport { events } from '@adobe-commerce/event-bus';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nexport interface MergedCartBannerProps extends AlertBannerProps {\n active?: boolean;\n}\n\nexport const MergedCartBanner: Container<MergedCartBannerProps> = ({\n className,\n initialData,\n active = true,\n ...props\n}) => {\n const [totalMergedItems, setTotalMergedItems] = useState(0);\n\n const translations = useText({\n mergedCartBannerItems: (\n <Text\n fields={{\n count: totalMergedItems,\n }}\n id=\"Checkout.MergedCartBanner.items\"\n plural={totalMergedItems}\n />\n ),\n });\n\n const onDismiss = () => {\n setTotalMergedItems(0);\n };\n\n const handleCartMerged = useCallback((data: { oldCartItems: any[] }) => {\n const oldCartItems = data?.oldCartItems?.reduce(\n (acc, item) => acc + item.quantity,\n 0\n );\n\n if (oldCartItems > 0) {\n setTotalMergedItems(oldCartItems);\n }\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartMerged = events.on('cart/merged', handleCartMerged, {\n eager: true,\n });\n return () => {\n onCartMerged?.off();\n };\n }, [active, handleCartMerged]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartReset = events.on(\n 'cart/reset',\n () => {\n setTotalMergedItems(0);\n },\n {\n eager: false,\n }\n );\n return () => {\n onCartReset?.off();\n };\n }, [active]);\n\n if (!active || !totalMergedItems) return null;\n\n return (\n <AlertBanner\n {...props}\n aria-label={translations.mergedCartBannerItems}\n className={classes(['checkout__banner', className])}\n data-testid=\"merged-cart-banner\"\n icon={<Icon source={InfoFilled} />}\n message={<span>{translations.mergedCartBannerItems}</span>}\n variant=\"neutral\"\n onDismiss={onDismiss}\n />\n );\n};\n"],"names":["SvgInfoFilled","props","React","MergedCartBanner","className","initialData","active","totalMergedItems","setTotalMergedItems","useState","translations","useText","jsx","Text","onDismiss","handleCartMerged","useCallback","data","oldCartItems","_a","acc","item","useEffect","onCartMerged","events","onCartReset","AlertBanner","classes","Icon","InfoFilled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MergedCartBanner.js","sources":["../../node_modules/@adobe-commerce/elsie/src/icons/InfoFilled.svg","/@dropins/storefront-checkout/src/containers/MergedCartBanner/MergedCartBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgInfoFilled = (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\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M0 12C0 5.37931 5.37931 0 12 0C18.6207 0 24 5.37931 24 12C24 18.6207 18.6207 24 12 24C5.37931 24 0 18.6207 0 12ZM11.8885 5.06101C11.1405 5.06101 10.5357 5.66579 10.5357 6.4138V6.57295C10.5835 7.27321 11.1882 7.81433 11.8885 7.76658H12.0795C12.7797 7.70292 13.289 7.09815 13.2413 6.4138C13.2413 5.66579 12.6365 5.06101 11.8885 5.06101ZM13.1935 16.8223H14.1007C14.2599 16.8223 14.4031 16.9655 14.4031 17.1247V17.7294C14.4031 17.9045 14.2599 18.0318 14.1007 18.0318H9.8832C9.70813 18.0318 9.58081 17.8886 9.58081 17.7294V17.1247C9.58081 16.9496 9.72405 16.8223 9.8832 16.8223H10.7904V10.7905H9.8832C9.70813 10.7905 9.58081 10.6472 9.58081 10.4881V9.88329C9.58081 9.70823 9.72405 9.58091 9.8832 9.58091H12.5888C12.923 9.58091 13.1935 9.85146 13.1935 10.1857V16.8223Z\", fill: \"currentColor\" }));\nexport default SvgInfoFilled;\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/containers/MergedCartBanner/MergedCartBanner.css';\nimport {\n AlertBanner,\n AlertBannerProps,\n Icon,\n} from '@adobe-commerce/elsie/components';\nimport { Text, useText } from '@adobe-commerce/elsie/i18n';\nimport { InfoFilled } from '@adobe-commerce/elsie/icons';\nimport { classes } from '@adobe-commerce/elsie/lib/classes';\nimport { Container } from '@adobe-commerce/elsie/lib/types';\nimport { events } from '@adobe-commerce/event-bus';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nexport interface MergedCartBannerProps extends AlertBannerProps {\n active?: boolean;\n}\n\nexport const MergedCartBanner: Container<MergedCartBannerProps> = ({\n className,\n initialData,\n active = true,\n ...props\n}) => {\n const [totalMergedItems, setTotalMergedItems] = useState(0);\n\n const translations = useText({\n mergedCartBannerItems: (\n <Text\n fields={{\n count: totalMergedItems,\n }}\n id=\"Checkout.MergedCartBanner.items\"\n plural={totalMergedItems}\n />\n ),\n });\n\n const onDismiss = () => {\n setTotalMergedItems(0);\n };\n\n const handleCartMerged = useCallback((data: { oldCartItems: any[] }) => {\n const oldCartItems = data?.oldCartItems?.reduce(\n (acc, item) => acc + item.quantity,\n 0\n );\n\n if (oldCartItems > 0) {\n setTotalMergedItems(oldCartItems);\n }\n }, []);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartMerged = events.on('cart/merged', handleCartMerged, {\n eager: true,\n });\n return () => {\n onCartMerged?.off();\n };\n }, [active, handleCartMerged]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartReset = events.on(\n 'cart/reset',\n () => {\n setTotalMergedItems(0);\n },\n {\n eager: false,\n }\n );\n return () => {\n onCartReset?.off();\n };\n }, [active]);\n\n if (!active || !totalMergedItems) return null;\n\n return (\n <AlertBanner\n {...props}\n aria-label={translations.mergedCartBannerItems}\n className={classes(['checkout__banner', className])}\n data-testid=\"merged-cart-banner\"\n icon={<Icon source={InfoFilled} />}\n message={<span>{translations.mergedCartBannerItems}</span>}\n variant=\"neutral\"\n onDismiss={onDismiss}\n />\n );\n};\n"],"names":["SvgInfoFilled","props","React","MergedCartBanner","className","initialData","active","totalMergedItems","setTotalMergedItems","useState","translations","useText","jsx","Text","onDismiss","handleCartMerged","useCallback","data","oldCartItems","_a","acc","item","useEffect","onCartMerged","events","onCartReset","AlertBanner","classes","Icon","InfoFilled"],"mappings":"2cACA,MAAMA,EAAiBC,GAA0BC,EAAM,cAAc,MAAO,CAAE,MAAO,GAAI,OAAQ,GAAI,QAAS,YAAa,KAAM,OAAQ,MAAO,6BAA8B,GAAGD,CAAO,EAAkBC,EAAM,cAAc,OAAQ,CAAE,SAAU,UAAW,SAAU,UAAW,EAAG,6vBAA8vB,KAAM,cAAgB,CAAA,CAAC,ECiC7hCC,EAAqD,CAAC,CACjE,UAAAC,EACA,YAAAC,EACA,OAAAC,EAAS,GACT,GAAGL,CACL,IAAM,CACJ,KAAM,CAACM,EAAkBC,CAAmB,EAAIC,EAAS,CAAC,EAEpDC,EAAeC,EAAQ,CAC3B,sBACEC,EAACC,EAAA,CACC,OAAQ,CACN,MAAON,CACT,EACA,GAAG,kCACH,OAAQA,CAAA,CAAA,CACV,CAEH,EAEKO,EAAY,IAAM,CACtBN,EAAoB,CAAC,CACvB,EAEMO,EAAmBC,EAAaC,GAAkC,OAChE,MAAAC,GAAeC,EAAAF,GAAA,YAAAA,EAAM,eAAN,YAAAE,EAAoB,OACvC,CAACC,EAAKC,IAASD,EAAMC,EAAK,SAC1B,GAGEH,EAAe,GACjBV,EAAoBU,CAAY,CAEpC,EAAG,EAAE,EA8BL,OA5BAI,EAAU,IAAM,CACd,GAAI,CAAChB,EAAQ,OAEb,MAAMiB,EAAeC,EAAO,GAAG,cAAeT,EAAkB,CAC9D,MAAO,EAAA,CACR,EACD,MAAO,IAAM,CACXQ,GAAA,MAAAA,EAAc,KAChB,CAAA,EACC,CAACjB,EAAQS,CAAgB,CAAC,EAE7BO,EAAU,IAAM,CACd,GAAI,CAAChB,EAAQ,OAEb,MAAMmB,EAAcD,EAAO,GACzB,aACA,IAAM,CACJhB,EAAoB,CAAC,CACvB,EACA,CACE,MAAO,EAAA,CAEX,EACA,MAAO,IAAM,CACXiB,GAAA,MAAAA,EAAa,KACf,CAAA,EACC,CAACnB,CAAM,CAAC,EAEP,CAACA,GAAU,CAACC,EAAyB,KAGvCK,EAACc,EAAA,CACE,GAAGzB,EACJ,aAAYS,EAAa,sBACzB,UAAWiB,EAAQ,CAAC,mBAAoBvB,CAAS,CAAC,EAClD,cAAY,qBACZ,KAAMQ,EAACgB,EAAK,CAAA,OAAQC,CAAY,CAAA,EAChC,QAASjB,EAAC,OAAM,CAAA,SAAAF,EAAa,sBAAsB,EACnD,QAAQ,UACR,UAAAI,CAAA,CACF,CAEJ","x_google_ignoreList":[0]}
|
package/containers/OutOfStock.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsxs as n,jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/TermsAndConditions.js";import{classes as l}from"@dropins/tools/lib.js";import{Card as h,Icon as O,Image as d}from"@dropins/tools/components.js";/* empty css */import{S as p}from"../chunks/OrderError.js";import{useText as S}from"@dropins/tools/i18n.js"
|
|
3
|
+
import{jsxs as n,jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import"../chunks/TermsAndConditions.js";import{classes as l}from"@dropins/tools/lib.js";import{Card as h,Icon as O,Image as d}from"@dropins/tools/components.js";/* empty css */import{S as p}from"../chunks/OrderError.js";import{useText as S}from"@dropins/tools/i18n.js";import"../chunks/fetch-graphql.js";import{events as _}from"@dropins/tools/event-bus.js";import"@dropins/tools/preact-compat.js";/* empty css *//* empty css *//* empty css */import{useState as g,useCallback as v,useEffect as N}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";const w=({className:r,items:u,onRemoveOutOfStock:s,routeCart:t,...a})=>{const i=S({title:"Checkout.OutOfStock.title",message:"Checkout.OutOfStock.message",reviewCart:"Checkout.OutOfStock.actions.reviewCart",removeOutOfStock:"Checkout.OutOfStock.actions.removeOutOfStock"});return n(h,{className:l(["checkout-out-of-stock",r]),"data-testid":"checkout-out-of-stock",variant:"secondary",...a,children:[n("h4",{className:"checkout-out-of-stock__title",children:[o(O,{size:"16",source:p,stroke:"1"}),i.title]}),o("p",{className:"checkout-out-of-stock__message",children:i.message}),o("ol",{className:"checkout-out-of-stock__items",children:u.map(m=>o("li",{className:"checkout-out-of-stock__item","data-testid":"out-of-stock-item",children:o(d,{alt:m.image.alt,height:"100",loading:"eager",params:{width:100},src:m.image.src,width:"100"})},m.sku))}),n("div",{className:"checkout-out-of-stock__actions",children:[t&&o("a",{className:"checkout-out-of-stock__action","data-testid":"review-cart",href:t,children:i.reviewCart}),s&&o("button",{className:"checkout-out-of-stock__action","data-testid":"remove-out-of-stock",type:"button",onClick:s,children:i.removeOutOfStock})]})]})},G=({onCartProductsUpdate:r,routeCart:u,active:s=!0})=>{const[t,a]=g([]),i=v(()=>{if(!r)return;const e=t.filter(c=>c.outOfStock).map(c=>({uid:c.uid,quantity:0}));r(e)},[t,r]);if(N(()=>{if(!s)return;const e=_.on("cart/data",c=>{const k=(c==null?void 0:c.items)||[];a(k.filter(f=>f.outOfStock||f.insufficientQuantity))},{eager:!0});return()=>{e==null||e.off()}},[s]),!s||t.length===0)return null;const m=!t.some(e=>e.insufficientQuantity);return o(w,{items:t,routeCart:u==null?void 0:u(),onRemoveOutOfStock:m?i:void 0})};export{G as OutOfStock,G as default};
|
|
4
4
|
//# sourceMappingURL=OutOfStock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutOfStock.js","sources":["/@dropins/storefront-checkout/src/components/OutOfStock/OutOfStock.tsx","/@dropins/storefront-checkout/src/containers/OutOfStock/OutOfStock.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/OutOfStock/OutOfStock.css';\nimport { Item as CartItem } from '@/checkout/types/cart';\nimport { Card, Icon, Image } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { OrderError } from '@adobe-commerce/elsie/icons';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface OutOfStockProps extends HTMLAttributes<HTMLDivElement> {\n items: CartItem[];\n onRemoveOutOfStock?: (event: Event) => void;\n routeCart?: string;\n}\n\nexport const OutOfStock: FunctionComponent<OutOfStockProps> = ({\n className,\n items,\n onRemoveOutOfStock,\n routeCart,\n ...props\n}) => {\n const translations = useText({\n title: 'Checkout.OutOfStock.title',\n message: 'Checkout.OutOfStock.message',\n reviewCart: 'Checkout.OutOfStock.actions.reviewCart',\n removeOutOfStock: 'Checkout.OutOfStock.actions.removeOutOfStock',\n });\n\n return (\n <Card\n className={classes(['checkout-out-of-stock', className])}\n data-testid=\"checkout-out-of-stock\"\n variant=\"secondary\"\n {...props}\n >\n <h4 className=\"checkout-out-of-stock__title\">\n <Icon size=\"16\" source={OrderError} stroke=\"1\" />\n {translations.title}\n </h4>\n\n <p className=\"checkout-out-of-stock__message\">{translations.message}</p>\n\n <ol className=\"checkout-out-of-stock__items\">\n {items.map((item) => (\n <li\n key={item.sku}\n className=\"checkout-out-of-stock__item\"\n data-testid=\"out-of-stock-item\"\n >\n <Image\n alt={item.image.alt}\n height=\"100\"\n loading=\"eager\"\n params={{ width: 100 }}\n src={item.image.src}\n width=\"100\"\n />\n </li>\n ))}\n </ol>\n\n <div className=\"checkout-out-of-stock__actions\">\n {routeCart && (\n <a\n className=\"checkout-out-of-stock__action\"\n data-testid=\"review-cart\"\n href={routeCart}\n >\n {translations.reviewCart}\n </a>\n )}\n\n {onRemoveOutOfStock && (\n <button\n className=\"checkout-out-of-stock__action\"\n data-testid=\"remove-out-of-stock\"\n type=\"button\"\n onClick={onRemoveOutOfStock}\n >\n {translations.removeOutOfStock}\n </button>\n )}\n </div>\n </Card>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { OutOfStock as OutOfStockComponent } from '@/checkout/components';\nimport { Item as ItemModel } from '@/checkout/types/cart';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nexport type UpdateProductsFromCart = Array<{\n uid: string;\n quantity: number;\n}>;\n\nexport interface OutOfStockProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {\n onCartProductsUpdate?: (items: UpdateProductsFromCart) => void;\n routeCart?: () => string;\n active?: boolean;\n}\n\nexport const OutOfStock: Container<OutOfStockProps> = ({\n onCartProductsUpdate,\n routeCart,\n active = true,\n}) => {\n const [items, setItems] = useState<ItemModel[]>([]);\n\n const removeOutOfStockItems = useCallback(() => {\n if (!onCartProductsUpdate) return;\n\n const update = items\n .filter((item) => item.outOfStock)\n .map((item) => ({ uid: item.uid, quantity: 0 }));\n\n onCartProductsUpdate(update);\n }, [items, onCartProductsUpdate]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartData = events.on(\n 'cart/data',\n (data) => {\n const items = (data?.items || []) as ItemModel[];\n setItems(\n items.filter((item: ItemModel) => {\n return item.outOfStock || item.insufficientQuantity;\n })\n );\n },\n { eager: true }\n );\n\n return () => {\n onCartData?.off();\n };\n }, [active]);\n\n if (!active || items.length === 0) return null;\n\n const canRemoveOutOfStock = !items.some((item) => item.insufficientQuantity);\n\n return (\n <OutOfStockComponent\n items={items}\n routeCart={routeCart?.()}\n onRemoveOutOfStock={\n canRemoveOutOfStock ? removeOutOfStockItems : undefined\n }\n />\n );\n};\n"],"names":["OutOfStock","className","items","onRemoveOutOfStock","routeCart","props","translations","useText","jsxs","Card","classes","jsx","Icon","OrderError","item","Image","onCartProductsUpdate","active","setItems","useState","removeOutOfStockItems","useCallback","update","useEffect","onCartData","events","data","canRemoveOutOfStock","OutOfStockComponent"],"mappings":"
|
|
1
|
+
{"version":3,"file":"OutOfStock.js","sources":["/@dropins/storefront-checkout/src/components/OutOfStock/OutOfStock.tsx","/@dropins/storefront-checkout/src/containers/OutOfStock/OutOfStock.tsx"],"sourcesContent":["/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport '@/checkout/components/OutOfStock/OutOfStock.css';\nimport { Item as CartItem } from '@/checkout/types/cart';\nimport { Card, Icon, Image } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { OrderError } from '@adobe-commerce/elsie/icons';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent } from 'preact';\nimport { HTMLAttributes } from 'preact/compat';\n\nexport interface OutOfStockProps extends HTMLAttributes<HTMLDivElement> {\n items: CartItem[];\n onRemoveOutOfStock?: (event: Event) => void;\n routeCart?: string;\n}\n\nexport const OutOfStock: FunctionComponent<OutOfStockProps> = ({\n className,\n items,\n onRemoveOutOfStock,\n routeCart,\n ...props\n}) => {\n const translations = useText({\n title: 'Checkout.OutOfStock.title',\n message: 'Checkout.OutOfStock.message',\n reviewCart: 'Checkout.OutOfStock.actions.reviewCart',\n removeOutOfStock: 'Checkout.OutOfStock.actions.removeOutOfStock',\n });\n\n return (\n <Card\n className={classes(['checkout-out-of-stock', className])}\n data-testid=\"checkout-out-of-stock\"\n variant=\"secondary\"\n {...props}\n >\n <h4 className=\"checkout-out-of-stock__title\">\n <Icon size=\"16\" source={OrderError} stroke=\"1\" />\n {translations.title}\n </h4>\n\n <p className=\"checkout-out-of-stock__message\">{translations.message}</p>\n\n <ol className=\"checkout-out-of-stock__items\">\n {items.map((item) => (\n <li\n key={item.sku}\n className=\"checkout-out-of-stock__item\"\n data-testid=\"out-of-stock-item\"\n >\n <Image\n alt={item.image.alt}\n height=\"100\"\n loading=\"eager\"\n params={{ width: 100 }}\n src={item.image.src}\n width=\"100\"\n />\n </li>\n ))}\n </ol>\n\n <div className=\"checkout-out-of-stock__actions\">\n {routeCart && (\n <a\n className=\"checkout-out-of-stock__action\"\n data-testid=\"review-cart\"\n href={routeCart}\n >\n {translations.reviewCart}\n </a>\n )}\n\n {onRemoveOutOfStock && (\n <button\n className=\"checkout-out-of-stock__action\"\n data-testid=\"remove-out-of-stock\"\n type=\"button\"\n onClick={onRemoveOutOfStock}\n >\n {translations.removeOutOfStock}\n </button>\n )}\n </div>\n </Card>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { OutOfStock as OutOfStockComponent } from '@/checkout/components';\nimport { Item as ItemModel } from '@/checkout/types/cart';\nimport { Container } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nexport type UpdateProductsFromCart = Array<{\n uid: string;\n quantity: number;\n}>;\n\nexport interface OutOfStockProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {\n onCartProductsUpdate?: (items: UpdateProductsFromCart) => void;\n routeCart?: () => string;\n active?: boolean;\n}\n\nexport const OutOfStock: Container<OutOfStockProps> = ({\n onCartProductsUpdate,\n routeCart,\n active = true,\n}) => {\n const [items, setItems] = useState<ItemModel[]>([]);\n\n const removeOutOfStockItems = useCallback(() => {\n if (!onCartProductsUpdate) return;\n\n const update = items\n .filter((item) => item.outOfStock)\n .map((item) => ({ uid: item.uid, quantity: 0 }));\n\n onCartProductsUpdate(update);\n }, [items, onCartProductsUpdate]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCartData = events.on(\n 'cart/data',\n (data) => {\n const items = (data?.items || []) as ItemModel[];\n setItems(\n items.filter((item: ItemModel) => {\n return item.outOfStock || item.insufficientQuantity;\n })\n );\n },\n { eager: true }\n );\n\n return () => {\n onCartData?.off();\n };\n }, [active]);\n\n if (!active || items.length === 0) return null;\n\n const canRemoveOutOfStock = !items.some((item) => item.insufficientQuantity);\n\n return (\n <OutOfStockComponent\n items={items}\n routeCart={routeCart?.()}\n onRemoveOutOfStock={\n canRemoveOutOfStock ? removeOutOfStockItems : undefined\n }\n />\n );\n};\n"],"names":["OutOfStock","className","items","onRemoveOutOfStock","routeCart","props","translations","useText","jsxs","Card","classes","jsx","Icon","OrderError","item","Image","onCartProductsUpdate","active","setItems","useState","removeOutOfStockItems","useCallback","update","useEffect","onCartData","events","data","canRemoveOutOfStock","OutOfStockComponent"],"mappings":"6vBAgCO,MAAMA,EAAiD,CAAC,CAC7D,UAAAC,EACA,MAAAC,EACA,mBAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAeC,EAAQ,CAC3B,MAAO,4BACP,QAAS,8BACT,WAAY,yCACZ,iBAAkB,8CAAA,CACnB,EAGC,OAAAC,EAACC,EAAA,CACC,UAAWC,EAAQ,CAAC,wBAAyBT,CAAS,CAAC,EACvD,cAAY,wBACZ,QAAQ,YACP,GAAGI,EAEJ,SAAA,CAACG,EAAA,KAAA,CAAG,UAAU,+BACZ,SAAA,CAAAG,EAACC,GAAK,KAAK,KAAK,OAAQC,EAAY,OAAO,IAAI,EAC9CP,EAAa,KAAA,EAChB,EAECK,EAAA,IAAA,CAAE,UAAU,iCAAkC,WAAa,QAAQ,IAEnE,KAAG,CAAA,UAAU,+BACX,SAAMT,EAAA,IAAKY,GACVH,EAAC,KAAA,CAEC,UAAU,8BACV,cAAY,oBAEZ,SAAAA,EAACI,EAAA,CACC,IAAKD,EAAK,MAAM,IAChB,OAAO,MACP,QAAQ,QACR,OAAQ,CAAE,MAAO,GAAI,EACrB,IAAKA,EAAK,MAAM,IAChB,MAAM,KAAA,CAAA,CACR,EAXKA,EAAK,GAab,CAAA,EACH,EAEAN,EAAC,MAAI,CAAA,UAAU,iCACZ,SAAA,CACCJ,GAAAO,EAAC,IAAA,CACC,UAAU,gCACV,cAAY,cACZ,KAAMP,EAEL,SAAaE,EAAA,UAAA,CAChB,EAGDH,GACCQ,EAAC,SAAA,CACC,UAAU,gCACV,cAAY,sBACZ,KAAK,SACL,QAASR,EAER,SAAaG,EAAA,gBAAA,CAAA,CAChB,CAEJ,CAAA,CAAA,CAAA,CACF,CAEJ,ECnEaN,EAAyC,CAAC,CACrD,qBAAAgB,EACA,UAAAZ,EACA,OAAAa,EAAS,EACX,IAAM,CACJ,KAAM,CAACf,EAAOgB,CAAQ,EAAIC,EAAsB,CAAA,CAAE,EAE5CC,EAAwBC,EAAY,IAAM,CAC9C,GAAI,CAACL,EAAsB,OAE3B,MAAMM,EAASpB,EACZ,OAAQY,GAASA,EAAK,UAAU,EAChC,IAAKA,IAAU,CAAE,IAAKA,EAAK,IAAK,SAAU,GAAI,EAEjDE,EAAqBM,CAAM,CAAA,EAC1B,CAACpB,EAAOc,CAAoB,CAAC,EAuBhC,GArBAO,EAAU,IAAM,CACd,GAAI,CAACN,EAAQ,OAEb,MAAMO,EAAaC,EAAO,GACxB,YACCC,GAAS,CACFxB,MAAAA,GAASwB,GAAA,YAAAA,EAAM,QAAS,CAAC,EAC/BR,EACEhB,EAAM,OAAQY,GACLA,EAAK,YAAcA,EAAK,oBAChC,CACH,CACF,EACA,CAAE,MAAO,EAAK,CAChB,EAEA,MAAO,IAAM,CACXU,GAAA,MAAAA,EAAY,KACd,CAAA,EACC,CAACP,CAAM,CAAC,EAEP,CAACA,GAAUf,EAAM,SAAW,EAAU,OAAA,KAE1C,MAAMyB,EAAsB,CAACzB,EAAM,KAAMY,GAASA,EAAK,oBAAoB,EAGzE,OAAAH,EAACiB,EAAA,CACC,MAAA1B,EACA,UAAWE,GAAA,YAAAA,IACX,mBACEuB,EAAsBP,EAAwB,MAAA,CAElD,CAEJ"}
|
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
import { PaymentMethod } from '../../data/models/payment-method';
|
|
1
|
+
import { AdditionalData, PaymentMethod } from '../../data/models/payment-method';
|
|
2
2
|
import { TitleProps, UIComponentType } from '../../types';
|
|
3
3
|
import { Container, SlotProps } from '@dropins/tools/types/elsie/src/lib';
|
|
4
4
|
import { HTMLAttributes } from 'preact/compat';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
interface RenderContext {
|
|
7
|
+
additionalData?: AdditionalData;
|
|
7
8
|
cartId: string;
|
|
8
9
|
replaceHTML: (domElement: HTMLElement) => void;
|
|
10
|
+
setAdditionalData: (data: AdditionalData) => void;
|
|
9
11
|
}
|
|
10
12
|
export interface PaymentMethodConfig {
|
|
13
|
+
autoSync?: boolean;
|
|
11
14
|
displayLabel?: boolean;
|
|
12
15
|
enabled?: boolean;
|
|
13
16
|
icon?: string;
|
|
14
|
-
|
|
15
|
-
render?: SlotProps<PaymentMethodRenderCtx>;
|
|
17
|
+
render?: SlotProps<RenderContext>;
|
|
16
18
|
}
|
|
17
|
-
export interface
|
|
19
|
+
export interface PaymentMethodHandlers {
|
|
18
20
|
[code: string]: PaymentMethodConfig;
|
|
19
21
|
}
|
|
20
22
|
interface CartSyncError {
|
|
@@ -23,7 +25,7 @@ interface CartSyncError {
|
|
|
23
25
|
}
|
|
24
26
|
export interface PaymentMethodsProps extends HTMLAttributes<HTMLDivElement>, TitleProps {
|
|
25
27
|
slots?: {
|
|
26
|
-
Methods?:
|
|
28
|
+
Methods?: PaymentMethodHandlers;
|
|
27
29
|
} & TitleProps['slots'];
|
|
28
30
|
UIComponentType?: UIComponentType;
|
|
29
31
|
active?: boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PaymentMethodConfig } from '..';
|
|
2
|
+
|
|
3
|
+
export declare enum PaymentMethods {
|
|
4
|
+
PaymentOnAccount = "companycredit",
|
|
5
|
+
PurchaseOrder = "purchaseorder"
|
|
6
|
+
}
|
|
7
|
+
export declare const defaultHandlers: {
|
|
8
|
+
companycredit: PaymentMethodConfig;
|
|
9
|
+
purchaseorder: PaymentMethodConfig;
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=handlers.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsxs as b,jsx as
|
|
3
|
+
import{jsxs as b,jsx as r}from"@dropins/tools/preact-jsx-runtime.js";import{h as re,s as oe}from"../chunks/fetch-graphql.js";import{classes as U,VComponent as ne,deepmerge as ce,Slot as A}from"@dropins/tools/lib.js";import{i as ae}from"../chunks/events.js";import{h as se,a as ie}from"../chunks/events2.js";import{g as v,n as B}from"../chunks/values.js";import{events as D}from"@dropins/tools/event-bus.js";import{s as Z}from"../chunks/setPaymentMethod.js";import{W as me}from"../chunks/ConditionalWrapper.js";import"../chunks/TermsAndConditions.js";import{Skeleton as de,SkeletonRow as T,IllustratedMessage as ue,Icon as q,InLineAlert as le,ToggleButton as pe,RadioButton as he}from"@dropins/tools/components.js";import{s as fe}from"../chunks/dom.js";import*as _ from"@dropins/tools/preact-compat.js";import{useRef as ye,useEffect as ke}from"@dropins/tools/preact-compat.js";import{useText as F}from"@dropins/tools/i18n.js";import{useState as w,useMemo as H,useCallback as P,useEffect as j}from"@dropins/tools/preact-hooks.js";/* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import{P as ge}from"../chunks/PurchaseOrder.js";import{P as Me}from"../chunks/PaymentOnAccount2.js";import{r as Pe}from"../chunks/render.js";import"@dropins/tools/signals.js";import"@dropins/tools/fetch-graphql.js";import"../fragments.js";import"../chunks/guards.js";import"../chunks/synchronizeCheckout.js";import"../chunks/transform-shipping-methods.js";import"../chunks/classifiers.js";import"../chunks/getCompanyCredit.js";const Se=t=>_.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},_.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"}),_.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M19.35 11.64H14.04V14.81H19.35V11.64Z",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"}),_.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M17.9304 11.64V8.25H15.1504",stroke:"currentColor",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"})),Ce=()=>b(de,{"data-testid":"payment-methods-skeleton",children:[r(T,{size:"medium",variant:"heading"}),r(T,{size:"medium",variant:"empty"}),r(T,{fullWidth:!0,size:"xlarge"}),r(T,{fullWidth:!0,size:"xlarge"})]}),Ee=({UIComponentType:t="ToggleButton",busy:o,code:c,icon:u,onSelectionChange:n,selected:a,title:d})=>{const p={busy:o,className:"checkout-payment-methods__method",label:d,name:"payment-method",onChange:()=>n({code:c,title:d}),value:c};return t==="ToggleButton"?r(pe,{...p,icon:u?r(q,{source:u}):void 0,selected:a}):r(he,{...p,checked:a,icon:u??void 0})},ve=({className:t,error:o=null,busy:c=!1,onDismissError:u,onSelectionChange:n=()=>{},options:a,paymentMethodContent:d,selection:p,title:M,UIComponentType:I})=>{const E=F({EmptyState:"Checkout.PaymentMethods.emptyState"}),m=o!==null,g=ye(null);return ke(()=>{m&&g.current&&fe(g.current)},[m]),b("div",{className:U(["checkout-payment-methods",t]),"data-testid":"checkout-payment-methods",children:[M&&r(ne,{className:"checkout-payment-methods__title",node:M}),!c&&a.length===0&&r(ue,{"data-testid":"checkout-payment-methods-empty",icon:r(q,{source:Se}),message:r("p",{children:E.EmptyState})}),b("div",{className:U(["checkout-payment-methods__wrapper",["checkout-payment-methods__wrapper--busy",c]]),"data-testid":"checkout-payment-methods-wrapper",children:[r("div",{className:U(["checkout-payment-methods__methods",["checkout-payment-methods--full-width",a.length%2!==0]]),children:a==null?void 0:a.map(y=>r(Ee,{UIComponentType:I,busy:c,code:y.code,icon:y.icon,selected:(p==null?void 0:p.code)===y.code,title:y.displayLabel??!0?y.title:"",onSelectionChange:n},y.code))}),d&&r("div",{className:"checkout-payment-methods__content",children:d})]}),m&&r("div",{ref:g,className:"checkout-payment-methods__error","data-testid":"checkout-payment-methods-alert",children:r(le,{heading:o,type:"error",variant:"primary",onDismiss:u})})]})},Te=me(ve,Ce),_e=(t,o)=>{let c;return function(...u){clearTimeout(c),c=setTimeout(()=>t.apply(this,u),o)}},$=(t,o)=>({enabled:!0,autoSync:!1,render:c=>{var d;const u=String(((d=c.additionalData)==null?void 0:d.purchase_order_number)??""),n=document.createElement("div"),a=_e(p=>{Z({code:o,purchase_order_number:p}).catch(console.error)},1e3);Pe.render(t,{initialReferenceNumber:u,onReferenceNumberChange:a})(n),c.replaceHTML(n)}}),we={companycredit:$(Me,"companycredit"),purchaseorder:$(ge,"purchaseorder")};function O(t,o){return t?o.some(c=>c.code===t.code):!1}function Ie(t,o){return!t||!o?!1:t.code===o.code}function Ve(t){return t?!!t.code&&!!t.title:!1}const st=({UIComponentType:t="ToggleButton",active:o=!0,autoSync:c=!0,displayTitle:u=!0,slots:n,onCartSyncError:a,onSelectionChange:d})=>{const[p,M]=w(null),[I,E]=w(!1),[m,g]=w(null),[y,N]=w([]),G=re.value,l=H(()=>{const e=(n==null?void 0:n.Methods)??{};return ce(we,e)},[n==null?void 0:n.Methods]),J=y.filter(e=>{var s;return((s=l==null?void 0:l[e.code])==null?void 0:s.enabled)!==!1}).map(e=>{const s=(l==null?void 0:l[e.code])||{};return{...e,...s}}),{cartSyncError:W,defaultTitle:x}=F({cartSyncError:"Checkout.PaymentMethods.cartSyncError",defaultTitle:"Checkout.PaymentMethods.title"}),K=P(e=>{g(i=>i&&{...i,additionalData:e});const s=v("selectedPaymentMethod");s&&B({selectedPaymentMethod:{...s,additionalData:e}})},[]),Q=P(()=>{M(null)},[]),f=P(e=>{M(null),g(e),B({selectedPaymentMethod:e})},[]),S=P(async(e,s)=>{if(!(ae()||se()))return;const h=l==null?void 0:l[e.code];((h==null?void 0:h.autoSync)??c)&&Z({code:e.code}).catch(k=>{f(s??null),a==null||a({method:e,error:k}),a||M(W)})},[l,c,f,a,W]),X=P(async e=>{const s=v("selectedPaymentMethod");f(e),d==null||d(e),await S(e,s)},[d,f,S]),C=P(e=>{if(!e||e.isEmpty){f(null),N([]);return}const i=e.availablePaymentMethods??[];if(N(i),i.length===0){f(null);return}const h=e.selectedPaymentMethod??null,V=Ve(h),k=v("selectedPaymentMethod"),L=O(k,i),te=Ie(k,h);if(k&&L&&!te){S(k,h);return}if((!k||!L)&&V&&O(h,i)){f(h);return}if((!k||!L)&&(!V||!O(h,i))){const R=i[0];f(R),S(R)}},[f,S]);j(()=>{if(!o)return;const e=ie();if(e){E(!0);const i=v("selectedPaymentMethod");i&&g(i),C(e);return}const s=D.on("checkout/initialized",i=>{E(!0),C(i)},{eager:!0});return()=>{s==null||s.off()}},[o,C]),j(()=>{if(!o)return;const e=D.on("checkout/updated",C,{eager:!1});return()=>{e==null||e.off()}},[o,C]);const z=l[(m==null?void 0:m.code)||""],Y=z?r(A,{context:{additionalData:m==null?void 0:m.additionalData,cartId:oe.cartId??"",replaceHTML(e){this.replaceWith(e)},setAdditionalData:K},name:"PaymentMethodContent",slot:z.render},m==null?void 0:m.code):void 0,ee=H(()=>{if(u)return r(A,{name:"checkout-payment-methods-title",slot:n==null?void 0:n.Title,children:r("h2",{children:x})})},[u,n==null?void 0:n.Title,x]);return r(Te,{UIComponentType:t,busy:G,error:p,initialized:I,options:J,paymentMethodContent:Y,selection:m,title:ee,visible:o,onDismissError:Q,onSelectionChange:X})};export{st as PaymentMethods,st as default};
|
|
4
4
|
//# sourceMappingURL=PaymentMethods.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentMethods.js","sources":["../../node_modules/@adobe-commerce/elsie/src/icons/Wallet.svg","/@dropins/storefront-checkout/src/components/PaymentMethods/PaymentMethodsSkeleton.tsx","/@dropins/storefront-checkout/src/components/PaymentMethods/PaymentMethods.tsx","/@dropins/storefront-checkout/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","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const PaymentMethodsSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"payment-methods-skeleton\">\n <SkeletonRow size=\"medium\" variant=\"heading\" />\n <SkeletonRow size=\"medium\" variant=\"empty\" />\n <SkeletonRow fullWidth={true} size=\"xlarge\" />\n <SkeletonRow fullWidth={true} size=\"xlarge\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport '@/checkout/components/PaymentMethods/PaymentMethods.css';\nimport { PaymentMethodsSkeleton } from '@/checkout/components/PaymentMethods/PaymentMethodsSkeleton';\nimport { PaymentMethodConfig } from '@/checkout/containers';\nimport { PaymentMethod } from '@/checkout/data/models/payment-method';\nimport { scrollToElement } from '@/checkout/lib';\nimport { UIComponentType } from '@/checkout/types';\nimport {\n Icon,\n IllustratedMessage,\n InLineAlert,\n RadioButton,\n ToggleButton,\n} from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Wallet } from '@adobe-commerce/elsie/icons';\nimport { classes, VComponent } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes, useEffect, useRef } from 'preact/compat';\n\ninterface ExtendedPaymentMethod extends PaymentMethodConfig, PaymentMethod {}\n\nexport interface PaymentMethodsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n error?: string | null;\n busy?: boolean;\n onDismissError?: () => void;\n onSelectionChange?: (value: PaymentMethod) => void;\n options?: ExtendedPaymentMethod[];\n paymentMethodContent?: VNode;\n selection: PaymentMethod | null;\n title?: VNode;\n UIComponentType?: UIComponentType;\n}\n\ninterface PaymentOptionProps {\n UIComponentType?: UIComponentType;\n busy?: boolean;\n code: string;\n icon?: string;\n onSelectionChange: (value: PaymentMethod) => void;\n selected: boolean;\n title: string;\n}\n\nconst PaymentOption: FunctionComponent<PaymentOptionProps> = ({\n UIComponentType = 'ToggleButton',\n busy,\n code,\n icon,\n onSelectionChange,\n selected,\n title,\n}) => {\n const commonProps = {\n busy,\n className: 'checkout-payment-methods__method',\n label: title,\n name: 'payment-method',\n onChange: () => onSelectionChange({ code, title }),\n value: code,\n };\n\n return UIComponentType === 'ToggleButton' ? (\n <ToggleButton\n {...commonProps}\n // @ts-ignore\n icon={icon ? <Icon source={icon} /> : undefined}\n selected={selected}\n />\n ) : (\n <RadioButton {...commonProps} checked={selected} icon={icon ?? undefined} />\n );\n};\n\nconst PaymentMethodsComponent: FunctionComponent<PaymentMethodsProps> = ({\n className,\n error = null,\n busy = false,\n onDismissError,\n onSelectionChange = () => {},\n options,\n paymentMethodContent,\n selection,\n title,\n UIComponentType,\n}) => {\n const translations = useText({\n EmptyState: 'Checkout.PaymentMethods.emptyState',\n });\n\n const hasError = error !== null;\n const errorRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (hasError && errorRef.current) {\n scrollToElement(errorRef.current);\n }\n }, [hasError]);\n\n return (\n <div\n className={classes(['checkout-payment-methods', className])}\n data-testid=\"checkout-payment-methods\"\n >\n {title && (\n <VComponent className=\"checkout-payment-methods__title\" node={title} />\n )}\n\n {!busy && options!.length === 0 && (\n <IllustratedMessage\n data-testid=\"checkout-payment-methods-empty\"\n icon={<Icon source={Wallet} />}\n message={<p>{translations.EmptyState}</p>}\n />\n )}\n\n <div\n className={classes([\n 'checkout-payment-methods__wrapper',\n ['checkout-payment-methods__wrapper--busy', busy],\n ])}\n data-testid=\"checkout-payment-methods-wrapper\"\n >\n <div\n className={classes([\n 'checkout-payment-methods__methods',\n ['checkout-payment-methods--full-width', options!.length % 2 !== 0],\n ])}\n >\n {options?.map((method) => (\n <PaymentOption\n key={method.code}\n UIComponentType={UIComponentType}\n busy={busy}\n code={method.code}\n icon={method.icon}\n selected={selection?.code === method.code}\n title={method.displayLabel ?? true ? method.title : ''}\n onSelectionChange={onSelectionChange}\n />\n ))}\n </div>\n\n {paymentMethodContent && (\n <div className=\"checkout-payment-methods__content\">\n {paymentMethodContent}\n </div>\n )}\n </div>\n\n {hasError && (\n <div\n ref={errorRef}\n className=\"checkout-payment-methods__error\"\n data-testid=\"checkout-payment-methods-alert\"\n >\n <InLineAlert\n heading={error}\n type=\"error\"\n variant=\"primary\"\n onDismiss={onDismissError}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport const PaymentMethods = WithConditionals(\n PaymentMethodsComponent,\n PaymentMethodsSkeleton\n);\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { setPaymentMethod } from '@/checkout/api';\nimport { PaymentMethods as PaymentMethodsComponent } from '@/checkout/components/PaymentMethods/PaymentMethods';\nimport { Cart } from '@/checkout/data/models/cart';\nimport { PaymentMethod } from '@/checkout/data/models/payment-method';\nimport { NegotiableQuote } from '@/checkout/data/models/quote';\nimport {\n getLatestCheckoutUpdate,\n getValue,\n hasPendingUpdates,\n hasShippingAddress,\n isVirtualCart,\n notifyValues,\n state,\n} from '@/checkout/lib';\nimport { TitleProps, UIComponentType } from '@/checkout/types';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useMemo, useState } from 'preact/hooks';\n\nexport interface PaymentMethodRenderCtx {\n cartId: string;\n replaceHTML: (domElement: HTMLElement) => void;\n}\n\nexport interface PaymentMethodConfig {\n displayLabel?: boolean;\n enabled?: boolean;\n icon?: string;\n autoSync?: boolean;\n render?: SlotProps<PaymentMethodRenderCtx>;\n}\n\nexport interface PaymentMethodsSlot {\n [code: string]: PaymentMethodConfig;\n}\n\ninterface CartSyncError {\n method: PaymentMethod;\n error: Error;\n}\n\nexport interface PaymentMethodsProps\n extends HTMLAttributes<HTMLDivElement>,\n TitleProps {\n slots?: {\n Methods?: PaymentMethodsSlot;\n } & TitleProps['slots'];\n UIComponentType?: UIComponentType;\n active?: boolean;\n autoSync?: boolean;\n onCartSyncError?: (error: CartSyncError) => void;\n onSelectionChange?: (method: PaymentMethod) => void;\n}\n\nfunction isValidSelection(\n selection: PaymentMethod | null,\n options: PaymentMethod[]\n) {\n if (!selection) return false;\n return options.some((option) => option.code === selection.code);\n}\n\nfunction isEqual(a: PaymentMethod | null, b: PaymentMethod | null) {\n if (!a || !b) return false;\n return a.code === b.code;\n}\n\nfunction isValidPaymentMethod(method: PaymentMethod | null) {\n if (!method) return false;\n return !!method.code && !!method.title;\n}\n\nexport const PaymentMethods: Container<PaymentMethodsProps> = ({\n UIComponentType = 'ToggleButton',\n active = true,\n autoSync = true,\n displayTitle = true,\n slots,\n onCartSyncError,\n onSelectionChange,\n}) => {\n const [error, setError] = useState<string | null>(null);\n const [isInitialized, setIsInitialized] = useState(false);\n const [selection, setSelection] = useState<PaymentMethod | null>(null);\n const [options, setOptions] = useState<PaymentMethod[]>([]);\n const slotMethods = slots?.Methods;\n const isBusy = hasPendingUpdates.value;\n\n const enabledOptions = options\n .filter((method) => {\n return slotMethods?.[method.code]?.enabled !== false;\n })\n .map((method) => {\n const slotMethod = slotMethods?.[method.code] || {};\n\n return {\n ...method,\n ...slotMethod,\n };\n });\n\n const { cartSyncError, defaultTitle } = useText({\n cartSyncError: 'Checkout.PaymentMethods.cartSyncError',\n defaultTitle: 'Checkout.PaymentMethods.title',\n });\n\n const handleDismissError = useCallback(() => {\n setError(null);\n }, []);\n\n const setUserSelection = useCallback((selection: PaymentMethod | null) => {\n setError(null);\n setSelection(selection);\n notifyValues({ selectedPaymentMethod: selection });\n }, []);\n\n const setUserSelectionOnCart = useCallback(\n async (selection: PaymentMethod, fallback?: PaymentMethod | null) => {\n const canSetUserSelectionOnCart = isVirtualCart() || hasShippingAddress();\n if (!canSetUserSelectionOnCart) return;\n\n const methodConfig = slotMethods?.[selection.code];\n const shouldAutoSync = methodConfig?.autoSync ?? autoSync;\n\n if (!shouldAutoSync) return;\n\n setPaymentMethod({ code: selection.code }).catch((error) => {\n setUserSelection(fallback ?? null);\n onCartSyncError?.({ method: selection, error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [slotMethods, autoSync, setUserSelection, onCartSyncError, cartSyncError]\n );\n\n const handleSelectionChange = useCallback(\n async (selection: PaymentMethod) => {\n const prevSelection = getValue('selectedPaymentMethod');\n\n setUserSelection(selection);\n onSelectionChange?.(selection);\n\n await setUserSelectionOnCart(selection, prevSelection);\n },\n [onSelectionChange, setUserSelection, setUserSelectionOnCart]\n );\n\n const handleCheckoutData = useCallback(\n (data: Cart | NegotiableQuote | null) => {\n const isEmptyCart = !data || data.isEmpty;\n\n if (isEmptyCart) {\n setUserSelection(null);\n setOptions([]);\n return;\n }\n\n const availableOptions = data.availablePaymentMethods ?? [];\n setOptions(availableOptions);\n\n if (availableOptions.length === 0) {\n setUserSelection(null);\n return;\n }\n\n const cartSelection = data.selectedPaymentMethod ?? null;\n const hasCartSelection = isValidPaymentMethod(cartSelection);\n const userSelection = getValue('selectedPaymentMethod');\n const isAvailable = isValidSelection(userSelection, availableOptions);\n const haveSameSelection = isEqual(userSelection, cartSelection);\n\n // User has valid selection that differs from cart\n if (userSelection && isAvailable && !haveSameSelection) {\n setUserSelectionOnCart(userSelection, cartSelection);\n return;\n }\n\n // User has invalid selection but cart has valid selection\n if (\n (!userSelection || !isAvailable) &&\n hasCartSelection &&\n isValidSelection(cartSelection, availableOptions)\n ) {\n setUserSelection(cartSelection);\n return;\n }\n\n // Neither user nor cart has valid selection (or both selections are unavailable)\n if (\n (!userSelection || !isAvailable) &&\n (!hasCartSelection ||\n !isValidSelection(cartSelection, availableOptions))\n ) {\n const newSelection = availableOptions[0];\n setUserSelection(newSelection);\n setUserSelectionOnCart(newSelection);\n }\n },\n [setUserSelection, setUserSelectionOnCart]\n );\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore key state so handleCheckoutData can work properly\n const userSelection = getValue('selectedPaymentMethod');\n if (userSelection) {\n setSelection(userSelection);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data: Cart | NegotiableQuote | null) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const selectedPaymentMethodHandler = selection\n ? slots?.Methods?.[selection.code]?.render\n : null;\n\n const paymentMethodContent = selectedPaymentMethodHandler ? (\n <Slot\n key={selectedPaymentMethodHandler}\n context={{\n cartId: state.cartId ?? '',\n replaceHTML(domElement: HTMLElement) {\n this.replaceWith(domElement);\n },\n }}\n name=\"PaymentMethodContent\"\n slot={selectedPaymentMethodHandler}\n />\n ) : undefined;\n\n const titleContent = useMemo(() => {\n if (!displayTitle) return undefined;\n\n return (\n <Slot name=\"checkout-payment-methods-title\" slot={slots?.Title}>\n <h2>{defaultTitle}</h2>\n </Slot>\n );\n }, [displayTitle, slots?.Title, defaultTitle]);\n\n return (\n <PaymentMethodsComponent\n UIComponentType={UIComponentType}\n busy={isBusy}\n error={error}\n initialized={isInitialized}\n options={enabledOptions}\n paymentMethodContent={paymentMethodContent}\n selection={selection}\n title={titleContent}\n visible={active}\n onDismissError={handleDismissError}\n onSelectionChange={handleSelectionChange}\n />\n );\n};\n"],"names":["SvgWallet","props","React","PaymentMethodsSkeleton","jsxs","Skeleton","jsx","SkeletonRow","PaymentOption","UIComponentType","busy","code","icon","onSelectionChange","selected","title","commonProps","ToggleButton","Icon","RadioButton","PaymentMethodsComponent","className","error","onDismissError","options","paymentMethodContent","selection","translations","useText","hasError","errorRef","useRef","useEffect","scrollToElement","classes","VComponent","IllustratedMessage","Wallet","method","InLineAlert","PaymentMethods","WithConditionals","isValidSelection","option","isEqual","a","b","isValidPaymentMethod","active","autoSync","displayTitle","slots","onCartSyncError","setError","useState","isInitialized","setIsInitialized","setSelection","setOptions","slotMethods","isBusy","hasPendingUpdates","enabledOptions","_a","slotMethod","cartSyncError","defaultTitle","handleDismissError","useCallback","setUserSelection","notifyValues","setUserSelectionOnCart","fallback","isVirtualCart","hasShippingAddress","methodConfig","setPaymentMethod","handleSelectionChange","prevSelection","getValue","handleCheckoutData","data","availableOptions","cartSelection","hasCartSelection","userSelection","isAvailable","haveSameSelection","newSelection","pastUpdate","getLatestCheckoutUpdate","onCheckoutInit","events","onCheckoutUpdated","selectedPaymentMethodHandler","_b","Slot","state","domElement","titleContent","useMemo"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"PaymentMethods.js","sources":["../../node_modules/@adobe-commerce/elsie/src/icons/Wallet.svg","/@dropins/storefront-checkout/src/components/PaymentMethods/PaymentMethodsSkeleton.tsx","/@dropins/storefront-checkout/src/components/PaymentMethods/PaymentMethods.tsx","../../node_modules/@adobe-commerce/elsie/src/lib/debounce.ts","/@dropins/storefront-checkout/src/containers/PaymentMethods/handlers.tsx","/@dropins/storefront-checkout/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","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';\nimport { FunctionComponent } from 'preact';\n\nexport const PaymentMethodsSkeleton: FunctionComponent = () => {\n return (\n <Skeleton data-testid=\"payment-methods-skeleton\">\n <SkeletonRow size=\"medium\" variant=\"heading\" />\n <SkeletonRow size=\"medium\" variant=\"empty\" />\n <SkeletonRow fullWidth={true} size=\"xlarge\" />\n <SkeletonRow fullWidth={true} size=\"xlarge\" />\n </Skeleton>\n );\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { WithConditionals } from '@/checkout/components/ConditionalWrapper/ConditionalWrapper';\nimport '@/checkout/components/PaymentMethods/PaymentMethods.css';\nimport { PaymentMethodsSkeleton } from '@/checkout/components/PaymentMethods/PaymentMethodsSkeleton';\nimport { PaymentMethodConfig } from '@/checkout/containers';\nimport { PaymentMethod } from '@/checkout/data/models/payment-method';\nimport { scrollToElement } from '@/checkout/lib';\nimport { UIComponentType } from '@/checkout/types';\nimport {\n Icon,\n IllustratedMessage,\n InLineAlert,\n RadioButton,\n ToggleButton,\n} from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Wallet } from '@adobe-commerce/elsie/icons';\nimport { classes, VComponent } from '@adobe-commerce/elsie/lib';\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes, useEffect, useRef } from 'preact/compat';\n\ninterface ExtendedPaymentMethod extends PaymentMethodConfig, PaymentMethod {}\n\nexport interface PaymentMethodsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n error?: string | null;\n busy?: boolean;\n onDismissError?: () => void;\n onSelectionChange?: (value: PaymentMethod) => void;\n options?: ExtendedPaymentMethod[];\n paymentMethodContent?: VNode;\n selection: PaymentMethod | null;\n title?: VNode;\n UIComponentType?: UIComponentType;\n}\n\ninterface PaymentOptionProps {\n UIComponentType?: UIComponentType;\n busy?: boolean;\n code: string;\n icon?: string;\n onSelectionChange: (value: PaymentMethod) => void;\n selected: boolean;\n title: string;\n}\n\nconst PaymentOption: FunctionComponent<PaymentOptionProps> = ({\n UIComponentType = 'ToggleButton',\n busy,\n code,\n icon,\n onSelectionChange,\n selected,\n title,\n}) => {\n const commonProps = {\n busy,\n className: 'checkout-payment-methods__method',\n label: title,\n name: 'payment-method',\n onChange: () => onSelectionChange({ code, title }),\n value: code,\n };\n\n return UIComponentType === 'ToggleButton' ? (\n <ToggleButton\n {...commonProps}\n // @ts-ignore\n icon={icon ? <Icon source={icon} /> : undefined}\n selected={selected}\n />\n ) : (\n <RadioButton {...commonProps} checked={selected} icon={icon ?? undefined} />\n );\n};\n\nconst PaymentMethodsComponent: FunctionComponent<PaymentMethodsProps> = ({\n className,\n error = null,\n busy = false,\n onDismissError,\n onSelectionChange = () => {},\n options,\n paymentMethodContent,\n selection,\n title,\n UIComponentType,\n}) => {\n const translations = useText({\n EmptyState: 'Checkout.PaymentMethods.emptyState',\n });\n\n const hasError = error !== null;\n const errorRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (hasError && errorRef.current) {\n scrollToElement(errorRef.current);\n }\n }, [hasError]);\n\n return (\n <div\n className={classes(['checkout-payment-methods', className])}\n data-testid=\"checkout-payment-methods\"\n >\n {title && (\n <VComponent className=\"checkout-payment-methods__title\" node={title} />\n )}\n\n {!busy && options!.length === 0 && (\n <IllustratedMessage\n data-testid=\"checkout-payment-methods-empty\"\n icon={<Icon source={Wallet} />}\n message={<p>{translations.EmptyState}</p>}\n />\n )}\n\n <div\n className={classes([\n 'checkout-payment-methods__wrapper',\n ['checkout-payment-methods__wrapper--busy', busy],\n ])}\n data-testid=\"checkout-payment-methods-wrapper\"\n >\n <div\n className={classes([\n 'checkout-payment-methods__methods',\n ['checkout-payment-methods--full-width', options!.length % 2 !== 0],\n ])}\n >\n {options?.map((method) => (\n <PaymentOption\n key={method.code}\n UIComponentType={UIComponentType}\n busy={busy}\n code={method.code}\n icon={method.icon}\n selected={selection?.code === method.code}\n title={method.displayLabel ?? true ? method.title : ''}\n onSelectionChange={onSelectionChange}\n />\n ))}\n </div>\n\n {paymentMethodContent && (\n <div className=\"checkout-payment-methods__content\">\n {paymentMethodContent}\n </div>\n )}\n </div>\n\n {hasError && (\n <div\n ref={errorRef}\n className=\"checkout-payment-methods__error\"\n data-testid=\"checkout-payment-methods-alert\"\n >\n <InLineAlert\n heading={error}\n type=\"error\"\n variant=\"primary\"\n onDismiss={onDismissError}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport const PaymentMethods = WithConditionals(\n PaymentMethodsComponent,\n PaymentMethodsSkeleton\n);\n","/********************************************************************\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this \n * file in accordance with the terms of the Adobe license agreement \n * accompanying it. \n *******************************************************************/\n\nexport const debounce = (fn: Function, ms: number) => {\n let timeoutId: ReturnType<typeof setTimeout>;\n return function (this: any, ...args: any[]) {\n clearTimeout(timeoutId);\n timeoutId = setTimeout(() => fn.apply(this, args), ms);\n };\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { setPaymentMethod } from '@/checkout/api/index';\nimport {\n PaymentMethodConfig,\n PaymentOnAccount,\n PurchaseOrder,\n} from '@/checkout/containers';\nimport { render as Checkout } from '@/checkout/render/render';\nimport { debounce } from '@adobe-commerce/elsie/lib/debounce';\nimport { Container } from '@adobe-commerce/elsie/lib/types';\n\nconst createOrderRefHandler = (\n Container: Container<{\n initialReferenceNumber: string;\n onReferenceNumberChange: (refNumber: string) => void;\n }>,\n code: string\n): PaymentMethodConfig => ({\n enabled: true,\n autoSync: false,\n render: (ctx) => {\n const initialReferenceNumber = String(\n ctx.additionalData?.purchase_order_number ?? ''\n );\n const $wrapper = document.createElement('div');\n\n const onReferenceNumberChange = debounce((refNumber: string) => {\n setPaymentMethod({\n code,\n purchase_order_number: refNumber,\n }).catch(console.error);\n }, 1000);\n\n Checkout.render(Container, {\n initialReferenceNumber,\n onReferenceNumberChange,\n })($wrapper);\n\n ctx.replaceHTML($wrapper);\n },\n});\n\nexport enum PaymentMethods {\n PaymentOnAccount = 'companycredit',\n PurchaseOrder = 'purchaseorder',\n}\n\nexport const defaultHandlers = {\n [PaymentMethods.PaymentOnAccount]: createOrderRefHandler(\n PaymentOnAccount,\n PaymentMethods.PaymentOnAccount\n ),\n [PaymentMethods.PurchaseOrder]: createOrderRefHandler(\n PurchaseOrder,\n PaymentMethods.PurchaseOrder\n ),\n};\n","/********************************************************************\n * ADOBE CONFIDENTIAL\n * __________________\n *\n * Copyright 2024 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n *******************************************************************/\n\nimport { setPaymentMethod } from '@/checkout/api';\nimport { PaymentMethods as PaymentMethodsComponent } from '@/checkout/components/PaymentMethods/PaymentMethods';\nimport { Cart } from '@/checkout/data/models/cart';\nimport {\n AdditionalData,\n PaymentMethod,\n} from '@/checkout/data/models/payment-method';\nimport { NegotiableQuote } from '@/checkout/data/models/quote';\nimport {\n getLatestCheckoutUpdate,\n getValue,\n hasPendingUpdates,\n hasShippingAddress,\n isVirtualCart,\n notifyValues,\n state,\n} from '@/checkout/lib';\nimport { TitleProps, UIComponentType } from '@/checkout/types';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n Container,\n deepmerge,\n Slot,\n SlotProps,\n} from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useCallback, useEffect, useMemo, useState } from 'preact/hooks';\nimport { defaultHandlers } from './handlers';\n\ninterface RenderContext {\n additionalData?: AdditionalData;\n cartId: string;\n replaceHTML: (domElement: HTMLElement) => void;\n setAdditionalData: (data: AdditionalData) => void;\n}\n\nexport interface PaymentMethodConfig {\n autoSync?: boolean;\n displayLabel?: boolean;\n enabled?: boolean;\n icon?: string;\n render?: SlotProps<RenderContext>;\n}\n\nexport interface PaymentMethodHandlers {\n [code: string]: PaymentMethodConfig;\n}\n\ninterface CartSyncError {\n method: PaymentMethod;\n error: Error;\n}\n\nexport interface PaymentMethodsProps\n extends HTMLAttributes<HTMLDivElement>,\n TitleProps {\n slots?: {\n Methods?: PaymentMethodHandlers;\n } & TitleProps['slots'];\n UIComponentType?: UIComponentType;\n active?: boolean;\n autoSync?: boolean;\n onCartSyncError?: (error: CartSyncError) => void;\n onSelectionChange?: (method: PaymentMethod) => void;\n}\n\nfunction isValidSelection(\n selection: PaymentMethod | null,\n options: PaymentMethod[]\n) {\n if (!selection) return false;\n return options.some((option) => option.code === selection.code);\n}\n\nfunction isEqual(a: PaymentMethod | null, b: PaymentMethod | null) {\n if (!a || !b) return false;\n return a.code === b.code;\n}\n\nfunction isValidPaymentMethod(method: PaymentMethod | null) {\n if (!method) return false;\n return !!method.code && !!method.title;\n}\n\nexport const PaymentMethods: Container<PaymentMethodsProps> = ({\n UIComponentType = 'ToggleButton',\n active = true,\n autoSync = true,\n displayTitle = true,\n slots,\n onCartSyncError,\n onSelectionChange,\n}) => {\n const [error, setError] = useState<string | null>(null);\n const [isInitialized, setIsInitialized] = useState(false);\n const [selection, setSelection] = useState<PaymentMethod | null>(null);\n const [options, setOptions] = useState<PaymentMethod[]>([]);\n const isBusy = hasPendingUpdates.value;\n\n const availableHandlers = useMemo(() => {\n const customHandlers = slots?.Methods ?? {};\n return deepmerge(defaultHandlers, customHandlers);\n }, [slots?.Methods]);\n\n const enabledOptions = options\n .filter((method) => {\n return availableHandlers?.[method.code]?.enabled !== false;\n })\n .map((method) => {\n const slotMethod = availableHandlers?.[method.code] || {};\n\n return {\n ...method,\n ...slotMethod,\n };\n });\n\n const { cartSyncError, defaultTitle } = useText({\n cartSyncError: 'Checkout.PaymentMethods.cartSyncError',\n defaultTitle: 'Checkout.PaymentMethods.title',\n });\n\n const setAdditionalData = useCallback((additionalData: AdditionalData) => {\n setSelection((prev) => {\n if (!prev) return prev;\n return { ...prev, additionalData };\n });\n\n const currentSelection = getValue('selectedPaymentMethod');\n\n if (!currentSelection) return;\n\n notifyValues({\n selectedPaymentMethod: {\n ...currentSelection,\n additionalData,\n },\n });\n }, []);\n\n const handleDismissError = useCallback(() => {\n setError(null);\n }, []);\n\n const setUserSelection = useCallback((selection: PaymentMethod | null) => {\n setError(null);\n setSelection(selection);\n notifyValues({ selectedPaymentMethod: selection });\n }, []);\n\n const setUserSelectionOnCart = useCallback(\n async (selection: PaymentMethod, fallback?: PaymentMethod | null) => {\n const canSetUserSelectionOnCart = isVirtualCart() || hasShippingAddress();\n if (!canSetUserSelectionOnCart) return;\n\n const methodConfig = availableHandlers?.[selection.code];\n const shouldAutoSync = methodConfig?.autoSync ?? autoSync;\n\n if (!shouldAutoSync) return;\n\n setPaymentMethod({ code: selection.code }).catch((error) => {\n setUserSelection(fallback ?? null);\n onCartSyncError?.({ method: selection, error });\n\n if (!onCartSyncError) {\n setError(cartSyncError);\n }\n });\n },\n [\n availableHandlers,\n autoSync,\n setUserSelection,\n onCartSyncError,\n cartSyncError,\n ]\n );\n\n const handleSelectionChange = useCallback(\n async (selection: PaymentMethod) => {\n const prevSelection = getValue('selectedPaymentMethod');\n\n setUserSelection(selection);\n onSelectionChange?.(selection);\n\n await setUserSelectionOnCart(selection, prevSelection);\n },\n [onSelectionChange, setUserSelection, setUserSelectionOnCart]\n );\n\n const handleCheckoutData = useCallback(\n (data: Cart | NegotiableQuote | null) => {\n const isEmptyCart = !data || data.isEmpty;\n\n if (isEmptyCart) {\n setUserSelection(null);\n setOptions([]);\n return;\n }\n\n const availableOptions = data.availablePaymentMethods ?? [];\n setOptions(availableOptions);\n\n if (availableOptions.length === 0) {\n setUserSelection(null);\n return;\n }\n\n const cartSelection = data.selectedPaymentMethod ?? null;\n const hasCartSelection = isValidPaymentMethod(cartSelection);\n const userSelection = getValue('selectedPaymentMethod');\n const isAvailable = isValidSelection(userSelection, availableOptions);\n const haveSameSelection = isEqual(userSelection, cartSelection);\n\n // User has valid selection that differs from cart\n if (userSelection && isAvailable && !haveSameSelection) {\n setUserSelectionOnCart(userSelection, cartSelection);\n return;\n }\n\n // User has invalid selection but cart has valid selection\n if (\n (!userSelection || !isAvailable) &&\n hasCartSelection &&\n isValidSelection(cartSelection, availableOptions)\n ) {\n setUserSelection(cartSelection);\n return;\n }\n\n // Neither user nor cart has valid selection (or both selections are unavailable)\n if (\n (!userSelection || !isAvailable) &&\n (!hasCartSelection ||\n !isValidSelection(cartSelection, availableOptions))\n ) {\n const newSelection = availableOptions[0];\n setUserSelection(newSelection);\n setUserSelectionOnCart(newSelection);\n }\n },\n [setUserSelection, setUserSelectionOnCart]\n );\n\n useEffect(() => {\n if (!active) return;\n\n const pastUpdate = getLatestCheckoutUpdate();\n\n if (pastUpdate) {\n setIsInitialized(true);\n // When component becomes active, restore key state so handleCheckoutData can work properly\n const userSelection = getValue('selectedPaymentMethod');\n if (userSelection) {\n setSelection(userSelection);\n }\n handleCheckoutData(pastUpdate);\n return;\n }\n\n const onCheckoutInit = events.on(\n 'checkout/initialized',\n (data: Cart | NegotiableQuote | null) => {\n setIsInitialized(true);\n handleCheckoutData(data);\n },\n { eager: true }\n );\n\n return () => {\n onCheckoutInit?.off();\n };\n }, [active, handleCheckoutData]);\n\n useEffect(() => {\n if (!active) return;\n\n const onCheckoutUpdated = events.on(\n 'checkout/updated',\n handleCheckoutData,\n { eager: false }\n );\n\n return () => {\n onCheckoutUpdated?.off();\n };\n }, [active, handleCheckoutData]);\n\n const selectionConfig = availableHandlers[selection?.code || ''];\n\n const paymentMethodContent = selectionConfig ? (\n <Slot\n key={selection?.code}\n context={{\n additionalData: selection?.additionalData,\n cartId: state.cartId ?? '',\n replaceHTML(domElement: HTMLElement) {\n this.replaceWith(domElement);\n },\n setAdditionalData,\n }}\n name=\"PaymentMethodContent\"\n slot={selectionConfig.render}\n />\n ) : undefined;\n\n const titleContent = useMemo(() => {\n if (!displayTitle) return undefined;\n\n return (\n <Slot name=\"checkout-payment-methods-title\" slot={slots?.Title}>\n <h2>{defaultTitle}</h2>\n </Slot>\n );\n }, [displayTitle, slots?.Title, defaultTitle]);\n\n return (\n <PaymentMethodsComponent\n UIComponentType={UIComponentType}\n busy={isBusy}\n error={error}\n initialized={isInitialized}\n options={enabledOptions}\n paymentMethodContent={paymentMethodContent}\n selection={selection}\n title={titleContent}\n visible={active}\n onDismissError={handleDismissError}\n onSelectionChange={handleSelectionChange}\n />\n );\n};\n"],"names":["SvgWallet","props","React","PaymentMethodsSkeleton","jsxs","Skeleton","jsx","SkeletonRow","PaymentOption","UIComponentType","busy","code","icon","onSelectionChange","selected","title","commonProps","ToggleButton","Icon","RadioButton","PaymentMethodsComponent","className","error","onDismissError","options","paymentMethodContent","selection","translations","useText","hasError","errorRef","useRef","useEffect","scrollToElement","classes","VComponent","IllustratedMessage","Wallet","method","InLineAlert","PaymentMethods","WithConditionals","debounce","fn","ms","timeoutId","args","createOrderRefHandler","Container","ctx","initialReferenceNumber","_a","$wrapper","onReferenceNumberChange","refNumber","setPaymentMethod","Checkout","defaultHandlers","PaymentOnAccount","PurchaseOrder","isValidSelection","option","isEqual","a","b","isValidPaymentMethod","active","autoSync","displayTitle","slots","onCartSyncError","setError","useState","isInitialized","setIsInitialized","setSelection","setOptions","isBusy","hasPendingUpdates","availableHandlers","useMemo","customHandlers","deepmerge","enabledOptions","slotMethod","cartSyncError","defaultTitle","setAdditionalData","useCallback","additionalData","prev","currentSelection","getValue","notifyValues","handleDismissError","setUserSelection","setUserSelectionOnCart","fallback","isVirtualCart","hasShippingAddress","methodConfig","handleSelectionChange","prevSelection","handleCheckoutData","data","availableOptions","cartSelection","hasCartSelection","userSelection","isAvailable","haveSameSelection","newSelection","pastUpdate","getLatestCheckoutUpdate","onCheckoutInit","events","onCheckoutUpdated","selectionConfig","Slot","state","domElement","titleContent"],"mappings":"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","x_google_ignoreList":[0,3]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'preact/compat';
|
|
2
|
+
import { Container } from '@dropins/tools/types/elsie/src/lib';
|
|
3
|
+
|
|
4
|
+
export interface PaymentOnAccountProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
initialReferenceNumber?: string;
|
|
6
|
+
onReferenceNumberChange?: (referenceNumber: string) => void;
|
|
7
|
+
onReferenceNumberBlur?: (referenceNumber: string) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const PaymentOnAccount: Container<PaymentOnAccountProps>;
|
|
10
|
+
//# sourceMappingURL=PaymentOnAccount.d.ts.map
|