@anker-in/campaign-ui 0.2.0-beta.1 → 0.2.0-beta.11

package/dist/esm/templates/credits.d.ts

@@ -8,20 +8,21 @@ import { CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysTo
 import { CreditsRedeemListCopy } from '../components/credits/creditsRedeemList';
 import { CreditsCashCopy } from '../components/credits/creditsCash';
 import { CreditsFaqCopy } from '../components/credits/creditsFaq';
+import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type';
 export declare enum ComponentKey {
-    Banner = "banner",
-    InfoCard = "infoCard",
-    Benefits = "benefits",
-    WaysToGetCredits = "waysToGetCredits",
-    RedeemList = "redeemList",
-    SpendCreditsLikeCash = "spendCreditsLikeCash",
-    Faqs = "faqs"
+    Banner = "creditsBanner",
+    InfoCard = "creditsInfoCard",
+    Benefits = "creditsBenefits",
+    WaysToGetCredits = "creditsWaysToGetCredits",
+    RedeemList = "creditsRedeemList",
+    SpendCreditsLikeCash = "creditsCash",
+    Faqs = "creditsFaq"
 }
 export type CreditsTemplateProps = {
     headlessConfig: HeadlessConfig;
     siteConfig: {
         registrationsSettings: {
-            authCodeActivate: any;
+            authCodeActivate: AuthCodeActivateCopy;
         };
         taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>;
     };

package/dist/esm/templates/credits.js

@@ -1,2 +1,2 @@
-import{Fragment as L,jsx as o,jsxs as v}from"react/jsx-runtime";import{classNames as C,HeadlessProvider as m}from"@anker-in/lib";import{RegistrationProvider as f}from"../components/registration/context/provider";import{CreditsProvider as y}from"../components/credits/context/provider";import{CreditsBanner as c}from"../components/credits/creditsBanner";import{CreditsInfoCard as l}from"../components/credits/creditsInfoCard";import{CreditsBenefits as g}from"../components/credits/creditsBenefits";import{CreditsWaysToGetCredits as P}from"../components/credits/creditsWaysToGetCredits";import{CreditsRedeemList as T}from"../components/credits/creditsRedeemList";import{CreditsCash as u}from"../components/credits/creditsCash";import{CreditsFaq as h}from"../components/credits/creditsFaq";var I=(e=>(e.Banner="banner",e.InfoCard="infoCard",e.Benefits="benefits",e.WaysToGetCredits="waysToGetCredits",e.RedeemList="redeemList",e.SpendCreditsLikeCash="spendCreditsLikeCash",e.Faqs="faqs",e))(I||{});const O=({headlessConfig:d,siteConfig:s,userContext:r,pageConfig:i,registrationContext:t,gtm:n})=>o(m,{headlessConfig:d,children:o(f,{copy:s.registrationsSettings,email:r?.profile?.email,children:o(y,{profile:r?.profile,removeProfile:r?.removeProfile,isLoadingProfile:r?.isLoadingProfile,openSignInPopup:t.openSignInPopup,openSignUpPopup:t.openSignUpPopup,creditInfo:r?.creditInfo,taskIdToTypeMapping:s.taskIdToTypeMapping,customer:r?.customer,fetchCreditInfo:r?.fetchCreditInfo,customerLoading:r?.customerLoading,gtm:n,pageCommon:i.common,children:o("div",{className:C("bg-[#f5f5f7] leading-[1.2]"),children:i.order.map(p=>{const e=i.components?.[p];return e?v(L,{children:[a=>{switch(a){case"banner":return o(c,{copy:e});case"infoCard":return o(l,{copy:e});case"benefits":return o(g,{copy:e});case"waysToGetCredits":return o(P,{copy:e});case"redeemList":return o(T,{copy:e});case"spendCreditsLikeCash":return o(u,{copy:e});case"faqs":return o(h,{copy:e});default:return null}},o("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})})})});export{I as ComponentKey,O as CreditsTemplate};
+import{Fragment as v,jsx as o,jsxs as u}from"react/jsx-runtime";import{classNames as a,HeadlessProvider as C}from"@anker-in/lib";import{RegistrationProvider as m}from"../components/registration/context/provider";import{CreditsProvider as f}from"../components/credits/context/provider";import{CreditsBanner as y}from"../components/credits/creditsBanner";import{CreditsInfoCard as c}from"../components/credits/creditsInfoCard";import{CreditsBenefits as l}from"../components/credits/creditsBenefits";import{CreditsWaysToGetCredits as g}from"../components/credits/creditsWaysToGetCredits";import{CreditsRedeemList as T}from"../components/credits/creditsRedeemList";import{CreditsCash as P}from"../components/credits/creditsCash";import{CreditsFaq as h}from"../components/credits/creditsFaq";var I=(e=>(e.Banner="creditsBanner",e.InfoCard="creditsInfoCard",e.Benefits="creditsBenefits",e.WaysToGetCredits="creditsWaysToGetCredits",e.RedeemList="creditsRedeemList",e.SpendCreditsLikeCash="creditsCash",e.Faqs="creditsFaq",e))(I||{});const O=({headlessConfig:s,siteConfig:d,userContext:t,pageConfig:r,registrationContext:n,gtm:p})=>o(C,{headlessConfig:s,children:o(m,{copy:d.registrationsSettings,email:t?.profile?.email,children:o(f,{profile:t?.profile,removeProfile:t?.removeProfile,isLoadingProfile:t?.isLoadingProfile,openSignInPopup:n.openSignInPopup,openSignUpPopup:n.openSignUpPopup,creditInfo:t?.creditInfo,taskIdToTypeMapping:d.taskIdToTypeMapping,customer:t?.customer,fetchCreditInfo:t?.fetchCreditInfo,customerLoading:t?.customerLoading,gtm:p,pageCommon:r.common,children:o("div",{className:a("bg-[#f5f5f7] leading-[1.2]"),children:r.order.map(i=>{const e=r.components?.[i];return e?u(v,{children:[i==="creditsBanner"&&o(y,{copy:e}),i==="creditsInfoCard"&&t?.profile&&o(c,{copy:e}),i==="creditsBenefits"&&o(l,{copy:e}),i==="creditsWaysToGetCredits"&&o(g,{copy:e,classNames:s.brand==="anker"?{subtitle:"text-white",equalCreditsText:"bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent"}:{subtitle:"text-[#D1D1D1]",equalCreditsText:"text-[#F6EAD0]"}}),i==="creditsRedeemList"&&o(T,{copy:e}),i==="creditsCash"&&o(P,{copy:e}),i==="creditsFaq"&&o(h,{copy:e}),i!=="creditsBanner"&&o("div",{className:"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16"})]}):null})})})})});export{I as ComponentKey,O as CreditsTemplate};
 //# sourceMappingURL=credits.js.map

package/dist/esm/templates/credits.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/templates/credits.tsx"],
-  "sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\n\nexport enum ComponentKey {\n  Banner = 'banner',\n  InfoCard = 'infoCard',\n  Benefits = 'benefits',\n  WaysToGetCredits = 'waysToGetCredits',\n  RedeemList = 'redeemList',\n  SpendCreditsLikeCash = 'spendCreditsLikeCash',\n  Faqs = 'faqs',\n}\nexport type CreditsTemplateProps = {\n  headlessConfig: HeadlessConfig\n  siteConfig: {\n    registrationsSettings: {\n      authCodeActivate: any\n    }\n    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n  }\n  pageConfig: {\n    order: ComponentKey[]\n    common: CreditsPageCommon\n    components: {\n      [ComponentKey.Banner]?: CreditsBannerCopy\n      [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n      [ComponentKey.Benefits]?: CreditsBenefitsCopy\n      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n      [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n      [ComponentKey.Faqs]?: CreditsFaqCopy\n    }\n  }\n  userContext: {\n    profile: any\n    removeProfile: () => void\n    isLoadingProfile: boolean\n    creditInfo: any\n    customer: any\n    customerLoading: boolean\n    fetchCreditInfo: () => void\n  }\n  registrationContext: {\n    openSignUpPopup: () => void\n    openSignInPopup: () => void\n  }\n  gtm: {\n    pageGroup: string\n  }\n}\n\nexport const CreditsTemplate = ({\n  headlessConfig,\n  siteConfig,\n  userContext,\n  pageConfig,\n  registrationContext,\n  gtm,\n}: CreditsTemplateProps) => {\n  return (\n    <HeadlessProvider headlessConfig={headlessConfig}>\n      <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>\n        <CreditsProvider\n          profile={userContext?.profile}\n          removeProfile={userContext?.removeProfile}\n          isLoadingProfile={userContext?.isLoadingProfile}\n          openSignInPopup={registrationContext.openSignInPopup}\n          openSignUpPopup={registrationContext.openSignUpPopup}\n          creditInfo={userContext?.creditInfo}\n          taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}\n          customer={userContext?.customer}\n          fetchCreditInfo={userContext?.fetchCreditInfo}\n          customerLoading={userContext?.customerLoading}\n          gtm={gtm}\n          pageCommon={pageConfig.common}\n        >\n          <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>\n            {pageConfig.order.map(item => {\n              const componentCopy = pageConfig.components?.[item]\n              if (!componentCopy) return null\n              return (\n                <>\n                  {(item: ComponentKey) => {\n                    switch (item) {\n                      case 'banner':\n                        return <CreditsBanner copy={componentCopy as CreditsBannerCopy} />\n                      case 'infoCard':\n                        return <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />\n                      case 'benefits':\n                        return <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />\n                      case 'waysToGetCredits':\n                        return <CreditsWaysToGetCredits copy={componentCopy as CreditsWaysToGetCreditsCopy} />\n                      case 'redeemList':\n                        return <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />\n                      case 'spendCreditsLikeCash':\n                        return <CreditsCash copy={componentCopy as CreditsCashCopy} />\n                      case 'faqs':\n                        return <CreditsFaq copy={componentCopy as CreditsFaqCopy} />\n                      default:\n                        return null\n                    }\n                  }}\n                  <div className=\"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16\" />\n                </>\n              )\n            })}\n          </div>\n        </CreditsProvider>\n      </RegistrationProvider>\n    </HeadlessProvider>\n  )\n}\n"],
-  "mappings": "AA6FgB,mBAAAA,EAIe,OAAAC,EAJf,QAAAC,MAAA,oBA7FhB,OAAS,cAAAC,EAA4B,oBAAAC,MAAwB,gBAC7D,OAAS,wBAAAC,MAA4B,8CAGrC,OAAS,mBAAAC,MAAuB,yCAGhC,OAAS,iBAAAC,MAAwC,sCACjD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,2BAAAC,MAA4D,gDACrE,OAAS,qBAAAC,MAAgD,0CACzD,OAAS,eAAAC,MAAoC,oCAC7C,OAAS,cAAAC,MAAkC,mCAEpC,IAAKC,OACVA,EAAA,OAAS,SACTA,EAAA,SAAW,WACXA,EAAA,SAAW,WACXA,EAAA,iBAAmB,mBACnBA,EAAA,WAAa,aACbA,EAAA,qBAAuB,uBACvBA,EAAA,KAAO,OAPGA,OAAA,IAgDL,MAAMC,EAAkB,CAAC,CAC9B,eAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,IAAAC,CACF,IAEIpB,EAACG,EAAA,CAAiB,eAAgBY,EAChC,SAAAf,EAACI,EAAA,CAAqB,KAAMY,EAAW,sBAAuB,MAAOC,GAAa,SAAS,MACzF,SAAAjB,EAACK,EAAA,CACC,QAASY,GAAa,QACtB,cAAeA,GAAa,cAC5B,iBAAkBA,GAAa,iBAC/B,gBAAiBE,EAAoB,gBACrC,gBAAiBA,EAAoB,gBACrC,WAAYF,GAAa,WACzB,oBAAqBD,EAAW,oBAChC,SAAUC,GAAa,SACvB,gBAAiBA,GAAa,gBAC9B,gBAAiBA,GAAa,gBAC9B,IAAKG,EACL,WAAYF,EAAW,OAEvB,SAAAlB,EAAC,OAAI,UAAWE,EAAW,4BAA4B,EACpD,SAAAgB,EAAW,MAAM,IAAIG,GAAQ,CAC5B,MAAMC,EAAgBJ,EAAW,aAAaG,CAAI,EAClD,OAAKC,EAEHrB,EAAAF,EAAA,CACG,UAACsB,GAAuB,CACvB,OAAQA,EAAM,CACZ,IAAK,SACH,OAAOrB,EAACM,EAAA,CAAc,KAAMgB,EAAoC,EAClE,IAAK,WACH,OAAOtB,EAACO,EAAA,CAAgB,KAAMe,EAAsC,EACtE,IAAK,WACH,OAAOtB,EAACQ,EAAA,CAAgB,KAAMc,EAAsC,EACtE,IAAK,mBACH,OAAOtB,EAACS,EAAA,CAAwB,KAAMa,EAA8C,EACtF,IAAK,aACH,OAAOtB,EAACU,EAAA,CAAkB,KAAMY,EAAwC,EAC1E,IAAK,uBACH,OAAOtB,EAACW,EAAA,CAAY,KAAMW,EAAkC,EAC9D,IAAK,OACH,OAAOtB,EAACY,EAAA,CAAW,KAAMU,EAAiC,EAC5D,QACE,OAAO,IACX,CACF,EACAtB,EAAC,OAAI,UAAU,qEAAqE,GACtF,EAxByB,IA0B7B,CAAC,EACH,EACF,EACF,EACF",
-  "names": ["Fragment", "jsx", "jsxs", "classNames", "HeadlessProvider", "RegistrationProvider", "CreditsProvider", "CreditsBanner", "CreditsInfoCard", "CreditsBenefits", "CreditsWaysToGetCredits", "CreditsRedeemList", "CreditsCash", "CreditsFaq", "ComponentKey", "CreditsTemplate", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "item", "componentCopy"]
+  "sourcesContent": ["import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'\nimport { RegistrationProvider } from '../components/registration/context/provider'\n\nimport { DTC_TASK_TYPE } from '../components/credits/context/const'\nimport { CreditsProvider } from '../components/credits/context/provider'\nimport { CreditsPageCommon } from '../components/credits/type'\n\nimport { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'\nimport { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'\nimport { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'\nimport { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'\nimport { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'\nimport { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'\nimport { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'\nimport { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'\n\nexport enum ComponentKey {\n  Banner = 'creditsBanner',\n  InfoCard = 'creditsInfoCard',\n  Benefits = 'creditsBenefits',\n  WaysToGetCredits = 'creditsWaysToGetCredits',\n  RedeemList = 'creditsRedeemList',\n  SpendCreditsLikeCash = 'creditsCash',\n  Faqs = 'creditsFaq',\n}\nexport type CreditsTemplateProps = {\n  headlessConfig: HeadlessConfig\n  siteConfig: {\n    registrationsSettings: {\n      authCodeActivate: AuthCodeActivateCopy\n    }\n    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>\n  }\n  pageConfig: {\n    order: ComponentKey[]\n    common: CreditsPageCommon\n    components: {\n      [ComponentKey.Banner]?: CreditsBannerCopy\n      [ComponentKey.InfoCard]?: CreditsInfoCardCopy\n      [ComponentKey.Benefits]?: CreditsBenefitsCopy\n      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy\n      [ComponentKey.RedeemList]?: CreditsRedeemListCopy\n      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy\n      [ComponentKey.Faqs]?: CreditsFaqCopy\n    }\n  }\n  userContext: {\n    profile: any\n    removeProfile: () => void\n    isLoadingProfile: boolean\n    creditInfo: any\n    customer: any\n    customerLoading: boolean\n    fetchCreditInfo: () => void\n  }\n  registrationContext: {\n    openSignUpPopup: () => void\n    openSignInPopup: () => void\n  }\n  gtm: {\n    pageGroup: string\n  }\n}\n\nexport const CreditsTemplate = ({\n  headlessConfig,\n  siteConfig,\n  userContext,\n  pageConfig,\n  registrationContext,\n  gtm,\n}: CreditsTemplateProps) => {\n  return (\n    <HeadlessProvider headlessConfig={headlessConfig}>\n      <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>\n        <CreditsProvider\n          profile={userContext?.profile}\n          removeProfile={userContext?.removeProfile}\n          isLoadingProfile={userContext?.isLoadingProfile}\n          openSignInPopup={registrationContext.openSignInPopup}\n          openSignUpPopup={registrationContext.openSignUpPopup}\n          creditInfo={userContext?.creditInfo}\n          taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}\n          customer={userContext?.customer}\n          fetchCreditInfo={userContext?.fetchCreditInfo}\n          customerLoading={userContext?.customerLoading}\n          gtm={gtm}\n          pageCommon={pageConfig.common}\n        >\n          <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>\n            {pageConfig.order.map(key => {\n              const componentCopy = pageConfig.components?.[key]\n              if (!componentCopy) return null\n              return (\n                <>\n                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}\n                  {key === ComponentKey.InfoCard && userContext?.profile && (\n                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />\n                  )}\n                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}\n                  {key === ComponentKey.WaysToGetCredits && (\n                    <CreditsWaysToGetCredits\n                      copy={componentCopy as CreditsWaysToGetCreditsCopy}\n                      classNames={\n                        headlessConfig.brand === 'anker'\n                          ? {\n                              subtitle: 'text-white',\n                              equalCreditsText:\n                                'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',\n                            }\n                          : {\n                              subtitle: 'text-[#D1D1D1]',\n                              equalCreditsText: 'text-[#F6EAD0]',\n                            }\n                      }\n                    />\n                  )}\n                  {key === ComponentKey.RedeemList && (\n                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />\n                  )}\n                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}\n                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}\n                  {key !== ComponentKey.Banner && (\n                    <div className=\"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16\" />\n                  )}\n                </>\n              )\n            })}\n          </div>\n        </CreditsProvider>\n      </RegistrationProvider>\n    </HeadlessProvider>\n  )\n}\n"],
+  "mappings": "AA8FgB,mBAAAA,EACkC,OAAAC,EADlC,QAAAC,MAAA,oBA9FhB,OAAS,cAAAC,EAA4B,oBAAAC,MAAwB,gBAC7D,OAAS,wBAAAC,MAA4B,8CAGrC,OAAS,mBAAAC,MAAuB,yCAGhC,OAAS,iBAAAC,MAAwC,sCACjD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,mBAAAC,MAA4C,wCACrD,OAAS,2BAAAC,MAA4D,gDACrE,OAAS,qBAAAC,MAAgD,0CACzD,OAAS,eAAAC,MAAoC,oCAC7C,OAAS,cAAAC,MAAkC,mCAGpC,IAAKC,OACVA,EAAA,OAAS,gBACTA,EAAA,SAAW,kBACXA,EAAA,SAAW,kBACXA,EAAA,iBAAmB,0BACnBA,EAAA,WAAa,oBACbA,EAAA,qBAAuB,cACvBA,EAAA,KAAO,aAPGA,OAAA,IAgDL,MAAMC,EAAkB,CAAC,CAC9B,eAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,IAAAC,CACF,IAEIpB,EAACG,EAAA,CAAiB,eAAgBY,EAChC,SAAAf,EAACI,EAAA,CAAqB,KAAMY,EAAW,sBAAuB,MAAOC,GAAa,SAAS,MACzF,SAAAjB,EAACK,EAAA,CACC,QAASY,GAAa,QACtB,cAAeA,GAAa,cAC5B,iBAAkBA,GAAa,iBAC/B,gBAAiBE,EAAoB,gBACrC,gBAAiBA,EAAoB,gBACrC,WAAYF,GAAa,WACzB,oBAAqBD,EAAW,oBAChC,SAAUC,GAAa,SACvB,gBAAiBA,GAAa,gBAC9B,gBAAiBA,GAAa,gBAC9B,IAAKG,EACL,WAAYF,EAAW,OAEvB,SAAAlB,EAAC,OAAI,UAAWE,EAAW,4BAA4B,EACpD,SAAAgB,EAAW,MAAM,IAAIG,GAAO,CAC3B,MAAMC,EAAgBJ,EAAW,aAAaG,CAAG,EACjD,OAAKC,EAEHrB,EAAAF,EAAA,CACG,UAAAsB,IAAQ,iBAAuBrB,EAACM,EAAA,CAAc,KAAMgB,EAAoC,EACxFD,IAAQ,mBAAyBJ,GAAa,SAC7CjB,EAACO,EAAA,CAAgB,KAAMe,EAAsC,EAE9DD,IAAQ,mBAAyBrB,EAACQ,EAAA,CAAgB,KAAMc,EAAsC,EAC9FD,IAAQ,2BACPrB,EAACS,EAAA,CACC,KAAMa,EACN,WACEP,EAAe,QAAU,QACrB,CACE,SAAU,aACV,iBACE,4EACJ,EACA,CACE,SAAU,iBACV,iBAAkB,gBACpB,EAER,EAEDM,IAAQ,qBACPrB,EAACU,EAAA,CAAkB,KAAMY,EAAwC,EAElED,IAAQ,eAAqCrB,EAACW,EAAA,CAAY,KAAMW,EAAkC,EAClGD,IAAQ,cAAqBrB,EAACY,EAAA,CAAW,KAAMU,EAAiC,EAChFD,IAAQ,iBACPrB,EAAC,OAAI,UAAU,qEAAqE,GAExF,EAjCyB,IAmC7B,CAAC,EACH,EACF,EACF,EACF",
+  "names": ["Fragment", "jsx", "jsxs", "classNames", "HeadlessProvider", "RegistrationProvider", "CreditsProvider", "CreditsBanner", "CreditsInfoCard", "CreditsBenefits", "CreditsWaysToGetCredits", "CreditsRedeemList", "CreditsCash", "CreditsFaq", "ComponentKey", "CreditsTemplate", "headlessConfig", "siteConfig", "userContext", "pageConfig", "registrationContext", "gtm", "key", "componentCopy"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.2.0-beta.1",
+  "version": "0.2.0-beta.11",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -87,8 +87,8 @@
     "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
-    "@anker-in/lib": "1.1.0",
-    "@anker-in/headless-ui": "1.0.26"
+    "@anker-in/headless-ui": "1.0.26",
+    "@anker-in/lib": "1.1.0-beta.6"
   },
   "publishConfig": {
     "access": "public",

package/src/components/credits/context/provider.tsx

@@ -1,7 +1,6 @@
-import React, { createContext, PropsWithChildren, useContext } from 'react'
+import { createContext, PropsWithChildren, useContext } from 'react'
 import type { DTC_TASK_TYPE } from './const'
 import type { CreditInfoResponse } from './response'
-import { AuthCodeActivate, useRegistration } from '../../registration'
 import { CreditsPageCommon } from '../type'
 
 type Context = {
@@ -52,7 +51,6 @@ export function CreditsProvider({
   gtm,
   pageCommon,
 }: PropsWithChildren<Context>) {
-  const { copy } = useRegistration()
   return (
     <CreditsContext.Provider
       value={{
@@ -71,7 +69,6 @@ export function CreditsProvider({
       }}
     >
       {children}
-      {copy?.authCodeActivate && <AuthCodeActivate copy={copy.authCodeActivate} autoSendEmail />}
     </CreditsContext.Provider>
   )
 }

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -1,7 +1,6 @@
 import { Heading, Picture, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import IconInfo from './iconInfo'
-import { roundedBrands } from '../const'
 
 export interface BenefitItemCopy {
   icon: {
@@ -24,9 +23,7 @@ const BenefitItem = ({
   index: number
 }) => {
   const { brand } = useHeadlessContext()
-  console.log('brand', brand)
-  const rounded = roundedBrands.includes(brand)
-  console.log('rounded', rounded)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   return (
     <div
       className={cn(

package/src/components/credits/creditsBenefits/index.tsx

@@ -9,8 +9,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 
 import BenefitItem, { type BenefitItemCopy } from './benefitItem'
 import { useCreditsContext } from '../context/provider'
-import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../const'
+import { gaTrack, classNames as cn } from '@anker-in/lib'
 
 export type CreditsBenefitsCopy = {
   title: string
@@ -20,8 +19,6 @@ export type CreditsBenefitsCopy = {
 export const CreditsBenefits = ({ copy }: { copy: CreditsBenefitsCopy }) => {
   const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
   const { profile, gtm } = useCreditsContext()
-  const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
   const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
     gaTrack({
       event: 'ga4Event',

package/src/components/credits/creditsCash/CreditsCash.tsx

@@ -4,18 +4,15 @@ import { useMemo, useState } from 'react'
 import RedeemableItem from './RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import RulesModal from '../modal/rulesModal'
-import { useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
+import { useProductsByHandles } from '@anker-in/lib'
 import { CreditsCashCopy, RedeemItem } from './type'
 import { Product, classNames as cn } from '@anker-in/lib'
-import { useRegistration } from '../../../components/registration'
-import { roundedBrands } from '../const'
+import { useCreditsContext } from '../context/provider'
 
 export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
-  const { authCodeActivate } = useRegistration()
   const [rules, setRules] = useState<string | string[]>()
   const { redeemableList } = useRedeemableList()
-  const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const { pageCommon } = useCreditsContext()
 
   const variantMetafieldIdentifiers: any[] = []
 
@@ -76,7 +73,7 @@ export const CreditsCash = ({ copy }: { copy: CreditsCashCopy }) => {
           titleClassName="border-b-transparent h-[56px]"
           rules={rules}
           scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
-          title={copy?.ruleLabel}
+          title={pageCommon?.ruleLabel}
           ruleClassName="text-[#1d1d1f] font-bold"
         />
       )}

package/src/components/credits/creditsCash/RedeemableItem.tsx

@@ -24,6 +24,7 @@ function RedeemableItem({
     creditInfo,
     profile,
     openSignUpPopup,
+    pageCommon,
     gtm: { pageGroup },
   } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
@@ -143,7 +144,7 @@ function RedeemableItem({
                 event_parameters: {
                   page_group: pageGroup,
                   position: copy.title,
-                  button_name: copy?.ruleLabel,
+                  button_name: pageCommon?.ruleLabel,
                   info: itemData?.alpcData?.id?.toString(),
                 },
               })
@@ -156,7 +157,7 @@ function RedeemableItem({
               }
             }}
           >
-            {copy?.ruleLabel}
+            {pageCommon?.ruleLabel}
           </button>
         )}
         <div className="mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
@@ -182,7 +183,7 @@ function RedeemableItem({
             onClick={() => {
               handleRedeem()
             }}
-            title={inSufficientCredit ? copy.insufficientCredits : redeemButtonText}
+            title={inSufficientCredit ? pageCommon.insufficientCredits : redeemButtonText}
           >
             {redeemButtonText}
           </Button>
@@ -193,7 +194,7 @@ function RedeemableItem({
             )}
           >
             <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]">
-              <Text as="p" size="2" html={copy?.insufficientCredits} className="text-[14px]" />
+              <Text as="p" size="2" html={pageCommon?.insufficientCredits} className="text-[14px]" />
               <div className="absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
             </div>
           </div>

package/src/components/credits/creditsCash/type.ts

@@ -22,11 +22,9 @@ export type CreditsCashCopy = {
     products: { handle: string; sku: string }[]
   })[]
   soldOut: string
-  ruleLabel: string
   unlockRewards: string
   btnRedeem: string
   off: string
-  insufficientCredits: string
 }
 
 export type RedeemItem = {

package/src/components/credits/creditsFaq/index.tsx

@@ -1,9 +1,8 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useMemo, useState } from 'react'
 
 import { FaqItem } from './faqItem/FaqItem'
-import { roundedBrands } from '../const'
 
 export type CreditsFaqCopy = {
   title: string
@@ -21,7 +20,7 @@ export type CreditsFaqCopy = {
 export const CreditsFaq = ({ copy }: { copy: CreditsFaqCopy }) => {
   const { title, items: faqList, subTitle = '' } = copy || {}
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const categoryList = useMemo(() => {
     return Array.from(new Set(faqList?.map?.(faq => faq.category_name).filter(item => !!item)))
   }, [faqList])

package/src/components/credits/creditsInfoCard/index.tsx

@@ -5,8 +5,7 @@ import { useCreditsContext } from '../context/provider'
 import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
 import MyRewardsModal from '../modal/MyRewardsModal'
-import { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../const'
+import { gaNormalClick, classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 type ButtonConfig = {
   text: string
@@ -17,8 +16,6 @@ export type CreditsInfoCardCopy = {
   comingSoonLabel: string
   comingSoonTips: string
   buttons: ButtonConfig[]
-  pointUnit: string
-  infoIcon: string
 }
 
 export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
@@ -27,7 +24,8 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
   const [hover, setHover] = useState<boolean>(false)
   const { creditInfo, pageCommon } = useCreditsContext()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {
     gaNormalClick({ position: 'info_card', label: buttonConfig.text })
 
@@ -76,7 +74,7 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
               <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-md:text-[44px]', 'min-xl:text-[56px]')}>
                 {creditInfo ? numberFormat(creditInfo.available_credit) : 0}
               </div>
-              <div className="text-[16px]">{copy?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
           <div className="w-fit md:flex-1">
@@ -86,7 +84,7 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
                 <div className="group relative ml-[4px] flex cursor-pointer items-start">
                   <Text
                     as="div"
-                    html={copy?.infoIcon}
+                    html={pageCommon?.infoIcon}
                     className="size-[18px] cursor-pointer [&_svg]:size-full"
                     onClick={() => {
                       if (hover) {
@@ -127,7 +125,7 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
               <div className={cn('mr-[8px] text-[36px] font-extrabold', 'min-l:text-[44px]', 'min-xl:text-[56px]')}>
                 {creditInfo ? numberFormat(creditInfo.pending_credit) : 0}
               </div>
-              <div className="text-[16px]">{copy?.pointUnit}</div>
+              <div className="text-[16px]">{pageCommon?.pointUnit}</div>
             </div>
           </div>
         </div>
@@ -151,19 +149,19 @@ export function CreditsInfoCard({ copy }: { copy: CreditsInfoCardCopy }) {
           ))}
         </div>
 
-        {pageCommon?.activities && (
+        {pageCommon?.activitiesModal && (
           <ActivitiesModal
             isOpen={openActivities}
-            data={pageCommon?.activities}
+            data={pageCommon?.activitiesModal}
             onClose={() => {
               setOpenActivities(false)
             }}
           />
         )}
-        {pageCommon?.rewards && (
+        {pageCommon?.rewardsModal && (
           <MyRewardsModal
             isOpen={openRewards}
-            data={pageCommon?.rewards}
+            data={pageCommon?.rewardsModal}
             onClose={() => {
               setOpenRewards(false)
             }}

package/src/components/credits/creditsRedeemList/AddressForm/CountrySelect.tsx

@@ -2,8 +2,7 @@ import { Picture } from '@anker-in/headless-ui'
 import useClickOutside from '../../context/hooks/useClickOutside'
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
-import { roundedBrands } from '../../const'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 interface Country {
   id: string
@@ -23,7 +22,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const dorpdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)
   })
@@ -75,7 +74,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
 
       <Picture
         source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
-        imgClassName="pointer-events-none absolute right-0 top-0 bottom-0 !w-[45px] object-cover"
+        className="absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover"
         alt="arrow"
       />
 

package/src/components/credits/creditsRedeemList/AddressForm/StateSelect.tsx

@@ -2,8 +2,7 @@ import classNames from 'classnames'
 import { Picture } from '@anker-in/headless-ui'
 import { useEffect, useMemo, useState } from 'react'
 import useClickOutside from '../../context/hooks/useClickOutside'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 interface StateSelectProps {
   states: { code: string; id: string; name: string }[]
@@ -19,7 +18,7 @@ export function StateSelect({ states, stateName = '', stateCode = '', className
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const dropdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)

package/src/components/credits/creditsRedeemList/AddressForm/index.tsx

@@ -7,14 +7,13 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { AddressFormProps } from './type'
-import { roundedBrands } from '../../const'
 
 export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
   const { profile, customer } = useCreditsContext()
   const { locale, brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const [address, setAddress] = useState<Record<string, any>>()
 
   const states = useMemo(() => {

package/src/components/credits/creditsRedeemList/CreditsRedeemList.tsx

@@ -7,14 +7,12 @@ import RedeemProductModal from './RedeemProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
-import { useHeadlessContext, useProductsByHandles } from '@anker-in/lib'
+import { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { RedeemableItem } from './RedeemableItem'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
-import { gaTrack } from '@anker-in/lib'
 import { useRegistration } from '../../../components/registration'
-import { roundedBrands } from '../const'
 
 export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {
   const {
@@ -25,7 +23,7 @@ export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) =>
   } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const isLogin = Object.keys(profile || {}).length > 0
 

package/src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx

@@ -1,12 +1,11 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
 import useCountries from '../../context/hooks/useCountries'
-import { roundedBrands } from '../../const'
 
 type AddressProps = {
   copy: CreditsRedeemListCopy
@@ -36,7 +35,7 @@ export const Address = ({
   item,
 }: AddressProps) => {
   const { storeDomain, brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
 
   return (

package/src/components/credits/creditsRedeemList/RedeemProductModal/ProductInfo.tsx

@@ -1,4 +1,4 @@
-import { Picture } from '@anker-in/headless-ui'
+import { Picture, Text } from '@anker-in/headless-ui'
 import { formatPrice } from '../../context/utils'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
@@ -34,9 +34,11 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
         </div>
 
         <div className="mt-[16px] md:mt-[12px]">
-          <div className="mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden" title={item.product.title}>
-            {item.product.title}
-          </div>
+          <Text
+            className="mb-[12px] line-clamp-1 text-[16px] font-bold l:!hidden"
+            html={item.product.title}
+            title={item.product.title}
+          ></Text>
           <div className="flex font-semibold leading-[1.4] md:flex-col">
             <div className="mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]">
               <div className="mb-[8px] flex items-center md:mb-[4px]">

package/src/components/credits/creditsRedeemList/RedeemProductModal/Success.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy
@@ -18,7 +17,7 @@ type SuccessProps = {
 
 export const Success = ({ copy, shippingProduct, loading, address, disabled, onClose, item }: SuccessProps) => {
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   return (
     <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
       <div className="flex flex-col items-center">

package/src/components/credits/creditsRedeemList/RedeemableItem.tsx

@@ -8,9 +8,8 @@ import type { RedeemableItem as RedeemableItemType } from '../type'
 import { AlpcConsumeType, ConsumeType } from '../context/const'
 import { numberFormat } from '../context/utils'
 import type { CreditsRedeemListCopy } from './type'
-import { gaTrack, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { NoneProductValue } from './NonProductValue'
-import { roundedBrands } from '../const'
 
 export function RedeemableItem({
   copy,
@@ -33,7 +32,7 @@ export function RedeemableItem({
   } = useCreditsContext()
   const { brand } = useHeadlessContext()
   const isLogin = Object.keys(profile || {}).length > 0
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const isDisabled = useMemo(() => {
     if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {

package/src/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.tsx

@@ -6,18 +6,17 @@ import { useMemo, useState } from 'react'
 import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
 import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
-import { roundedBrands } from '../const'
 
 export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCreditsProps) => {
   const [showMore, setShowMore] = useState(false)
   const { profile } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const isLogin = !!profile
 
   const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)
@@ -223,6 +222,9 @@ export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCr
           copy={copy.subscribe}
           onSuccess={() => {
             setIsSubscribeSuccess(true)
+            setTimeout(() => {
+              setIsSubscribeModalOpen(false)
+            }, 3000)
           }}
           isOpen={isSubscribeModalOpen}
           onClose={() => {

package/src/components/credits/creditsWaysToGetCredits/useActions.ts

@@ -77,7 +77,10 @@ export const useActions = ({
             handleClick: () =>
               handleClickWithTrack({
                 buttonName: copy?.activate,
-                callback: () => authCodeActivate.open(),
+                callback: () => {
+                  authCodeActivate.setAutoSendEmail(true)
+                  authCodeActivate.open()
+                },
                 id: TaskType.Activate,
               }),
           },

package/src/components/credits/modal/MyRewardsModal.tsx

@@ -9,8 +9,7 @@ import { CreditsModalContainer, type ModalContainerProps } from './modalContaine
 import Tip from './tip'
 import LoadingDots from './loadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 export interface MyRewardsMetafields {
   title: string
@@ -45,7 +44,7 @@ interface MyRewardsModalProps extends ModalContainerProps {
 function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const [couponPage, setCouponPage] = useState(1)
   const [productPage, setProductPage] = useState(1)