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

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,6 @@
-import { CreditsPageCommon } from '../type'
-
 export type CreditsRedeemListCopy = {
   title: string
-  giftCardLabel: string
+  availableCredits: string
   unlockRewards: string
   btnRedeem: string
   list: {
@@ -14,15 +12,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 +61,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, id }: CreditsWaysToGetCreditsProps & { id?: string }) => {
   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 => {
@@ -77,8 +91,13 @@ export const CreditsWaysToGetCredits = ({
   }, [actions, copy.list, isLogin])
 
   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]">
+    <Container id={id} className=" bg-[#F5F5F7] [&>div]:l:!px-0">
+      <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]">
@@ -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]">

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

@@ -4,7 +4,7 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { cn } from '../../../helpers/utils'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
@@ -44,6 +44,8 @@ interface ActivitiesModalProps extends ModalContainerProps {
 function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
   const [page, setPage] = useState(1)
   const { taskIdToTypeMapping } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const myActivitiesOptions = useMemo(() => {
     return {
@@ -178,7 +180,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       <div className="w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto">
         <Tabs
           align="left"
-          shape="rounded"
+          shape={rounded ? 'rounded' : 'square'}
           value={activeTab.toString()}
           onValueChange={value => {
             setActiveTab(Number(value))
@@ -208,7 +210,10 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
               list.map((item, index) => (
                 <div
                   key={index}
-                  className="flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]"
+                  className={cn(
+                    'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
+                    !rounded && 'rounded-none'
+                  )}
                 >
                   <div className="grid gap-[6px]">
                     <div className="font-bold">{item.title}</div>

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

@@ -2,6 +2,8 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './modalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import classNames from 'classnames'
 
 export type ReceiptCopy = {
   title: string
@@ -43,6 +45,9 @@ export function CreditsUploadReceiptModal({
     isSuccess: false,
   })
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   const handleSubmit = useCallback(() => {
     trigger(
       { orderName },
@@ -106,7 +111,10 @@ export function CreditsUploadReceiptModal({
       </Text>
       <input
         placeholder={copy.placeholder}
-        className="mt-[24px] h-[50px] w-full rounded-[2px] border border-[#6D6D6F] pl-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0 md:rounded-[4px] md:placeholder:text-[14px]"
+        className={classNames(
+          'mt-[24px] h-[50px] w-full rounded-[2px] border border-[#6D6D6F] pl-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0 md:rounded-[4px] md:placeholder:text-[14px]',
+          !rounded && 'rounded-none'
+        )}
         value={orderName}
         onChange={e => setOrderName(e.target.value)}
       />

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

@@ -1,4 +1,4 @@
-import { cn } from '../../../helpers/utils'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
 
@@ -41,6 +41,9 @@ export const CreditsModalContainer = ({
     })
   }, [isOpen, useAnimation])
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   return (
     <ReactModal
       isOpen={isOpen ?? false}
@@ -50,6 +53,7 @@ export const CreditsModalContainer = ({
       )}
       className={cn(
         'min-md:max-h-[calc(100vh-96px)] relative flex min-h-[200px] flex-col overflow-hidden rounded-[16px] bg-white outline-none transition-all duration-300 md:h-[88.27vh] md:w-full md:rounded-b-none',
+        !rounded && 'rounded-none',
         animationShow ? '' : animationClassName,
         className
       )}

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

@@ -2,7 +2,7 @@ import { Text } from '@anker-in/headless-ui'
 import { useMemo } from 'react'
 
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { cn } from '../../../helpers/utils'
+import { classNames as cn } from '@anker-in/lib'
 
 function RulesModal({
   rules,