@dropins/storefront-pdp 1.3.3 → 1.3.4
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsxs as x,jsx as h}from"@dropins/tools/preact-jsx-runtime.js";import{useState as y,useCallback as M,useMemo as B,useEffect as q}from"@dropins/tools/preact-hooks.js";import{Field as V,TextArea as j,Picker as $,Input as z}from"@dropins/tools/components.js";import{classes as H}from"@dropins/tools/lib.js";/* empty css */import{useText as u}from"@dropins/tools/i18n.js";const J=c=>{switch(c){case"number":return"number";case"email":return"email";default:return"text"}},K=c=>c.name==="giftcard/giftcard_message"?"textarea":c.name==="giftcard/giftcard_amount"?"picker":"input",Q=(c,a,i,t)=>[{text:i,value:"0",disabled:!1},...c.map(g=>({text:g.toString(),value:g.toString(),disabled:!1})),...a?[{text:t,value:"other",disabled:!1}]:[]],C=(c,a,i)=>{const{validationRule:t}=c;if(c.name==="giftcard/giftcard_amount"){if(t.required&&(a==="0"||!a||a.trim()==="")||a==="0")return i.RequiredFieldError;if(a==="other")return""}else if(t.required&&(!a||a.trim()===""))return i.RequiredFieldError;if(!a||a.trim()==="")return"";switch(t.type){case"email":{if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a))return i.EmailError;break}case"number":{const l=Number(a);if(isNaN(l))return i.NumberError;if(t.min!==void 0&&l<t.min)return i.MinError.replace("{min}",t.min.toString());if(t.max!==void 0&&l>t.max)return i.MaxError.replace("{max}",t.max.toString());if(t.values&&!t.values.some(_=>typeof _=="number"?_===l:_===a))return i.InvalidValueError.replace("{values}",t.values.join(", "));break}case"string":{const l=a.length;if(t.minLength!==void 0&&l<t.minLength)return i.MinLengthError.replace("{min_length}",t.minLength.toString());if(t.maxLength!==void 0&&l>t.maxLength)return i.MaxLengthError.replace("{max_length}",t.maxLength.toString());break}}return""},tr=({options:c,currency:a,optionValues:i,onOptionChange:t,onValidationChange:l})=>{const g=u("PDP.Product.GiftCardOptions.ChooseAmount.label").label,_=u("PDP.Product.GiftCardOptions.OtherAmount.label").label,w=u("PDP.Product.GiftCardOptions.RequiredFieldError.label").label,N=u("PDP.Product.GiftCardOptions.NumberError.label").label,O=u("PDP.Product.GiftCardOptions.MinError.label").label,G=u("PDP.Product.GiftCardOptions.MaxError.label").label,L=u("PDP.Product.GiftCardOptions.MinLengthError.label").label,S=u("PDP.Product.GiftCardOptions.MaxLengthError.label").label,D=u("PDP.Product.GiftCardOptions.EmailError.label").label,R=u("PDP.Product.GiftCardOptions.InvalidValueError.label").label,[F,k]=y({}),[b,T]=y(!1),n=M(r=>c.find(e=>e.name===r),[c]),p=B(()=>({RequiredFieldError:w,NumberError:N,MinError:O,MaxError:G,MinLengthError:L,MaxLengthError:S,EmailError:D,InvalidValueError:R}),[w,N,O,G,L,S,D,R]);q(()=>{const r=c.every(e=>{if(e.name==="giftcard/custom_giftcard_amount"&&!b)return!0;const d=i.find(f=>f.id===e.uid),o=(d==null?void 0:d.value)||"";return C(e,o,p)===""});l(r)},[c,i,l,p,b]),q(()=>{const r=n("giftcard/giftcard_amount"),e=n("giftcard/custom_giftcard_amount"),d=i.find(E=>E.id===(r==null?void 0:r.uid)),o=(d==null?void 0:d.value)||"",f=b,P=o==="other";T(P),f&&!P&&e&&t(e.uid,"")},[i,n,b,t]);const v=(r,e)=>{const d=C(r,e,p);k(o=>({...o,[r.uid]:d})),t(r.uid,e)},A=(r,e)=>{const d=C(r,e,p);k(o=>({...o,[r.uid]:d}))},I=(r,e)=>{const d=e.target.value;v(r,d)},m=r=>{const e=i.find(s=>s.id===r.uid),d=e==null?void 0:e.value,o=F[r.uid],f=K(r),P=!!n("giftcard/custom_giftcard_amount");let E=r.label;return r.name==="giftcard/custom_giftcard_amount"&&a&&(E=`${r.label} ${a}`),h(V,{label:E,className:H(["pdp-gift-card-options__option-field",f==="textarea"&&"pdp-gift-card-options__option-field--full-width"]),error:o,children:f==="textarea"?h(j,{value:d,label:r.label,onChange:s=>v(r,s.target.value),onBlur:s=>A(r,s.target.value),"aria-invalid":!!o}):f==="picker"?h($,{"aria-label":r.label,label:r.label,handleSelect:s=>I(r,s),options:Q(r.validationRule.values||[],P,g,_),value:d,"aria-invalid":!!o}):h(z,{type:J(r.validationRule.type),value:d,onChange:s=>v(r,s.target.value),onBlur:s=>A(r,s.target.value),"aria-invalid":!!o})},r.uid)};return x("div",{className:"pdp-gift-card-options__grid",children:[x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_amount")&&m(n("giftcard/giftcard_amount")),n("giftcard/custom_giftcard_amount")&&b&&m(n("giftcard/custom_giftcard_amount"))]}),x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_sender_name")&&m(n("giftcard/giftcard_sender_name")),n("giftcard/giftcard_sender_email")&&m(n("giftcard/giftcard_sender_email"))]}),x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_recipient_name")&&m(n("giftcard/giftcard_recipient_name")),n("giftcard/giftcard_recipient_email")&&m(n("giftcard/giftcard_recipient_email"))]}),h("div",{className:"pdp-gift-card-options__row",children:n("giftcard/giftcard_message")&&m(n("giftcard/giftcard_message"))})]})};export{tr as G};
|
|
3
|
+
import{jsxs as x,jsx as h}from"@dropins/tools/preact-jsx-runtime.js";import{useState as y,useCallback as M,useMemo as B,useEffect as q}from"@dropins/tools/preact-hooks.js";import{Field as V,TextArea as j,Picker as $,Input as z}from"@dropins/tools/components.js";import{classes as H}from"@dropins/tools/lib.js";/* empty css */import{useText as u}from"@dropins/tools/i18n.js";const J=c=>{switch(c){case"number":return"number";case"email":return"email";default:return"text"}},K=c=>c.name==="giftcard/giftcard_message"?"textarea":c.name==="giftcard/giftcard_amount"?"picker":"input",Q=(c,a,i,t)=>[{text:i,value:"0",disabled:!1},...c.map(g=>({text:g.toString(),value:g.toString(),disabled:!1})),...a?[{text:t,value:"other",disabled:!1}]:[]],C=(c,a,i)=>{const{validationRule:t}=c;if(c.name==="giftcard/giftcard_amount"){if(t.required&&(a==="0"||!a||a.trim()==="")||a==="0")return i.RequiredFieldError;if(a==="other")return""}else if(t.required&&(!a||a.trim()===""))return i.RequiredFieldError;if(!a||a.trim()==="")return"";switch(t.type){case"email":{if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a))return i.EmailError;break}case"number":{const l=Number(a);if(isNaN(l))return i.NumberError;if(t.min!==void 0&&l<t.min)return i.MinError.replace("{min}",t.min.toString());if(t.max!==void 0&&l>t.max)return i.MaxError.replace("{max}",t.max.toString());if(t.values&&!t.values.some(_=>typeof _=="number"?_===l:_===a))return i.InvalidValueError.replace("{values}",t.values.join(", "));break}case"string":{const l=a.length;if(t.minLength!==void 0&&l<t.minLength)return i.MinLengthError.replace("{min_length}",t.minLength.toString());if(t.maxLength!==void 0&&l>t.maxLength)return i.MaxLengthError.replace("{max_length}",t.maxLength.toString());break}}return""},tr=({options:c,currency:a,optionValues:i,onOptionChange:t,onValidationChange:l})=>{const g=u("PDP.Product.GiftCardOptions.ChooseAmount.label").label,_=u("PDP.Product.GiftCardOptions.OtherAmount.label").label,w=u("PDP.Product.GiftCardOptions.RequiredFieldError.label").label,N=u("PDP.Product.GiftCardOptions.NumberError.label").label,O=u("PDP.Product.GiftCardOptions.MinError.label").label,G=u("PDP.Product.GiftCardOptions.MaxError.label").label,L=u("PDP.Product.GiftCardOptions.MinLengthError.label").label,S=u("PDP.Product.GiftCardOptions.MaxLengthError.label").label,D=u("PDP.Product.GiftCardOptions.EmailError.label").label,R=u("PDP.Product.GiftCardOptions.InvalidValueError.label").label,[F,k]=y({}),[b,T]=y(!1),n=M(r=>c.find(e=>e.name===r),[c]),p=B(()=>({RequiredFieldError:w,NumberError:N,MinError:O,MaxError:G,MinLengthError:L,MaxLengthError:S,EmailError:D,InvalidValueError:R}),[w,N,O,G,L,S,D,R]);q(()=>{const r=c.every(e=>{if(e.name==="giftcard/custom_giftcard_amount"&&!b)return!0;const d=i.find(f=>f.id===e.uid),o=(d==null?void 0:d.value)||"";return C(e,o,p)===""});l(r)},[c,i,l,p,b]),q(()=>{const r=n("giftcard/giftcard_amount"),e=n("giftcard/custom_giftcard_amount"),d=i.find(E=>E.id===(r==null?void 0:r.uid)),o=(d==null?void 0:d.value)||"",f=b,P=r?o==="other":!!e;T(P),f&&!P&&e&&t(e.uid,"")},[i,n,b,t]);const v=(r,e)=>{const d=C(r,e,p);k(o=>({...o,[r.uid]:d})),t(r.uid,e)},A=(r,e)=>{const d=C(r,e,p);k(o=>({...o,[r.uid]:d}))},I=(r,e)=>{const d=e.target.value;v(r,d)},m=r=>{const e=i.find(s=>s.id===r.uid),d=e==null?void 0:e.value,o=F[r.uid],f=K(r),P=!!n("giftcard/custom_giftcard_amount");let E=r.label;return r.name==="giftcard/custom_giftcard_amount"&&a&&(E=`${r.label} ${a}`),h(V,{label:E,className:H(["pdp-gift-card-options__option-field",f==="textarea"&&"pdp-gift-card-options__option-field--full-width"]),error:o,children:f==="textarea"?h(j,{value:d,label:r.label,onChange:s=>v(r,s.target.value),onBlur:s=>A(r,s.target.value),"aria-invalid":!!o}):f==="picker"?h($,{"aria-label":r.label,label:r.label,handleSelect:s=>I(r,s),options:Q(r.validationRule.values||[],P,g,_),value:d,"aria-invalid":!!o}):h(z,{type:J(r.validationRule.type),value:d,onChange:s=>v(r,s.target.value),onBlur:s=>A(r,s.target.value),"aria-invalid":!!o})},r.uid)};return x("div",{className:"pdp-gift-card-options__grid",children:[x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_amount")&&m(n("giftcard/giftcard_amount")),n("giftcard/custom_giftcard_amount")&&b&&m(n("giftcard/custom_giftcard_amount"))]}),x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_sender_name")&&m(n("giftcard/giftcard_sender_name")),n("giftcard/giftcard_sender_email")&&m(n("giftcard/giftcard_sender_email"))]}),x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_recipient_name")&&m(n("giftcard/giftcard_recipient_name")),n("giftcard/giftcard_recipient_email")&&m(n("giftcard/giftcard_recipient_email"))]}),h("div",{className:"pdp-gift-card-options__row",children:n("giftcard/giftcard_message")&&m(n("giftcard/giftcard_message"))})]})};export{tr as G};
|
|
4
4
|
//# sourceMappingURL=GiftCardOptions2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GiftCardOptions2.js","sources":["/@dropins/storefront-pdp/src/components/GiftCardOptions/GiftCardOptions.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect, useMemo, useCallback } from 'preact/hooks';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n Field,\n Input,\n TextArea,\n Picker,\n PickerOption,\n} from '@adobe-commerce/elsie/components';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { Option, OptionField } from '@/pdp/data/models/values-model';\nimport './GiftCardOptions.css';\n\nenum ComponentType {\n INPUT = 'input',\n TEXTAREA = 'textarea',\n PICKER = 'picker',\n}\n\nexport interface GiftCardOptionsProps extends HTMLAttributes<HTMLDivElement> {\n options: Option[];\n currency?: string;\n optionValues: OptionField[];\n onOptionChange: (uid: string, value: string) => void;\n onValidationChange: (valid: boolean) => void;\n}\n\n// Utility functions\nconst getInputType = (validationType: string): string => {\n switch (validationType) {\n case 'number':\n return 'number';\n case 'email':\n return 'email';\n default:\n return 'text';\n }\n};\n\nconst getComponentType = (option: Option): ComponentType => {\n if (option.name === 'giftcard/giftcard_message') {\n return ComponentType.TEXTAREA;\n }\n\n if (option.name === 'giftcard/giftcard_amount') {\n return ComponentType.PICKER;\n }\n\n return ComponentType.INPUT;\n};\n\nconst mapToPickerOptions = (\n values: (string | number)[],\n hasCustomAmountField: boolean,\n chooseAmountText: string,\n otherAmountText: string\n): PickerOption[] => {\n const options: PickerOption[] = [\n {\n text: chooseAmountText,\n value: '0',\n disabled: false,\n },\n ...values.map((value) => ({\n text: value.toString(),\n value: value.toString(),\n disabled: false,\n })),\n ...(hasCustomAmountField\n ? [\n {\n text: otherAmountText,\n value: 'other',\n disabled: false,\n },\n ]\n : []),\n ];\n return options;\n};\n\nconst validate = (\n option: Option,\n value: string,\n errorMessages: {\n RequiredFieldError: string;\n NumberError: string;\n MinError: string;\n MaxError: string;\n MinLengthError: string;\n MaxLengthError: string;\n EmailError: string;\n InvalidValueError: string;\n }\n) => {\n const { validationRule } = option;\n\n if (option.name === 'giftcard/giftcard_amount') {\n if (\n validationRule.required &&\n (value === '0' || !value || value.trim() === '')\n ) {\n return errorMessages.RequiredFieldError;\n }\n if (value === '0') {\n return errorMessages.RequiredFieldError;\n }\n if (value === 'other') {\n return '';\n }\n } else if (validationRule.required && (!value || value.trim() === '')) {\n return errorMessages.RequiredFieldError;\n }\n\n if (!value || value.trim() === '') {\n return '';\n }\n\n switch (validationRule.type) {\n case 'email': {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(value)) {\n return errorMessages.EmailError;\n }\n break;\n }\n\n case 'number': {\n const num = Number(value);\n if (isNaN(num)) {\n return errorMessages.NumberError;\n }\n\n // Check min value\n if (validationRule.min !== undefined && num < validationRule.min) {\n return errorMessages.MinError.replace(\n '{min}',\n validationRule.min.toString()\n );\n }\n\n // Check max value\n if (validationRule.max !== undefined && num > validationRule.max) {\n return errorMessages.MaxError.replace(\n '{max}',\n validationRule.max.toString()\n );\n }\n\n // Check allowed values\n if (validationRule.values) {\n const isValidValue = validationRule.values.some((val) =>\n typeof val === 'number' ? val === num : val === value\n );\n if (!isValidValue) {\n return errorMessages.InvalidValueError.replace(\n '{values}',\n validationRule.values.join(', ')\n );\n }\n }\n break;\n }\n\n case 'string': {\n const length = value.length;\n\n // Check min length\n if (\n validationRule.minLength !== undefined &&\n length < validationRule.minLength\n ) {\n return errorMessages.MinLengthError.replace(\n '{min_length}',\n validationRule.minLength.toString()\n );\n }\n\n // Check max length\n if (\n validationRule.maxLength !== undefined &&\n length > validationRule.maxLength\n ) {\n return errorMessages.MaxLengthError.replace(\n '{max_length}',\n validationRule.maxLength.toString()\n );\n }\n break;\n }\n }\n\n return '';\n};\n\nexport const GiftCardOptions: FunctionComponent<GiftCardOptionsProps> = ({\n options,\n currency,\n optionValues,\n onOptionChange,\n onValidationChange,\n}) => {\n const ChooseAmount = useText(\n 'PDP.Product.GiftCardOptions.ChooseAmount.label'\n ).label;\n const OtherAmount = useText(\n 'PDP.Product.GiftCardOptions.OtherAmount.label'\n ).label;\n const RequiredFieldError = useText(\n 'PDP.Product.GiftCardOptions.RequiredFieldError.label'\n ).label;\n const NumberError = useText(\n 'PDP.Product.GiftCardOptions.NumberError.label'\n ).label;\n const MinError = useText('PDP.Product.GiftCardOptions.MinError.label').label;\n const MaxError = useText('PDP.Product.GiftCardOptions.MaxError.label').label;\n const MinLengthError = useText(\n 'PDP.Product.GiftCardOptions.MinLengthError.label'\n ).label;\n const MaxLengthError = useText(\n 'PDP.Product.GiftCardOptions.MaxLengthError.label'\n ).label;\n const EmailError = useText(\n 'PDP.Product.GiftCardOptions.EmailError.label'\n ).label;\n const InvalidValueError = useText(\n 'PDP.Product.GiftCardOptions.InvalidValueError.label'\n ).label;\n\n const [errors, setErrors] = useState<Record<string, string>>({});\n const [showCustomAmount, setShowCustomAmount] = useState(false);\n\n // Helper function to find option by name\n const findOptionByName = useCallback(\n (name: string): Option | undefined => {\n return options.find((option) => option.name === name);\n },\n [options]\n );\n\n // Memoize error messages to avoid recreating them on every render\n const errorMessages = useMemo(\n () => ({\n RequiredFieldError,\n NumberError,\n MinError,\n MaxError,\n MinLengthError,\n MaxLengthError,\n EmailError,\n InvalidValueError,\n }),\n [\n RequiredFieldError,\n NumberError,\n MinError,\n MaxError,\n MinLengthError,\n MaxLengthError,\n EmailError,\n InvalidValueError,\n ]\n );\n\n // Run initial validation only when options or optionValues change\n useEffect(() => {\n const valid = options.every((option) => {\n // Skip validation for custom gift card amount when it's not shown\n if (\n option.name === 'giftcard/custom_giftcard_amount' &&\n !showCustomAmount\n ) {\n return true;\n }\n\n const field = optionValues.find((f) => f.id === option.uid);\n const value = field?.value || '';\n return validate(option, value, errorMessages) === '';\n });\n\n onValidationChange(valid);\n }, [\n options,\n optionValues,\n onValidationChange,\n errorMessages,\n showCustomAmount,\n ]);\n\n useEffect(() => {\n const giftCardAmountOption = findOptionByName('giftcard/giftcard_amount');\n const customAmountOption = findOptionByName(\n 'giftcard/custom_giftcard_amount'\n );\n\n const giftCardAmountField = optionValues.find(\n (f) => f.id === giftCardAmountOption?.uid\n );\n\n const selectedValue = giftCardAmountField?.value || '';\n const wasShowingCustomAmount = showCustomAmount;\n const willShowCustomAmount = selectedValue === 'other';\n\n setShowCustomAmount(willShowCustomAmount);\n\n // Reset custom amount value when switching away from \"other\"\n if (wasShowingCustomAmount && !willShowCustomAmount && customAmountOption) {\n onOptionChange(customAmountOption.uid, '');\n }\n }, [optionValues, findOptionByName, showCustomAmount, onOptionChange]);\n\n const handleChange = (option: Option, value: string) => {\n const error = validate(option, value, errorMessages);\n setErrors((prev: Record<string, string>) => ({\n ...prev,\n [option.uid]: error,\n }));\n\n onOptionChange(option.uid, value);\n };\n\n const handleBlur = (option: Option, value: string) => {\n const error = validate(option, value, errorMessages);\n setErrors((prev: Record<string, string>) => ({\n ...prev,\n [option.uid]: error,\n }));\n };\n\n const handlePickerSelect = (option: Option, event: any) => {\n const selectedValue = event.target.value;\n handleChange(option, selectedValue);\n };\n\n const renderField = (option: Option) => {\n const field = optionValues.find((f) => f.id === option.uid);\n const value = field?.value;\n const error = errors[option.uid];\n const componentType = getComponentType(option);\n const hasCustomAmountField = !!findOptionByName(\n 'giftcard/custom_giftcard_amount'\n );\n\n // Add currency to custom gift card amount label\n let label = option.label;\n if (option.name === 'giftcard/custom_giftcard_amount' && currency) {\n label = `${option.label} ${currency}`;\n }\n\n return (\n <Field\n key={option.uid}\n label={label}\n className={classes([\n 'pdp-gift-card-options__option-field',\n componentType === ComponentType.TEXTAREA &&\n 'pdp-gift-card-options__option-field--full-width',\n ])}\n error={error}\n >\n {(() => {\n if (componentType === ComponentType.TEXTAREA) {\n return (\n <TextArea\n value={value}\n label={option.label}\n onChange={(e: any) =>\n handleChange(option, (e.target as HTMLTextAreaElement).value)\n }\n onBlur={(e: any) =>\n handleBlur(option, (e.target as HTMLTextAreaElement).value)\n }\n aria-invalid={!!error}\n />\n );\n }\n\n if (componentType === ComponentType.PICKER) {\n return (\n <Picker\n aria-label={option.label}\n label={option.label}\n handleSelect={(event) => handlePickerSelect(option, event)}\n options={mapToPickerOptions(\n option.validationRule.values || [],\n hasCustomAmountField,\n ChooseAmount,\n OtherAmount\n )}\n value={value}\n aria-invalid={!!error}\n />\n );\n }\n\n return (\n <Input\n type={getInputType(option.validationRule.type)}\n value={value}\n onChange={(e) =>\n handleChange(option, (e.target as HTMLInputElement).value)\n }\n onBlur={(e) =>\n handleBlur(option, (e.target as HTMLInputElement).value)\n }\n aria-invalid={!!error}\n />\n );\n })()}\n </Field>\n );\n };\n\n return (\n <div className=\"pdp-gift-card-options__grid\">\n {/* Row 1: Gift card amount and custom amount */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_amount') &&\n renderField(findOptionByName('giftcard/giftcard_amount')!)}\n {findOptionByName('giftcard/custom_giftcard_amount') &&\n showCustomAmount &&\n renderField(findOptionByName('giftcard/custom_giftcard_amount')!)}\n </div>\n\n {/* Row 2: Sender name and email */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_sender_name') &&\n renderField(findOptionByName('giftcard/giftcard_sender_name')!)}\n {findOptionByName('giftcard/giftcard_sender_email') &&\n renderField(findOptionByName('giftcard/giftcard_sender_email')!)}\n </div>\n\n {/* Row 3: Recipient name and email */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_recipient_name') &&\n renderField(findOptionByName('giftcard/giftcard_recipient_name')!)}\n {findOptionByName('giftcard/giftcard_recipient_email') &&\n renderField(findOptionByName('giftcard/giftcard_recipient_email')!)}\n </div>\n\n {/* Row 4: Gift card message */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_message') &&\n renderField(findOptionByName('giftcard/giftcard_message')!)}\n </div>\n </div>\n );\n};\n"],"names":["getInputType","validationType","getComponentType","option","mapToPickerOptions","values","hasCustomAmountField","chooseAmountText","otherAmountText","value","validate","errorMessages","validationRule","num","val","length","GiftCardOptions","options","currency","optionValues","onOptionChange","onValidationChange","ChooseAmount","useText","OtherAmount","RequiredFieldError","NumberError","MinError","MaxError","MinLengthError","MaxLengthError","EmailError","InvalidValueError","errors","setErrors","useState","showCustomAmount","setShowCustomAmount","findOptionByName","useCallback","name","useMemo","useEffect","valid","field","giftCardAmountOption","customAmountOption","giftCardAmountField","f","selectedValue","wasShowingCustomAmount","willShowCustomAmount","handleChange","error","prev","handleBlur","handlePickerSelect","event","renderField","componentType","label","jsx","Field","classes","TextArea","e","Picker","Input","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GiftCardOptions2.js","sources":["/@dropins/storefront-pdp/src/components/GiftCardOptions/GiftCardOptions.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect, useMemo, useCallback } from 'preact/hooks';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n Field,\n Input,\n TextArea,\n Picker,\n PickerOption,\n} from '@adobe-commerce/elsie/components';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { Option, OptionField } from '@/pdp/data/models/values-model';\nimport './GiftCardOptions.css';\n\nenum ComponentType {\n INPUT = 'input',\n TEXTAREA = 'textarea',\n PICKER = 'picker',\n}\n\nexport interface GiftCardOptionsProps extends HTMLAttributes<HTMLDivElement> {\n options: Option[];\n currency?: string;\n optionValues: OptionField[];\n onOptionChange: (uid: string, value: string) => void;\n onValidationChange: (valid: boolean) => void;\n}\n\n// Utility functions\nconst getInputType = (validationType: string): string => {\n switch (validationType) {\n case 'number':\n return 'number';\n case 'email':\n return 'email';\n default:\n return 'text';\n }\n};\n\nconst getComponentType = (option: Option): ComponentType => {\n if (option.name === 'giftcard/giftcard_message') {\n return ComponentType.TEXTAREA;\n }\n\n if (option.name === 'giftcard/giftcard_amount') {\n return ComponentType.PICKER;\n }\n\n return ComponentType.INPUT;\n};\n\nconst mapToPickerOptions = (\n values: (string | number)[],\n hasCustomAmountField: boolean,\n chooseAmountText: string,\n otherAmountText: string\n): PickerOption[] => {\n const options: PickerOption[] = [\n {\n text: chooseAmountText,\n value: '0',\n disabled: false,\n },\n ...values.map((value) => ({\n text: value.toString(),\n value: value.toString(),\n disabled: false,\n })),\n ...(hasCustomAmountField\n ? [\n {\n text: otherAmountText,\n value: 'other',\n disabled: false,\n },\n ]\n : []),\n ];\n return options;\n};\n\nconst validate = (\n option: Option,\n value: string,\n errorMessages: {\n RequiredFieldError: string;\n NumberError: string;\n MinError: string;\n MaxError: string;\n MinLengthError: string;\n MaxLengthError: string;\n EmailError: string;\n InvalidValueError: string;\n }\n) => {\n const { validationRule } = option;\n\n if (option.name === 'giftcard/giftcard_amount') {\n if (\n validationRule.required &&\n (value === '0' || !value || value.trim() === '')\n ) {\n return errorMessages.RequiredFieldError;\n }\n if (value === '0') {\n return errorMessages.RequiredFieldError;\n }\n if (value === 'other') {\n return '';\n }\n } else if (validationRule.required && (!value || value.trim() === '')) {\n return errorMessages.RequiredFieldError;\n }\n\n if (!value || value.trim() === '') {\n return '';\n }\n\n switch (validationRule.type) {\n case 'email': {\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(value)) {\n return errorMessages.EmailError;\n }\n break;\n }\n\n case 'number': {\n const num = Number(value);\n if (isNaN(num)) {\n return errorMessages.NumberError;\n }\n\n // Check min value\n if (validationRule.min !== undefined && num < validationRule.min) {\n return errorMessages.MinError.replace(\n '{min}',\n validationRule.min.toString()\n );\n }\n\n // Check max value\n if (validationRule.max !== undefined && num > validationRule.max) {\n return errorMessages.MaxError.replace(\n '{max}',\n validationRule.max.toString()\n );\n }\n\n // Check allowed values\n if (validationRule.values) {\n const isValidValue = validationRule.values.some((val) =>\n typeof val === 'number' ? val === num : val === value\n );\n if (!isValidValue) {\n return errorMessages.InvalidValueError.replace(\n '{values}',\n validationRule.values.join(', ')\n );\n }\n }\n break;\n }\n\n case 'string': {\n const length = value.length;\n\n // Check min length\n if (\n validationRule.minLength !== undefined &&\n length < validationRule.minLength\n ) {\n return errorMessages.MinLengthError.replace(\n '{min_length}',\n validationRule.minLength.toString()\n );\n }\n\n // Check max length\n if (\n validationRule.maxLength !== undefined &&\n length > validationRule.maxLength\n ) {\n return errorMessages.MaxLengthError.replace(\n '{max_length}',\n validationRule.maxLength.toString()\n );\n }\n break;\n }\n }\n\n return '';\n};\n\nexport const GiftCardOptions: FunctionComponent<GiftCardOptionsProps> = ({\n options,\n currency,\n optionValues,\n onOptionChange,\n onValidationChange,\n}) => {\n const ChooseAmount = useText(\n 'PDP.Product.GiftCardOptions.ChooseAmount.label'\n ).label;\n const OtherAmount = useText(\n 'PDP.Product.GiftCardOptions.OtherAmount.label'\n ).label;\n const RequiredFieldError = useText(\n 'PDP.Product.GiftCardOptions.RequiredFieldError.label'\n ).label;\n const NumberError = useText(\n 'PDP.Product.GiftCardOptions.NumberError.label'\n ).label;\n const MinError = useText('PDP.Product.GiftCardOptions.MinError.label').label;\n const MaxError = useText('PDP.Product.GiftCardOptions.MaxError.label').label;\n const MinLengthError = useText(\n 'PDP.Product.GiftCardOptions.MinLengthError.label'\n ).label;\n const MaxLengthError = useText(\n 'PDP.Product.GiftCardOptions.MaxLengthError.label'\n ).label;\n const EmailError = useText(\n 'PDP.Product.GiftCardOptions.EmailError.label'\n ).label;\n const InvalidValueError = useText(\n 'PDP.Product.GiftCardOptions.InvalidValueError.label'\n ).label;\n\n const [errors, setErrors] = useState<Record<string, string>>({});\n const [showCustomAmount, setShowCustomAmount] = useState(false);\n\n // Helper function to find option by name\n const findOptionByName = useCallback(\n (name: string): Option | undefined => {\n return options.find((option) => option.name === name);\n },\n [options]\n );\n\n // Memoize error messages to avoid recreating them on every render\n const errorMessages = useMemo(\n () => ({\n RequiredFieldError,\n NumberError,\n MinError,\n MaxError,\n MinLengthError,\n MaxLengthError,\n EmailError,\n InvalidValueError,\n }),\n [\n RequiredFieldError,\n NumberError,\n MinError,\n MaxError,\n MinLengthError,\n MaxLengthError,\n EmailError,\n InvalidValueError,\n ]\n );\n\n // Run initial validation only when options or optionValues change\n useEffect(() => {\n const valid = options.every((option) => {\n // Skip validation for custom gift card amount when it's not shown\n if (\n option.name === 'giftcard/custom_giftcard_amount' &&\n !showCustomAmount\n ) {\n return true;\n }\n\n const field = optionValues.find((f) => f.id === option.uid);\n const value = field?.value || '';\n return validate(option, value, errorMessages) === '';\n });\n\n onValidationChange(valid);\n }, [\n options,\n optionValues,\n onValidationChange,\n errorMessages,\n showCustomAmount,\n ]);\n\n useEffect(() => {\n const giftCardAmountOption = findOptionByName('giftcard/giftcard_amount');\n const customAmountOption = findOptionByName(\n 'giftcard/custom_giftcard_amount'\n );\n\n const giftCardAmountField = optionValues.find(\n (f) => f.id === giftCardAmountOption?.uid\n );\n\n const selectedValue = giftCardAmountField?.value || '';\n const wasShowingCustomAmount = showCustomAmount;\n\n // If there's no gift card amount option, always show custom amount\n // Otherwise, show custom amount only when \"other\" is selected\n const willShowCustomAmount = giftCardAmountOption\n ? selectedValue === 'other'\n : !!customAmountOption;\n\n setShowCustomAmount(willShowCustomAmount);\n\n // Reset custom amount value when switching away from \"other\"\n if (wasShowingCustomAmount && !willShowCustomAmount && customAmountOption) {\n onOptionChange(customAmountOption.uid, '');\n }\n }, [optionValues, findOptionByName, showCustomAmount, onOptionChange]);\n\n const handleChange = (option: Option, value: string) => {\n const error = validate(option, value, errorMessages);\n setErrors((prev: Record<string, string>) => ({\n ...prev,\n [option.uid]: error,\n }));\n\n onOptionChange(option.uid, value);\n };\n\n const handleBlur = (option: Option, value: string) => {\n const error = validate(option, value, errorMessages);\n setErrors((prev: Record<string, string>) => ({\n ...prev,\n [option.uid]: error,\n }));\n };\n\n const handlePickerSelect = (option: Option, event: any) => {\n const selectedValue = event.target.value;\n handleChange(option, selectedValue);\n };\n\n const renderField = (option: Option) => {\n const field = optionValues.find((f) => f.id === option.uid);\n const value = field?.value;\n const error = errors[option.uid];\n const componentType = getComponentType(option);\n const hasCustomAmountField = !!findOptionByName(\n 'giftcard/custom_giftcard_amount'\n );\n\n // Add currency to custom gift card amount label\n let label = option.label;\n if (option.name === 'giftcard/custom_giftcard_amount' && currency) {\n label = `${option.label} ${currency}`;\n }\n\n return (\n <Field\n key={option.uid}\n label={label}\n className={classes([\n 'pdp-gift-card-options__option-field',\n componentType === ComponentType.TEXTAREA &&\n 'pdp-gift-card-options__option-field--full-width',\n ])}\n error={error}\n >\n {(() => {\n if (componentType === ComponentType.TEXTAREA) {\n return (\n <TextArea\n value={value}\n label={option.label}\n onChange={(e: any) =>\n handleChange(option, (e.target as HTMLTextAreaElement).value)\n }\n onBlur={(e: any) =>\n handleBlur(option, (e.target as HTMLTextAreaElement).value)\n }\n aria-invalid={!!error}\n />\n );\n }\n\n if (componentType === ComponentType.PICKER) {\n return (\n <Picker\n aria-label={option.label}\n label={option.label}\n handleSelect={(event) => handlePickerSelect(option, event)}\n options={mapToPickerOptions(\n option.validationRule.values || [],\n hasCustomAmountField,\n ChooseAmount,\n OtherAmount\n )}\n value={value}\n aria-invalid={!!error}\n />\n );\n }\n\n return (\n <Input\n type={getInputType(option.validationRule.type)}\n value={value}\n onChange={(e) =>\n handleChange(option, (e.target as HTMLInputElement).value)\n }\n onBlur={(e) =>\n handleBlur(option, (e.target as HTMLInputElement).value)\n }\n aria-invalid={!!error}\n />\n );\n })()}\n </Field>\n );\n };\n\n return (\n <div className=\"pdp-gift-card-options__grid\">\n {/* Row 1: Gift card amount and custom amount */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_amount') &&\n renderField(findOptionByName('giftcard/giftcard_amount')!)}\n {findOptionByName('giftcard/custom_giftcard_amount') &&\n showCustomAmount &&\n renderField(findOptionByName('giftcard/custom_giftcard_amount')!)}\n </div>\n\n {/* Row 2: Sender name and email */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_sender_name') &&\n renderField(findOptionByName('giftcard/giftcard_sender_name')!)}\n {findOptionByName('giftcard/giftcard_sender_email') &&\n renderField(findOptionByName('giftcard/giftcard_sender_email')!)}\n </div>\n\n {/* Row 3: Recipient name and email */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_recipient_name') &&\n renderField(findOptionByName('giftcard/giftcard_recipient_name')!)}\n {findOptionByName('giftcard/giftcard_recipient_email') &&\n renderField(findOptionByName('giftcard/giftcard_recipient_email')!)}\n </div>\n\n {/* Row 4: Gift card message */}\n <div className=\"pdp-gift-card-options__row\">\n {findOptionByName('giftcard/giftcard_message') &&\n renderField(findOptionByName('giftcard/giftcard_message')!)}\n </div>\n </div>\n );\n};\n"],"names":["getInputType","validationType","getComponentType","option","mapToPickerOptions","values","hasCustomAmountField","chooseAmountText","otherAmountText","value","validate","errorMessages","validationRule","num","val","length","GiftCardOptions","options","currency","optionValues","onOptionChange","onValidationChange","ChooseAmount","useText","OtherAmount","RequiredFieldError","NumberError","MinError","MaxError","MinLengthError","MaxLengthError","EmailError","InvalidValueError","errors","setErrors","useState","showCustomAmount","setShowCustomAmount","findOptionByName","useCallback","name","useMemo","useEffect","valid","field","giftCardAmountOption","customAmountOption","giftCardAmountField","f","selectedValue","wasShowingCustomAmount","willShowCustomAmount","handleChange","error","prev","handleBlur","handlePickerSelect","event","renderField","componentType","label","jsx","Field","classes","TextArea","e","Picker","Input","jsxs"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name": "@dropins/storefront-pdp", "version": "1.3.
|
|
1
|
+
{"name": "@dropins/storefront-pdp", "version": "1.3.4", "@dropins/tools": "~1.4.1", "license": "SEE LICENSE IN LICENSE.md"}
|