@anker-in/campaign-ui 0.5.7-beta.7 → 0.5.7-beta.8
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/registration/authCodeActivate/index.js +1 -1
- package/dist/cjs/components/registration/authCodeActivate/index.js.map +2 -2
- package/dist/esm/components/registration/authCodeActivate/index.js +1 -1
- package/dist/esm/components/registration/authCodeActivate/index.js.map +2 -2
- package/package.json +1 -1
- package/src/components/registration/authCodeActivate/index.tsx +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var M=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var y=(e,i)=>{for(var g in i)M(e,g,{get:i[g],enumerable:!0})},ee=(e,i,g,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of Y(i))!Z.call(e,r)&&r!==g&&M(e,r,{get:()=>i[r],enumerable:!(l=X(i,r))||l.enumerable});return e};var te=e=>ee(M({},"__esModule",{value:!0}),e);var ne={};y(ne,{AuthCodeActivate:()=>ae});module.exports=te(ne);var n=require("react/jsx-runtime"),c=require("@anker-in/headless-ui"),o=require("@anker-in/lib"),s=require("react"),V=require("./Message"),B=require("../context"),$=require("../modalContainer"),F=require("../../../constants");const ae=({copy:e})=>{const{locale:i,brand:g}=(0,o.useHeadlessContext)(),{email:l,authCodeActivate:r}=(0,B.useRegistration)(),O=F.ROUNDED_BRANDS.includes(g),{activeToken:w,setActiveToken:P,setIsSendingActivateEmail:D,setIsActivateSuccess:j,onAuthSuccess:v,autoSendEmail:I}=r,{isMutating:z,trigger:K}=(0,o.useEmailValidation)(),{isMutating:N,trigger:C,data:_}=(0,o.useSendEmailValidation)(),[U,f]=(0,s.useState)(""),[q,p]=(0,s.useState)(""),{startCountDown:R,startAction:H,countDown:G}=(0,o.useCountDown)(60),[L,b]=(0,s.useState)(""),[S,h]=(0,s.useState)(0),[u,T]=(0,s.useState)(new Array(6).fill("")),A=(0,s.useRef)([]),E=u.join("");(0,s.useEffect)(()=>{A.current[S]&&A.current[S].focus()},[S]),(0,s.useEffect)(()=>{const d=_?.data?.data?.active_token??_?.data?.active_token;d&&P(d)},[_?.data?.data?.active_token,_?.data?.active_token]),(0,s.useEffect)(()=>{D(N)},[N,D]),(0,s.useEffect)(()=>{I&&l&&C({email:l,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{p("success"),f(e?.sendEmailSuccessMessage||""),H(),setTimeout(()=>{p(""),f("")},5e3)}})},[I,l,C]);const J=(0,s.useCallback)(async()=>{l&&(await C({email:l,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{p("success"),f(e?.sendEmailSuccessMessage||""),H(),setTimeout(()=>{p(""),f("")},5e3)}}),(0,o.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[l,C]),Q=(d,t)=>{const{value:a}=d.target;if(b(""),Number.isNaN(Number(a)))return;if(a.length>1){t<u.length-1&&(u[t+1]||(h(t+1),T(x=>{const k=[...x];return k[t]=a[0],a.length>1&&(k[t+1]=a[1]),k})));return}const m=[...u];m[t]=a,T(m),a?t<u.length-1&&!u[t+1]&&h(t+1):t>0&&h(t-1)},W=(0,s.useCallback)(async()=>{if(!E?.length){b(e?.codeEmptyError||"");return}if(E.length<6){b(e?.incorrectCodeError||"");return}w&&await K({token:w,code:E},{onSuccess:t=>{if(t.status>=200&&t.status<300)p("success"),f(e?.authSuccessMessage||""),j(!0),v?v():setTimeout(()=>{r.close(),window.location.reload()},3e3);else{const a=t?.data?.error_code??t?.error_code;a==="104"?v?v():setTimeout(()=>{r.close(),window.location.reload()},3e3):b(a==="142"?e?.incorrectCodeError||"Invalid verification code.":a==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let d=setTimeout(()=>{p(""),f(""),clearTimeout(d)},5e3);(0,o.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active"}})},[E,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,i,w]);return(0,n.jsx)($.RegistrationModalContainer,{isOpen:r.isOpen,onClose:r.close,children:(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)(c.Text,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:e?.authCodeTitle}),(0,n.jsx)(c.Text,{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%",l||"")})]}),(0,n.jsxs)("div",{className:"mt-6",children:[(0,n.jsx)(c.Text,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:e?.enterActiveCodeText}),(0,n.jsx)("div",{className:"my-3 grid grid-cols-6 gap-2",children:u.map((d,t)=>(0,n.jsx)("div",{className:"col-span-1 aspect-1 text-[#555]",children:(0,n.jsx)("input",{ref:a=>{a&&(A.current[t]=a)},type:"tel",className:(0,o.classNames)("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",O&&"rounded-[12px]"),value:d,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:a=>Q(a,t),onFocus:()=>{h(t)},onPaste:a=>{const m=a.clipboardData.getData("text");if(!Number.isNaN(Number(m))){const x=m.split("").slice(0,6);T(x.concat(Array(6-x.length).fill(""))),x.length<=u.length&&h(x.length-1)}},onKeyDown:a=>{const{value:m}=a.target;a.key==="Backspace"&&!m&&t>0&&h(t-1)}},t)},t))}),L&&(0,n.jsx)(c.Text,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:L}),e?.authCodeContent&&(0,n.jsx)("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}})]}),(0,n.jsxs)("div",{className:"mt-4 min-l:mt-6",children:[(0,n.jsx)(c.Text,{className:"text-base font-semibold leading-[100%] text-[#333]",html:e?.authCodeReceiveText})," ",R?(0,n.jsx)(c.Text,{html:e?.retrieveText?.replace("%countdownTime%",G.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):(0,n.jsx)(c.Text,{onClick:J,className:(0,o.classNames)("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":R||N}),html:e?.sendAgainText}),(0,n.jsx)(c.Button,{type:"submit",loading:z,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",onClick:W,children:e.buttonText})]}),(0,n.jsx)(V.Message,{status:q,message:U})]})})};
|
|
1
|
+
"use strict";var M=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var y=(e,i)=>{for(var g in i)M(e,g,{get:i[g],enumerable:!0})},ee=(e,i,g,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of Y(i))!Z.call(e,r)&&r!==g&&M(e,r,{get:()=>i[r],enumerable:!(l=X(i,r))||l.enumerable});return e};var te=e=>ee(M({},"__esModule",{value:!0}),e);var ne={};y(ne,{AuthCodeActivate:()=>ae});module.exports=te(ne);var n=require("react/jsx-runtime"),c=require("@anker-in/headless-ui"),o=require("@anker-in/lib"),s=require("react"),V=require("./Message"),B=require("../context"),$=require("../modalContainer"),F=require("../../../constants");const ae=({copy:e})=>{const{locale:i,brand:g}=(0,o.useHeadlessContext)(),{email:l,authCodeActivate:r}=(0,B.useRegistration)(),O=F.ROUNDED_BRANDS.includes(g),{activeToken:w,setActiveToken:P,setIsSendingActivateEmail:D,setIsActivateSuccess:j,onAuthSuccess:v,autoSendEmail:I}=r,{isMutating:z,trigger:K}=(0,o.useEmailValidation)(),{isMutating:N,trigger:C,data:_}=(0,o.useSendEmailValidation)(),[U,f]=(0,s.useState)(""),[q,p]=(0,s.useState)(""),{startCountDown:R,startAction:H,countDown:G}=(0,o.useCountDown)(60),[L,b]=(0,s.useState)(""),[S,h]=(0,s.useState)(0),[u,T]=(0,s.useState)(new Array(6).fill("")),A=(0,s.useRef)([]),E=u.join("");(0,s.useEffect)(()=>{A.current[S]&&A.current[S].focus()},[S]),(0,s.useEffect)(()=>{const d=_?.data?.data?.active_token??_?.data?.active_token;d&&P(d)},[_?.data?.data?.active_token,_?.data?.active_token]),(0,s.useEffect)(()=>{D(N)},[N,D]),(0,s.useEffect)(()=>{I&&l&&C({email:l,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{p("success"),f(e?.sendEmailSuccessMessage||""),H(),setTimeout(()=>{p(""),f("")},5e3)}})},[I,l,C]);const J=(0,s.useCallback)(async()=>{l&&(await C({email:l,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{p("success"),f(e?.sendEmailSuccessMessage||""),H(),setTimeout(()=>{p(""),f("")},5e3)}}),(0,o.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[l,C]),Q=(d,t)=>{const{value:a}=d.target;if(b(""),Number.isNaN(Number(a)))return;if(a.length>1){t<u.length-1&&(u[t+1]||(h(t+1),T(x=>{const k=[...x];return k[t]=a[0],a.length>1&&(k[t+1]=a[1]),k})));return}const m=[...u];m[t]=a,T(m),a?t<u.length-1&&!u[t+1]&&h(t+1):t>0&&h(t-1)},W=(0,s.useCallback)(async()=>{if(!E?.length){b(e?.codeEmptyError||"");return}if(E.length<6){b(e?.incorrectCodeError||"");return}w&&await K({token:w,code:E},{onSuccess:t=>{if(t.status>=200&&t.status<300||t.user_id)p("success"),f(e?.authSuccessMessage||""),j(!0),v?v():setTimeout(()=>{r.close(),window.location.reload()},3e3);else{const a=t?.data?.error_code??t?.error_code;a==="104"?v?v():setTimeout(()=>{r.close(),window.location.reload()},3e3):b(a==="142"?e?.incorrectCodeError||"Invalid verification code.":a==="154"?e?.expiredCodeMessage||"":e?.sendEmailErrorMessage||"")}}});let d=setTimeout(()=>{p(""),f(""),clearTimeout(d)},5e3);(0,o.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active"}})},[E,e?.codeEmptyError,e?.authSuccessMessage,e?.incorrectCodeError,e?.expiredCodeMessage,e?.sendEmailErrorMessage,i,w]);return(0,n.jsx)($.RegistrationModalContainer,{isOpen:r.isOpen,onClose:r.close,children:(0,n.jsxs)("div",{className:"relative",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)(c.Text,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:e?.authCodeTitle}),(0,n.jsx)(c.Text,{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%",l||"")})]}),(0,n.jsxs)("div",{className:"mt-6",children:[(0,n.jsx)(c.Text,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:e?.enterActiveCodeText}),(0,n.jsx)("div",{className:"my-3 grid grid-cols-6 gap-2",children:u.map((d,t)=>(0,n.jsx)("div",{className:"col-span-1 aspect-1 text-[#555]",children:(0,n.jsx)("input",{ref:a=>{a&&(A.current[t]=a)},type:"tel",className:(0,o.classNames)("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",O&&"rounded-[12px]"),value:d,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:a=>Q(a,t),onFocus:()=>{h(t)},onPaste:a=>{const m=a.clipboardData.getData("text");if(!Number.isNaN(Number(m))){const x=m.split("").slice(0,6);T(x.concat(Array(6-x.length).fill(""))),x.length<=u.length&&h(x.length-1)}},onKeyDown:a=>{const{value:m}=a.target;a.key==="Backspace"&&!m&&t>0&&h(t-1)}},t)},t))}),L&&(0,n.jsx)(c.Text,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:L}),e?.authCodeContent&&(0,n.jsx)("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}})]}),(0,n.jsxs)("div",{className:"mt-4 min-l:mt-6",children:[(0,n.jsx)(c.Text,{className:"text-base font-semibold leading-[100%] text-[#333]",html:e?.authCodeReceiveText})," ",R?(0,n.jsx)(c.Text,{html:e?.retrieveText?.replace("%countdownTime%",G.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):(0,n.jsx)(c.Text,{onClick:J,className:(0,o.classNames)("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":R||N}),html:e?.sendAgainText}),(0,n.jsx)(c.Button,{type:"submit",loading:z,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",onClick:W,children:e.buttonText})]}),(0,n.jsx)(V.Message,{status:q,message:U})]})})};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/registration/authCodeActivate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { 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 React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Message } from './Message'\nimport { AuthCodeActivateProps } from './type'\nimport { useRegistration } from '../context'\nimport { RegistrationModalContainer } from '../modalContainer'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {\n const { locale, brand } = useHeadlessContext()\n const { email, authCodeActivate } = useRegistration()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =\n authCodeActivate\n\n const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()\n\n const {\n isMutating: isSendingEmail,\n trigger: triggerSendValidationEmail,\n data: sendEmailData,\n } = useSendEmailValidation()\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 const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token\n if (token) {\n setActiveToken(token)\n }\n }, [sendEmailData?.data?.data?.active_token, sendEmailData?.data?.active_token])\n\n useEffect(() => {\n setIsSendingActivateEmail(isSendingEmail)\n }, [isSendingEmail, setIsSendingActivateEmail])\n\n // \u81EA\u52A8\u53D1\u9001\u90AE\u7BB1\u9A8C\u8BC1\u7801\n useEffect(() => {\n if (autoSendEmail && 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 }, [autoSendEmail, email, triggerSendValidationEmail])\n\n const handleSendAgain = useCallback(async () => {\n if (!email) return\n // \u53D1\u8D77\u7F51\u7EDC\u8BF7\u6C42\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 if (activeToken) {\n await triggerEmailValidation(\n {\n token: activeToken,\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 (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\n } else {\n const errorCode = data?.data?.error_code ?? data?.error_code\n if (errorCode === '104') {\n if (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\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 // \u8BBE\u7F6E\u5B9A\u65F6\u5668\u6E05\u9664\u72B6\u6001\u4FE1\u606F\n let timer = setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n clearTimeout(timer)\n }, 5000)\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: 'check_and_active',\n },\n })\n }, [\n code,\n copy?.codeEmptyError,\n copy?.authSuccessMessage,\n copy?.incorrectCodeError,\n copy?.expiredCodeMessage,\n copy?.sendEmailErrorMessage,\n locale,\n activeToken,\n ])\n\n return (\n <RegistrationModalContainer isOpen={authCodeActivate.isOpen} onClose={authCodeActivate.close}>\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 </RegistrationModalContainer>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { 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 React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Message } from './Message'\nimport { AuthCodeActivateProps } from './type'\nimport { useRegistration } from '../context'\nimport { RegistrationModalContainer } from '../modalContainer'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {\n const { locale, brand } = useHeadlessContext()\n const { email, authCodeActivate } = useRegistration()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =\n authCodeActivate\n\n const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()\n\n const {\n isMutating: isSendingEmail,\n trigger: triggerSendValidationEmail,\n data: sendEmailData,\n } = useSendEmailValidation()\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 const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token\n if (token) {\n setActiveToken(token)\n }\n }, [sendEmailData?.data?.data?.active_token, sendEmailData?.data?.active_token])\n\n useEffect(() => {\n setIsSendingActivateEmail(isSendingEmail)\n }, [isSendingEmail, setIsSendingActivateEmail])\n\n // \u81EA\u52A8\u53D1\u9001\u90AE\u7BB1\u9A8C\u8BC1\u7801\n useEffect(() => {\n if (autoSendEmail && 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 }, [autoSendEmail, email, triggerSendValidationEmail])\n\n const handleSendAgain = useCallback(async () => {\n if (!email) return\n // \u53D1\u8D77\u7F51\u7EDC\u8BF7\u6C42\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 if (activeToken) {\n await triggerEmailValidation(\n {\n token: activeToken,\n code: code,\n },\n {\n onSuccess: data => {\n if ((data.status >= 200 && data.status < 300) || data.user_id) {\n setMessageStatus('success')\n setMessageText(copy?.authSuccessMessage || '')\n setIsActivateSuccess(true)\n if (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\n } else {\n const errorCode = data?.data?.error_code ?? data?.error_code\n if (errorCode === '104') {\n if (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\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 // \u8BBE\u7F6E\u5B9A\u65F6\u5668\u6E05\u9664\u72B6\u6001\u4FE1\u606F\n let timer = setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n clearTimeout(timer)\n }, 5000)\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: 'check_and_active',\n },\n })\n }, [\n code,\n copy?.codeEmptyError,\n copy?.authSuccessMessage,\n copy?.incorrectCodeError,\n copy?.expiredCodeMessage,\n copy?.sendEmailErrorMessage,\n locale,\n activeToken,\n ])\n\n return (\n <RegistrationModalContainer isOpen={authCodeActivate.isOpen} onClose={authCodeActivate.close}>\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 </RegistrationModalContainer>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["authCodeActivate_exports", "__export", "AuthCodeActivate", "__toCommonJS", "import_jsx_runtime", "import_headless_ui", "import_lib", "import_react", "import_Message", "import_context", "import_modalContainer", "import_constants", "copy", "locale", "brand", "email", "authCodeActivate", "rounded", "activeToken", "setActiveToken", "setIsSendingActivateEmail", "setIsActivateSuccess", "onAuthSuccess", "autoSendEmail", "emailValidationLoading", "triggerEmailValidation", "isSendingEmail", "triggerSendValidationEmail", "sendEmailData", "messageText", "setMessageText", "messageStatus", "setMessageStatus", "isStartCountDown", "startCountDown", "countDown", "error", "setError", "focusIndex", "setFocusIndex", "codeArray", "setCodeArray", "inputRefs", "code", "token", "handleSendAgain", "handleInputCodeChange", "event", "index", "value", "old", "newCode", "handleAuthCodeSubmit", "data", "errorCode", "timer", "item", "inputRef", "cn", "paste", "pastedCode"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n,jsxs as _}from"react/jsx-runtime";import{Button as W,Text as l}from"@anker-in/headless-ui";import{useSendEmailValidation as X,gaTrack as H,classNames as L,useHeadlessContext as Y,useEmailValidation as Z,useCountDown as y}from"@anker-in/lib";import{useCallback as V,useEffect as C,useRef as ee,useState as p}from"react";import{Message as te}from"./Message";import{useRegistration as ae}from"../context";import{RegistrationModalContainer as ne}from"../modalContainer";import{ROUNDED_BRANDS as se}from"../../../constants";const pe=({copy:t})=>{const{locale:B,brand:$}=Y(),{email:i,authCodeActivate:f}=ae(),F=se.includes($),{activeToken:E,setActiveToken:O,setIsSendingActivateEmail:k,setIsActivateSuccess:P,onAuthSuccess:b,autoSendEmail:M}=f,{isMutating:j,trigger:z}=Z(),{isMutating:w,trigger:h,data:x}=X(),[K,c]=p(""),[U,u]=p(""),{startCountDown:D,startAction:I,countDown:q}=y(60),[R,d]=p(""),[N,m]=p(0),[s,S]=p(new Array(6).fill("")),T=ee([]),v=s.join("");C(()=>{T.current[N]&&T.current[N].focus()},[N]),C(()=>{const o=x?.data?.data?.active_token??x?.data?.active_token;o&&O(o)},[x?.data?.data?.active_token,x?.data?.active_token]),C(()=>{k(w)},[w,k]),C(()=>{M&&i&&h({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),c(t?.sendEmailSuccessMessage||""),I(),setTimeout(()=>{u(""),c("")},5e3)}})},[M,i,h]);const G=V(async()=>{i&&(await h({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),c(t?.sendEmailSuccessMessage||""),I(),setTimeout(()=>{u(""),c("")},5e3)}}),H({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,h]),J=(o,e)=>{const{value:a}=o.target;if(d(""),Number.isNaN(Number(a)))return;if(a.length>1){e<s.length-1&&(s[e+1]||(m(e+1),S(g=>{const A=[...g];return A[e]=a[0],a.length>1&&(A[e+1]=a[1]),A})));return}const r=[...s];r[e]=a,S(r),a?e<s.length-1&&!s[e+1]&&m(e+1):e>0&&m(e-1)},Q=V(async()=>{if(!v?.length){d(t?.codeEmptyError||"");return}if(v.length<6){d(t?.incorrectCodeError||"");return}E&&await z({token:E,code:v},{onSuccess:e=>{if(e.status>=200&&e.status<300)u("success"),c(t?.authSuccessMessage||""),P(!0),b?b():setTimeout(()=>{f.close(),window.location.reload()},3e3);else{const a=e?.data?.error_code??e?.error_code;a==="104"?b?b():setTimeout(()=>{f.close(),window.location.reload()},3e3):d(a==="142"?t?.incorrectCodeError||"Invalid verification code.":a==="154"?t?.expiredCodeMessage||"":t?.sendEmailErrorMessage||"")}}});let o=setTimeout(()=>{u(""),c(""),clearTimeout(o)},5e3);H({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active"}})},[v,t?.codeEmptyError,t?.authSuccessMessage,t?.incorrectCodeError,t?.expiredCodeMessage,t?.sendEmailErrorMessage,B,E]);return n(ne,{isOpen:f.isOpen,onClose:f.close,children:_("div",{className:"relative",children:[_("div",{children:[n(l,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:t?.authCodeTitle}),n(l,{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:t?.authCodeDesc?.replace("%email%",i||"")})]}),_("div",{className:"mt-6",children:[n(l,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:t?.enterActiveCodeText}),n("div",{className:"my-3 grid grid-cols-6 gap-2",children:s.map((o,e)=>n("div",{className:"col-span-1 aspect-1 text-[#555]",children:n("input",{ref:a=>{a&&(T.current[e]=a)},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",F&&"rounded-[12px]"),value:o,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:a=>J(a,e),onFocus:()=>{m(e)},onPaste:a=>{const r=a.clipboardData.getData("text");if(!Number.isNaN(Number(r))){const g=r.split("").slice(0,6);S(g.concat(Array(6-g.length).fill(""))),g.length<=s.length&&m(g.length-1)}},onKeyDown:a=>{const{value:r}=a.target;a.key==="Backspace"&&!r&&e>0&&m(e-1)}},e)},e))}),R&&n(l,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:R}),t?.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:t?.authCodeContent}})]}),_("div",{className:"mt-4 min-l:mt-6",children:[n(l,{className:"text-base font-semibold leading-[100%] text-[#333]",html:t?.authCodeReceiveText})," ",D?n(l,{html:t?.retrieveText?.replace("%countdownTime%",q.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(l,{onClick:G,className:L("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":D||w}),html:t?.sendAgainText}),n(W,{type:"submit",loading:j,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",onClick:Q,children:t.buttonText})]}),n(te,{status:U,message:K})]})})};export{pe as AuthCodeActivate};
|
|
1
|
+
import{jsx as n,jsxs as _}from"react/jsx-runtime";import{Button as W,Text as l}from"@anker-in/headless-ui";import{useSendEmailValidation as X,gaTrack as H,classNames as L,useHeadlessContext as Y,useEmailValidation as Z,useCountDown as y}from"@anker-in/lib";import{useCallback as V,useEffect as C,useRef as ee,useState as p}from"react";import{Message as te}from"./Message";import{useRegistration as ae}from"../context";import{RegistrationModalContainer as ne}from"../modalContainer";import{ROUNDED_BRANDS as se}from"../../../constants";const pe=({copy:t})=>{const{locale:B,brand:$}=Y(),{email:i,authCodeActivate:f}=ae(),F=se.includes($),{activeToken:E,setActiveToken:O,setIsSendingActivateEmail:k,setIsActivateSuccess:P,onAuthSuccess:b,autoSendEmail:M}=f,{isMutating:j,trigger:z}=Z(),{isMutating:w,trigger:h,data:x}=X(),[K,c]=p(""),[U,u]=p(""),{startCountDown:D,startAction:I,countDown:q}=y(60),[R,d]=p(""),[N,m]=p(0),[s,S]=p(new Array(6).fill("")),T=ee([]),v=s.join("");C(()=>{T.current[N]&&T.current[N].focus()},[N]),C(()=>{const o=x?.data?.data?.active_token??x?.data?.active_token;o&&O(o)},[x?.data?.data?.active_token,x?.data?.active_token]),C(()=>{k(w)},[w,k]),C(()=>{M&&i&&h({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),c(t?.sendEmailSuccessMessage||""),I(),setTimeout(()=>{u(""),c("")},5e3)}})},[M,i,h]);const G=V(async()=>{i&&(await h({email:i,data:{redirect_url:`${window?.location?.origin}${window?.location?.pathname}`}},{onSuccess:()=>{u("success"),c(t?.sendEmailSuccessMessage||""),I(),setTimeout(()=>{u(""),c("")},5e3)}}),H({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"sent_again"}}))},[i,h]),J=(o,e)=>{const{value:a}=o.target;if(d(""),Number.isNaN(Number(a)))return;if(a.length>1){e<s.length-1&&(s[e+1]||(m(e+1),S(g=>{const A=[...g];return A[e]=a[0],a.length>1&&(A[e+1]=a[1]),A})));return}const r=[...s];r[e]=a,S(r),a?e<s.length-1&&!s[e+1]&&m(e+1):e>0&&m(e-1)},Q=V(async()=>{if(!v?.length){d(t?.codeEmptyError||"");return}if(v.length<6){d(t?.incorrectCodeError||"");return}E&&await z({token:E,code:v},{onSuccess:e=>{if(e.status>=200&&e.status<300||e.user_id)u("success"),c(t?.authSuccessMessage||""),P(!0),b?b():setTimeout(()=>{f.close(),window.location.reload()},3e3);else{const a=e?.data?.error_code??e?.error_code;a==="104"?b?b():setTimeout(()=>{f.close(),window.location.reload()},3e3):d(a==="142"?t?.incorrectCodeError||"Invalid verification code.":a==="154"?t?.expiredCodeMessage||"":t?.sendEmailErrorMessage||"")}}});let o=setTimeout(()=>{u(""),c(""),clearTimeout(o)},5e3);H({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:"reg_sub_pop",position:"auth_code",button_name:"check_and_active"}})},[v,t?.codeEmptyError,t?.authSuccessMessage,t?.incorrectCodeError,t?.expiredCodeMessage,t?.sendEmailErrorMessage,B,E]);return n(ne,{isOpen:f.isOpen,onClose:f.close,children:_("div",{className:"relative",children:[_("div",{children:[n(l,{className:"text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]",html:t?.authCodeTitle}),n(l,{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:t?.authCodeDesc?.replace("%email%",i||"")})]}),_("div",{className:"mt-6",children:[n(l,{className:"mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6",html:t?.enterActiveCodeText}),n("div",{className:"my-3 grid grid-cols-6 gap-2",children:s.map((o,e)=>n("div",{className:"col-span-1 aspect-1 text-[#555]",children:n("input",{ref:a=>{a&&(T.current[e]=a)},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",F&&"rounded-[12px]"),value:o,autoComplete:"false",autoCorrect:"false",spellCheck:"false",autoCapitalize:"false",onChange:a=>J(a,e),onFocus:()=>{m(e)},onPaste:a=>{const r=a.clipboardData.getData("text");if(!Number.isNaN(Number(r))){const g=r.split("").slice(0,6);S(g.concat(Array(6-g.length).fill(""))),g.length<=s.length&&m(g.length-1)}},onKeyDown:a=>{const{value:r}=a.target;a.key==="Backspace"&&!r&&e>0&&m(e-1)}},e)},e))}),R&&n(l,{className:"mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]",html:R}),t?.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:t?.authCodeContent}})]}),_("div",{className:"mt-4 min-l:mt-6",children:[n(l,{className:"text-base font-semibold leading-[100%] text-[#333]",html:t?.authCodeReceiveText})," ",D?n(l,{html:t?.retrieveText?.replace("%countdownTime%",q.toString()),className:"cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"}):n(l,{onClick:G,className:L("cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline",{"pointer-events-none":D||w}),html:t?.sendAgainText}),n(W,{type:"submit",loading:j,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",onClick:Q,children:t.buttonText})]}),n(te,{status:U,message:K})]})})};export{pe as AuthCodeActivate};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/registration/authCodeActivate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { 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 React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Message } from './Message'\nimport { AuthCodeActivateProps } from './type'\nimport { useRegistration } from '../context'\nimport { RegistrationModalContainer } from '../modalContainer'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {\n const { locale, brand } = useHeadlessContext()\n const { email, authCodeActivate } = useRegistration()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =\n authCodeActivate\n\n const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()\n\n const {\n isMutating: isSendingEmail,\n trigger: triggerSendValidationEmail,\n data: sendEmailData,\n } = useSendEmailValidation()\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 const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token\n if (token) {\n setActiveToken(token)\n }\n }, [sendEmailData?.data?.data?.active_token, sendEmailData?.data?.active_token])\n\n useEffect(() => {\n setIsSendingActivateEmail(isSendingEmail)\n }, [isSendingEmail, setIsSendingActivateEmail])\n\n // \u81EA\u52A8\u53D1\u9001\u90AE\u7BB1\u9A8C\u8BC1\u7801\n useEffect(() => {\n if (autoSendEmail && 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 }, [autoSendEmail, email, triggerSendValidationEmail])\n\n const handleSendAgain = useCallback(async () => {\n if (!email) return\n // \u53D1\u8D77\u7F51\u7EDC\u8BF7\u6C42\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 if (activeToken) {\n await triggerEmailValidation(\n {\n token: activeToken,\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 (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\n } else {\n const errorCode = data?.data?.error_code ?? data?.error_code\n if (errorCode === '104') {\n if (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\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 // \u8BBE\u7F6E\u5B9A\u65F6\u5668\u6E05\u9664\u72B6\u6001\u4FE1\u606F\n let timer = setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n clearTimeout(timer)\n }, 5000)\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: 'check_and_active',\n },\n })\n }, [\n code,\n copy?.codeEmptyError,\n copy?.authSuccessMessage,\n copy?.incorrectCodeError,\n copy?.expiredCodeMessage,\n copy?.sendEmailErrorMessage,\n locale,\n activeToken,\n ])\n\n return (\n <RegistrationModalContainer isOpen={authCodeActivate.isOpen} onClose={authCodeActivate.close}>\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 </RegistrationModalContainer>\n )\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { 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 React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { Message } from './Message'\nimport { AuthCodeActivateProps } from './type'\nimport { useRegistration } from '../context'\nimport { RegistrationModalContainer } from '../modalContainer'\nimport { ROUNDED_BRANDS } from '../../../constants'\n\nexport const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {\n const { locale, brand } = useHeadlessContext()\n const { email, authCodeActivate } = useRegistration()\n const rounded = ROUNDED_BRANDS.includes(brand)\n\n const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =\n authCodeActivate\n\n const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()\n\n const {\n isMutating: isSendingEmail,\n trigger: triggerSendValidationEmail,\n data: sendEmailData,\n } = useSendEmailValidation()\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 const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token\n if (token) {\n setActiveToken(token)\n }\n }, [sendEmailData?.data?.data?.active_token, sendEmailData?.data?.active_token])\n\n useEffect(() => {\n setIsSendingActivateEmail(isSendingEmail)\n }, [isSendingEmail, setIsSendingActivateEmail])\n\n // \u81EA\u52A8\u53D1\u9001\u90AE\u7BB1\u9A8C\u8BC1\u7801\n useEffect(() => {\n if (autoSendEmail && 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 }, [autoSendEmail, email, triggerSendValidationEmail])\n\n const handleSendAgain = useCallback(async () => {\n if (!email) return\n // \u53D1\u8D77\u7F51\u7EDC\u8BF7\u6C42\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 if (activeToken) {\n await triggerEmailValidation(\n {\n token: activeToken,\n code: code,\n },\n {\n onSuccess: data => {\n if ((data.status >= 200 && data.status < 300) || data.user_id) {\n setMessageStatus('success')\n setMessageText(copy?.authSuccessMessage || '')\n setIsActivateSuccess(true)\n if (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\n } else {\n const errorCode = data?.data?.error_code ?? data?.error_code\n if (errorCode === '104') {\n if (onAuthSuccess) {\n onAuthSuccess()\n } else {\n setTimeout(() => {\n authCodeActivate.close()\n window.location.reload()\n }, 3000)\n }\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 // \u8BBE\u7F6E\u5B9A\u65F6\u5668\u6E05\u9664\u72B6\u6001\u4FE1\u606F\n let timer = setTimeout(() => {\n setMessageStatus('')\n setMessageText('')\n clearTimeout(timer)\n }, 5000)\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: 'check_and_active',\n },\n })\n }, [\n code,\n copy?.codeEmptyError,\n copy?.authSuccessMessage,\n copy?.incorrectCodeError,\n copy?.expiredCodeMessage,\n copy?.sendEmailErrorMessage,\n locale,\n activeToken,\n ])\n\n return (\n <RegistrationModalContainer isOpen={authCodeActivate.isOpen} onClose={authCodeActivate.close}>\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 </RegistrationModalContainer>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "Button", "Text", "useSendEmailValidation", "gaTrack", "cn", "useHeadlessContext", "useEmailValidation", "useCountDown", "useCallback", "useEffect", "useRef", "useState", "Message", "useRegistration", "RegistrationModalContainer", "ROUNDED_BRANDS", "AuthCodeActivate", "copy", "locale", "brand", "email", "authCodeActivate", "rounded", "activeToken", "setActiveToken", "setIsSendingActivateEmail", "setIsActivateSuccess", "onAuthSuccess", "autoSendEmail", "emailValidationLoading", "triggerEmailValidation", "isSendingEmail", "triggerSendValidationEmail", "sendEmailData", "messageText", "setMessageText", "messageStatus", "setMessageStatus", "isStartCountDown", "startCountDown", "countDown", "error", "setError", "focusIndex", "setFocusIndex", "codeArray", "setCodeArray", "inputRefs", "code", "token", "handleSendAgain", "handleInputCodeChange", "event", "index", "value", "old", "newCode", "handleAuthCodeSubmit", "data", "errorCode", "timer", "item", "inputRef", "paste", "pastedCode"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -172,7 +172,7 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
|
|
|
172
172
|
},
|
|
173
173
|
{
|
|
174
174
|
onSuccess: data => {
|
|
175
|
-
if (data.status >= 200 && data.status < 300) {
|
|
175
|
+
if ((data.status >= 200 && data.status < 300) || data.user_id) {
|
|
176
176
|
setMessageStatus('success')
|
|
177
177
|
setMessageText(copy?.authSuccessMessage || '')
|
|
178
178
|
setIsActivateSuccess(true)
|