@anker-in/campaign-ui 0.2.0 → 0.2.2

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

@@ -30,7 +30,7 @@ function RedeemCouponModal({
   const [disabled, setDisabled] = useState(false)
   const { copy: copyText, copied: copiedStatus } = useCopy()
 
-  const { profile, fetchCreditInfo } = useCreditsContext()
+  const { profile, fetchCreditInfo, pageCommon } = useCreditsContext()
 
   const { isMutating: loading, trigger } = useRedeemCoupon({
     onSuccess(responseData) {
@@ -96,8 +96,8 @@ function RedeemCouponModal({
         )}
       >
         <div className="relative mx-auto h-[164px] w-[324px]">
-          {copy?.imageMapping[item.config?.type]?.url && (
-            <Picture source={copy.imageMapping[item.config.type].url} className="h-full [&_img]:h-full" />
+          {pageCommon?.imageMapping?.[item.config?.type]?.url && (
+            <Picture source={pageCommon.imageMapping[item.config.type].url} className="h-full [&_img]:h-full" />
           )}
           <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
             {item.config.value ? (
@@ -126,7 +126,7 @@ function RedeemCouponModal({
                 }
               }}
             >
-              {copiedStatus ? copy?.copied : copy?.copy}
+              {copiedStatus ? pageCommon?.copied : pageCommon?.copy}
             </div>
           </div>
         ) : (
@@ -136,12 +136,12 @@ function RedeemCouponModal({
               'mt-[30px] text-center text-[24px] font-bold leading-[1.2] md:mt-[18px] md:text-[20px] md:leading-[1.2]'
             )}
           >
-            {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}
+            {numberFormat(item.alpc?.consumeCredits)} {pageCommon?.pointUnit}
           </Text>
         )}
         {!couponCode && item.config?.rules?.length > 0 && (
           <div className="mt-[18px] w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
-            <div className="mb-[4px]">{copy?.ruleLabel}:</div>
+            <div className="mb-[4px]">{pageCommon?.ruleLabel}:</div>
             <ul className="ml-4 grid grid-flow-row gap-[4px]">
               {item.config?.rules?.map((text, index) => (
                 <li className="list-disc" key={index}>

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

@@ -1,7 +1,7 @@
 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'
@@ -34,7 +34,8 @@ export const Address = ({
   handlePayment,
   item,
 }: AddressProps) => {
-  const { storeDomain } = useHeadlessContext()
+  const { storeDomain, brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
 
   return (
@@ -42,18 +43,20 @@ export const Address = ({
       <div className={classNames('max-h-[500px] overflow-y-auto px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]')}>
         <div>
           {shippingAddress && <Text className="mb-5 text-[16px] font-bold" html={shippingAddress}></Text>}
-          <AddressForm
-            onChange={setAddress}
-            validate={validateAddress}
-            errors={validateErrors}
-            form={copy.redeemModal.product.addressForm}
-            countries={countries}
-            countriesLoading={countriesLoading}
-          ></AddressForm>
+          {copy.redeemModal?.product?.addressForm && (
+            <AddressForm
+              onChange={setAddress}
+              validate={validateAddress}
+              errors={validateErrors}
+              form={copy.redeemModal.product.addressForm}
+              countries={countries}
+              countriesLoading={countriesLoading}
+            ></AddressForm>
+          )}
         </div>
       </div>
       <div className="sticky bottom-0 flex flex-col items-center justify-center bg-white px-[48px] py-[24px] l:px-[16px]">
-        <div className="flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]">
+        <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>
           {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
           <ProductInfo item={item} copy={copy} />
         </div>

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

@@ -6,6 +6,7 @@ import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ConsumeType } from '../../context/const'
 import { NoneProductValue } from './NonProductValue'
+import { useCreditsContext } from '../../context/provider'
 
 type InitProps = {
   copy: CreditsRedeemListCopy
@@ -16,6 +17,7 @@ type InitProps = {
 }
 
 export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) => {
+  const { pageCommon } = useCreditsContext()
   const rules = useMemo(() => {
     if (item.config.rules?.length) {
       return item.config.rules
@@ -37,7 +39,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
               source={
                 item.config?.type === ConsumeType.Product
                   ? item.product.images[0]?.url
-                  : copy?.imageMapping[item.config.type]?.url || item.config.image?.url
+                  : pageCommon?.imageMapping?.[item.config.type]?.url || item.config.image?.url
               }
               className="h-full w-auto [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
             ></Picture>
@@ -60,7 +62,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
               as="p"
               className={classNames(' text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]')}
             >
-              {numberFormat(item.alpc?.consumeCredits)} {copy?.pointUnit}
+              {numberFormat(item.alpc?.consumeCredits)} {pageCommon?.pointUnit}
             </Text>
           </div>
           <div className="mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]">

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

@@ -2,8 +2,10 @@ import { Text } from '@anker-in/headless-ui'
 import { RedeemableItem } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ConsumeType } from '../../context/const'
+import { useCreditsContext } from '../../context/provider'
 
 export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+  const { pageCommon } = useCreditsContext()
   // shipping coupon 仅展示文案
   if (item.config?.type === ConsumeType.ShippingCoupon) {
     return <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.value} as="p" />
@@ -13,7 +15,7 @@ export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: C
         <Text className="text-[64px] font-extrabold leading-none" html={item.config.value.toString()} />
         <Text
           className="text-[24px] font-bold leading-[2]"
-          html={item.config.type === ConsumeType.Coupon ? copy?.off : copy?.giftCardLabel}
+          html={item.config.type === ConsumeType.Coupon ? pageCommon?.off : pageCommon?.giftCardLabel}
         />
       </div>
     ) : (

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

@@ -1,8 +1,9 @@
-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'
 import { useHeadlessContext } from '@anker-in/lib'
+import { useCreditsContext } from '../../context/provider'
 
 type ProductInfoProps = {
   item: RedeemableItemType
@@ -11,6 +12,7 @@ type ProductInfoProps = {
 
 export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
   const { locale } = useHeadlessContext()
+  const { pageCommon } = useCreditsContext()
 
   return (
     <div className="flex w-full items-center justify-center md:items-start md:justify-start">
@@ -32,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]">
@@ -60,7 +64,7 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
               <div className="l:flex l:items-center l:justify-between">
                 <span>{copy.redeemModal.product.totalPriceLabel}: </span>
                 <span className="ml-1">
-                  {item.alpc?.consumeCredits} {copy?.pointUnit}
+                  {item.alpc?.consumeCredits} {pageCommon?.pointUnit}
                 </span>
               </div>
             </div>

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

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy
@@ -15,6 +16,8 @@ type SuccessProps = {
 }
 
 export const Success = ({ copy, shippingProduct, loading, address, disabled, onClose, item }: SuccessProps) => {
+  const { brand } = useHeadlessContext()
+  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">
@@ -26,7 +29,7 @@ export const Success = ({ copy, shippingProduct, loading, address, disabled, onC
 
         {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
 
-        <div className="flex w-full items-center rounded-[16px] bg-[#F5F5F7] p-[16px]">
+        <div className={classNames('flex w-full items-center bg-[#F5F5F7] p-[16px]', !rounded && 'rounded-none')}>
           <ProductInfo item={item} copy={copy} />
         </div>
 

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

@@ -25,7 +25,7 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
   const { fetchCreditInfo, profile } = useCreditsContext()
   const { storeDomain, locale } = useHeadlessContext()
 
-  const { validatorInfo } = copy
+  const { pageCommon } = useCreditsContext()
   const { shippingAddress, shippingProduct } = copy.redeemModal.product
 
   const [status, setStatus] = useState<'init' | 'address' | 'success' | 'error'>('init')
@@ -99,7 +99,7 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
 
   const { validate: validateAddress, errors: validateErrors } = useAddressValidate({
     address: address,
-    validatorInfo: validatorInfo,
+    validatorInfo: pageCommon?.validatorInfo,
     formData: copy?.redeemModal.product.form?.flat() || [],
     errorLabel: {
       require: copy.redeemModal.product.required,

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

@@ -8,7 +8,7 @@ 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 } from '../../../helpers/track'
+import { gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { NoneProductValue } from './NonProductValue'
 
 export function RedeemableItem({
@@ -28,8 +28,11 @@ export function RedeemableItem({
     creditInfo,
     profile,
     gtm: { pageGroup },
+    pageCommon,
   } = useCreditsContext()
+  const { brand } = useHeadlessContext()
   const isLogin = Object.keys(profile || {}).length > 0
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const isDisabled = useMemo(() => {
     if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {
@@ -64,7 +67,7 @@ export function RedeemableItem({
 
     // 缺货文案
     if (item.alpc?.consumeType === AlpcConsumeType.Product) {
-      return item.variant?.availableForSale ? copy.btnRedeem : copy?.soldOut || 'Sold Out'
+      return item.variant?.availableForSale ? copy.btnRedeem : pageCommon?.soldOut || 'Sold Out'
     }
     return copy.btnRedeem
   }, [
@@ -73,13 +76,14 @@ export function RedeemableItem({
     item.variant?.availableForSale,
     copy.btnRedeem,
     copy.unlockRewards,
-    copy?.soldOut,
+    pageCommon?.soldOut,
   ])
 
   return (
     <div
       className={classNames(
         'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        !rounded && 'rounded-none md:rounded-none',
         className
       )}
     >
@@ -93,11 +97,11 @@ export function RedeemableItem({
       ) : (
         <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
           <Picture
-            source={copy?.imageMapping[item.config?.type]?.url}
+            source={pageCommon?.imageMapping?.[item.config?.type]?.url}
             className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
           ></Picture>
 
-          <NoneProductValue item={item} copy={copy} />
+          <NoneProductValue item={item} />
         </div>
       )}
       <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>
@@ -119,7 +123,7 @@ export function RedeemableItem({
                 event_parameters: {
                   page_group: pageGroup,
                   position: copy.title,
-                  button_name: copy?.ruleLabel,
+                  button_name: pageCommon?.ruleLabel,
                   info: item.alpc?.id?.toString(),
                 },
               })
@@ -132,7 +136,7 @@ export function RedeemableItem({
               }
             }}
           >
-            {copy?.ruleLabel}
+            {pageCommon?.ruleLabel}
           </button>
         )}
         <div>

package/src/components/credits/creditsRedeemList/index.ts

@@ -0,0 +1,2 @@
+export * from './type'
+export * from './CreditsRedeemList'

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

@@ -1,8 +1,5 @@
-import { CreditsPageCommon } from '../type'
-
 export type CreditsRedeemListCopy = {
   title: string
-  giftCardLabel: string
   unlockRewards: string
   btnRedeem: string
   list: {
@@ -14,15 +11,6 @@ export type CreditsRedeemListCopy = {
       rules: string[]
     }[]
   }[]
-  validatorInfo: {
-    addressInfo: {
-      name: string
-      country: string
-      province: string
-      city: string
-      address: string
-    }
-  }
   redeemModal: {
     confirmTitle: string
     confirmButton: string
@@ -72,7 +60,4 @@ export type CreditsRedeemListCopy = {
       stepTitle: string
     }
   }
-  copied: string
-  off: string
-  copy: string
-} & CreditsPageCommon
+}

package/src/components/credits/creditsWaysToGetCredits/{index.tsx → CreditsWaysToGetCredits.tsx}

@@ -6,21 +6,35 @@ import { useMemo, useState } from 'react'
 import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
 import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
-import { cn } from '../../../helpers/index'
+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'
 
-export const CreditsWaysToGetCredits = ({
-  copy,
-  activate,
-  subscribe,
-  uploadReceipt,
-  classNames,
-}: CreditsWaysToGetCreditsProps) => {
+export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCreditsProps) => {
   const [showMore, setShowMore] = useState(false)
   const { profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const isLogin = !!profile
 
-  const { actions } = useActions({ copy, activate, subscribe, uploadReceipt })
+  const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)
+  const [isSubscribeModalOpen, setIsSubscribeModalOpen] = useState(false)
+  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)
+  const [isUploadReceiptSuccess, setIsUploadReceiptSuccess] = useState(false)
 
+  const { actions } = useActions({
+    copy,
+    subscribe: {
+      openSubscribePopup: () => setIsSubscribeModalOpen(true),
+      isSuccess: isSubscribeSuccess,
+    },
+    uploadReceipt: {
+      openUploadReceiptPopup: () => setIsUploadReceiptModalOpen(true),
+      isSuccess: isUploadReceiptSuccess,
+    },
+  })
   const list = useMemo(() => {
     const list = copy.list
       .map(item => {
@@ -78,7 +92,12 @@ export const CreditsWaysToGetCredits = ({
 
   return (
     <Container id="ways-to-get-credits" className=" bg-[#F5F5F7] [&>div]:l:!px-0">
-      <div className="rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]">
+      <div
+        className={cn(
+          'rounded-[16px] bg-[#1D1D1F] py-[64px] px-[140px] text-white md:px-[16px] l:rounded-none md-l:px-[32px] l-xl:px-[77px]',
+          !rounded && 'rounded-none'
+        )}
+      >
         <Heading as="h2" size={4} html={copy?.title} className="text-center l:pl-[16px] l:text-left" />
         <div className="mt-[64px] flex items-center justify-between md:mt-[64px] l:mt-[24px] l:flex-col-reverse l:items-start md-l:mt-[32px]">
           <div className="pl-[16px] l:mt-[40px] desktop:pl-[24px] lg-desktop:pl-[32px]">
@@ -86,7 +105,7 @@ export const CreditsWaysToGetCredits = ({
             <div className="mt-[8px] flex items-center">
               {copy.creditsIcon?.url && (
                 <Picture
-                  className="size-[48px] mr-[8px] stroke-brand xl:size-[30px] [&_path]:stroke-brand"
+                  className="size-[48px] mr-[8px] stroke-brand-0 xl:size-[30px] [&_path]:stroke-brand-0"
                   source={copy.creditsIcon.url}
                   alt={copy.creditsIcon.alt || 'credits'}
                 />
@@ -122,7 +141,10 @@ export const CreditsWaysToGetCredits = ({
             {list.map(item => (
               <div
                 key={item.id}
-                className="flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]"
+                className={cn(
+                  'flex min-h-[160px] flex-col justify-between rounded-[16px] bg-white p-[16px] text-[#1D1D1F] desktop:min-h-[192px] desktop:p-[24px] lg-desktop:min-h-[240px] lg-desktop:p-[32px]',
+                  !rounded && 'rounded-none'
+                )}
               >
                 <div>
                   <Heading as="h4" html={item.title} size={2} className="text-pretty" />
@@ -136,9 +158,9 @@ export const CreditsWaysToGetCredits = ({
                 </div>
 
                 {item.handleClick &&
-                !(item.id === TaskType.UploadReceipt && uploadReceipt.isSuccess) &&
-                !(item.id === TaskType.Activate && activate.isSuccess) &&
-                !(item.id === TaskType.Subscribe && subscribe.isSuccess) ? (
+                !(item.id === TaskType.UploadReceipt && isUploadReceiptSuccess) &&
+                !(item.id === TaskType.Activate && authCodeActivate.isActivateSuccess) &&
+                !(item.id === TaskType.Subscribe && isSubscribeSuccess) ? (
                   <Button
                     as={item.link ? 'a' : 'button'}
                     {...(item.link && { href: item.link })}
@@ -159,7 +181,7 @@ export const CreditsWaysToGetCredits = ({
             {!showMore && (
               <div
                 className="absolute inset-0 pointer-events-none min-md:hidden"
-                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%' }}
+                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)' }}
               ></div>
             )}
           </motion.div>
@@ -183,6 +205,33 @@ export const CreditsWaysToGetCredits = ({
           )}
         </div>
       </div>
+      {copy.receipt && (
+        <CreditsUploadReceiptModal
+          isOpen={isUploadReceiptModalOpen}
+          onClose={() => {
+            setIsUploadReceiptModalOpen(false)
+          }}
+          copy={copy.receipt}
+          onSuccess={() => {
+            setIsUploadReceiptSuccess(true)
+          }}
+        />
+      )}
+      {copy.subscribe && (
+        <CreditsSubscribeModal
+          copy={copy.subscribe}
+          onSuccess={() => {
+            setIsSubscribeSuccess(true)
+            setTimeout(() => {
+              setIsSubscribeModalOpen(false)
+            }, 3000)
+          }}
+          isOpen={isSubscribeModalOpen}
+          onClose={() => {
+            setIsSubscribeModalOpen(false)
+          }}
+        />
+      )}
     </Container>
   )
 }

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

@@ -0,0 +1,2 @@
+export * from './type'
+export * from './CreditsWaysToGetCredits'

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

@@ -1,4 +1,5 @@
 import type { ReceiptCopy } from '../modal/creditsUploadReceiptModal'
+import type { CreditsSubscribeModalCopy } from '../modal/subscribeModal'
 
 export type BenefitItem = {
   title: string
@@ -6,7 +7,7 @@ export type BenefitItem = {
   id: string
 }
 
-export type WaysToGetCreditsCopy = {
+export type CreditsWaysToGetCreditsCopy = {
   title: string
   subtitle: string
   equalCredits: string
@@ -24,13 +25,14 @@ export type WaysToGetCreditsCopy = {
   goShopLink: string
   uploadReceipt: string
   shopNow: string
-  subscribe: string
+  subscribeLabel: string
   sendEmailSuccess: string
   creditsIcon: {
     url: string
     alt: string
   }
   receipt: ReceiptCopy
+  subscribe: CreditsSubscribeModalCopy
 }
 
 export enum TaskType {
@@ -43,21 +45,9 @@ export enum TaskType {
 }
 
 export type CreditsWaysToGetCreditsProps = {
-  copy: WaysToGetCreditsCopy
+  copy: CreditsWaysToGetCreditsCopy
   classNames?: {
     equalCreditsText?: string
     subtitle?: string
   }
-  activate: {
-    openAuthCodePopup: () => void
-    isSuccess: boolean
-  }
-  subscribe: {
-    openSubscribePopup: () => void
-    isSuccess: boolean
-  }
-  uploadReceipt: {
-    openUploadReceiptPopup: () => void
-    isSuccess: boolean
-  }
 }

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

@@ -1,25 +1,36 @@
+import { useHeadlessContext, gaTrack } from '@anker-in/lib'
+
 import { TaskType } from './type'
 import { useCreditsContext } from '../context/provider'
 import { useMemo } from 'react'
 import useReceiptUploaded from '../context/hooks/useReceiptUploaded'
 import { useFirstPurchaseFinished } from '../context/hooks/useFirstPurchaseFinished'
 import { useSubscribed } from '../context/hooks/useSubscribed'
-import type { CreditsWaysToGetCreditsProps } from './type'
-import { useHeadlessContext } from '@anker-in/lib'
-import { gaTrack } from '../../../helpers/track'
+import type { CreditsWaysToGetCreditsCopy } from './type'
+
+import { useRegistration } from '../../registration'
 
 export const useActions = ({
   copy,
   subscribe,
   uploadReceipt,
-  activate,
   gaParameters,
-}: CreditsWaysToGetCreditsProps & {
+}: {
+  copy: CreditsWaysToGetCreditsCopy
+  subscribe: {
+    openSubscribePopup: () => void
+    isSuccess: boolean
+  }
+  uploadReceipt: {
+    openUploadReceiptPopup: () => void
+    isSuccess: boolean
+  }
   gaParameters?: {
     position: string
   }
 }) => {
   const { openSignUpPopup, gtm, profile } = useCreditsContext()
+  const { authCodeActivate } = useRegistration()
   const isSubscribed = useSubscribed()
   const firstPurchaseFinished = useFirstPurchaseFinished()
   const uploadedReceipt = useReceiptUploaded()
@@ -66,7 +77,10 @@ export const useActions = ({
             handleClick: () =>
               handleClickWithTrack({
                 buttonName: copy?.activate,
-                callback: () => activate.openAuthCodePopup(),
+                callback: () => {
+                  authCodeActivate.setAutoSendEmail(true)
+                  authCodeActivate.open()
+                },
                 id: TaskType.Activate,
               }),
           },
@@ -82,10 +96,10 @@ export const useActions = ({
               handleClickWithTrack({ buttonName: copy?.joinNow, callback: openSignUpPopup, id: TaskType.Subscribe }),
           },
           notFinished: {
-            buttonLabel: copy?.subscribe,
+            buttonLabel: copy?.subscribeLabel,
             handleClick: () =>
               handleClickWithTrack({
-                buttonName: copy?.subscribe,
+                buttonName: copy?.subscribeLabel,
                 callback: () => subscribe.openSubscribePopup(),
                 id: TaskType.Subscribe,
               }),

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

@@ -9,6 +9,7 @@ import { CreditsModalContainer, type ModalContainerProps } from './modalContaine
 import Tip from './tip'
 import LoadingDots from './loadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 export interface MyRewardsMetafields {
   title: string
@@ -42,6 +43,8 @@ interface MyRewardsModalProps extends ModalContainerProps {
 
 function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const [couponPage, setCouponPage] = useState(1)
   const [productPage, setProductPage] = useState(1)
@@ -224,7 +227,7 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
       <div className="">
         <Tabs
           align="left"
-          shape="rounded"
+          shape={rounded ? 'rounded' : 'square'}
           value={activeTab.toString()}
           onValueChange={value => {
             setActiveTab(Number(value))
@@ -257,7 +260,12 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
                       {data.orderNumberLabel}: {item.orderNumber}
                     </div>
                   )}
-                  <div className="flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]">
+                  <div
+                    className={classNames(
+                      'flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]',
+                      !rounded && 'rounded-none'
+                    )}
+                  >
                     <div className="grid gap-[4px]">
                       <div className="text-[16px] font-bold leading-[1.4]">{item.title}</div>
                       <div className="text-[14px] font-semibold text-[#999]">
@@ -267,7 +275,7 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
                         {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}
                         {item?.couponCode && (
                           <span
-                            className="cursor-pointer text-[14px] font-semibold text-brand underline"
+                            className="cursor-pointer text-[14px] font-semibold text-brand-0 underline"
                             onClick={() => {
                               handleCopy(item.couponCode, index)
                             }}