@anker-in/campaign-ui 0.2.10-beta.8 → 0.2.11-beta.2

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 { useShopifyContext } from '@anker-in/shopify'
+import { useHeadlessContext } from '@anker-in/lib'
+import { useCreditsContext } from '../../context/provider'
 
 type ProductInfoProps = {
   item: RedeemableItemType
@@ -10,7 +11,8 @@ type ProductInfoProps = {
 }
 
 export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
-  const { locale } = useShopifyContext()
+  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

@@ -8,7 +8,7 @@ import { useRedeemProduct } from '../../context/hooks/useRedeemProduct'
 import type { ModalContainerProps } from '../../modal/modalContainer'
 import { CreditsModalContainer } from '../../modal/modalContainer'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
-import { useShopifyContext } from '@anker-in/shopify'
+import { useHeadlessContext } from '@anker-in/lib'
 import { CreditsRedeemListCopy } from '../type'
 import { Error } from './Error'
 import { Success } from './Success'
@@ -23,9 +23,9 @@ type RedeemProductModalProps = ModalContainerProps & {
 
 function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModalProps) {
   const { fetchCreditInfo, profile } = useCreditsContext()
-  const { storeDomain, locale } = useShopifyContext()
+  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,
@@ -127,7 +127,6 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
       // 地址校验错误
       return
     }
-    console.log('address', address)
     let requestAddress = { ...address }
     if (requestAddress.name) {
       delete requestAddress.name

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

@@ -8,7 +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 } from '../../../helpers/track'
+import { gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { NoneProductValue } from './NonProductValue'
 
 export function RedeemableItem({
   copy,
@@ -27,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) {
@@ -63,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
   }, [
@@ -72,45 +76,32 @@ 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
       )}
     >
-      {item.config?.type !== ConsumeType.Product ? (
-        <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
+      {item.config?.type === ConsumeType.Product ? (
+        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>
           <Picture
-            source={copy?.imageMapping[item.config?.type]?.url}
-            className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
+            className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
+            source={item.config?.image?.url || item.product.images?.[0]?.url}
           ></Picture>
-          <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white md:bottom-[2px] md:left-[5px]">
-            {item.config?.value ? (
-              <div className="flex items-end">
-                <Text
-                  className="text-[64px] font-bold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]"
-                  html={item.config?.value}
-                />
-                <Text
-                  className="ml-[4px] text-[24px] font-bold leading-[2] md:ml-[2px] l:text-[12px] xxl:leading-[1.4] l-xxl:text-[20px]"
-                  html={item.config?.type === ConsumeType.GiftCard ? copy?.giftCardLabel : copy?.off}
-                />
-              </div>
-            ) : (
-              <Text size={3} html={item.config?.title || item.alpc?.title} />
-            )}
-          </div>
         </div>
       ) : (
-        <div className={classNames('relative mx-auto h-[224px] w-fit md:my-[10px] l:h-[120px] l-xxl:h-[138px]')}>
+        <div className="relative mx-auto my-[30px] h-[164px] md:my-0 md:h-[66px] l-xxl:h-[138px] md-l:h-[80px]">
           <Picture
-            className="h-full w-auto [&_img]:h-full [&_img]:object-contain"
-            source={item.config?.image?.url || item.product.images?.[0]?.url}
+            source={pageCommon?.imageMapping?.[item.config?.type]?.url}
+            className="h-full [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
           ></Picture>
+
+          <NoneProductValue item={item} />
         </div>
       )}
       <div className={classNames('mt-[22px] flex w-full flex-1 flex-col justify-between')}>
@@ -118,7 +109,7 @@ export function RedeemableItem({
           html={item.config?.title || item.alpc?.title}
           title={item.config?.title || item.alpc?.title}
           size={2}
-          className="text-[24px] font-bold leading-[1.2] l:text-[16px] l-xxl:text-[20px]"
+          className="line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:h-[40px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"
         />
         {item.config?.rules?.length > 0 && (
           <button
@@ -132,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(),
                 },
               })
@@ -145,20 +136,20 @@ export function RedeemableItem({
               }
             }}
           >
-            {copy?.ruleLabel}
+            {pageCommon?.ruleLabel}
           </button>
         )}
         <div>
-          <div className="mt-[24px] flex items-center l:mt-[12px] l-xl:mt-[16px]">
+          <div className="mt-[26px] flex items-center l:mt-[12px] l-xl:mt-[16px]">
             <Picture
-              className="size-[20px]"
+              className="size-[24px] l-xxl:size-[22px] md-l:size-[18px] md:size-[16px]"
               source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
             />
             <Text
               html={`${numberFormat(item.alpc?.consumeCredits)}`}
               size={2}
               as="p"
-              className="ml-[4px] text-[28px] font-bold leading-[1.2] md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+              className="ml-[4px] text-[28px] font-bold mt-[4px] leading-none md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
             />
           </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,15 +158,14 @@ 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 })}
                     {...(item.handleClick && { onClick: item.handleClick })}
                     variant="primary"
-                    loading={item.id === TaskType.Activate && activate.isSendingActivateEmail}
                     size="lg"
                     className="mt-[24px] w-fit"
                   >
@@ -159,8 +180,8 @@ export const CreditsWaysToGetCredits = ({
             ))}
             {!showMore && (
               <div
-                className="absolute inset-0 min-md:hidden"
-                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%' }}
+                className="absolute inset-0 pointer-events-none min-md:hidden"
+                style={{ background: 'linear-gradient(180deg, rgba(29, 29, 31, 0) 66.37%, #1D1D1F 100%)' }}
               ></div>
             )}
           </motion.div>
@@ -184,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,22 +45,9 @@ export enum TaskType {
 }
 
 export type CreditsWaysToGetCreditsProps = {
-  copy: WaysToGetCreditsCopy
+  copy: CreditsWaysToGetCreditsCopy
   classNames?: {
     equalCreditsText?: string
     subtitle?: string
   }
-  activate: {
-    openAuthCodePopup: () => void
-    isSuccess: boolean
-    isSendingActivateEmail: boolean
-  }
-  subscribe: {
-    openSubscribePopup: () => void
-    isSuccess: boolean
-  }
-  uploadReceipt: {
-    openUploadReceiptPopup: () => void
-    isSuccess: boolean
-  }
 }

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

@@ -1,29 +1,40 @@
+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 { useShopifyContext } from '@anker-in/shopify'
-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()
-  const { appName } = useShopifyContext()
+  const { appName, passportUrl } = useHeadlessContext()
 
   const profileCompleted = useMemo(() => {
     return (profile?.first_name || profile?.last_name) && profile?.phone_number && profile?.dob
@@ -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,
               }),
@@ -107,7 +121,7 @@ export const useActions = ({
           },
           notFinished: {
             buttonLabel: copy?.completeProfile,
-            link: `/account/profile?app=${appName}`,
+            link: `${passportUrl}/account/profile?app=${appName}`,
             handleClick: () =>
               handleClickWithTrack({
                 buttonName: copy?.completeProfile,