@anker-in/campaign-ui 0.2.10-beta.9 → 0.2.11-beta.3

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

@@ -9,8 +9,9 @@ import { AlpcErrorCode } from '../context/const'
 import { CreditsModalContainer } from '../modal/modalContainer'
 import { numberFormat } from '../context/utils'
 import type { RedeemableItem as RedeemableItemType } from '../type'
-import { useShopifyContext } from '@anker-in/shopify'
+import { useHeadlessContext } from '@anker-in/lib'
 import { CreditsRedeemListCopy } from './type'
+import { NoneProductValue } from './RedeemProductModal/NonProductValue'
 
 function RedeemCouponModal({
   item,
@@ -22,14 +23,14 @@ function RedeemCouponModal({
   copy: CreditsRedeemListCopy
   onError: (code: number) => void
 }) {
-  const { locale } = useShopifyContext()
+  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 } = useCreditsContext()
+  const { profile, fetchCreditInfo, pageCommon } = useCreditsContext()
 
   const { isMutating: loading, trigger } = useRedeemCoupon({
     onSuccess(responseData) {
@@ -95,15 +96,12 @@ function RedeemCouponModal({
         )}
       >
         <div className="relative mx-auto h-[164px] w-[324px]">
-          {copy?.imageMapping?.coupon?.url && (
-            <Picture source={copy?.imageMapping?.coupon?.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 ? (
-              <div className="flex items-end gap-[4px]">
-                <Text className="text-[64px] font-bold leading-none" html={item.config.value.toString()} />
-                <Text className="text-[24px] font-bold leading-[2]" html={copy?.off} />
-              </div>
+              <NoneProductValue item={item} copy={copy} />
             ) : (
               <Text size={3} html={item.alpc?.title} />
             )}
@@ -128,7 +126,7 @@ function RedeemCouponModal({
                 }
               }}
             >
-              {copiedStatus ? copy?.copied : copy?.copy}
+              {copiedStatus ? pageCommon?.copied : pageCommon?.copy}
             </div>
           </div>
         ) : (
@@ -138,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}>
@@ -201,7 +199,7 @@ function RedeemCouponModal({
           </>
         )}
         {errorInfo && (
-          <div className="mx-auto max-w-full py-[12px] text-center">
+          <div className="mx-auto max-w-full py-[12px] text-center text-[#FF0000]">
             <Text className="text-[14px] font-semibold text-[#1F2021]" html={errorInfo} />
           </div>
         )}

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

@@ -1,11 +1,12 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useShopifyContext } from '@anker-in/shopify'
+import { useHeadlessContext } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
 import useCountries from '../../context/hooks/useCountries'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 type AddressProps = {
   copy: CreditsRedeemListCopy
@@ -34,7 +35,8 @@ export const Address = ({
   handlePayment,
   item,
 }: AddressProps) => {
-  const { storeDomain } = useShopifyContext()
+  const { storeDomain, brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
 
   return (
@@ -42,18 +44,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/Error.tsx

@@ -6,7 +6,7 @@ type ErrorProps = {
 
 export const Error = ({ errorInfo }: ErrorProps) => {
   return (
-    <div className="mx-auto max-w-[404px] text-[16px] text-black/40">
+    <div className="mx-auto max-w-[404px] text-[16px] text-black/40 py-[56px]">
       <Picture className="mx-auto mb-[12px] h-[140px] w-[220px]" source={errorInfo.imageUrl} />
       <Text as="div" className="mt-[16px] text-center" html={errorInfo.message} />
     </div>

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

@@ -5,6 +5,8 @@ import { numberFormat } from '../../context/utils'
 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
@@ -15,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
@@ -23,7 +26,6 @@ export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) =>
     return [...descriptions, ...(copy.redeemModal.product.rules || [])]
   }, [item.config.rules, item.config.desc, copy.redeemModal.product.rules])
 
-  console.log('item', item)
   return (
     <div className="flex flex-col">
       <div
@@ -37,21 +39,13 @@ 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>
             {/* 礼品卡展示 */}
             <div className="absolute bottom-[8px] left-[16px] font-extrabold text-white">
-              {item.config.value && (
-                <div className="flex items-end gap-[4px]">
-                  <Text className="text-[64px] font-bold 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}
-                  />
-                </div>
-              )}
+              {item.config.value && <NoneProductValue item={item} copy={copy} />}
             </div>
           </div>
           <div className="mt-[30px] md:mt-[18px]">
@@ -68,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

@@ -0,0 +1,25 @@
+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" />
+  } 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" />
+    )
+  }
+}

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,8 @@ import classNames from 'classnames'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
+import { useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../../constants'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy
@@ -15,6 +17,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 +30,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,9 @@ 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 } from '@anker-in/lib'
+import { NoneProductValue } from './NonProductValue'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export function RedeemableItem({
   copy,
@@ -27,8 +29,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 +68,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 +77,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 +110,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 +124,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 +137,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
+}