@anker-in/campaign-ui 0.2.0-beta.11 → 0.2.0-beta.13
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/dist/cjs/components/credits/creditsCash/RedeemableItem.js +1 -1
- package/dist/cjs/components/credits/creditsCash/RedeemableItem.js.map +3 -3
- package/dist/cjs/components/credits/creditsRedeemList/RedeemProductModal/Address.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/RedeemProductModal/Address.js.map +2 -2
- package/dist/esm/components/credits/creditsCash/RedeemableItem.js +1 -1
- package/dist/esm/components/credits/creditsCash/RedeemableItem.js.map +3 -3
- package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/Address.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/RedeemProductModal/Address.js.map +2 -2
- package/package.json +2 -2
- package/src/components/credits/creditsCash/RedeemableItem.tsx +10 -2
- package/src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx +10 -8
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var f=Object.defineProperty;var
|
|
1
|
+
"use strict";var f=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var B=(l,e)=>{for(var s in e)f(l,s,{get:e[s],enumerable:!0})},L=(l,e,s,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of V(e))!A.call(l,n)&&n!==s&&f(l,n,{get:()=>e[n],enumerable:!(u=F(e,n))||u.enumerable});return l};var O=l=>L(f({},"__esModule",{value:!0}),l);var M={};B(M,{default:()=>T});module.exports=O(M);var t=require("react/jsx-runtime"),r=require("@anker-in/headless-ui"),o=require("react"),N=require("../context/provider"),_=require("../context/hooks/useRedeemAndBuy"),R=require("../context/utils"),i=require("@anker-in/lib"),w=require("../../../components/registration");function P({copy:l,itemData:e,setRules:s,className:u}){const{creditInfo:n,profile:a,openSignUpPopup:y,pageCommon:c,gtm:{pageGroup:v}}=(0,N.useCreditsContext)(),{authCodeActivate:g}=(0,w.useRegistration)(),{brand:S}=(0,i.useHeadlessContext)(),b=i.ROUNDED_BRANDS.includes(S),[h,C]=(0,o.useState)(null),{trigger:z,isMutating:I}=(0,_.useRedeemAndBuy)({},{onError:d=>{C(d.message)}}),p=(0,o.useMemo)(()=>!!a,[a?.activated]),x=(0,o.useMemo)(()=>p&&a?.activated&&e.alpcData?.consumeCredits>Number(n?.available_credit||0),[p,a?.activated,e.alpcData?.consumeCredits,n?.available_credit]),k=(0,o.useMemo)(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||x),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,x]),E=()=>{C(null),p?!a?.activated&&!g.isActivateSuccess?g.open():(z({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),(0,i.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:a?.activated?"active":"not active",event_parameters:{page_group:v,position:l.title,button_name:m,info:e?.alpcData?.id?.toString()}})):y()},m=(0,o.useMemo)(()=>e.productVariant?.availableForSale?p?l.btnRedeem:l.unlockRewards:l?.soldOut||"Sold Out",[p,e.productVariant?.availableForSale,l.btnRedeem,l.unlockRewards,l?.soldOut]);return(0,t.jsxs)("div",{className:(0,i.classNames)("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",!b&&"rounded-none",u),children:[(0,t.jsx)("div",{className:(0,i.classNames)("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:(0,t.jsx)(r.Picture,{className:"mx-auto h-full w-auto",imgClassName:"h-full object-contain",source:e?.config?.image?.url||e?.productVariant?.metafields?.global?.transparentImg||e?.productVariant?.image?.url})}),(0,t.jsxs)("div",{className:(0,i.classNames)("mt-[22px] w-full l:mt-[8px]"),children:[(0,t.jsx)(r.Text,{html:e?.product?.title,title:e.config?.title||e.alpcData?.title||e.product?.title,size:2,className:"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"}),e?.config?.rules?.split("<br>")?.length>0&&(0,t.jsx)("button",{type:"button",onClick:()=>{s(e?.config?.rules?.split("<br>")),(0,i.gaTrack)({event:"ga4Event",event_name:"lp_button",member_active_status:a?.activated?"active":"not active",event_parameters:{page_group:v,position:l.title,button_name:c?.ruleLabel,info:e?.alpcData?.id?.toString()}})},className:"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]",tabIndex:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&d.preventDefault()},children:c?.ruleLabel}),(0,t.jsxs)("div",{className:"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[(0,t.jsx)(r.Picture,{className:"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"}),(0,t.jsx)(r.Text,{html:`${(0,R.numberFormat)(e?.alpcData?.consumeCredits)} + ${e?.config?.price}`,size:2,as:"p",className:"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "})]}),(0,t.jsxs)("div",{className:"group relative w-full",children:[(0,t.jsx)(r.Button,{disabled:k,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:I,onClick:()=>{E()},title:x?c.insufficientCredits:m,children:m}),(0,t.jsx)("div",{className:(0,i.classNames)("absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]",x?"block":"hidden"),children:(0,t.jsxs)("div",{className:(0,i.classNames)("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",!b&&"rounded-none"),children:[(0,t.jsx)(r.Text,{as:"p",size:"2",html:c?.insufficientCredits,className:"text-[14px]"}),(0,t.jsx)("div",{className:"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]"})]})})]})]}),h&&(0,t.jsx)("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:h})]})}var T=P;
|
|
2
2
|
//# sourceMappingURL=RedeemableItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/RedeemableItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n pageCommon,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: pageCommon?.ruleLabel,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }}\n className=\"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {pageCommon?.ruleLabel}\n </button>\n )}\n <div className=\"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]\">\n <Picture\n className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n />\n <Text\n html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}\n size={2}\n as=\"p\"\n className=\"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n />\n </div>\n\n <div className=\"group relative w-full\">\n <Button\n disabled={isDisabled}\n variant=\"primary\"\n size=\"lg\"\n className=\"mt-[8px] md:px-[10px] l:w-full\"\n loading={isMutating}\n onClick={() => {\n handleRedeem()\n }}\n title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}\n >\n {redeemButtonText}\n </Button>\n <div\n className={cn(\n 'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',\n inSufficientCredit ? 'block' : 'hidden'\n )}\n >\n <div
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["RedeemableItem_exports", "__export", "RedeemableItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_provider", "import_useRedeemAndBuy", "import_utils", "import_lib", "import_registration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "cn", "e"]
|
|
4
|
+
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n pageCommon,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n !rounded && 'rounded-none',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: pageCommon?.ruleLabel,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }}\n className=\"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {pageCommon?.ruleLabel}\n </button>\n )}\n <div className=\"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]\">\n <Picture\n className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n />\n <Text\n html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}\n size={2}\n as=\"p\"\n className=\"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n />\n </div>\n\n <div className=\"group relative w-full\">\n <Button\n disabled={isDisabled}\n variant=\"primary\"\n size=\"lg\"\n className=\"mt-[8px] md:px-[10px] l:w-full\"\n loading={isMutating}\n onClick={() => {\n handleRedeem()\n }}\n title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}\n >\n {redeemButtonText}\n </Button>\n <div\n className={cn(\n 'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',\n inSufficientCredit ? 'block' : 'hidden'\n )}\n >\n <div\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',\n !rounded && 'rounded-none'\n )}\n >\n <Text as=\"p\" size=\"2\" html={pageCommon?.insufficientCredits} className=\"text-[14px]\" />\n <div className=\"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n </div>\n {error && <div className=\"mt-[8px] text-[14px] text-[#FF0000]\">{error}</div>}\n </div>\n )\n}\n\nexport default RedeemableItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["RedeemableItem_exports", "__export", "RedeemableItem_default", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_react", "import_provider", "import_useRedeemAndBuy", "import_utils", "import_lib", "import_registration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "brand", "rounded", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "cn", "e"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var w=Object.create;var
|
|
1
|
+
"use strict";var w=Object.create;var m=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var I=(e,o)=>{for(var t in o)m(e,t,{get:o[t],enumerable:!0})},l=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of L(o))!B.call(e,s)&&s!==t&&m(e,s,{get:()=>o[s],enumerable:!(a=D(o,s))||a.enumerable});return e};var x=(e,o,t)=>(t=e!=null?w(T(e)):{},l(o||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),P=e=>l(m({},"__esModule",{value:!0}),e);var M={};I(M,{Address:()=>k});module.exports=P(M);var d=require("react/jsx-runtime"),r=require("@anker-in/headless-ui"),n=x(require("classnames")),c=require("../AddressForm"),i=require("@anker-in/lib"),u=require("./ProductInfo"),f=x(require("../../context/hooks/useCountries"));const k=({copy:e,shippingAddress:o,setAddress:t,validateAddress:a,validateErrors:s,shippingProduct:p,loading:v,address:y,disabled:b,handlePayment:g,item:N})=>{const{storeDomain:R,brand:h}=(0,i.useHeadlessContext)(),A=i.ROUNDED_BRANDS.includes(h),{countries:C=[],isLoading:F}=(0,f.default)({shopifyStoreDomain:R});return(0,d.jsxs)("div",{className:"relative",children:[(0,d.jsx)("div",{className:(0,n.default)("max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:(0,d.jsxs)("div",{children:[o&&(0,d.jsx)(r.Text,{className:"mb-5 text-[16px] font-bold",html:o}),e.redeemModal?.product?.addressForm&&(0,d.jsx)(c.AddressForm,{onChange:t,validate:a,errors:s,form:e.redeemModal.product.addressForm,countries:C,countriesLoading:F})]})}),(0,d.jsxs)("div",{className:"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]",children:[(0,d.jsxs)("div",{className:(0,n.default)("flex w-full items-center bg-[#F5F5F7] p-[16px]",!A&&"rounded-none"),children:[p&&(0,d.jsx)(r.Text,{className:"mb-5 text-[16px] font-bold",html:p}),(0,d.jsx)(u.ProductInfo,{item:N,copy:e})]}),(0,d.jsx)(r.Button,{loading:v||!y,variant:"primary",className:"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full",onClick:g,disabled:b,children:e.redeemModal.product.paymentButton})]})]})};
|
|
2
2
|
//# sourceMappingURL=Address.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { AddressForm } from '../AddressForm'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { ProductInfo } from './ProductInfo'\nimport useCountries from '../../context/hooks/useCountries'\n\ntype AddressProps = {\n copy: CreditsRedeemListCopy\n shippingAddress: string\n setAddress: (address: Record<string, any>) => void\n validateAddress: (address: Record<string, any>) => boolean\n validateErrors: { key: string; message: string }[]\n item: RedeemableItemType\n loading: boolean\n address: Record<string, any> | undefined\n disabled: boolean\n handlePayment: () => void\n shippingProduct: string\n}\n\nexport const Address = ({\n copy,\n shippingAddress,\n setAddress,\n validateAddress,\n validateErrors,\n shippingProduct,\n loading,\n address,\n disabled,\n handlePayment,\n item,\n}: AddressProps) => {\n const { storeDomain, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })\n\n return (\n <div className=\"relative\">\n <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>\n <div>\n {shippingAddress && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingAddress}></Text>}\n <AddressForm\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2CQ,IAAAI,EAAA,6BA3CRC,EAA6B,iCAC7BC,EAAuB,yBACvBC,EAA4B,0BAC5BC,EAAmD,yBAGnDC,EAA4B,yBAC5BC,EAAyB,+CAgBlB,MAAMR,EAAU,CAAC,CACtB,KAAAS,EACA,gBAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAAoB,CAClB,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,KAAI,sBAAmB,EAC5CC,EAAU,iBAAe,SAASD,CAAK,EACvC,CAAE,UAAAE,EAAY,CAAC,EAAG,UAAWC,CAAiB,KAAI,EAAAC,SAAa,CAAE,mBAAoBL,CAAY,CAAC,EAExG,SACE,QAAC,OAAI,UAAU,WACb,oBAAC,OAAI,aAAW,EAAAM,SAAW,iFAAiF,EAC1G,oBAAC,OACE,UAAAhB,MAAmB,OAAC,QAAK,UAAU,6BAA6B,KAAMA,EAAiB,
|
|
4
|
+
"sourcesContent": ["import { Button, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { AddressForm } from '../AddressForm'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { ProductInfo } from './ProductInfo'\nimport useCountries from '../../context/hooks/useCountries'\n\ntype AddressProps = {\n copy: CreditsRedeemListCopy\n shippingAddress: string\n setAddress: (address: Record<string, any>) => void\n validateAddress: (address: Record<string, any>) => boolean\n validateErrors: { key: string; message: string }[]\n item: RedeemableItemType\n loading: boolean\n address: Record<string, any> | undefined\n disabled: boolean\n handlePayment: () => void\n shippingProduct: string\n}\n\nexport const Address = ({\n copy,\n shippingAddress,\n setAddress,\n validateAddress,\n validateErrors,\n shippingProduct,\n loading,\n address,\n disabled,\n handlePayment,\n item,\n}: AddressProps) => {\n const { storeDomain, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })\n\n return (\n <div className=\"relative\">\n <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>\n <div>\n {shippingAddress && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingAddress}></Text>}\n {copy.redeemModal?.product?.addressForm && (\n <AddressForm\n onChange={setAddress}\n validate={validateAddress}\n errors={validateErrors}\n form={copy.redeemModal.product.addressForm}\n countries={countries}\n countriesLoading={countriesLoading}\n ></AddressForm>\n )}\n </div>\n </div>\n <div className=\"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]\">\n <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>\n {shippingProduct && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingProduct}></Text>}\n <ProductInfo item={item} copy={copy} />\n </div>\n <Button\n loading={loading || !address}\n variant=\"primary\"\n className=\"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full\"\n onClick={handlePayment}\n disabled={disabled}\n >\n {copy.redeemModal.product.paymentButton}\n </Button>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2CQ,IAAAI,EAAA,6BA3CRC,EAA6B,iCAC7BC,EAAuB,yBACvBC,EAA4B,0BAC5BC,EAAmD,yBAGnDC,EAA4B,yBAC5BC,EAAyB,+CAgBlB,MAAMR,EAAU,CAAC,CACtB,KAAAS,EACA,gBAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAAoB,CAClB,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,KAAI,sBAAmB,EAC5CC,EAAU,iBAAe,SAASD,CAAK,EACvC,CAAE,UAAAE,EAAY,CAAC,EAAG,UAAWC,CAAiB,KAAI,EAAAC,SAAa,CAAE,mBAAoBL,CAAY,CAAC,EAExG,SACE,QAAC,OAAI,UAAU,WACb,oBAAC,OAAI,aAAW,EAAAM,SAAW,iFAAiF,EAC1G,oBAAC,OACE,UAAAhB,MAAmB,OAAC,QAAK,UAAU,6BAA6B,KAAMA,EAAiB,EACvFD,EAAK,aAAa,SAAS,gBAC1B,OAAC,eACC,SAAUE,EACV,SAAUC,EACV,OAAQC,EACR,KAAMJ,EAAK,YAAY,QAAQ,YAC/B,UAAWc,EACX,iBAAkBC,EACnB,GAEL,EACF,KACA,QAAC,OAAI,UAAU,qGACb,qBAAC,OAAI,aAAW,EAAAE,SAAW,iDAAkD,CAACJ,GAAW,cAAc,EACpG,UAAAR,MAAmB,OAAC,QAAK,UAAU,6BAA6B,KAAMA,EAAiB,KACxF,OAAC,eAAY,KAAMK,EAAM,KAAMV,EAAM,GACvC,KACA,OAAC,UACC,QAASM,GAAW,CAACC,EACrB,QAAQ,UACR,UAAU,qDACV,QAASE,EACT,SAAUD,EAET,SAAAR,EAAK,YAAY,QAAQ,cAC5B,GACF,GACF,CAEJ",
|
|
6
6
|
"names": ["Address_exports", "__export", "Address", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_classnames", "import_AddressForm", "import_lib", "import_ProductInfo", "import_useCountries", "copy", "shippingAddress", "setAddress", "validateAddress", "validateErrors", "shippingProduct", "loading", "address", "disabled", "handlePayment", "item", "storeDomain", "brand", "rounded", "countries", "countriesLoading", "useCountries", "classNames"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as
|
|
1
|
+
import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Button as k,Text as c,Picture as h}from"@anker-in/headless-ui";import{useMemo as d,useState as E}from"react";import{useCreditsContext as F}from"../context/provider";import{useRedeemAndBuy as V}from"../context/hooks/useRedeemAndBuy";import{numberFormat as A}from"../context/utils";import{gaTrack as C,classNames as a,ROUNDED_BRANDS as B,useHeadlessContext as L}from"@anker-in/lib";import{useRegistration as O}from"../../../components/registration";function P({copy:l,itemData:e,setRules:N,className:_}){const{creditInfo:x,profile:i,openSignUpPopup:R,pageCommon:s,gtm:{pageGroup:m}}=F(),{authCodeActivate:f}=O(),{brand:w}=L(),v=B.includes(w),[g,b]=E(null),{trigger:y,isMutating:S}=V({},{onError:n=>{b(n.message)}}),r=d(()=>!!i,[i?.activated]),p=d(()=>r&&i?.activated&&e.alpcData?.consumeCredits>Number(x?.available_credit||0),[r,i?.activated,e.alpcData?.consumeCredits,x?.available_credit]),z=d(()=>!!(e.alpcData?.remainingInventory<=0&&e.alpcData?.isLimited||!e.productVariant?.availableForSale||p),[e.alpcData?.remainingInventory,e.alpcData?.isLimited,e.productVariant?.availableForSale,p]),I=()=>{b(null),r?!i?.activated&&!f.isActivateSuccess?f.open():(y({productVariant:e?.productVariant,redeemId:e?.config?.redeemId}),C({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:m,position:l.title,button_name:u,info:e?.alpcData?.id?.toString()}})):R()},u=d(()=>e.productVariant?.availableForSale?r?l.btnRedeem:l.unlockRewards:l?.soldOut||"Sold Out",[r,e.productVariant?.availableForSale,l.btnRedeem,l.unlockRewards,l?.soldOut]);return o("div",{className:a("flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]",!v&&"rounded-none",_),children:[t("div",{className:a("relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]"),children:t(h,{className:"mx-auto h-full w-auto",imgClassName:"h-full object-contain",source:e?.config?.image?.url||e?.productVariant?.metafields?.global?.transparentImg||e?.productVariant?.image?.url})}),o("div",{className:a("mt-[22px] w-full l:mt-[8px]"),children:[t(c,{html:e?.product?.title,title:e.config?.title||e.alpcData?.title||e.product?.title,size:2,className:"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"}),e?.config?.rules?.split("<br>")?.length>0&&t("button",{type:"button",onClick:()=>{N(e?.config?.rules?.split("<br>")),C({event:"ga4Event",event_name:"lp_button",member_active_status:i?.activated?"active":"not active",event_parameters:{page_group:m,position:l.title,button_name:s?.ruleLabel,info:e?.alpcData?.id?.toString()}})},className:"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]",tabIndex:0,onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&n.preventDefault()},children:s?.ruleLabel}),o("div",{className:"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]",children:[t(h,{className:"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]",source:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"}),t(c,{html:`${A(e?.alpcData?.consumeCredits)} + ${e?.config?.price}`,size:2,as:"p",className:"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "})]}),o("div",{className:"group relative w-full",children:[t(k,{disabled:z,variant:"primary",size:"lg",className:"mt-[8px] md:px-[10px] l:w-full",loading:S,onClick:()=>{I()},title:p?s.insufficientCredits:u,children:u}),t("div",{className:a("absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]",p?"block":"hidden"),children:o("div",{className:a("relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]",!v&&"rounded-none"),children:[t(c,{as:"p",size:"2",html:s?.insufficientCredits,className:"text-[14px]"}),t("div",{className:"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]"})]})})]})]}),g&&t("div",{className:"mt-[8px] text-[14px] text-[#FF0000]",children:g})]})}var Q=P;export{Q as default};
|
|
2
2
|
//# sourceMappingURL=RedeemableItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/credits/creditsCash/RedeemableItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n pageCommon,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: pageCommon?.ruleLabel,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }}\n className=\"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {pageCommon?.ruleLabel}\n </button>\n )}\n <div className=\"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]\">\n <Picture\n className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n />\n <Text\n html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}\n size={2}\n as=\"p\"\n className=\"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n />\n </div>\n\n <div className=\"group relative w-full\">\n <Button\n disabled={isDisabled}\n variant=\"primary\"\n size=\"lg\"\n className=\"mt-[8px] md:px-[10px] l:w-full\"\n loading={isMutating}\n onClick={() => {\n handleRedeem()\n }}\n title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}\n >\n {redeemButtonText}\n </Button>\n <div\n className={cn(\n 'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',\n inSufficientCredit ? 'block' : 'hidden'\n )}\n >\n <div
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "Button", "Text", "Picture", "useMemo", "useState", "useCreditsContext", "useRedeemAndBuy", "numberFormat", "gaTrack", "cn", "useRegistration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "e", "RedeemableItem_default"]
|
|
4
|
+
"sourcesContent": ["import { Button, Text, Picture } from '@anker-in/headless-ui'\nimport { useMemo, useState } from 'react'\n\nimport { CreditsCashCopy, RedeemItem } from './type'\nimport { useCreditsContext } from '../context/provider'\nimport { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'\nimport { numberFormat } from '../context/utils'\nimport { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'\nimport { useRegistration } from '../../../components/registration'\n\nfunction RedeemableItem({\n copy,\n itemData,\n setRules,\n className,\n}: {\n copy: CreditsCashCopy\n itemData: RedeemItem\n className?: string\n setRules: (rules: string[]) => void\n currencyCode: string\n}) {\n const {\n creditInfo,\n profile,\n openSignUpPopup,\n pageCommon,\n gtm: { pageGroup },\n } = useCreditsContext()\n const { authCodeActivate } = useRegistration()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const [error, setError] = useState<string | null>(null)\n const { trigger, isMutating } = useRedeemAndBuy(\n {},\n {\n onError: error => {\n setError(error.message)\n },\n }\n )\n\n const isLogin = useMemo(() => {\n return !!profile\n }, [profile?.activated])\n\n const inSufficientCredit = useMemo(() => {\n return (\n isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)\n )\n }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])\n\n const isDisabled = useMemo(() => {\n // \u5151\u6362\u9650\u5236\n if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {\n return true\n }\n\n // \u5546\u54C1\u5E93\u5B58\u9650\u5236\n if (!itemData.productVariant?.availableForSale) {\n return true\n }\n\n // \u79EF\u5206\u4E0D\u8DB3\n if (inSufficientCredit) {\n return true\n }\n return false\n }, [\n itemData.alpcData?.remainingInventory,\n itemData.alpcData?.isLimited,\n itemData.productVariant?.availableForSale,\n inSufficientCredit,\n ])\n\n const handleRedeem = () => {\n setError(null)\n if (!isLogin) {\n openSignUpPopup()\n } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {\n authCodeActivate.open()\n } else {\n trigger({\n productVariant: itemData?.productVariant,\n redeemId: itemData?.config?.redeemId,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: redeemButtonText,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }\n }\n\n const redeemButtonText = useMemo(() => {\n // \u7F3A\u8D27\u6587\u6848\n if (!itemData.productVariant?.availableForSale) {\n return copy?.soldOut || 'Sold Out'\n } else if (!isLogin) {\n return copy.unlockRewards\n } else {\n return copy.btnRedeem\n }\n }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',\n !rounded && 'rounded-none',\n className\n )}\n >\n <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>\n <Picture\n className=\"mx-auto h-full w-auto\"\n imgClassName=\"h-full object-contain\"\n source={\n itemData?.config?.image?.url ||\n itemData?.productVariant?.metafields?.global?.transparentImg ||\n itemData?.productVariant?.image?.url\n }\n ></Picture>\n </div>\n <div className={cn('mt-[22px] w-full l:mt-[8px]')}>\n <Text\n html={itemData?.product?.title}\n title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}\n size={2}\n className=\"line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]\"\n />\n {itemData?.config?.rules?.split('<br>')?.length > 0 && (\n <button\n type=\"button\"\n onClick={() => {\n setRules(itemData?.config?.rules?.split('<br>'))\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n member_active_status: profile?.activated ? 'active' : 'not active',\n event_parameters: {\n page_group: pageGroup,\n position: copy.title,\n button_name: pageCommon?.ruleLabel,\n info: itemData?.alpcData?.id?.toString(),\n },\n })\n }}\n className=\"mt-[8px] text-[16px] font-bold underline xxl:text-[14px]\"\n tabIndex={0}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n }\n }}\n >\n {pageCommon?.ruleLabel}\n </button>\n )}\n <div className=\"mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]\">\n <Picture\n className=\"size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]\"\n source=\"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783\"\n />\n <Text\n html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}\n size={2}\n as=\"p\"\n className=\"ml-[4px] mt-[4px] text-[28px] font-bold leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] \"\n />\n </div>\n\n <div className=\"group relative w-full\">\n <Button\n disabled={isDisabled}\n variant=\"primary\"\n size=\"lg\"\n className=\"mt-[8px] md:px-[10px] l:w-full\"\n loading={isMutating}\n onClick={() => {\n handleRedeem()\n }}\n title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}\n >\n {redeemButtonText}\n </Button>\n <div\n className={cn(\n 'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',\n inSufficientCredit ? 'block' : 'hidden'\n )}\n >\n <div\n className={cn(\n 'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',\n !rounded && 'rounded-none'\n )}\n >\n <Text as=\"p\" size=\"2\" html={pageCommon?.insufficientCredits} className=\"text-[14px]\" />\n <div className=\"absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n </div>\n </div>\n {error && <div className=\"mt-[8px] text-[14px] text-[#FF0000]\">{error}</div>}\n </div>\n )\n}\n\nexport default RedeemableItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "Button", "Text", "Picture", "useMemo", "useState", "useCreditsContext", "useRedeemAndBuy", "numberFormat", "gaTrack", "cn", "ROUNDED_BRANDS", "useHeadlessContext", "useRegistration", "RedeemableItem", "copy", "itemData", "setRules", "className", "creditInfo", "profile", "openSignUpPopup", "pageCommon", "pageGroup", "authCodeActivate", "brand", "rounded", "error", "setError", "trigger", "isMutating", "isLogin", "inSufficientCredit", "isDisabled", "handleRedeem", "redeemButtonText", "e", "RedeemableItem_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as d}from"react/jsx-runtime";import{Button as N,Text as r}from"@anker-in/headless-ui";import a from"classnames";import{AddressForm as R}from"../AddressForm";import{useHeadlessContext as h,ROUNDED_BRANDS as A}from"@anker-in/lib";import{ProductInfo as C}from"./ProductInfo";import F from"../../context/hooks/useCountries";const M=({copy:o,shippingAddress:t,setAddress:m,validateAddress:i,validateErrors:n,shippingProduct:s,loading:p,address:l,disabled:x,handlePayment:c,item:u})=>{const{storeDomain:f,brand:v}=h(),y=A.includes(v),{countries:b=[],isLoading:g}=F({shopifyStoreDomain:f});return d("div",{className:"relative",children:[e("div",{className:a("max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]"),children:d("div",{children:[t&&e(r,{className:"mb-5 text-[16px] font-bold",html:t}),o.redeemModal?.product?.addressForm&&e(R,{onChange:m,validate:i,errors:n,form:o.redeemModal.product.addressForm,countries:b,countriesLoading:g})]})}),d("div",{className:"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]",children:[d("div",{className:a("flex w-full items-center bg-[#F5F5F7] p-[16px]",!y&&"rounded-none"),children:[s&&e(r,{className:"mb-5 text-[16px] font-bold",html:s}),e(C,{item:u,copy:o})]}),e(N,{loading:p||!l,variant:"primary",className:"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full",onClick:c,disabled:x,children:o.redeemModal.product.paymentButton})]})]})};export{M as Address};
|
|
2
2
|
//# sourceMappingURL=Address.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Button, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { AddressForm } from '../AddressForm'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { ProductInfo } from './ProductInfo'\nimport useCountries from '../../context/hooks/useCountries'\n\ntype AddressProps = {\n copy: CreditsRedeemListCopy\n shippingAddress: string\n setAddress: (address: Record<string, any>) => void\n validateAddress: (address: Record<string, any>) => boolean\n validateErrors: { key: string; message: string }[]\n item: RedeemableItemType\n loading: boolean\n address: Record<string, any> | undefined\n disabled: boolean\n handlePayment: () => void\n shippingProduct: string\n}\n\nexport const Address = ({\n copy,\n shippingAddress,\n setAddress,\n validateAddress,\n validateErrors,\n shippingProduct,\n loading,\n address,\n disabled,\n handlePayment,\n item,\n}: AddressProps) => {\n const { storeDomain, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })\n\n return (\n <div className=\"relative\">\n <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>\n <div>\n {shippingAddress && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingAddress}></Text>}\n <AddressForm\n
|
|
5
|
-
"mappings": "AA2CQ,OACsB,OAAAA,EADtB,QAAAC,MAAA,oBA3CR,OAAS,UAAAC,EAAQ,QAAAC,MAAY,wBAC7B,OAAOC,MAAgB,aACvB,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,sBAAAC,EAAoB,kBAAAC,MAAsB,gBAGnD,OAAS,eAAAC,MAAmB,gBAC5B,OAAOC,MAAkB,mCAgBlB,MAAMC,EAAU,CAAC,CACtB,KAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAAoB,CAClB,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIjB,EAAmB,EAC5CkB,EAAUjB,EAAe,SAASgB,CAAK,EACvC,CAAE,UAAAE,EAAY,CAAC,EAAG,UAAWC,CAAiB,EAAIjB,EAAa,CAAE,mBAAoBa,CAAY,CAAC,EAExG,OACErB,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAWI,EAAW,iFAAiF,EAC1G,SAAAH,EAAC,OACE,UAAAW,GAAmBZ,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMS,EAAiB,
|
|
4
|
+
"sourcesContent": ["import { Button, Text } from '@anker-in/headless-ui'\nimport classNames from 'classnames'\nimport { AddressForm } from '../AddressForm'\nimport { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'\nimport type { RedeemableItem as RedeemableItemType } from '../../type'\nimport { CreditsRedeemListCopy } from '../type'\nimport { ProductInfo } from './ProductInfo'\nimport useCountries from '../../context/hooks/useCountries'\n\ntype AddressProps = {\n copy: CreditsRedeemListCopy\n shippingAddress: string\n setAddress: (address: Record<string, any>) => void\n validateAddress: (address: Record<string, any>) => boolean\n validateErrors: { key: string; message: string }[]\n item: RedeemableItemType\n loading: boolean\n address: Record<string, any> | undefined\n disabled: boolean\n handlePayment: () => void\n shippingProduct: string\n}\n\nexport const Address = ({\n copy,\n shippingAddress,\n setAddress,\n validateAddress,\n validateErrors,\n shippingProduct,\n loading,\n address,\n disabled,\n handlePayment,\n item,\n}: AddressProps) => {\n const { storeDomain, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })\n\n return (\n <div className=\"relative\">\n <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>\n <div>\n {shippingAddress && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingAddress}></Text>}\n {copy.redeemModal?.product?.addressForm && (\n <AddressForm\n onChange={setAddress}\n validate={validateAddress}\n errors={validateErrors}\n form={copy.redeemModal.product.addressForm}\n countries={countries}\n countriesLoading={countriesLoading}\n ></AddressForm>\n )}\n </div>\n </div>\n <div className=\"sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]\">\n <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>\n {shippingProduct && <Text className=\"mb-5 text-[16px] font-bold\" html={shippingProduct}></Text>}\n <ProductInfo item={item} copy={copy} />\n </div>\n <Button\n loading={loading || !address}\n variant=\"primary\"\n className=\"mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full\"\n onClick={handlePayment}\n disabled={disabled}\n >\n {copy.redeemModal.product.paymentButton}\n </Button>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "AA2CQ,OACsB,OAAAA,EADtB,QAAAC,MAAA,oBA3CR,OAAS,UAAAC,EAAQ,QAAAC,MAAY,wBAC7B,OAAOC,MAAgB,aACvB,OAAS,eAAAC,MAAmB,iBAC5B,OAAS,sBAAAC,EAAoB,kBAAAC,MAAsB,gBAGnD,OAAS,eAAAC,MAAmB,gBAC5B,OAAOC,MAAkB,mCAgBlB,MAAMC,EAAU,CAAC,CACtB,KAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAAoB,CAClB,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIjB,EAAmB,EAC5CkB,EAAUjB,EAAe,SAASgB,CAAK,EACvC,CAAE,UAAAE,EAAY,CAAC,EAAG,UAAWC,CAAiB,EAAIjB,EAAa,CAAE,mBAAoBa,CAAY,CAAC,EAExG,OACErB,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAWI,EAAW,iFAAiF,EAC1G,SAAAH,EAAC,OACE,UAAAW,GAAmBZ,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMS,EAAiB,EACvFD,EAAK,aAAa,SAAS,aAC1BX,EAACK,EAAA,CACC,SAAUQ,EACV,SAAUC,EACV,OAAQC,EACR,KAAMJ,EAAK,YAAY,QAAQ,YAC/B,UAAWc,EACX,iBAAkBC,EACnB,GAEL,EACF,EACAzB,EAAC,OAAI,UAAU,qGACb,UAAAA,EAAC,OAAI,UAAWG,EAAW,iDAAkD,CAACoB,GAAW,cAAc,EACpG,UAAAR,GAAmBhB,EAACG,EAAA,CAAK,UAAU,6BAA6B,KAAMa,EAAiB,EACxFhB,EAACQ,EAAA,CAAY,KAAMa,EAAM,KAAMV,EAAM,GACvC,EACAX,EAACE,EAAA,CACC,QAASe,GAAW,CAACC,EACrB,QAAQ,UACR,UAAU,qDACV,QAASE,EACT,SAAUD,EAET,SAAAR,EAAK,YAAY,QAAQ,cAC5B,GACF,GACF,CAEJ",
|
|
6
6
|
"names": ["jsx", "jsxs", "Button", "Text", "classNames", "AddressForm", "useHeadlessContext", "ROUNDED_BRANDS", "ProductInfo", "useCountries", "Address", "copy", "shippingAddress", "setAddress", "validateAddress", "validateErrors", "shippingProduct", "loading", "address", "disabled", "handlePayment", "item", "storeDomain", "brand", "rounded", "countries", "countriesLoading"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/campaign-ui",
|
|
3
|
-
"version": "0.2.0-beta.
|
|
3
|
+
"version": "0.2.0-beta.13",
|
|
4
4
|
"description": "Campaign UI components and utilities for Anker projects",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"tailwind-merge": "^2.3.0",
|
|
89
89
|
"tailwindcss": "^3.4.3",
|
|
90
90
|
"@anker-in/headless-ui": "1.0.26",
|
|
91
|
-
"@anker-in/lib": "1.1.0-beta.
|
|
91
|
+
"@anker-in/lib": "1.1.0-beta.8"
|
|
92
92
|
},
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public",
|
|
@@ -5,7 +5,7 @@ import { CreditsCashCopy, RedeemItem } from './type'
|
|
|
5
5
|
import { useCreditsContext } from '../context/provider'
|
|
6
6
|
import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
|
|
7
7
|
import { numberFormat } from '../context/utils'
|
|
8
|
-
import { gaTrack, classNames as cn } from '@anker-in/lib'
|
|
8
|
+
import { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'
|
|
9
9
|
import { useRegistration } from '../../../components/registration'
|
|
10
10
|
|
|
11
11
|
function RedeemableItem({
|
|
@@ -28,6 +28,8 @@ function RedeemableItem({
|
|
|
28
28
|
gtm: { pageGroup },
|
|
29
29
|
} = useCreditsContext()
|
|
30
30
|
const { authCodeActivate } = useRegistration()
|
|
31
|
+
const { brand } = useHeadlessContext()
|
|
32
|
+
const rounded = ROUNDED_BRANDS.includes(brand)
|
|
31
33
|
const [error, setError] = useState<string | null>(null)
|
|
32
34
|
const { trigger, isMutating } = useRedeemAndBuy(
|
|
33
35
|
{},
|
|
@@ -111,6 +113,7 @@ function RedeemableItem({
|
|
|
111
113
|
<div
|
|
112
114
|
className={cn(
|
|
113
115
|
'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
|
|
116
|
+
!rounded && 'rounded-none',
|
|
114
117
|
className
|
|
115
118
|
)}
|
|
116
119
|
>
|
|
@@ -193,7 +196,12 @@ function RedeemableItem({
|
|
|
193
196
|
inSufficientCredit ? 'block' : 'hidden'
|
|
194
197
|
)}
|
|
195
198
|
>
|
|
196
|
-
<div
|
|
199
|
+
<div
|
|
200
|
+
className={cn(
|
|
201
|
+
'relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]',
|
|
202
|
+
!rounded && 'rounded-none'
|
|
203
|
+
)}
|
|
204
|
+
>
|
|
197
205
|
<Text as="p" size="2" html={pageCommon?.insufficientCredits} className="text-[14px]" />
|
|
198
206
|
<div className="absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
|
|
199
207
|
</div>
|
|
@@ -43,14 +43,16 @@ export const Address = ({
|
|
|
43
43
|
<div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
|
|
44
44
|
<div>
|
|
45
45
|
{shippingAddress && <Text className="mb-5 text-[16px] font-bold" html={shippingAddress}></Text>}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
46
|
+
{copy.redeemModal?.product?.addressForm && (
|
|
47
|
+
<AddressForm
|
|
48
|
+
onChange={setAddress}
|
|
49
|
+
validate={validateAddress}
|
|
50
|
+
errors={validateErrors}
|
|
51
|
+
form={copy.redeemModal.product.addressForm}
|
|
52
|
+
countries={countries}
|
|
53
|
+
countriesLoading={countriesLoading}
|
|
54
|
+
></AddressForm>
|
|
55
|
+
)}
|
|
54
56
|
</div>
|
|
55
57
|
</div>
|
|
56
58
|
<div className="sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]">
|