@anker-in/campaign-ui 0.5.0-beta.24 → 0.5.0-beta.26
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/memberPopup/panels/ActivitiesSubscribePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ActivitiesSubscribePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/ConsumeCredits/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/panels/EarnCredits/ActivatePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/ActivatePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js.map +2 -2
- package/dist/cjs/components/memberPopup/panels/EarnCredits/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/EarnCredits/index.js.map +3 -3
- package/dist/cjs/components/memberPopup/panels/Referral/index.js +1 -1
- package/dist/cjs/components/memberPopup/panels/Referral/index.js.map +2 -2
- package/dist/cjs/components/memberPopup/type.d.ts +3 -0
- package/dist/cjs/components/memberPopup/type.js +1 -1
- package/dist/cjs/components/memberPopup/type.js.map +1 -1
- package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/ActivitiesSubscribePanel.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/ConsumeCredits/index.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/ActivatePanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.js.map +2 -2
- package/dist/esm/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/EarnCredits/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/EarnCredits/index.js.map +3 -3
- package/dist/esm/components/memberPopup/panels/Referral/index.js +1 -1
- package/dist/esm/components/memberPopup/panels/Referral/index.js.map +3 -3
- package/dist/esm/components/memberPopup/type.d.ts +3 -0
- package/dist/esm/components/memberPopup/type.js.map +1 -1
- package/package.json +2 -1
- package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx +2 -9
- package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx +3 -20
- package/src/components/memberPopup/panels/ConsumeCredits/index.tsx +34 -16
- package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx +1 -1
- package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx +2 -2
- package/src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx +16 -15
- package/src/components/memberPopup/panels/EarnCredits/index.tsx +9 -17
- package/src/components/memberPopup/panels/Referral/index.tsx +5 -7
- package/src/components/memberPopup/type.ts +3 -0
- package/src/components/memberPopup/panels/EarnCredits/CompleteProfileModal.tsx +0 -191
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Text, Button } from '@anker-in/headless-ui'\nimport { gaTrack, useHeadlessContext, classNames as cn } from '@anker-in/lib'\nimport { AlpcErrorCode } from '../../../credits/context/const'\nimport { useRedeemCoupon } from './hooks/useRedeemCoupon'\nimport useCopy from '../../../credits/context/hooks/useCopy'\nimport type { ConsumeCreditsopy, AlpcConfig } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype RedeemCouponItem = {\n itemTitle: string\n itemCredits: number\n itemImage?: { url: string; alt?: string }\n itemValue?: string\n itemRules?: string[]\n redeemId: number\n userId?: string\n alpcConfig: AlpcConfig\n}\n\ntype Props = {\n onClose: () => void\n item: RedeemCouponItem\n copy: ConsumeCreditsopy\n onError?: (code: number) => void\n}\n\nexport default function RedeemCouponPanel({ onClose, item, copy, onError }: Props) {\n const { itemTitle, itemCredits, itemImage, itemValue, itemRules, redeemId, userId, alpcConfig } = item\n const { redeemModal, creditUnit } = copy\n const pointUnit = creditUnit ?? 'pts'\n const [couponCode, setCouponCode] = useState<string>()\n const [errorInfo, setErrorInfo] = useState('')\n const [disabled, setDisabled] = useState(false)\n const { copy: copyText, copied } = useCopy()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)\n\n const handleConfirm = useCallback(async () => {\n setErrorInfo('')\n const { data } = await trigger({ user_id: userId, rule_id: redeemId })\n if (!data) {\n setErrorInfo(redeemModal.commonError)\n return\n }\n if (data.data?.success) {\n setCouponCode(data.data.coupon_code)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'redeem_coupon_success',\n info: 'Member Floating Window',\n },\n })\n } else {\n let msg = redeemModal.commonError\n if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {\n msg = redeemModal.redeemLimitError\n setDisabled(true)\n } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n msg = redeemModal.inventoryNotEnough\n setDisabled(true)\n } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {\n msg = redeemModal.creditsNotEnough\n setDisabled(true)\n } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {\n msg = redeemModal.crossSiteError\n setDisabled(true)\n }\n setErrorInfo(msg)\n onError?.(data.code)\n }\n }, [trigger, userId, redeemId, redeemModal, onError])\n\n useEffect(() => {\n setCouponCode(undefined)\n setErrorInfo('')\n setDisabled(false)\n }, [redeemId])\n\n const rulesSection = itemRules && itemRules.length > 0 && (\n <div className=\"w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]\">\n <ul className=\"ml-4 grid grid-flow-row gap-[4px]\">\n {itemRules?.map((text, index) => (\n <li className=\"list-disc\" key={index}>\n <Text html={text} className=\"font-bold\" />\n </li>\n ))}\n </ul>\n </div>\n )\n\n return (\n <div className=\"flex flex-col\">\n {itemImage?.url && (\n <div className=\"relative w-full px-[24px]\">\n <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>\n <img src={itemImage.url} alt={itemImage.alt ?? ''} className=\"mx-auto h-[140px] w-full object-cover\" />\n {itemValue && (\n <div className=\"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white\">\n {itemValue}\n {redeemModal.off ? ` ${redeemModal.off}` : ''}\n </div>\n )}\n </div>\n </div>\n )}\n\n {!couponCode && (\n <div className=\"flex flex-col gap-[16px] px-[24px] py-[20px]\">\n <p className=\"text-center text-[24px] font-[700] text-[#1d1d1f]\">\n {itemCredits} {pointUnit}\n </p>\n {rulesSection}\n </div>\n )}\n\n {couponCode && (\n <div className=\"flex mt-[16px] flex-col gap-[8px] text-center\">\n <div className=\"flex items-center justify-center gap-[10px]\">\n <span className=\"text-[24px] font-[700]\">{couponCode}</span>\n <button\n className=\"cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none\"\n disabled={copied}\n onClick={() => copyText(couponCode)}\n >\n {copied ? 'Copied' : 'Copy'}\n </button>\n </div>\n <Text className=\"text-[20px] font-[700]\" html={redeemModal.successTitle} />\n <Text className=\"text-[14px] font-[700] text-[#6d6d6f]\" html={redeemModal.successDesc} />\n <Button
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Text, Button } from '@anker-in/headless-ui'\nimport { gaTrack, useHeadlessContext, classNames as cn } from '@anker-in/lib'\nimport { AlpcErrorCode } from '../../../credits/context/const'\nimport { useRedeemCoupon } from './hooks/useRedeemCoupon'\nimport useCopy from '../../../credits/context/hooks/useCopy'\nimport type { ConsumeCreditsopy, AlpcConfig } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype RedeemCouponItem = {\n itemTitle: string\n itemCredits: number\n itemImage?: { url: string; alt?: string }\n itemValue?: string\n itemRules?: string[]\n redeemId: number\n userId?: string\n alpcConfig: AlpcConfig\n}\n\ntype Props = {\n onClose: () => void\n item: RedeemCouponItem\n copy: ConsumeCreditsopy\n onError?: (code: number) => void\n}\n\nexport default function RedeemCouponPanel({ onClose, item, copy, onError }: Props) {\n const { itemTitle, itemCredits, itemImage, itemValue, itemRules, redeemId, userId, alpcConfig } = item\n const { redeemModal, creditUnit } = copy\n const pointUnit = creditUnit ?? 'pts'\n const [couponCode, setCouponCode] = useState<string>()\n const [errorInfo, setErrorInfo] = useState('')\n const [disabled, setDisabled] = useState(false)\n const { copy: copyText, copied } = useCopy()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)\n\n const handleConfirm = useCallback(async () => {\n setErrorInfo('')\n const { data } = await trigger({ user_id: userId, rule_id: redeemId })\n if (!data) {\n setErrorInfo(redeemModal.commonError)\n return\n }\n if (data.data?.success) {\n setCouponCode(data.data.coupon_code)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'redeem_coupon_success',\n info: 'Member Floating Window',\n },\n })\n } else {\n let msg = redeemModal.commonError\n if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {\n msg = redeemModal.redeemLimitError\n setDisabled(true)\n } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {\n msg = redeemModal.inventoryNotEnough\n setDisabled(true)\n } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {\n msg = redeemModal.creditsNotEnough\n setDisabled(true)\n } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {\n msg = redeemModal.crossSiteError\n setDisabled(true)\n }\n setErrorInfo(msg)\n onError?.(data.code)\n }\n }, [trigger, userId, redeemId, redeemModal, onError])\n\n useEffect(() => {\n setCouponCode(undefined)\n setErrorInfo('')\n setDisabled(false)\n }, [redeemId])\n\n const rulesSection = itemRules && itemRules.length > 0 && (\n <div className=\"w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]\">\n <ul className=\"ml-4 grid grid-flow-row gap-[4px]\">\n {itemRules?.map((text, index) => (\n <li className=\"list-disc\" key={index}>\n <Text html={text} className=\"font-bold\" />\n </li>\n ))}\n </ul>\n </div>\n )\n\n return (\n <div className=\"flex flex-col\">\n {itemImage?.url && (\n <div className=\"relative w-full px-[24px]\">\n <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>\n <img src={itemImage.url} alt={itemImage.alt ?? ''} className=\"mx-auto h-[140px] w-full object-cover\" />\n {itemValue && (\n <div className=\"absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white\">\n {itemValue}\n {redeemModal.off ? ` ${redeemModal.off}` : ''}\n </div>\n )}\n </div>\n </div>\n )}\n\n {!couponCode && (\n <div className=\"flex flex-col gap-[16px] px-[24px] py-[20px]\">\n <p className=\"text-center text-[24px] font-[700] text-[#1d1d1f]\">\n {itemCredits} {pointUnit}\n </p>\n {rulesSection}\n </div>\n )}\n\n {couponCode && (\n <div className=\"flex mt-[16px] flex-col gap-[8px] text-center\">\n <div className=\"flex items-center justify-center gap-[10px]\">\n <span className=\"text-[24px] font-[700]\">{couponCode}</span>\n <button\n className=\"cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none\"\n disabled={copied}\n onClick={() => copyText(couponCode)}\n >\n {copied ? (redeemModal.copiedLabel ?? 'Copied') : (redeemModal.copyLabel ?? 'Copy')}\n </button>\n </div>\n <Text className=\"text-[20px] font-[700]\" html={redeemModal.successTitle} />\n <Text className=\"text-[14px] font-[700] text-[#6d6d6f]\" html={redeemModal.successDesc} />\n <Button as=\"a\" href={redeemModal.successButtonUrl} className=\"w-full\">\n {redeemModal.successButton}\n </Button>\n </div>\n )}\n\n {!couponCode && (\n <div className=\"sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]\">\n <div className=\"flex flex-col gap-[8px] text-center\">\n <Text className=\"block text-[16px] font-[700] leading-[1.3]\" html={redeemModal.confirmTitle} />\n <Button className=\"w-full\" disabled={disabled} loading={loading} onClick={handleConfirm}>\n {redeemModal.confirmButton}\n </Button>\n </div>\n\n {errorInfo && (\n <Text className=\"mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]\" html={errorInfo} />\n )}\n </div>\n )}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Text", "Button", "gaTrack", "useHeadlessContext", "cn", "AlpcErrorCode", "useRedeemCoupon", "useCopy", "ROUNDED_BRANDS", "RedeemCouponPanel", "onClose", "item", "copy", "onError", "itemTitle", "itemCredits", "itemImage", "itemValue", "itemRules", "redeemId", "userId", "alpcConfig", "redeemModal", "creditUnit", "pointUnit", "couponCode", "setCouponCode", "errorInfo", "setErrorInfo", "disabled", "setDisabled", "copyText", "copied", "brand", "rounded", "loading", "trigger", "handleConfirm", "data", "msg", "rulesSection", "text", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as D,jsx as a,jsxs as n}from"react/jsx-runtime";import{useEffect as H,useMemo as W,useState as k}from"react";import{Picture as q,Button as J}from"@anker-in/headless-ui";import{gaTrack as _,classNames as B,useProductsByHandles as K,useHeadlessContext as Q}from"@anker-in/lib";import{useMemberPopupContext as X}from"../../context/provider";import{useViewStack as Y}from"../../context/viewStack";import{useRedeemableList as Z}from"./hooks/useRedeemableList";import{useRedeemAndBuy as ee}from"./hooks/useRedeemAndBuy";import{ConsumeCreditsItemType as s,MemberPopupPanelType as A}from"../../type";import{numberFormat as x}from"../../../credits/context/utils";import{ROUNDED_BRANDS as te}from"../../../../constants";function ae({copy:t}){const{profile:l,creditInfo:u,openSignUpPopup:S,alpcConfig:v,isActivateSuccess:L,fetchCreditInfo:E,pageHandle:c}=X(),{pushView:h}=Y(),{brand:M}=Q(),C=te.includes(M),[y,P]=k(""),[U,w]=k(null);H(()=>{l?.user_id&&E(l.user_id)},[]);const d=!!l,{redeemableList:R,listLoading:$}=Z(v),{trigger:F}=ee(v),z=t.list.map(e=>e.product?.handle).filter(Boolean),{data:I}=K({handles:z}),T=W(()=>t.list.map(e=>{const r=R.find(o=>String(o.id)===String(e.redeemId));if(!r)return null;const i=Number(u?.available_credit??0),m=r.consume_credits>i,b=r.is_limited&&(!r.remaining_inventory||r.remaining_inventory<=0),j=e.type===s.RedeemAndBuy||e.type===s.Product,f=I?.find(o=>o.handle===e.product?.handle),N=f?.variants?.find(o=>o.sku===e.product?.sku)??f?.variants?.[0];return j&&(!f||!N||!N?.availableForSale||b)||e.type===s.RedeemAndBuy&&e.price==null?null:{...e,alpcData:r,insufficient:m,product:f,variant:N}}).filter(Boolean),[t.list,R,u,l,d,I]),p=l?.activated||L;function O(e){return!d||!p?t.unlockRewards:e.soldOut?t.soldOut:t.btnRedeem}function G(e){return!d||!p?!1:e.insufficient}function g(e){_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem",info:"Member Floating Window"}})}async function V(e){if(!d){S();return}if(!p){h({type:A.Activate});return}if(e.type===s.GiftCard||e.type===s.Product){if(t.creditsPage?.url){const r=t.creditsPage.redeemListSectionId??"creditsRedeemList",i=new URL(t.creditsPage.url,window.location.href);i.searchParams.set("section",r),i.hash=r,c&&i.searchParams.set("ref",`${c}_consume_credits`),g(e.title),window.open(i.toString(),"_blank","noopener,noreferrer")}return}if(e.type===s.Coupon)g(e.title),h({type:A.RedeemCoupon,props:{itemTitle:e.title,itemCredits:e.alpcData.consume_credits,itemImage:t.imageMapping?.[e.type]?{url:t.imageMapping[e.type].url,alt:e.image?.alt}:e.image,itemValue:e.value,itemRules:e.rules,redeemId:Number(e.redeemId),userId:l?.user_id,alpcConfig:v}});else{P(""),w(e.redeemId),g(e.title);try{await F({productVariant:e.variant,redeemId:Number(e.redeemId),userId:l?.user_id}),_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"redeem_success",info:"Member Floating Window"}})}catch(r){P(r?.message??t.redeemModal.commonError)}finally{w(null)}}}return a(D,{children:n("div",{className:"flex flex-1 flex-col",children:[n("div",{className:"flex flex-col gap-[8px]",children:[t.title&&a("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:t.title}),t.subtitle&&a("p",{className:"text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]",children:t.subtitle})]}),d&&n("div",{className:B("flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]",C?"rounded-[8px]":"rounded-none"),children:[n("div",{className:"flex flex-1 flex-col gap-[4px]",children:[a("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:t.balanceLabel??"AnkerCredits Balance"}),n("div",{className:"flex items-end gap-[4px]",children:[a("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:x(u?.available_credit||0)}),a("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:t.creditUnit??"ankercredits"})]})]}),a("div",{className:"h-full w-px bg-[#dadce0]"}),n("div",{className:"flex flex-1 flex-col gap-[4px]",children:[a("div",{className:"text-[14px] font-[700] text-[#1e2024]",children:t.comingSoonLabel??"Coming Soon"}),n("div",{className:"flex items-end gap-[4px]",children:[a("span",{className:"text-[24px] font-[700] leading-[1.2] text-[#1e2024]",children:x(u?.pending_credit||0)}),a("span",{className:"text-[14px] font-[700] leading-[1.4] text-[#1e2024]",children:t.creditUnit??"ankercredits"})]})]})]}),y&&a("div",{className:"text-[14px] mt-[8px] font-[700] text-[#f84d4f]",children:y}),$?a("div",{className:"flex flex-1 items-center justify-center py-[32px]",children:a("div",{className:"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent"})}):a("div",{className:"flex mt-[16px] flex-col",children:T.map((e,r)=>n("div",{className:"relative py-[16px]",children:[r>0&&a("div",{className:"absolute inset-x-0 top-0 h-px bg-[#dadce0]"}),n("div",{className:"flex items-center gap-[12px]",children:[(()=>{const i=e.type===s.Product||e.type===s.RedeemAndBuy,m=i?e.variant?.image?.url??e.product?.images?.[0]?.url??e.image?.url:e.image?.url||t.imageMapping?.[e.type]?.url,b=i?e.variant?.image?.altText??e.product?.images?.[0]?.alt??e.image?.alt??"":e.image?.alt??"";return m?n("div",{className:B("relative size-[64px] shrink-0 overflow-hidden",C?"rounded-[4px]":"rounded-none"),children:[a(q,{source:m,alt:b,className:"flex size-full items-center justify-center",imgClassName:i?"object-cover":"h-full w-auto object-contain"}),e.type===s.Coupon&&e.value&&a("div",{className:"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white",children:e.value&&`${e.value} ${t.off}`}),e.type===s.GiftCard&&e.value&&a("div",{className:"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white",children:e.value&&`${e.value} ${t.giftCard||"Gift Card"}`})]}):null})(),n("div",{className:"min-w-0 flex-1",children:[a("div",{className:"text-[16px] font-[700] text-[#1e2024] line-clamp-2",children:e.product.title??e.title??e.alpcData?.name}),a("div",{className:"mt-[4px] text-[14px] text-[#666]",children:e.type===s.RedeemAndBuy?n(D,{children:[n("div",{children:[x(e.alpcData.consume_credits)," ",t.creditUnit??""," + $",Number(e.price).toFixed(2)]}),e.variant?.price?.amount&&n("div",{className:"text-[12px] ml-1 text-[#999] line-through",children:["$",Number(e.variant.price.amount).toFixed(2)]})]}):`${x(e.alpcData.consume_credits)} ${t.creditUnit??""}`})]}),n("div",{className:"relative group",children:[a(J,{size:"base",disabled:G(e),loading:U===e.redeemId,onClick:()=>V(e),children:O(e)}),e.insufficient&&d&&p&&a("div",{className:"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block",children:n("div",{className:"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow",children:[a("p",{className:"text-pretty tracking-[-0.02em] text-[14px]",children:t.insufficientCredits}),a("div",{className:"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]"})]})})]})]})]},r))}),t.creditsPage?.url&&a("a",{href:(()=>{if(!c)return t.creditsPage.url;try{const e=new URL(t.creditsPage.url,window.location.href);return e.searchParams.set("ref",`${c}_consume_credits`),e.toString()}catch{return t.creditsPage.url}})(),target:"_blank",rel:"noopener noreferrer",className:"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline",onClick:()=>_({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"consume_credits",button_name:"credits_page_link",info:"Member Floating Window"}}),children:t.creditsPage.label??"Go to Credits Page"})]})})}var me=ae;export{me as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/ConsumeCredits/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Button } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useRedeemableList } from './hooks/useRedeemableList'\nimport { useRedeemAndBuy } from './hooks/useRedeemAndBuy'\nimport {\n ConsumeCreditsItemType,\n MemberPopupPanelType,\n type ConsumeCreditsopy,\n type ConsumeCreditsItem,\n} from '../../type'\nimport { numberFormat } from '../../../credits/context/utils'\nimport type { ConsumeCreditRuleResponse } from '../../../credits/context/response'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype EnrichedItem = ConsumeCreditsItem & {\n alpcData: ConsumeCreditRuleResponse\n insufficient: boolean\n soldOut: boolean\n disabled: boolean\n product?: any\n variant?: any\n}\n\ntype Props = {\n copy: ConsumeCreditsopy\n}\n\nfunction ConsumeCredits({ copy }: Props) {\n const { profile, creditInfo, openSignUpPopup, alpcConfig, isActivateSuccess, fetchCreditInfo, pageHandle } =\n useMemberPopupContext()\n const { pushView } = useViewStack()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const [redeemAndBuyError, setRedeemAndBuyError] = useState('')\n const [loadingId, setLoadingId] = useState<string | number | null>(null)\n\n useEffect(() => {\n if (profile?.user_id) fetchCreditInfo(profile.user_id)\n }, [])\n\n const isLogin = !!profile\n const { redeemableList, listLoading } = useRedeemableList(alpcConfig)\n const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)\n\n const handles = copy.list.map(item => item.product?.handle).filter(Boolean) as string[]\n const { data: products } = useProductsByHandles({ handles })\n\n const list = useMemo(() => {\n return copy.list\n .map(item => {\n const alpcData = redeemableList.find(r => String(r.id) === String(item.redeemId))\n if (!alpcData) return null\n\n const availableCredit = Number(creditInfo?.available_credit ?? 0)\n const insufficient = alpcData.consume_credits > availableCredit\n const alpcSoldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)\n\n const isPhysicalProduct =\n item.type === ConsumeCreditsItemType.RedeemAndBuy || item.type === ConsumeCreditsItemType.Product\n const product = products?.find((p: any) => p.handle === item.product?.handle)\n const variant = product?.variants?.find((v: any) => v.sku === item.product?.sku) ?? product?.variants?.[0]\n if (isPhysicalProduct && (!product || !variant || !variant?.availableForSale || alpcSoldOut)) {\n return null\n }\n return { ...item, alpcData, insufficient, product, variant }\n })\n .filter(Boolean) as EnrichedItem[]\n }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])\n\n const isActivate = profile?.activated || isActivateSuccess\n\n function getButtonLabel(item: (typeof list)[number]) {\n if (!isLogin || !isActivate) {\n return copy.unlockRewards\n }\n if (item.soldOut) {\n return copy.soldOut\n }\n return copy.btnRedeem\n }\n\n function isDisabled(item: (typeof list)[number]) {\n if (!isLogin || !isActivate) {\n return false\n }\n return item.insufficient\n }\n\n function trackRedeemButton(itemTitle: string) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'redeem',\n info: 'Member Floating Window',\n },\n })\n }\n\n async function handleRedeem(item: (typeof list)[number]) {\n if (!isLogin) {\n openSignUpPopup()\n return\n }\n if (!isActivate) {\n pushView({\n type: MemberPopupPanelType.Activate,\n })\n return\n }\n if (item.type === ConsumeCreditsItemType.GiftCard || item.type === ConsumeCreditsItemType.Product) {\n if (copy.creditsPage?.url) {\n const sectionId = copy.creditsPage.redeemListSectionId ?? 'creditsRedeemList'\n const targetUrl = new URL(copy.creditsPage.url, window.location.href)\n targetUrl.searchParams.set('section', sectionId)\n targetUrl.hash = sectionId\n if (pageHandle) {\n targetUrl.searchParams.set('ref', `${pageHandle}_consume_credits`)\n }\n trackRedeemButton(item.title)\n window.open(targetUrl.toString(), '_blank', 'noopener,noreferrer')\n }\n return\n }\n if (item.type === ConsumeCreditsItemType.Coupon) {\n trackRedeemButton(item.title)\n pushView({\n type: MemberPopupPanelType.RedeemCoupon,\n props: {\n itemTitle: item.title,\n itemCredits: item.alpcData.consume_credits,\n itemImage: copy.imageMapping?.[item.type]\n ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }\n : item.image,\n itemValue: item.value,\n itemRules: item.rules,\n redeemId: Number(item.redeemId),\n userId: profile?.user_id,\n alpcConfig,\n },\n })\n } else {\n setRedeemAndBuyError('')\n setLoadingId(item.redeemId)\n trackRedeemButton(item.title)\n try {\n await redeemAndBuy({\n productVariant: item.variant,\n redeemId: Number(item.redeemId),\n userId: profile?.user_id,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'redeem_success',\n info: 'Member Floating Window',\n },\n })\n } catch (e: any) {\n setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)\n } finally {\n setLoadingId(null)\n }\n }\n }\n\n return (\n <>\n <div className=\"flex flex-1 flex-col\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n {copy.subtitle && (\n <p className=\"text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>\n )}\n </div>\n\n {isLogin && (\n <div\n className={cn(\n 'flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]',\n rounded ? 'rounded-[8px]' : 'rounded-none'\n )}\n >\n <div className=\"flex flex-1 flex-col gap-[4px]\">\n <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.balanceLabel ?? 'AnkerCredits Balance'}</div>\n <div className=\"flex items-end gap-[4px]\">\n <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n {numberFormat(creditInfo?.available_credit || 0)}\n </span>\n <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n {copy.creditUnit ?? 'ankercredits'}\n </span>\n </div>\n </div>\n <div className=\"h-full w-px bg-[#dadce0]\" />\n <div className=\"flex flex-1 flex-col gap-[4px]\">\n <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.comingSoonLabel ?? 'Coming Soon'}</div>\n <div className=\"flex items-end gap-[4px]\">\n <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n {numberFormat(creditInfo?.pending_credit || 0)}\n </span>\n <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n {copy.creditUnit ?? 'ankercredits'}\n </span>\n </div>\n </div>\n </div>\n )}\n {redeemAndBuyError && <div className=\"text-[14px] mt-[8px] font-[700] text-[#f84d4f]\">{redeemAndBuyError}</div>}\n\n {listLoading ? (\n <div className=\"flex flex-1 items-center justify-center py-[32px]\">\n <div className=\"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent\" />\n </div>\n ) : (\n <div className=\"flex mt-[16px] flex-col\">\n {list.map((item, idx) => {\n const hasProduct = !!item.product\n return (\n <div key={idx} className=\"relative py-[16px]\">\n {idx > 0 && <div className=\"absolute inset-x-0 top-0 h-px bg-[#dadce0]\" />}\n <div className=\"flex items-center gap-[12px]\">\n {(() => {\n const mappedImgUrl = copy.imageMapping?.[item.type]?.url\n const imgUrl = hasProduct\n ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)\n : (mappedImgUrl ?? item.image?.url)\n const imgAlt = hasProduct\n ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')\n : (item.image?.alt ?? '')\n if (!imgUrl) return null\n return (\n <div\n className={cn(\n 'relative size-[64px] shrink-0 overflow-hidden',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n >\n <Picture\n source={imgUrl}\n alt={imgAlt}\n className=\"flex size-full items-center justify-center\"\n imgClassName={hasProduct ? 'object-cover' : 'h-full w-auto object-contain'}\n />\n {!hasProduct && item.value && (\n <div className=\"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white\">\n {item.value} {copy.off}\n </div>\n )}\n </div>\n )\n })()}\n <div className=\"min-w-0 flex-1\">\n <div className=\"text-[16px] font-[700] text-[#1e2024] line-clamp-2\">\n {hasProduct && item.product?.title ? item.product.title : item.title}\n </div>\n <div className=\"mt-[4px] text-[14px] text-[#666]\">\n {hasProduct && item.price != null\n ? `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''} + $${Number(item.price).toFixed(2)}`\n : `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`}\n </div>\n </div>\n <div className=\"relative group\">\n <Button\n className={cn(\n 'bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n disabled={isDisabled(item)}\n loading={loadingId === item.redeemId}\n onClick={() => handleRedeem(item)}\n >\n {getButtonLabel(item)}\n </Button>\n {item.insufficient && isLogin && isActivate && (\n <div className=\"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block\">\n <div className=\"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow\">\n <p className=\"text-pretty tracking-[-0.02em] text-[14px]\">{copy.insufficientCredits}</p>\n <div className=\"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n )\n })}\n </div>\n )}\n\n {copy.creditsPage?.url && (\n <a\n href={(() => {\n if (!pageHandle) return copy.creditsPage!.url\n try {\n const url = new URL(copy.creditsPage!.url, window.location.href)\n url.searchParams.set('ref', `${pageHandle}_consume_credits`)\n return url.toString()\n } catch {\n return copy.creditsPage!.url\n }\n })()}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline\"\n onClick={() =>\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'credits_page_link',\n info: 'Member Floating Window',\n },\n })\n }\n >\n {copy.creditsPage.label ?? 'Go to Credits Page'}\n </a>\n )}\n </div>\n </>\n )\n}\n\nexport default ConsumeCredits\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useEffect", "useMemo", "useState", "Picture", "Button", "gaTrack", "cn", "useProductsByHandles", "useHeadlessContext", "useMemberPopupContext", "useViewStack", "useRedeemableList", "useRedeemAndBuy", "ConsumeCreditsItemType", "MemberPopupPanelType", "numberFormat", "ROUNDED_BRANDS", "ConsumeCredits", "copy", "profile", "creditInfo", "openSignUpPopup", "alpcConfig", "isActivateSuccess", "fetchCreditInfo", "pageHandle", "pushView", "brand", "rounded", "redeemAndBuyError", "setRedeemAndBuyError", "loadingId", "setLoadingId", "isLogin", "redeemableList", "listLoading", "redeemAndBuy", "handles", "item", "products", "list", "alpcData", "r", "availableCredit", "insufficient", "alpcSoldOut", "isPhysicalProduct", "product", "p", "variant", "v", "isActivate", "getButtonLabel", "isDisabled", "trackRedeemButton", "itemTitle", "handleRedeem", "sectionId", "targetUrl", "e", "idx", "
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Button } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { useViewStack } from '../../context/viewStack'\nimport { useRedeemableList } from './hooks/useRedeemableList'\nimport { useRedeemAndBuy } from './hooks/useRedeemAndBuy'\nimport {\n ConsumeCreditsItemType,\n MemberPopupPanelType,\n type ConsumeCreditsopy,\n type ConsumeCreditsItem,\n} from '../../type'\nimport { numberFormat } from '../../../credits/context/utils'\nimport type { ConsumeCreditRuleResponse } from '../../../credits/context/response'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype EnrichedItem = ConsumeCreditsItem & {\n alpcData: ConsumeCreditRuleResponse\n insufficient: boolean\n soldOut: boolean\n disabled: boolean\n product?: any\n variant?: any\n}\n\ntype Props = {\n copy: ConsumeCreditsopy\n}\n\nfunction ConsumeCredits({ copy }: Props) {\n const { profile, creditInfo, openSignUpPopup, alpcConfig, isActivateSuccess, fetchCreditInfo, pageHandle } =\n useMemberPopupContext()\n const { pushView } = useViewStack()\n const { brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const [redeemAndBuyError, setRedeemAndBuyError] = useState('')\n const [loadingId, setLoadingId] = useState<string | number | null>(null)\n\n useEffect(() => {\n if (profile?.user_id) fetchCreditInfo(profile.user_id)\n }, [])\n\n const isLogin = !!profile\n const { redeemableList, listLoading } = useRedeemableList(alpcConfig)\n const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)\n\n const handles = copy.list.map(item => item.product?.handle).filter(Boolean) as string[]\n const { data: products } = useProductsByHandles({ handles })\n\n const list = useMemo(() => {\n return copy.list\n .map(item => {\n const alpcData = redeemableList.find(r => String(r.id) === String(item.redeemId))\n if (!alpcData) return null\n\n const availableCredit = Number(creditInfo?.available_credit ?? 0)\n const insufficient = alpcData.consume_credits > availableCredit\n const alpcSoldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)\n\n const isPhysicalProduct =\n item.type === ConsumeCreditsItemType.RedeemAndBuy || item.type === ConsumeCreditsItemType.Product\n const product = products?.find((p: any) => p.handle === item.product?.handle)\n const variant = product?.variants?.find((v: any) => v.sku === item.product?.sku) ?? product?.variants?.[0]\n if (isPhysicalProduct && (!product || !variant || !variant?.availableForSale || alpcSoldOut)) {\n return null\n }\n if (item.type === ConsumeCreditsItemType.RedeemAndBuy && item.price == null) {\n return null\n }\n return { ...item, alpcData, insufficient, product, variant }\n })\n .filter(Boolean) as EnrichedItem[]\n }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])\n\n const isActivate = profile?.activated || isActivateSuccess\n\n function getButtonLabel(item: (typeof list)[number]) {\n if (!isLogin || !isActivate) {\n return copy.unlockRewards\n }\n if (item.soldOut) {\n return copy.soldOut\n }\n return copy.btnRedeem\n }\n\n function isDisabled(item: (typeof list)[number]) {\n if (!isLogin || !isActivate) {\n return false\n }\n return item.insufficient\n }\n\n function trackRedeemButton(itemTitle: string) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'redeem',\n info: 'Member Floating Window',\n },\n })\n }\n\n async function handleRedeem(item: (typeof list)[number]) {\n if (!isLogin) {\n openSignUpPopup()\n return\n }\n if (!isActivate) {\n pushView({\n type: MemberPopupPanelType.Activate,\n })\n return\n }\n if (item.type === ConsumeCreditsItemType.GiftCard || item.type === ConsumeCreditsItemType.Product) {\n if (copy.creditsPage?.url) {\n const sectionId = copy.creditsPage.redeemListSectionId ?? 'creditsRedeemList'\n const targetUrl = new URL(copy.creditsPage.url, window.location.href)\n targetUrl.searchParams.set('section', sectionId)\n targetUrl.hash = sectionId\n if (pageHandle) {\n targetUrl.searchParams.set('ref', `${pageHandle}_consume_credits`)\n }\n trackRedeemButton(item.title)\n window.open(targetUrl.toString(), '_blank', 'noopener,noreferrer')\n }\n return\n }\n if (item.type === ConsumeCreditsItemType.Coupon) {\n trackRedeemButton(item.title)\n pushView({\n type: MemberPopupPanelType.RedeemCoupon,\n props: {\n itemTitle: item.title,\n itemCredits: item.alpcData.consume_credits,\n itemImage: copy.imageMapping?.[item.type]\n ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }\n : item.image,\n itemValue: item.value,\n itemRules: item.rules,\n redeemId: Number(item.redeemId),\n userId: profile?.user_id,\n alpcConfig,\n },\n })\n } else {\n setRedeemAndBuyError('')\n setLoadingId(item.redeemId)\n trackRedeemButton(item.title)\n try {\n await redeemAndBuy({\n productVariant: item.variant,\n redeemId: Number(item.redeemId),\n userId: profile?.user_id,\n })\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'redeem_success',\n info: 'Member Floating Window',\n },\n })\n } catch (e: any) {\n setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)\n } finally {\n setLoadingId(null)\n }\n }\n }\n\n return (\n <>\n <div className=\"flex flex-1 flex-col\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n {copy.subtitle && (\n <p className=\"text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]\">{copy.subtitle}</p>\n )}\n </div>\n\n {isLogin && (\n <div\n className={cn(\n 'flex items-center mt-[16px] gap-[12px] bg-[#f5f6f7] p-[16px]',\n rounded ? 'rounded-[8px]' : 'rounded-none'\n )}\n >\n <div className=\"flex flex-1 flex-col gap-[4px]\">\n <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.balanceLabel ?? 'AnkerCredits Balance'}</div>\n <div className=\"flex items-end gap-[4px]\">\n <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n {numberFormat(creditInfo?.available_credit || 0)}\n </span>\n <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n {copy.creditUnit ?? 'ankercredits'}\n </span>\n </div>\n </div>\n <div className=\"h-full w-px bg-[#dadce0]\" />\n <div className=\"flex flex-1 flex-col gap-[4px]\">\n <div className=\"text-[14px] font-[700] text-[#1e2024]\">{copy.comingSoonLabel ?? 'Coming Soon'}</div>\n <div className=\"flex items-end gap-[4px]\">\n <span className=\"text-[24px] font-[700] leading-[1.2] text-[#1e2024]\">\n {numberFormat(creditInfo?.pending_credit || 0)}\n </span>\n <span className=\"text-[14px] font-[700] leading-[1.4] text-[#1e2024]\">\n {copy.creditUnit ?? 'ankercredits'}\n </span>\n </div>\n </div>\n </div>\n )}\n {redeemAndBuyError && <div className=\"text-[14px] mt-[8px] font-[700] text-[#f84d4f]\">{redeemAndBuyError}</div>}\n\n {listLoading ? (\n <div className=\"flex flex-1 items-center justify-center py-[32px]\">\n <div className=\"size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent\" />\n </div>\n ) : (\n <div className=\"flex mt-[16px] flex-col\">\n {list.map((item, idx) => {\n return (\n <div key={idx} className=\"relative py-[16px]\">\n {idx > 0 && <div className=\"absolute inset-x-0 top-0 h-px bg-[#dadce0]\" />}\n <div className=\"flex items-center gap-[12px]\">\n {(() => {\n const phsicalProduct =\n item.type === ConsumeCreditsItemType.Product ||\n item.type === ConsumeCreditsItemType.RedeemAndBuy\n const imgUrl = phsicalProduct\n ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)\n : item.image?.url || copy.imageMapping?.[item.type]?.url\n const imgAlt = phsicalProduct\n ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')\n : (item.image?.alt ?? '')\n if (!imgUrl) return null\n return (\n <div\n className={cn(\n 'relative size-[64px] shrink-0 overflow-hidden',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n >\n <Picture\n source={imgUrl}\n alt={imgAlt}\n className=\"flex size-full items-center justify-center\"\n imgClassName={phsicalProduct ? 'object-cover' : 'h-full w-auto object-contain'}\n />\n {item.type === ConsumeCreditsItemType.Coupon && item.value && (\n <div className=\"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white\">\n {item.value && `${item.value} ${copy.off}`}\n </div>\n )}\n {item.type === ConsumeCreditsItemType.GiftCard && item.value && (\n <div className=\"absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white\">\n {item.value && `${item.value} ${copy.giftCard || 'Gift Card'}`}\n </div>\n )}\n </div>\n )\n })()}\n <div className=\"min-w-0 flex-1\">\n <div className=\"text-[16px] font-[700] text-[#1e2024] line-clamp-2\">\n {item.product.title ?? item.title ?? item.alpcData?.name}\n </div>\n <div className=\"mt-[4px] text-[14px] text-[#666]\">\n {item.type === ConsumeCreditsItemType.RedeemAndBuy ? (\n <>\n <div>\n {numberFormat(item.alpcData.consume_credits)} {copy.creditUnit ?? ''} + $\n {Number(item.price).toFixed(2)}\n </div>\n {item.variant?.price?.amount && (\n <div className=\"text-[12px] ml-1 text-[#999] line-through\">\n ${Number(item.variant.price.amount).toFixed(2)}\n </div>\n )}\n </>\n ) : (\n `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`\n )}\n </div>\n </div>\n <div className=\"relative group\">\n <Button\n size=\"base\"\n disabled={isDisabled(item)}\n loading={loadingId === item.redeemId}\n onClick={() => handleRedeem(item)}\n >\n {getButtonLabel(item)}\n </Button>\n {item.insufficient && isLogin && isActivate && (\n <div className=\"pointer-events-none absolute right-0 top-full z-[100] mt-[10px] hidden w-[200px] group-hover:block\">\n <div className=\"relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow\">\n <p className=\"text-pretty tracking-[-0.02em] text-[14px]\">{copy.insufficientCredits}</p>\n <div className=\"absolute -top-[8px] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]\" />\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n )\n })}\n </div>\n )}\n\n {copy.creditsPage?.url && (\n <a\n href={(() => {\n if (!pageHandle) return copy.creditsPage!.url\n try {\n const url = new URL(copy.creditsPage!.url, window.location.href)\n url.searchParams.set('ref', `${pageHandle}_consume_credits`)\n return url.toString()\n } catch {\n return copy.creditsPage!.url\n }\n })()}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline\"\n onClick={() =>\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'consume_credits',\n button_name: 'credits_page_link',\n info: 'Member Floating Window',\n },\n })\n }\n >\n {copy.creditsPage.label ?? 'Go to Credits Page'}\n </a>\n )}\n </div>\n </>\n )\n}\n\nexport default ConsumeCredits\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useEffect", "useMemo", "useState", "Picture", "Button", "gaTrack", "cn", "useProductsByHandles", "useHeadlessContext", "useMemberPopupContext", "useViewStack", "useRedeemableList", "useRedeemAndBuy", "ConsumeCreditsItemType", "MemberPopupPanelType", "numberFormat", "ROUNDED_BRANDS", "ConsumeCredits", "copy", "profile", "creditInfo", "openSignUpPopup", "alpcConfig", "isActivateSuccess", "fetchCreditInfo", "pageHandle", "pushView", "brand", "rounded", "redeemAndBuyError", "setRedeemAndBuyError", "loadingId", "setLoadingId", "isLogin", "redeemableList", "listLoading", "redeemAndBuy", "handles", "item", "products", "list", "alpcData", "r", "availableCredit", "insufficient", "alpcSoldOut", "isPhysicalProduct", "product", "p", "variant", "v", "isActivate", "getButtonLabel", "isDisabled", "trackRedeemButton", "itemTitle", "handleRedeem", "sectionId", "targetUrl", "e", "idx", "phsicalProduct", "imgUrl", "imgAlt", "url", "ConsumeCredits_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n,jsxs as _}from"react/jsx-runtime";import{useState as p,useCallback as R,useRef as U,useEffect as H}from"react";import{Button as q,Text as r}from"@anker-in/headless-ui";import{useSendEmailValidation as G,gaTrack as S,classNames as L,useHeadlessContext as J,useEmailValidation as Q,useCountDown as X}from"@anker-in/lib";import{Message as Y}from"../../../registration/authCodeActivate/Message";import{useRegistration as Z}from"../../../registration";import{useMemberPopupContext as ee}from"../../context/provider";import{ROUNDED_BRANDS as te}from"../../../../constants";function ae({copy:e,onClose:
|
|
1
|
+
import{jsx as n,jsxs as _}from"react/jsx-runtime";import{useState as p,useCallback as R,useRef as U,useEffect as H}from"react";import{Button as q,Text as r}from"@anker-in/headless-ui";import{useSendEmailValidation as G,gaTrack as S,classNames as L,useHeadlessContext as J,useEmailValidation as Q,useCountDown as X}from"@anker-in/lib";import{Message as Y}from"../../../registration/authCodeActivate/Message";import{useRegistration as Z}from"../../../registration";import{useMemberPopupContext as ee}from"../../context/provider";import{ROUNDED_BRANDS as te}from"../../../../constants";function ae({copy:e,onClose:v}){const{setIsActivateSuccess:h,fetchCreditInfo:C,profile:f}=ee(),{locale:P,brand:V}=J(),{email:i}=Z(),B=te.includes(V),{isMutating:F,trigger:x,data:E}=G(),{isMutating:$,trigger:k}=Q(),[y,l]=p(""),[z,u]=p(""),{startCountDown:A,startAction:D,countDown:W}=X(60),[I,c]=p(""),[N,m]=p(0),[o,w]=p(new Array(6).fill("")),T=U([]),b=o.join("");H(()=>{T.current[N]&&T.current[N].focus()},[N]),H(()=>{i&&x({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{u(""),l("")},5e3)}})},[i]);const j=R(async()=>{i&&(await x({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),l(e?.sendEmailSuccessMessage||""),D(),setTimeout(()=>{u(""),l("")},5e3)}}),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,x]),K=(d,a)=>{const{value:t}=d.target;if(c(""),Number.isNaN(Number(t)))return;if(t.length>1){a<o.length-1&&(o[a+1]||(m(a+1),w(g=>{const M=[...g];return M[a]=t[0],t.length>1&&(M[a+1]=t[1]),M})));return}const s=[...o];s[a]=t,w(s),t?a<o.length-1&&!o[a+1]&&m(a+1):a>0&&m(a-1)},O=R(async()=>{if(!b?.length){c(e?.codeEmptyError||"");return}if(b.length<6){c(e?.incorrectCodeError||"");return}const d=E?.data?.data?.active_token??E?.data?.active_token;d&&await k({token:d,code:b},{onSuccess:t=>{if(t.status>=200&&t.status<300)u("success"),l(e?.authSuccessMessage||""),h(!0),f?.user_id&&setTimeout(()=>C(f.user_id),3e3),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active",info:"Member Floating Window"}}),setTimeout(()=>{v()},3e3);else{const s=t?.data?.error_code??t?.error_code;s==="104"?(h(!0),f?.user_id&&setTimeout(()=>C(f.user_id),3e3),S({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active",info:"Member Floating Window"}}),setTimeout(()=>{v()},3e3)):c(s==="142"?e?.incorrectCodeError||"Invalid verification code.":s==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let a=setTimeout(()=>{u(""),l(""),clearTimeout(a)},5e3)},[b,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,P,E,k,v,h,C,f]);return _("div",{className:"relative",children:[_("div",{children:[n(r,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:e?.authCodeTitle}),n(r,{as:"p",className:"mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]",html:e?.authCodeDesc?.replace("%email%",i||"")})]}),_("div",{className:"mt-6",children:[n(r,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:e?.enterActiveCodeText}),n("div",{className:"my-3 grid grid-cols-6 gap-2",children:o.map((d,a)=>n("div",{className:"col-span-1 aspect-1 text-[#555]",children:n("input",{ref:t=>{t&&(T.current[a]=t)},type:"tel",className:L("flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none",B&&"rounded-[12px]"),value:d,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:t=>K(t,a),onFocus:()=>{m(a)},onPaste:t=>{const s=t.clipboardData.getData("text");if(!Number.isNaN(Number(s))){const g=s.split("").slice(0,6);w(g.concat(Array(6-g.length).fill(""))),g.length<=o.length&&m(g.length-1)}},onKeyDown:t=>{const{value:s}=t.target;t.key==="Backspace"&&!s&&a>0&&m(a-1)}},a)},a))}),I&&n(r,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:I}),e?.authCodeContent&&n("ul",{className:'flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-["\u2022"]',dangerouslySetInnerHTML:{__html:e?.authCodeContent}})]}),_("div",{className:"mt-4 min-l:mt-6",children:[n(r,{className:"text-base font-semibold leading-[100%] text-[#333]",html:e?.authCodeReceiveText})," ",A?n(r,{html:e?.retrieveText?.replace("%countdownTime%",W.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(r,{onClick:j,className:L("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":A||F}),html:e?.sendAgainText}),n(q,{type:"submit",loading:$,className:"mt-6 w-full min-l:mt-8",onClick:O,children:e.buttonText})]}),n(Y,{status:z,message:y})]})}export{ae as default};
|
|
2
2
|
//# sourceMappingURL=ActivatePanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState, useCallback, useRef, useEffect } from 'react'\nimport { Button, Text } from '@anker-in/headless-ui'\nimport {\n useSendEmailValidation,\n gaTrack,\n classNames as cn,\n useHeadlessContext,\n useEmailValidation,\n useCountDown,\n} from '@anker-in/lib'\nimport { Message } from '../../../registration/authCodeActivate/Message'\nimport type { AuthCodeActivateCopy } from '../../type'\nimport { useRegistration } from '../../../registration'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n copy: AuthCodeActivateCopy\n onClose: () => void\n}\n\nexport default function ActivatePanel({ copy, onClose }: Props) {\n const { setIsActivateSuccess, fetchCreditInfo, profile } = useMemberPopupContext()\n const { locale, brand } = useHeadlessContext()\n const { email } = useRegistration()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const {\n isMutating: isSendingEmail,\n trigger: triggerSendValidationEmail,\n data: sendEmailData,\n } = useSendEmailValidation()\n\n const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()\n\n const [messageText, setMessageText] = useState('')\n const [messageStatus, setMessageStatus] = useState('')\n const { startCountDown: isStartCountDown, startAction: startCountDown, countDown } = useCountDown(60)\n\n const [error, setError] = useState('')\n const [focusIndex, setFocusIndex] = useState(0)\n const [codeArray, setCodeArray] = useState(new Array(6).fill(''))\n\n const inputRefs = useRef<HTMLInputElement[]>([])\n const code = codeArray.join('')\n\n useEffect(() => {\n if (inputRefs.current[focusIndex]) {\n inputRefs.current[focusIndex].focus()\n }\n }, [focusIndex])\n\n useEffect(() => {\n if (email) {\n triggerSendValidationEmail(\n {\n email: email,\n data: {\n redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,\n },\n },\n {\n onSuccess: () => {\n setMessageStatus('success')\n setMessageText(copy?.sendEmailSuccessMessage || '')\n startCountDown()\n setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n }, 5000)\n },\n }\n )\n }\n }, [email])\n\n const handleSendAgain = useCallback(async () => {\n if (!email) return\n await triggerSendValidationEmail(\n {\n email: email,\n data: {\n redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,\n },\n },\n {\n onSuccess: () => {\n setMessageStatus('success')\n setMessageText(copy?.sendEmailSuccessMessage || '')\n startCountDown()\n setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n }, 5000)\n },\n }\n )\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: 'reg_sub_pop',\n position: 'auth_code',\n button_name: 'sent_again',\n },\n })\n }, [email, triggerSendValidationEmail])\n\n const handleInputCodeChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n const { value } = event.target\n\n setError('')\n\n if (Number.isNaN(Number(value))) {\n return\n }\n\n if (value.length > 1) {\n if (index < codeArray.length - 1) {\n if (!codeArray[index + 1]) {\n setFocusIndex(index + 1)\n setCodeArray(old => {\n const newCode = [...old]\n newCode[index] = value[0]\n if (value.length > 1) {\n newCode[index + 1] = value[1]\n }\n return newCode\n })\n }\n }\n return\n }\n const newCode = [...codeArray]\n newCode[index] = value\n setCodeArray(newCode)\n if (value) {\n if (index < codeArray.length - 1 && !codeArray[index + 1]) {\n setFocusIndex(index + 1)\n }\n } else if (index > 0) {\n setFocusIndex(index - 1)\n }\n }\n\n const handleAuthCodeSubmit = useCallback(async () => {\n if (!code?.length) {\n setError(copy?.codeEmptyError || '')\n return\n }\n\n if (code.length < 6) {\n setError(copy?.incorrectCodeError || '')\n return\n }\n\n const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token\n if (token) {\n await triggerEmailValidation(\n {\n token: token,\n code: code,\n },\n {\n onSuccess: data => {\n if (data.status >= 200 && data.status < 300) {\n setMessageStatus('success')\n setMessageText(copy?.authSuccessMessage || '')\n setIsActivateSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: 'reg_sub_pop',\n position: 'auth_code',\n button_name: 'check_and_active',\n info: 'Member Floating Window',\n },\n })\n setTimeout(() => {\n onClose()\n }, 3000)\n } else {\n const errorCode = data?.data?.error_code ?? data?.error_code\n if (errorCode === '104') {\n setIsActivateSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: 'reg_sub_pop',\n position: 'auth_code',\n button_name: 'check_and_active',\n info: 'Member Floating Window',\n },\n })\n setTimeout(() => {\n onClose()\n }, 3000)\n } else if (errorCode === '142') {\n setError(copy?.incorrectCodeError || 'Invalid verification code.')\n } else if (errorCode === '154') {\n setError(copy?.expiredCodeMessage || '')\n } else {\n setError(copy?.sendEmailErrorMessage || '')\n }\n }\n },\n }\n )\n }\n\n let timer = setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n clearTimeout(timer)\n }, 5000)\n }, [\n code,\n copy?.codeEmptyError,\n copy?.authSuccessMessage,\n copy?.incorrectCodeError,\n copy?.expiredCodeMessage,\n copy?.sendEmailErrorMessage,\n locale,\n sendEmailData,\n triggerEmailValidation,\n onClose,\n setIsActivateSuccess,\n fetchCreditInfo,\n profile,\n ])\n\n return (\n <div className=\"relative\">\n <div>\n <Text\n className=\"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]\"\n html={copy?.authCodeTitle}\n />\n <Text\n as=\"p\"\n className=\"mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]\"\n html={copy?.authCodeDesc?.replace('%email%', email || '')}\n />\n </div>\n <div className=\"mt-6\">\n <Text\n className=\"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6\"\n html={copy?.enterActiveCodeText}\n />\n <div className=\"my-3 grid grid-cols-6 gap-2\">\n {codeArray.map((item, index) => (\n <div key={index} className=\"col-span-1 aspect-1 text-[#555]\">\n <input\n ref={inputRef => {\n if (inputRef) {\n inputRefs.current[index] = inputRef\n }\n }}\n key={index}\n type=\"tel\"\n className={cn(\n 'flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none',\n rounded && 'rounded-[12px]'\n )}\n value={item}\n autoComplete=\"false\"\n autoCorrect=\"false\"\n spellCheck=\"false\"\n autoCapitalize=\"false\"\n onChange={event => handleInputCodeChange(event, index)}\n onFocus={() => {\n setFocusIndex(index)\n }}\n onPaste={event => {\n const paste = event.clipboardData.getData('text')\n if (!Number.isNaN(Number(paste))) {\n const pastedCode = paste.split('').slice(0, 6)\n setCodeArray(pastedCode.concat(Array(6 - pastedCode.length).fill('')))\n if (pastedCode.length <= codeArray.length) {\n setFocusIndex(pastedCode.length - 1)\n }\n }\n }}\n onKeyDown={event => {\n const { value } = event.target as HTMLInputElement\n if (event.key === 'Backspace' && !value && index > 0) {\n setFocusIndex(index - 1)\n }\n }}\n />\n </div>\n ))}\n </div>\n\n {error && <Text className=\"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]\" html={error} />}\n {copy?.authCodeContent && (\n <ul\n className='flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-[\"\u2022\"]'\n dangerouslySetInnerHTML={{ __html: copy?.authCodeContent }}\n />\n )}\n </div>\n <div className=\"mt-4 min-l:mt-6\">\n <Text className=\"text-base font-semibold leading-[100%] text-[#333]\" html={copy?.authCodeReceiveText} />{' '}\n {isStartCountDown ? (\n <Text\n html={copy?.retrieveText?.replace('%countdownTime%', countDown.toString())}\n className=\"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline\"\n />\n ) : (\n <Text\n onClick={handleSendAgain}\n className={cn(\n 'cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline',\n {\n 'pointer-events-none': isStartCountDown || isSendingEmail,\n }\n )}\n html={copy?.sendAgainText}\n />\n )}\n <Button\n type=\"submit\"\n loading={emailValidationLoading}\n className=\"mt-6 flex h-[54px] w-full cursor-pointer items-center justify-center px-8 py-[15px] text-center text-base font-bold leading-[100%] text-white min-l:mt-8\"\n onClick={handleAuthCodeSubmit}\n >\n {copy.buttonText}\n </Button>\n </div>\n <Message status={messageStatus} message={messageText} />\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useState, useCallback, useRef, useEffect } from 'react'\nimport { Button, Text } from '@anker-in/headless-ui'\nimport {\n useSendEmailValidation,\n gaTrack,\n classNames as cn,\n useHeadlessContext,\n useEmailValidation,\n useCountDown,\n} from '@anker-in/lib'\nimport { Message } from '../../../registration/authCodeActivate/Message'\nimport type { AuthCodeActivateCopy } from '../../type'\nimport { useRegistration } from '../../../registration'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n copy: AuthCodeActivateCopy\n onClose: () => void\n}\n\nexport default function ActivatePanel({ copy, onClose }: Props) {\n const { setIsActivateSuccess, fetchCreditInfo, profile } = useMemberPopupContext()\n const { locale, brand } = useHeadlessContext()\n const { email } = useRegistration()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const {\n isMutating: isSendingEmail,\n trigger: triggerSendValidationEmail,\n data: sendEmailData,\n } = useSendEmailValidation()\n\n const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()\n\n const [messageText, setMessageText] = useState('')\n const [messageStatus, setMessageStatus] = useState('')\n const { startCountDown: isStartCountDown, startAction: startCountDown, countDown } = useCountDown(60)\n\n const [error, setError] = useState('')\n const [focusIndex, setFocusIndex] = useState(0)\n const [codeArray, setCodeArray] = useState(new Array(6).fill(''))\n\n const inputRefs = useRef<HTMLInputElement[]>([])\n const code = codeArray.join('')\n\n useEffect(() => {\n if (inputRefs.current[focusIndex]) {\n inputRefs.current[focusIndex].focus()\n }\n }, [focusIndex])\n\n useEffect(() => {\n if (email) {\n triggerSendValidationEmail(\n {\n email: email,\n data: {\n redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,\n },\n },\n {\n onSuccess: () => {\n setMessageStatus('success')\n setMessageText(copy?.sendEmailSuccessMessage || '')\n startCountDown()\n setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n }, 5000)\n },\n }\n )\n }\n }, [email])\n\n const handleSendAgain = useCallback(async () => {\n if (!email) return\n await triggerSendValidationEmail(\n {\n email: email,\n data: {\n redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,\n },\n },\n {\n onSuccess: () => {\n setMessageStatus('success')\n setMessageText(copy?.sendEmailSuccessMessage || '')\n startCountDown()\n setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n }, 5000)\n },\n }\n )\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: 'reg_sub_pop',\n position: 'auth_code',\n button_name: 'sent_again',\n },\n })\n }, [email, triggerSendValidationEmail])\n\n const handleInputCodeChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n const { value } = event.target\n\n setError('')\n\n if (Number.isNaN(Number(value))) {\n return\n }\n\n if (value.length > 1) {\n if (index < codeArray.length - 1) {\n if (!codeArray[index + 1]) {\n setFocusIndex(index + 1)\n setCodeArray(old => {\n const newCode = [...old]\n newCode[index] = value[0]\n if (value.length > 1) {\n newCode[index + 1] = value[1]\n }\n return newCode\n })\n }\n }\n return\n }\n const newCode = [...codeArray]\n newCode[index] = value\n setCodeArray(newCode)\n if (value) {\n if (index < codeArray.length - 1 && !codeArray[index + 1]) {\n setFocusIndex(index + 1)\n }\n } else if (index > 0) {\n setFocusIndex(index - 1)\n }\n }\n\n const handleAuthCodeSubmit = useCallback(async () => {\n if (!code?.length) {\n setError(copy?.codeEmptyError || '')\n return\n }\n\n if (code.length < 6) {\n setError(copy?.incorrectCodeError || '')\n return\n }\n\n const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token\n if (token) {\n await triggerEmailValidation(\n {\n token: token,\n code: code,\n },\n {\n onSuccess: data => {\n if (data.status >= 200 && data.status < 300) {\n setMessageStatus('success')\n setMessageText(copy?.authSuccessMessage || '')\n setIsActivateSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: 'reg_sub_pop',\n position: 'auth_code',\n button_name: 'check_and_active',\n info: 'Member Floating Window',\n },\n })\n setTimeout(() => {\n onClose()\n }, 3000)\n } else {\n const errorCode = data?.data?.error_code ?? data?.error_code\n if (errorCode === '104') {\n setIsActivateSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: 'reg_sub_pop',\n position: 'auth_code',\n button_name: 'check_and_active',\n info: 'Member Floating Window',\n },\n })\n setTimeout(() => {\n onClose()\n }, 3000)\n } else if (errorCode === '142') {\n setError(copy?.incorrectCodeError || 'Invalid verification code.')\n } else if (errorCode === '154') {\n setError(copy?.expiredCodeMessage || '')\n } else {\n setError(copy?.sendEmailErrorMessage || '')\n }\n }\n },\n }\n )\n }\n\n let timer = setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n clearTimeout(timer)\n }, 5000)\n }, [\n code,\n copy?.codeEmptyError,\n copy?.authSuccessMessage,\n copy?.incorrectCodeError,\n copy?.expiredCodeMessage,\n copy?.sendEmailErrorMessage,\n locale,\n sendEmailData,\n triggerEmailValidation,\n onClose,\n setIsActivateSuccess,\n fetchCreditInfo,\n profile,\n ])\n\n return (\n <div className=\"relative\">\n <div>\n <Text\n className=\"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]\"\n html={copy?.authCodeTitle}\n />\n <Text\n as=\"p\"\n className=\"mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]\"\n html={copy?.authCodeDesc?.replace('%email%', email || '')}\n />\n </div>\n <div className=\"mt-6\">\n <Text\n className=\"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6\"\n html={copy?.enterActiveCodeText}\n />\n <div className=\"my-3 grid grid-cols-6 gap-2\">\n {codeArray.map((item, index) => (\n <div key={index} className=\"col-span-1 aspect-1 text-[#555]\">\n <input\n ref={inputRef => {\n if (inputRef) {\n inputRefs.current[index] = inputRef\n }\n }}\n key={index}\n type=\"tel\"\n className={cn(\n 'flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none',\n rounded && 'rounded-[12px]'\n )}\n value={item}\n autoComplete=\"false\"\n autoCorrect=\"false\"\n spellCheck=\"false\"\n autoCapitalize=\"false\"\n onChange={event => handleInputCodeChange(event, index)}\n onFocus={() => {\n setFocusIndex(index)\n }}\n onPaste={event => {\n const paste = event.clipboardData.getData('text')\n if (!Number.isNaN(Number(paste))) {\n const pastedCode = paste.split('').slice(0, 6)\n setCodeArray(pastedCode.concat(Array(6 - pastedCode.length).fill('')))\n if (pastedCode.length <= codeArray.length) {\n setFocusIndex(pastedCode.length - 1)\n }\n }\n }}\n onKeyDown={event => {\n const { value } = event.target as HTMLInputElement\n if (event.key === 'Backspace' && !value && index > 0) {\n setFocusIndex(index - 1)\n }\n }}\n />\n </div>\n ))}\n </div>\n\n {error && <Text className=\"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]\" html={error} />}\n {copy?.authCodeContent && (\n <ul\n className='flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-[\"\u2022\"]'\n dangerouslySetInnerHTML={{ __html: copy?.authCodeContent }}\n />\n )}\n </div>\n <div className=\"mt-4 min-l:mt-6\">\n <Text className=\"text-base font-semibold leading-[100%] text-[#333]\" html={copy?.authCodeReceiveText} />{' '}\n {isStartCountDown ? (\n <Text\n html={copy?.retrieveText?.replace('%countdownTime%', countDown.toString())}\n className=\"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline\"\n />\n ) : (\n <Text\n onClick={handleSendAgain}\n className={cn(\n 'cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline',\n {\n 'pointer-events-none': isStartCountDown || isSendingEmail,\n }\n )}\n html={copy?.sendAgainText}\n />\n )}\n <Button\n type=\"submit\"\n loading={emailValidationLoading}\n className=\"mt-6 w-full min-l:mt-8\"\n onClick={handleAuthCodeSubmit}\n >\n {copy.buttonText}\n </Button>\n </div>\n <Message status={messageStatus} message={messageText} />\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useState", "useCallback", "useRef", "useEffect", "Button", "Text", "useSendEmailValidation", "gaTrack", "cn", "useHeadlessContext", "useEmailValidation", "useCountDown", "Message", "useRegistration", "useMemberPopupContext", "ROUNDED_BRANDS", "ActivatePanel", "copy", "onClose", "setIsActivateSuccess", "fetchCreditInfo", "profile", "locale", "brand", "email", "rounded", "isSendingEmail", "triggerSendValidationEmail", "sendEmailData", "emailValidationLoading", "triggerEmailValidation", "messageText", "setMessageText", "messageStatus", "setMessageStatus", "isStartCountDown", "startCountDown", "countDown", "error", "setError", "focusIndex", "setFocusIndex", "codeArray", "setCodeArray", "inputRefs", "code", "handleSendAgain", "handleInputCodeChange", "event", "index", "value", "old", "newCode", "handleAuthCodeSubmit", "token", "data", "errorCode", "timer", "item", "inputRef", "paste", "pastedCode"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useCallback as q,useEffect as F,useState as r}from"react";import{Button as L,Text as g}from"@anker-in/headless-ui";import{gaTrack as R,classNames as
|
|
1
|
+
import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useCallback as q,useEffect as F,useState as r}from"react";import{Button as L,Text as g}from"@anker-in/headless-ui";import{gaTrack as R,classNames as l,useHeadlessContext as U}from"@anker-in/lib";import{useUpdateProfile as A}from"./hooks/useUpdateProfile";import H from"../../../credits/context/hooks/useCountries";import{useMemberPopupContext as O}from"../../context/provider";import{ROUNDED_BRANDS as W}from"../../../../constants";function G({copy:a,onClose:x}){const{profile:o,fetchCreditInfo:C,alpcConfig:_,setIsProfileCompleteSuccess:k}=O(),{locale:T}=_,{brand:z,storeDomain:I}=U(),s=W.includes(z),[d,P]=r(""),[i,w]=r(""),[u,E]=r(""),[f,y]=r(""),[p,c]=r(""),[b,v]=r(""),[N,h]=r(""),{updateProfile:D,isLoading:B}=A({locale:T,appName:_.appName}),{countries:m}=H({shopifyStoreDomain:I});F(()=>{o&&(P(o.first_name??""),w(o.last_name??""),E(o.phone_number??""),y(o.dob??""),c(o.country?.id??""))},[o]),F(()=>{m.length>0&&!p&&c(m[0].id)},[m]);const S=q(()=>{let e=!1;return d.trim()?v(""):(v(a.required),e=!0),i.trim()?h(""):(h(a.required),e=!0),e},[d,i,a.required]),M=q(async()=>{if(S())return;await D({first_name:d.trim(),last_name:i.trim(),phone_number:u,country:p,dob:f})&&(setTimeout(()=>C(o?.user_id),3e3),k(!0),R({event:"ga4Event",event_name:"lp_button",event_parameters:{position:"earn_credits",button_name:"complete_profile_success",info:"Member Floating Window"}}),x())},[S,D,d,i,u,p,f,C,o,k,x]);return n("div",{className:"flex flex-col gap-[16px]",children:[a.subtitle&&t(g,{className:"text-[14px] text-[#1d1d1f]",html:a.subtitle}),n("div",{children:[t("label",{className:"block text-[14px] font-[700] text-[#1d1d1f]",children:a.email}),t("input",{className:l("mt-[8px] h-[46px] w-full border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]",s?"rounded-[4px]":"rounded-none"),value:o?.email??"",disabled:!0})]}),n("div",{children:[n("label",{className:"block text-[14px] font-[700] text-[#1d1d1f]",children:[a.firstName," ",t("span",{className:"text-[#f84d4f]",children:"*"})]}),t("input",{className:l("mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none",b?"border-[#f84d4f]":"border-[#d8d8d8]",s?"rounded-[4px]":"rounded-none"),value:d,onChange:e=>{P(e.target.value),v("")}}),b&&t(g,{className:"mt-[4px] text-[12px] text-[#f84d4f]",html:b})]}),n("div",{children:[n("label",{className:"block text-[14px] font-[700] text-[#1d1d1f]",children:[a.lastName," ",t("span",{className:"text-[#f84d4f]",children:"*"})]}),t("input",{className:l("mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none",N?"border-[#f84d4f]":"border-[#d8d8d8]",s?"rounded-[4px]":"rounded-none"),value:i,onChange:e=>{w(e.target.value),h("")}}),N&&t(g,{className:"mt-[4px] text-[12px] text-[#f84d4f]",html:N})]}),n("div",{children:[t("label",{className:"block text-[14px] font-[700] text-[#1d1d1f]",children:a.birthday}),t("input",{className:l("mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none",s?"rounded-[4px]":"rounded-none"),type:"date",value:f,onChange:e=>y(e.target.value)})]}),n("div",{children:[t("label",{className:"block text-[14px] font-[700] text-[#1d1d1f]",children:a.phone}),t("input",{className:l("mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none",s?"rounded-[4px]":"rounded-none"),value:u,onChange:e=>E(e.target.value)})]}),n("div",{children:[t("label",{className:"block text-[14px] font-[700] text-[#1d1d1f]",children:a.country}),t("select",{className:l("mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none",s?"rounded-[4px]":"rounded-none"),value:p,onChange:e=>c(e.target.value),children:m.map(e=>t("option",{value:e.id,children:e.name},e.id))})]}),n("div",{className:"flex gap-[12px]",children:[t(L,{variant:"secondary",size:"base",className:"flex-1",onClick:x,disabled:B,children:a.cancel}),t(L,{variant:"primary",size:"base",className:"flex-1",loading:B,onClick:M,children:a.save})]})]})}export{G as default};
|
|
2
2
|
//# sourceMappingURL=CompleteProfilePanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport type { CompleteProfileCopy } from '../../type'\nimport { useUpdateProfile } from './hooks/useUpdateProfile'\nimport useCountries from '../../../credits/context/hooks/useCountries'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n copy: CompleteProfileCopy\n onClose: () => void\n}\n\nexport default function CompleteProfilePanel({ copy, onClose }: Props) {\n const { profile, fetchCreditInfo, alpcConfig, setIsProfileCompleteSuccess } = useMemberPopupContext()\n const { locale } = alpcConfig\n const { brand, storeDomain } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const [firstName, setFirstName] = useState('')\n const [lastName, setLastName] = useState('')\n const [phone, setPhone] = useState('')\n const [birthDay, setBirthDay] = useState('')\n const [country, setCountry] = useState('')\n const [firstNameError, setFirstNameError] = useState('')\n const [lastNameError, setLastNameError] = useState('')\n\n const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })\n const { countries } = useCountries({ shopifyStoreDomain: storeDomain })\n\n useEffect(() => {\n if (profile) {\n setFirstName(profile.first_name ?? '')\n setLastName(profile.last_name ?? '')\n setPhone(profile.phone_number ?? '')\n setBirthDay(profile.dob ?? '')\n setCountry(profile.country?.id ?? '')\n }\n }, [profile])\n\n useEffect(() => {\n if (countries.length > 0 && !country) {\n setCountry(countries[0].id)\n }\n }, [countries])\n\n const validate = useCallback(() => {\n let hasError = false\n if (!firstName.trim()) {\n setFirstNameError(copy.required)\n hasError = true\n } else {\n setFirstNameError('')\n }\n if (!lastName.trim()) {\n setLastNameError(copy.required)\n hasError = true\n } else {\n setLastNameError('')\n }\n return hasError\n }, [firstName, lastName, copy.required])\n\n const handleSubmit = useCallback(async () => {\n if (validate()) return\n const success = await updateProfile({\n first_name: firstName.trim(),\n last_name: lastName.trim(),\n phone_number: phone,\n country,\n dob: birthDay,\n })\n if (success) {\n setTimeout(() => fetchCreditInfo(profile?.user_id), 3000)\n setIsProfileCompleteSuccess(true)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'earn_credits',\n button_name: 'complete_profile_success',\n info: 'Member Floating Window',\n },\n })\n onClose()\n }\n }, [\n validate,\n updateProfile,\n firstName,\n lastName,\n phone,\n country,\n birthDay,\n fetchCreditInfo,\n profile,\n setIsProfileCompleteSuccess,\n onClose,\n ])\n\n return (\n <div className=\"flex flex-col gap-[16px]\">\n {copy.subtitle && <Text className=\"text-[14px] text-[#1d1d1f]\" html={copy.subtitle} />}\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.email}</label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={profile?.email ?? ''}\n disabled\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">\n {copy.firstName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',\n firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={firstName}\n onChange={e => {\n setFirstName(e.target.value)\n setFirstNameError('')\n }}\n />\n {firstNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={firstNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">\n {copy.lastName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',\n lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={lastName}\n onChange={e => {\n setLastName(e.target.value)\n setLastNameError('')\n }}\n />\n {lastNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={lastNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.birthday}</label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n type=\"date\"\n value={birthDay}\n onChange={e => setBirthDay(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.phone}</label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={phone}\n onChange={e => setPhone(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.country}</label>\n <select\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={country}\n onChange={e => setCountry(e.target.value)}\n >\n {countries.map((c: { id: string; name: string }) => (\n <option key={c.id} value={c.id}>\n {c.name}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"flex gap-[12px]\">\n <Button variant=\"secondary\" size=\"
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport type { CompleteProfileCopy } from '../../type'\nimport { useUpdateProfile } from './hooks/useUpdateProfile'\nimport useCountries from '../../../credits/context/hooks/useCountries'\nimport { useMemberPopupContext } from '../../context/provider'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n copy: CompleteProfileCopy\n onClose: () => void\n}\n\nexport default function CompleteProfilePanel({ copy, onClose }: Props) {\n const { profile, fetchCreditInfo, alpcConfig, setIsProfileCompleteSuccess } = useMemberPopupContext()\n const { locale } = alpcConfig\n const { brand, storeDomain } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const [firstName, setFirstName] = useState('')\n const [lastName, setLastName] = useState('')\n const [phone, setPhone] = useState('')\n const [birthDay, setBirthDay] = useState('')\n const [country, setCountry] = useState('')\n const [firstNameError, setFirstNameError] = useState('')\n const [lastNameError, setLastNameError] = useState('')\n\n const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })\n const { countries } = useCountries({ shopifyStoreDomain: storeDomain })\n\n useEffect(() => {\n if (profile) {\n setFirstName(profile.first_name ?? '')\n setLastName(profile.last_name ?? '')\n setPhone(profile.phone_number ?? '')\n setBirthDay(profile.dob ?? '')\n setCountry(profile.country?.id ?? '')\n }\n }, [profile])\n\n useEffect(() => {\n if (countries.length > 0 && !country) {\n setCountry(countries[0].id)\n }\n }, [countries])\n\n const validate = useCallback(() => {\n let hasError = false\n if (!firstName.trim()) {\n setFirstNameError(copy.required)\n hasError = true\n } else {\n setFirstNameError('')\n }\n if (!lastName.trim()) {\n setLastNameError(copy.required)\n hasError = true\n } else {\n setLastNameError('')\n }\n return hasError\n }, [firstName, lastName, copy.required])\n\n const handleSubmit = useCallback(async () => {\n if (validate()) return\n const success = await updateProfile({\n first_name: firstName.trim(),\n last_name: lastName.trim(),\n phone_number: phone,\n country,\n dob: birthDay,\n })\n if (success) {\n setTimeout(() => fetchCreditInfo(profile?.user_id), 3000)\n setIsProfileCompleteSuccess(true)\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n position: 'earn_credits',\n button_name: 'complete_profile_success',\n info: 'Member Floating Window',\n },\n })\n onClose()\n }\n }, [\n validate,\n updateProfile,\n firstName,\n lastName,\n phone,\n country,\n birthDay,\n fetchCreditInfo,\n profile,\n setIsProfileCompleteSuccess,\n onClose,\n ])\n\n return (\n <div className=\"flex flex-col gap-[16px]\">\n {copy.subtitle && <Text className=\"text-[14px] text-[#1d1d1f]\" html={copy.subtitle} />}\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.email}</label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={profile?.email ?? ''}\n disabled\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">\n {copy.firstName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',\n firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={firstName}\n onChange={e => {\n setFirstName(e.target.value)\n setFirstNameError('')\n }}\n />\n {firstNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={firstNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">\n {copy.lastName} <span className=\"text-[#f84d4f]\">*</span>\n </label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',\n lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={lastName}\n onChange={e => {\n setLastName(e.target.value)\n setLastNameError('')\n }}\n />\n {lastNameError && <Text className=\"mt-[4px] text-[12px] text-[#f84d4f]\" html={lastNameError} />}\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.birthday}</label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n type=\"date\"\n value={birthDay}\n onChange={e => setBirthDay(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.phone}</label>\n <input\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={phone}\n onChange={e => setPhone(e.target.value)}\n />\n </div>\n\n <div>\n <label className=\"block text-[14px] font-[700] text-[#1d1d1f]\">{copy.country}</label>\n <select\n className={cn(\n 'mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n value={country}\n onChange={e => setCountry(e.target.value)}\n >\n {countries.map((c: { id: string; name: string }) => (\n <option key={c.id} value={c.id}>\n {c.name}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"flex gap-[12px]\">\n <Button variant=\"secondary\" size=\"base\" className=\"flex-1\" onClick={onClose} disabled={isLoading}>\n {copy.cancel}\n </Button>\n <Button variant=\"primary\" size=\"base\" className=\"flex-1\" loading={isLoading} onClick={handleSubmit}>\n {copy.save}\n </Button>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Button", "Text", "gaTrack", "cn", "useHeadlessContext", "useUpdateProfile", "useCountries", "useMemberPopupContext", "ROUNDED_BRANDS", "CompleteProfilePanel", "copy", "onClose", "profile", "fetchCreditInfo", "alpcConfig", "setIsProfileCompleteSuccess", "locale", "brand", "storeDomain", "rounded", "firstName", "setFirstName", "lastName", "setLastName", "phone", "setPhone", "birthDay", "setBirthDay", "country", "setCountry", "firstNameError", "setFirstNameError", "lastNameError", "setLastNameError", "updateProfile", "isLoading", "countries", "validate", "hasError", "handleSubmit", "c"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useCallback as
|
|
1
|
+
import{jsx as t,jsxs as d}from"react/jsx-runtime";import{useCallback as B,useEffect as D,useState as l}from"react";import{Button as E,Checkbox as I,Text as C}from"@anker-in/headless-ui";import{gaTrack as L,classNames as N,useHeadlessContext as O}from"@anker-in/lib";import c from"js-cookie";import{parse as A}from"query-string";import{emailValidate as H}from"../../../credits/context/utils";import{useMemberPopupContext as R}from"../../context/provider";import{ROUNDED_BRANDS as j}from"../../../../constants";function q(){if(typeof window>"u")return{register_source:""};const{search:e,href:o}=window.location,a=A(e);return{fbuy_ref_code:c.get("fbuy_ref_code"),ref:c.get("ref_ads"),inviter_code:a.ic??a.inviter_code??c.get("inviter_code"),register_source:a.redirect??c.get("reg_source")??o}}function J({copy:e,email:o,onClose:a}){const{alpcConfig:S,setIsSubscribeSuccess:p,fetchCreditInfo:k,profile:m}=R(),{brand:x,locale:b}=S,{brand:w}=O(),T=j.includes(w),[u,g]=l(e.policyDefaultChecked??!1),[i,h]=l(o??""),[n,s]=l(""),[f,_]=l(""),[M,v]=l(!1);D(()=>{o&&h(o)},[o]);const P=B(async()=>{if(s(""),!i)return s("Please fill in your email");if(!H(i))return s("Invalid email address");if(!u)return s("Please agree to the policy");v(!0);const{register_source:r}=q();try{const y=await(await fetch("/api/multipass/subscribe/subscribe_emails",{method:"POST",headers:{"Content-Type":"application/json","current-language":b},body:JSON.stringify({email:i,register_source:r,brand:x,deals_type:e.dealsType??"vip_subscribe"})})).json();y.errors?s(y.errors??"Error occurred"):(_(e.successTips??"Subscribed successfully!"),p(!0),m?.user_id&&setTimeout(()=>k(m.user_id),3e3),L({event:"ga4Event",event_name:"subscribe",event_parameters:{page_group:e.dealsType??"",position:"sticky",info:""}}),setTimeout(()=>{_(""),a()},3e3))}catch{s("Network error")}finally{v(!1)}},[i,u,b,x,e,a,p]);return d("div",{className:"flex flex-col gap-[12px]",children:[d("div",{className:"flex flex-col gap-[8px]",children:[e.title&&t("h2",{className:"text-[24px] font-[700] leading-[1.2] text-[#080a0f]",children:e.title}),e.desc&&t(C,{className:"text-[16px] text-[#1e2024]",html:e.desc})]}),d("div",{className:"flex flex-col gap-[16px]",children:[t("input",{className:N("h-[46px] w-full border px-[14px] text-[16px] outline-none placeholder:text-[#999]",n?"border-[#f84d4f]":"border-[#d8d8d8]",T?"rounded-[4px]":"rounded-none"),placeholder:e.placeholder,value:i,onChange:r=>{s(""),h(r.target.value.trim())}}),d("div",{className:"flex w-full items-start gap-[8px]",children:[t(I,{checked:u,onCheckedChange:()=>g(r=>!r),className:"mt-[2px] border-[#1d1d1f]"}),t("label",{className:"cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline",onClick:()=>g(r=>!r),dangerouslySetInnerHTML:{__html:e.policy??""}})]}),(n||f)&&t("div",{className:N("text-[14px] font-[700]",n&&"text-[#f84d4f]",f&&"text-[#52c41a]"),children:t(C,{html:f||n})}),t(E,{className:"w-full",loading:M,onClick:P,children:e.buttonLabel??"Subscribe"})]})]})}export{J as default};
|
|
2
2
|
//# sourceMappingURL=SubscribeEmailPanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/memberPopup/panels/EarnCredits/SubscribeEmailPanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Checkbox, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport Cookies from 'js-cookie'\nimport { parse } from 'query-string'\nimport { emailValidate } from '../../../credits/context/utils'\nimport { useMemberPopupContext } from '../../context/provider'\nimport type { SubscribeModalCopy } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n copy: SubscribeModalCopy\n email?: string\n onClose: () => void\n}\n\nfunction getAdCookie() {\n if (typeof window === 'undefined') return { register_source: '' }\n const { search, href } = window.location\n const query = parse(search)\n return {\n fbuy_ref_code: Cookies.get('fbuy_ref_code'),\n ref: Cookies.get('ref_ads'),\n inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),\n register_source: query.redirect ?? Cookies.get('reg_source') ?? href,\n }\n}\n\nexport default function SubscribeEmailPanel({ copy, email: initialEmail, onClose }: Props) {\n const { alpcConfig, setIsSubscribeSuccess, fetchCreditInfo, profile } = useMemberPopupContext()\n const { brand, locale } = alpcConfig\n const { brand: headlessBrand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(headlessBrand)\n const [policy, setPolicy] = useState(copy.policyDefaultChecked ?? false)\n const [email, setEmail] = useState(initialEmail ?? '')\n const [errorMessage, setErrorMessage] = useState('')\n const [successMessage, setSuccessMessage] = useState('')\n const [loading, setLoading] = useState(false)\n\n useEffect(() => {\n if (initialEmail) setEmail(initialEmail)\n }, [initialEmail])\n\n const handleSubmit = useCallback(async () => {\n setErrorMessage('')\n if (!email) return setErrorMessage('Please fill in your email')\n if (!emailValidate(email)) return setErrorMessage('Invalid email address')\n if (!policy) return setErrorMessage('Please agree to the policy')\n\n setLoading(true)\n const { register_source } = getAdCookie()\n try {\n const response = await fetch('/api/multipass/subscribe/subscribe_emails', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', 'current-language': locale },\n body: JSON.stringify({\n email,\n register_source,\n brand,\n deals_type: copy.dealsType ?? 'vip_subscribe',\n }),\n })\n const result = await response.json()\n if (!result.errors) {\n setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n setIsSubscribeSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'subscribe',\n event_parameters: {\n page_group: copy.dealsType ?? '',\n position: 'sticky',\n info: '',\n },\n })\n setTimeout(() => {\n setSuccessMessage('')\n onClose()\n }, 3000)\n } else {\n setErrorMessage(result.errors ?? 'Error occurred')\n }\n } catch {\n setErrorMessage('Network error')\n } finally {\n setLoading(false)\n }\n }, [email, policy, locale, brand, copy, onClose, setIsSubscribeSuccess])\n\n return (\n <div className=\"flex flex-col gap-[12px]\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title &&
|
|
5
|
-
"mappings": "AA4FM,
|
|
6
|
-
"names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Checkbox", "Text", "gaTrack", "cn", "useHeadlessContext", "Cookies", "parse", "emailValidate", "useMemberPopupContext", "ROUNDED_BRANDS", "getAdCookie", "search", "href", "query", "SubscribeEmailPanel", "copy", "initialEmail", "onClose", "alpcConfig", "setIsSubscribeSuccess", "fetchCreditInfo", "profile", "brand", "locale", "headlessBrand", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "result", "e", "v"]
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useState } from 'react'\nimport { Button, Checkbox, Text } from '@anker-in/headless-ui'\nimport { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'\nimport Cookies from 'js-cookie'\nimport { parse } from 'query-string'\nimport { emailValidate } from '../../../credits/context/utils'\nimport { useMemberPopupContext } from '../../context/provider'\nimport type { SubscribeModalCopy } from '../../type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\ntype Props = {\n copy: SubscribeModalCopy\n email?: string\n onClose: () => void\n}\n\nfunction getAdCookie() {\n if (typeof window === 'undefined') return { register_source: '' }\n const { search, href } = window.location\n const query = parse(search)\n return {\n fbuy_ref_code: Cookies.get('fbuy_ref_code'),\n ref: Cookies.get('ref_ads'),\n inviter_code: query.ic ?? query.inviter_code ?? Cookies.get('inviter_code'),\n register_source: query.redirect ?? Cookies.get('reg_source') ?? href,\n }\n}\n\nexport default function SubscribeEmailPanel({ copy, email: initialEmail, onClose }: Props) {\n const { alpcConfig, setIsSubscribeSuccess, fetchCreditInfo, profile } = useMemberPopupContext()\n const { brand, locale } = alpcConfig\n const { brand: headlessBrand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(headlessBrand)\n const [policy, setPolicy] = useState(copy.policyDefaultChecked ?? false)\n const [email, setEmail] = useState(initialEmail ?? '')\n const [errorMessage, setErrorMessage] = useState('')\n const [successMessage, setSuccessMessage] = useState('')\n const [loading, setLoading] = useState(false)\n\n useEffect(() => {\n if (initialEmail) setEmail(initialEmail)\n }, [initialEmail])\n\n const handleSubmit = useCallback(async () => {\n setErrorMessage('')\n if (!email) return setErrorMessage('Please fill in your email')\n if (!emailValidate(email)) return setErrorMessage('Invalid email address')\n if (!policy) return setErrorMessage('Please agree to the policy')\n\n setLoading(true)\n const { register_source } = getAdCookie()\n try {\n const response = await fetch('/api/multipass/subscribe/subscribe_emails', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', 'current-language': locale },\n body: JSON.stringify({\n email,\n register_source,\n brand,\n deals_type: copy.dealsType ?? 'vip_subscribe',\n }),\n })\n const result = await response.json()\n if (!result.errors) {\n setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')\n setIsSubscribeSuccess(true)\n if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)\n gaTrack({\n event: 'ga4Event',\n event_name: 'subscribe',\n event_parameters: {\n page_group: copy.dealsType ?? '',\n position: 'sticky',\n info: '',\n },\n })\n setTimeout(() => {\n setSuccessMessage('')\n onClose()\n }, 3000)\n } else {\n setErrorMessage(result.errors ?? 'Error occurred')\n }\n } catch {\n setErrorMessage('Network error')\n } finally {\n setLoading(false)\n }\n }, [email, policy, locale, brand, copy, onClose, setIsSubscribeSuccess])\n\n return (\n <div className=\"flex flex-col gap-[12px]\">\n <div className=\"flex flex-col gap-[8px]\">\n {copy.title && <h2 className=\"text-[24px] font-[700] leading-[1.2] text-[#080a0f]\">{copy.title}</h2>}\n {copy.desc && <Text className=\"text-[16px] text-[#1e2024]\" html={copy.desc} />}\n </div>\n\n <div className=\"flex flex-col gap-[16px]\">\n <input\n className={cn(\n 'h-[46px] w-full border px-[14px] text-[16px] outline-none placeholder:text-[#999]',\n errorMessage ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',\n rounded ? 'rounded-[4px]' : 'rounded-none'\n )}\n placeholder={copy.placeholder}\n value={email}\n onChange={e => {\n setErrorMessage('')\n setEmail(e.target.value.trim())\n }}\n />\n\n <div className=\"flex w-full items-start gap-[8px]\">\n <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className=\"mt-[2px] border-[#1d1d1f]\" />\n <label\n className=\"cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline\"\n onClick={() => setPolicy(v => !v)}\n dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}\n />\n </div>\n\n {(errorMessage || successMessage) && (\n <div\n className={cn(\n 'text-[14px] font-[700]',\n errorMessage && 'text-[#f84d4f]',\n successMessage && 'text-[#52c41a]'\n )}\n >\n <Text html={successMessage || errorMessage} />\n </div>\n )}\n\n <Button className=\"w-full\" loading={loading} onClick={handleSubmit}>\n {copy.buttonLabel ?? 'Subscribe'}\n </Button>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "useCallback", "useEffect", "useState", "Button", "Checkbox", "Text", "gaTrack", "cn", "useHeadlessContext", "Cookies", "parse", "emailValidate", "useMemberPopupContext", "ROUNDED_BRANDS", "getAdCookie", "search", "href", "query", "SubscribeEmailPanel", "copy", "initialEmail", "onClose", "alpcConfig", "setIsSubscribeSuccess", "fetchCreditInfo", "profile", "brand", "locale", "headlessBrand", "rounded", "policy", "setPolicy", "email", "setEmail", "errorMessage", "setErrorMessage", "successMessage", "setSuccessMessage", "loading", "setLoading", "handleSubmit", "register_source", "result", "e", "v"]
|
|
7
7
|
}
|