@anker-in/campaign-ui 0.3.4 → 0.4.0-beta.1

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

@@ -1,41 +1,34 @@
-import { Button, Picture, Text } from '@anker-in/headless-ui'
-import classNames from 'classnames'
+import { Text } from '@anker-in/headless-ui'
 import { useCallback, useEffect, useState } from 'react'
-import type { ModalContainerProps } from '../modal/modalContainer'
-import useCopy from '../context/hooks/useCopy'
+import type { ModalContainerProps } from '../modal/ModalContainer'
 import { useCreditsContext } from '../context/provider'
 import { useRedeemCoupon } from '../context/hooks/useRedeemCoupon'
 import { AlpcErrorCode } from '../context/const'
-import { CreditsModalContainer } from '../modal/modalContainer'
-import { numberFormat } from '../context/utils'
-import type { RedeemableItem as RedeemableItemType } from '../type'
-import { useHeadlessContext } from '@anker-in/lib'
-import { CreditsRedeemListCopy } from './type'
-import { NoneProductValue } from './RedeemProductModal/NonProductValue'
+import { CreditsModalContainer } from '../modal/ModalContainer'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../type'
+import { CouponInit } from './RedeemCouponModal/CouponInit'
+import { CouponSuccess } from './RedeemCouponModal/CouponSuccess'
 
 function RedeemCouponModal({
   item,
   copy,
   onError,
   ...props
-}: ModalContainerProps & {
+}: Omit<ModalContainerProps, 'isOpen'> & {
   item: RedeemableItemType
-  copy: CreditsRedeemListCopy
+  copy: RedeemModalCommon
   onError: (code: number) => void
 }) {
-  const { locale } = useHeadlessContext()
   const [couponCode, setCouponCode] = useState<string>()
   const [errorInfo, setErrorInfo] = useState<string>()
-
   const [disabled, setDisabled] = useState(false)
-  const { copy: copyText, copied: copiedStatus } = useCopy()
 
-  const { profile, fetchCreditInfo, pageCommon } = useCreditsContext()
+  const { profile, fetchCreditInfo } = useCreditsContext()
 
   const { isMutating: loading, trigger } = useRedeemCoupon({
     onSuccess(responseData) {
       if (!responseData) {
-        setErrorInfo(copy.redeemModal.commonError)
+        setErrorInfo(copy.commonError)
         return
       }
 
@@ -45,26 +38,26 @@ function RedeemCouponModal({
       } else {
         let errorMsg
         if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-          errorMsg = copy.redeemModal.redeemLimitError
+          errorMsg = copy.redeemLimitError
           setDisabled(true)
         } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-          errorMsg = copy.redeemModal.inventoryNotEnough
+          errorMsg = copy.inventoryNotEnough
           setDisabled(true)
         } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-          errorMsg = copy.redeemModal.creditsNotEnough
+          errorMsg = copy.creditsNotEnough
           setDisabled(true)
           fetchCreditInfo(profile?.user_id)
         } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {
-          errorMsg = copy.redeemModal.crossSiteError
+          errorMsg = copy.crossSiteError
           setDisabled(true)
         }
 
-        setErrorInfo(errorMsg || copy.redeemModal.commonError || '')
+        setErrorInfo(errorMsg || copy.commonError || '')
         onError && onError(responseData.code)
       }
     },
     onError(error) {
-      setErrorInfo(error.message || copy.redeemModal.commonError)
+      setErrorInfo(error.message || copy.commonError)
     },
   })
 
@@ -77,133 +70,31 @@ function RedeemCouponModal({
   }, [item, profile, trigger])
 
   useEffect(() => {
-    if (!props.isOpen) {
+    return () => {
       setDisabled(false)
       setErrorInfo('')
+      setCouponCode(undefined)
     }
-  }, [props.isOpen])
+  }, [])
 
   return (
     <CreditsModalContainer
       {...props}
+      isOpen={!!item}
       className="w-[540px] md:h-auto"
       scrollClassName="mb-[40px] min-l:px-0 md:mb-[24px] px-0"
       titleClassName="h-[56px] bg-[#F5F5F7]"
     >
-      <div
-        className={classNames(
-          'max-h-[500px] overflow-y-auto bg-[#F5F5F7] px-[48px] pb-[24px] md:max-h-[400px] md:px-[16px]'
-        )}
-      >
-        <div className="relative mx-auto h-[164px] w-[324px]">
-          {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 ? (
-              <NoneProductValue item={item} copy={copy} />
-            ) : (
-              <Text size={3} html={item.alpc?.title} />
-            )}
-          </div>
+      {couponCode && !loading ? (
+        <CouponSuccess item={item} copy={copy} couponCode={couponCode} disabled={disabled} onClose={props.onClose} />
+      ) : (
+        <CouponInit item={item} copy={copy} loading={loading} disabled={disabled} onConfirm={handleConfirm} />
+      )}
+      {errorInfo && (
+        <div className="mx-auto max-w-full bg-white px-[48px] py-[12px] text-center text-[#FF0000] md:px-[16px]">
+          <Text className="text-[14px] font-semibold text-[#1F2021]" html={errorInfo} />
         </div>
-        {couponCode ? (
-          <div className="mt-[30px] flex items-center justify-center md:mt-[18px]">
-            <div className="mr-[10px] text-[24px] font-bold leading-[1.4] md:leading-[1.2]">{couponCode}</div>
-            <div
-              className={classNames(
-                'cursor-pointer text-[16px] font-bold leading-[1.2] underline md:text-[14px]',
-                copiedStatus ? 'pointer-events-none' : 'pointer-events-auto'
-              )}
-              onClick={() => {
-                copyText(couponCode)
-              }}
-              role="button"
-              tabIndex={0}
-              onKeyDown={e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                }
-              }}
-            >
-              {copiedStatus ? pageCommon?.copied : pageCommon?.copy}
-            </div>
-          </div>
-        ) : (
-          <Text
-            as="p"
-            className={classNames(
-              '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)} {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]">{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}>
-                  <Text html={text} />
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
-        {couponCode && !loading ? (
-          <>
-            <div className="flex flex-col">
-              <Text
-                className="mb-[4px] text-[24px] font-bold leading-[1.2] md:text-[20px]"
-                html={copy.redeemModal.coupon.successTitle}
-              ></Text>
-              <Text
-                className="text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:text-[14px]"
-                html={copy.redeemModal.coupon.successDesc}
-              ></Text>
-            </div>
-            <Button
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={() => {
-                window.location.href = copy.redeemModal.coupon.successButtonUrl || `/${locale}`
-                if (props.onClose) {
-                  props.onClose()
-                }
-              }}
-              disabled={disabled}
-            >
-              {copy.redeemModal.coupon.successButton}
-            </Button>
-          </>
-        ) : (
-          <>
-            <Text
-              className="block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"
-              html={copy.redeemModal.confirmTitle}
-            ></Text>
-            <Button
-              loading={loading}
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={handleConfirm}
-              disabled={disabled}
-            >
-              {copy.redeemModal.confirmButton}
-            </Button>
-          </>
-        )}
-        {errorInfo && (
-          <div className="mx-auto max-w-full py-[12px] text-center text-[#FF0000]">
-            <Text className="text-[14px] font-semibold text-[#1F2021]" html={errorInfo} />
-          </div>
-        )}
-      </div>
+      )}
     </CreditsModalContainer>
   )
 }

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

@@ -2,14 +2,13 @@ import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
 import { useHeadlessContext } from '@anker-in/lib'
-import type { RedeemableItem as RedeemableItemType } from '../../type'
-import { CreditsRedeemListCopy } from '../type'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
 import { ProductInfo } from './ProductInfo'
 import useCountries from '../../context/hooks/useCountries'
 import { ROUNDED_BRANDS } from '../../../../constants'
 
 type AddressProps = {
-  copy: CreditsRedeemListCopy
+  copy: RedeemModalCommon
   shippingAddress: string
   setAddress: (address: Record<string, any>) => void
   validateAddress: (address: Record<string, any>) => boolean
@@ -44,12 +43,12 @@ 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>}
-          {copy.redeemModal?.product?.addressForm && (
+          {copy?.product?.addressForm && (
             <AddressForm
               onChange={setAddress}
               validate={validateAddress}
               errors={validateErrors}
-              form={copy.redeemModal.product.addressForm}
+              form={copy.product.addressForm}
               countries={countries}
               countriesLoading={countriesLoading}
             ></AddressForm>
@@ -68,7 +67,7 @@ export const Address = ({
           onClick={handlePayment}
           disabled={disabled}
         >
-          {copy.redeemModal.product.paymentButton}
+          {copy.product.paymentButton}
         </Button>
       </div>
     </div>

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

@@ -2,14 +2,13 @@ import { Button, Picture, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { Fragment, useMemo } from 'react'
 import { numberFormat } from '../../context/utils'
-import type { RedeemableItem as RedeemableItemType } from '../../type'
-import { CreditsRedeemListCopy } from '../type'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
 import { ConsumeType } from '../../context/const'
 import { NoneProductValue } from './NonProductValue'
 import { useCreditsContext } from '../../context/provider'
 
 type InitProps = {
-  copy: CreditsRedeemListCopy
+  copy: RedeemModalCommon
   item: RedeemableItemType
   loading: boolean
   disabled: boolean
@@ -23,8 +22,8 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
       return item.config.rules
     }
     const descriptions = item.config.desc?.split('<br>') || []
-    return [...descriptions, ...(copy.redeemModal.product.rules || [])]
-  }, [item.config.rules, item.config.desc, copy.redeemModal.product.rules])
+    return [...descriptions, ...(copy.product.rules || [])]
+  }, [item.config.rules, item.config.desc, copy.product.rules])
 
   return (
     <div className="flex flex-col">
@@ -38,14 +37,14 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
             <Picture
               source={
                 item.config?.type === ConsumeType.Product
-                  ? item.product.images[0]?.url
+                  ? item.product?.images[0]?.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>
             {/* 礼品卡展示 */}
             <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
-              {item.config.value && <NoneProductValue item={item} copy={copy} />}
+              {item.config.value && <NoneProductValue item={item} />}
             </div>
           </div>
           <div className="mt-[30px] md:mt-[18px]">
@@ -66,9 +65,9 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
             </Text>
           </div>
           <div className="mt-[16px] w-full text-[14px] font-semibold text-[#777] md:mt-[12px]">
-            <div className="text-[16px] font-bold leading-[1.4]">{copy.redeemModal.product.stepTitle}</div>
+            <div className="text-[16px] font-bold leading-[1.4]">{copy.product.stepTitle}</div>
             <div className="mt-[4px] flex items-center justify-center">
-              {copy.redeemModal.product.steps?.map((item, index) => (
+              {copy.product.steps?.map((item, index) => (
                 <Fragment key={index}>
                   <div className="flex w-[76px] flex-col items-center text-center md:h-[94px] min-l:w-[130px]">
                     <Picture source={item.imageUrl} className="mb-[4px] h-[58px] w-[58px]"></Picture>
@@ -76,7 +75,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
                       {item.title}
                     </div>
                   </div>
-                  {index !== copy.redeemModal.product.steps.length - 1 && (
+                  {index !== copy.product.steps.length - 1 && (
                     <Picture
                       source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/step-arrow.png?v=1690458150"
                       className="mb-[20px] h-[10px] w-[20px] md:mb-[30px] md:h-[5px] md:w-[12px]"
@@ -103,7 +102,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
         <Text
           as="p"
           className="block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"
-          html={copy.redeemModal.confirmTitle}
+          html={copy.confirmTitle}
         ></Text>
         <Button
           loading={loading}
@@ -115,7 +114,7 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
             setStatus('address')
           }}
         >
-          {copy.redeemModal.confirmButton}
+          {copy.confirmButton}
         </Button>
       </div>
     </div>

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

@@ -1,25 +1,34 @@
 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 }) => {
+export const NoneProductValue = ({ item }: { item: RedeemableItem }) => {
   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" />
-  } else {
-    return item.config?.value ? (
-      <div className="flex items-end gap-[4px]">
-        <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 ? pageCommon?.off : pageCommon?.giftCardLabel}
-        />
-      </div>
-    ) : (
-      <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.title} as="p" />
-    )
   }
+
+  if (!item.config?.value) {
+    return <Text className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.title} as="p" />
+  }
+
+  // 根据类型确定后缀文案
+  let suffixLabel = ''
+  if (item.config.type === ConsumeType.Coupon) {
+    suffixLabel = pageCommon?.off || ''
+  } else if (item.config.type === ConsumeType.GoGift) {
+    suffixLabel = pageCommon?.goGiftLabel || ''
+  } else if (item.config.type === ConsumeType.GiftCard) {
+    suffixLabel = pageCommon?.giftCardLabel || ''
+  }
+
+  return (
+    <div className="flex items-end gap-[4px]">
+      <Text className="text-[64px] font-extrabold leading-none" html={item.config.value.toString()} />
+      {suffixLabel && <Text className="text-[24px] font-bold leading-[2]" html={suffixLabel} />}
+    </div>
+  )
 }

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

@@ -1,31 +1,33 @@
 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 type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
 import { useHeadlessContext } from '@anker-in/lib'
 import { useCreditsContext } from '../../context/provider'
 
 type ProductInfoProps = {
   item: RedeemableItemType
-  copy: CreditsRedeemListCopy
+  copy: RedeemModalCommon
 }
 
 export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
   const { locale } = useHeadlessContext()
   const { pageCommon } = useCreditsContext()
 
+  // ProductInfo 只在 RedeemProductModal 中使用，此时 product 和 variant 必定存在
+  if (!item.product || !item.variant) return null
+
   return (
     <div className="flex w-full items-center justify-center md:items-start md:justify-start">
       <Picture
         className="mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:hidden md:size-[44px] [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
-        source={item.variant.image?.url || item.product?.images[0]?.url}
+        source={item.variant.image?.url || item.product.images[0]?.url}
         alt={item.product.title}
       ></Picture>
       <div className="md:flex md:flex-col">
         <div className="md:flex md:items-center">
           <Picture
             className="mr-[16px] size-[100px] shrink-0 md:mr-[12px] md:size-[44px] min-md:hidden [&_img]:h-full [&_img]:w-auto [&_img]:object-contain"
-            source={item.variant.image?.url || item.product?.images[0]?.url}
+            source={item.variant.image?.url || item.product.images[0]?.url}
             alt={item.product.title}
           ></Picture>
           <div className="flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden" title={item.product.title}>
@@ -43,12 +45,12 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
             <div className="mr-[40px] text-[15px] font-bold text-[#777] md:mr-0 md:text-[12px]">
               {item.variant.title && item.variant.title.toLowerCase() !== 'default title' && (
                 <div className="mb-[8px] flex items-center md:mb-[4px]">
-                  <span>{copy.redeemModal.product.variantLabel}: </span>
+                  <span>{copy.product.variantLabel}: </span>
                   <span className="ml-1">{item.variant.title}</span>
                 </div>
               )}
               <div className="mb-[8px] flex items-center md:mb-[4px]">
-                <span>{copy.redeemModal.product.shippingFeeLabel}: </span>
+                <span>{copy.product.shippingFeeLabel}: </span>
                 <span className="ml-1">
                   {formatPrice({
                     amount: 0,
@@ -60,11 +62,11 @@ export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
             </div>
             <div className="text-[15px] font-bold text-[#777] md:text-[12px]">
               <div className="mb-[8px] flex items-center md:mb-[4px]">
-                <span>{copy.redeemModal.product.quantityLabel}: </span>
+                <span>{copy.product.quantityLabel}: </span>
                 <span className="ml-1">1</span>
               </div>
               <div className="l:flex l:items-center l:justify-between">
-                <span>{copy.redeemModal.product.totalPriceLabel}: </span>
+                <span>{copy.product.totalPriceLabel}: </span>
                 <span className="ml-1">
                   {item.alpc?.consumeCredits} {pageCommon?.pointUnit}
                 </span>

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

@@ -1,13 +1,12 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
-import type { RedeemableItem as RedeemableItemType } from '../../type'
-import { CreditsRedeemListCopy } from '../type'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
 import { ProductInfo } from './ProductInfo'
 import { useHeadlessContext } from '@anker-in/lib'
 import { ROUNDED_BRANDS } from '../../../../constants'
 
 type SuccessProps = {
-  copy: CreditsRedeemListCopy
+  copy: RedeemModalCommon
   shippingProduct: string
   loading: boolean
   address: Record<string, any> | undefined
@@ -23,7 +22,7 @@ export const Success = ({ copy, shippingProduct, loading, address, disabled, onC
     <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">
         <div className="mb-[16px] grid grid-flow-row gap-y-[4px] md:mb-[12px]">
-          {copy.redeemModal.product.successDesc.map((description: string, index: number) => (
+          {copy.product.successDesc.map((description: string, index: number) => (
             <Text key={index} className="text-[18px] font-bold leading-[1.4] md:text-[14px]" html={description}></Text>
           ))}
         </div>
@@ -41,7 +40,7 @@ export const Success = ({ copy, shippingProduct, loading, address, disabled, onC
           onClick={onClose}
           disabled={disabled}
         >
-          {copy.redeemModal.product.paymentButton}
+          {copy.product.paymentButton}
         </Button>
       </div>
     </div>

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

@@ -5,28 +5,26 @@ import useCountries from '../../context/hooks/useCountries'
 import { AlpcErrorCode } from '../../context/const'
 import { useAddressValidate } from '../../context/hooks/useAddressValidate'
 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 type { ModalContainerProps } from '../../modal/ModalContainer'
+import { CreditsModalContainer } from '../../modal/ModalContainer'
+import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
 import { useHeadlessContext } from '@anker-in/lib'
-import { CreditsRedeemListCopy } from '../type'
 import { Error } from './Error'
 import { Success } from './Success'
 import { Address } from './Address'
 import { Init } from './Init'
 
-type RedeemProductModalProps = ModalContainerProps & {
+type RedeemProductModalProps = Omit<ModalContainerProps, 'isOpen'> & {
   item: RedeemableItemType
-  copy: CreditsRedeemListCopy
+  copy: RedeemModalCommon
   onError: (code: AlpcErrorCode) => void
 }
 
 function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModalProps) {
-  const { fetchCreditInfo, profile } = useCreditsContext()
-  const { storeDomain, locale } = useHeadlessContext()
+  const { fetchCreditInfo, profile, pageCommon } = useCreditsContext()
+  const { storeDomain } = useHeadlessContext()
 
-  const { pageCommon } = useCreditsContext()
-  const { shippingAddress, shippingProduct } = copy.redeemModal.product
+  const { shippingAddress, shippingProduct } = copy.product
 
   const [status, setStatus] = useState<'init' | 'address' | 'success' | 'error'>('init')
   const [address, setAddress] = useState<any>()
@@ -45,8 +43,8 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
         setStatus('error')
         setErrorInfo({
           code: 0,
-          imageUrl: copy.redeemModal.errorImageUrl || '',
-          message: copy.redeemModal.commonError || '',
+          imageUrl: copy.errorImageUrl || '',
+          message: copy.commonError || '',
         })
         return
       }
@@ -58,26 +56,26 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
         let errorMsg
         let errorImage
         if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-          errorMsg = copy.redeemModal.redeemLimitError
+          errorMsg = copy.redeemLimitError
           setDisabled(true)
         } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-          errorMsg = copy.redeemModal.inventoryNotEnough
+          errorMsg = copy.inventoryNotEnough
           setDisabled(true)
-          errorImage = copy.redeemModal.inventoryNotEnough
+          errorImage = copy.inventoryNotEnough
         } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-          errorMsg = copy.redeemModal.creditsNotEnough
+          errorMsg = copy.creditsNotEnough
           setDisabled(true)
           fetchCreditInfo(profile?.user_id)
         } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {
-          errorMsg = copy.redeemModal.crossSiteError
+          errorMsg = copy.crossSiteError
           setDisabled(true)
         }
 
         setStatus('error')
         setErrorInfo({
           code: responseData.code,
-          imageUrl: errorImage || copy.redeemModal.errorImageUrl || '',
-          message: errorMsg || copy.redeemModal.commonError || '',
+          imageUrl: errorImage || copy.errorImageUrl || '',
+          message: errorMsg || copy.commonError || '',
         })
         onError && onError(responseData.code)
       }
@@ -86,24 +84,24 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
       setStatus('error')
       setErrorInfo({
         code: 0,
-        imageUrl: copy.redeemModal.errorImageUrl || '',
-        message: copy.redeemModal.commonError || '',
+        imageUrl: copy.errorImageUrl || '',
+        message: copy.commonError || '',
       })
     },
   })
 
   const stateInputKey = useMemo(() => {
-    const stateInput = copy?.redeemModal.product.form?.flat().find(item => item.type === 'state')
+    const stateInput = copy?.product.form?.flat().find(item => item.type === 'state')
     return stateInput?.key
-  }, [copy?.redeemModal.product.form])
+  }, [copy?.product.form])
 
   const { validate: validateAddress, errors: validateErrors } = useAddressValidate({
     address: address,
     validatorInfo: pageCommon?.validatorInfo,
-    formData: copy?.redeemModal.product.form?.flat() || [],
+    formData: copy?.product.form?.flat() || [],
     errorLabel: {
-      require: copy.redeemModal.product.required,
-      email: copy.redeemModal.product.invalidEmail,
+      require: copy.product.required,
+      email: copy.product.invalidEmail,
     },
   })
 
@@ -141,15 +139,18 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
   }, [item, trigger, stateInputKey, validateAddress, address, countries])
 
   useEffect(() => {
-    if (!props.isOpen) {
+    return () => {
       setDisabled(false)
       setErrorInfo({ code: 0, message: '', imageUrl: '' })
+      setStatus('init')
+      setAddress(undefined)
     }
-  }, [props.isOpen, locale])
+  }, [])
 
   return (
     <CreditsModalContainer
       {...props}
+      isOpen={!!item}
       className={classNames(
         'w-[540px] md:h-auto min-md:max-h-[calc(100vh-40px)]',
         status !== 'init' && 'w-[740px] md:w-full'