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

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

@@ -0,0 +1,156 @@
+import classNames from 'classnames'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { CountrySelect } from './CountrySelect'
+import { FormItem } from './FormItem'
+import { Input } from './Input'
+import { StateSelect } from './StateSelect'
+import { ALPC_COUNTRY_MAP } from '../../context/const'
+import { useCreditsContext } from '../../context/provider'
+import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { AddressFormProps } from './type'
+
+export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
+  const { profile, customer } = useCreditsContext()
+  const { locale } = useShopifyContext()
+
+  const [address, setAddress] = useState<Record<string, any>>()
+
+  const states = useMemo(() => {
+    const currentCountry = countries.find(item => item.code === address?.country)
+
+    return currentCountry?.provinces || []
+  }, [address, countries])
+
+  const stateInputKey = useMemo(() => {
+    const stateInput = form?.flat().find(item => item.type === 'state')
+    return stateInput?.key
+  }, [form])
+
+  const getDefaultAddress = useCallback(() => {
+    if (customer?.defaultAddress) {
+      return {
+        name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),
+        first_name: customer?.defaultAddress.firstName,
+        last_name: customer?.defaultAddress.lastName,
+        address1: customer?.defaultAddress.address1,
+        address2: customer?.defaultAddress.address2,
+        city: customer?.defaultAddress.city,
+        phone: customer?.defaultAddress.phone,
+        country: customer?.defaultAddress.countryCodeV2,
+        province: customer?.defaultAddress.province,
+        province_code: customer?.defaultAddress.provinceCode,
+        email: customer?.email || profile?.email,
+        zip: customer?.defaultAddress.zip,
+      }
+    } else {
+      let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale
+      if (defaultCountry === 'UK') {
+        defaultCountry = 'GB'
+      }
+      if (defaultCountry === 'EU') {
+        defaultCountry = 'NL'
+      }
+      return {
+        email: profile?.email,
+        country: defaultCountry,
+      }
+    }
+  }, [customer, profile?.email, locale])
+
+  console.log('customer', customer)
+  useEffect(() => {
+    if (customer) {
+      const defaultAddress = getDefaultAddress()
+      setAddress(defaultAddress)
+      onChange(defaultAddress)
+    }
+  }, [customer, getDefaultAddress])
+
+  if (!address) {
+    return null
+  }
+
+  return (
+    <div className="grid gap-[20px]">
+      {form &&
+        form.map((row, rowIndex: number) => (
+          <div key={rowIndex} className="item-center -mx-[6px] flex">
+            {row.map((input, inputIndex: number) => {
+              const error = errors.find(item => item.key === input.key)?.message
+              const inputClassName = classNames(
+                'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+                error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]'
+              )
+
+              if (input.type === 'state') {
+                if (!states.length) {
+                  return null
+                }
+              }
+
+              return (
+                <div key={inputIndex} className={classNames('mx-[6px] flex-1')}>
+                  <FormItem error={error} required={input.required} label={input.label}>
+                    {input.type === 'country' && (
+                      <CountrySelect
+                        className={inputClassName}
+                        countries={countries}
+                        loading={countriesLoading}
+                        value={address.country}
+                        onChange={selectedCountryCode => {
+                          if (address.country !== selectedCountryCode) {
+                            address.province = ''
+                            address.province_code = ''
+                          }
+                          address.country = selectedCountryCode
+                          setAddress({ ...address })
+                          onChange(address)
+                        }}
+                      ></CountrySelect>
+                    )}
+                    {input.type === 'state' && (
+                      <StateSelect
+                        className={inputClassName}
+                        states={states}
+                        stateCode={address.province_code}
+                        stateName={address.province}
+                        onChange={(provinceCode, provinceName) => {
+                          address.province_code = provinceCode
+                          address.province = provinceName
+                          setAddress({ ...address })
+                          onChange(address)
+                        }}
+                      ></StateSelect>
+                    )}
+
+                    {input.type !== 'state' && input.type !== 'country' && (
+                      <Input
+                        placeholder={input.label}
+                        className={inputClassName}
+                        error={error}
+                        value={address[input.key]}
+                        required={input.required}
+                        disabled={input.type === 'email'}
+                        onChange={event => {
+                          const value = event.target.value
+                          address[input.key] = value
+                          setAddress({ ...address })
+                          onChange(address)
+                        }}
+                        onBlur={() => {
+                          validate({
+                            ignoreKeys: states.length && stateInputKey ? [stateInputKey] : [],
+                          })
+                        }}
+                      />
+                    )}
+                  </FormItem>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { CreditsRedeemListCopy } from '../type'
+
+type ShippingCountry = {
+  id: string
+  name: string
+  code: string
+  provinces: {
+    id: string
+    name: string
+    code: string
+  }[]
+}
+
+export interface AddressFormProps {
+  form: CreditsRedeemListCopy['redeemModal']['product']['addressForm']
+  onChange: (address: any) => void
+  validate: (args: { force?: boolean; ignoreKeys?: string[] }) => boolean
+  errors: {
+    key: string
+    message: string
+  }[]
+  countries: ShippingCountry[]
+  countriesLoading: boolean
+}

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

@@ -0,0 +1,213 @@
+import { Button, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useCallback, useEffect, useState } from 'react'
+import type { ModalContainerProps } from '../modal/modalContainer'
+import useCopy from '../context/hooks/useCopy'
+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 { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { CreditsRedeemListCopy } from './type'
+
+function RedeemCouponModal({
+  item,
+  copy,
+  onError,
+  ...props
+}: ModalContainerProps & {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+  onError: (code: number) => void
+}) {
+  const { locale } = useShopifyContext()
+  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 { isMutating: loading, trigger } = useRedeemCoupon({
+    onSuccess(responseData) {
+      if (!responseData) {
+        setErrorInfo(copy.redeemModal.commonError)
+        return
+      }
+
+      if (responseData?.data?.success) {
+        setCouponCode(responseData.data.coupon_code)
+        fetchCreditInfo(profile?.user_id)
+      } else {
+        let errorMsg
+        if (responseData.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
+          errorMsg = copy.redeemModal.redeemLimitError
+          setDisabled(true)
+        } else if (responseData.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
+          errorMsg = copy.redeemModal.inventoryNotEnough
+          setDisabled(true)
+        } else if (responseData.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
+          errorMsg = copy.redeemModal.creditsNotEnough
+          setDisabled(true)
+          fetchCreditInfo(profile?.user_id)
+        } else if (responseData.code === AlpcErrorCode.CodeCrossSiteError) {
+          errorMsg = copy.redeemModal.crossSiteError
+          setDisabled(true)
+        }
+
+        setErrorInfo(errorMsg || copy.redeemModal.commonError || '')
+        onError && onError(responseData.code)
+      }
+    },
+    onError(error) {
+      setErrorInfo(error.message || copy.redeemModal.commonError)
+    },
+  })
+
+  const handleConfirm = useCallback(async () => {
+    setErrorInfo('')
+    trigger({
+      user_id: profile?.user_id,
+      rule_id: Number(item.alpc?.id),
+    })
+  }, [item, profile, trigger])
+
+  useEffect(() => {
+    if (!props.isOpen) {
+      setDisabled(false)
+      setErrorInfo('')
+    }
+  }, [props.isOpen])
+
+  return (
+    <CreditsModalContainer
+      {...props}
+      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]">
+          {copy?.imageMapping?.coupon?.url && (
+            <Picture source={copy?.imageMapping?.coupon?.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>
+            ) : (
+              <Text size={3} html={item.alpc?.title} />
+            )}
+          </div>
+        </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 ? copy?.copied : copy?.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)} {copy?.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>
+            <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 className="text-[14px] font-semibold text-[#1F2021]" html={errorInfo} />
+          </div>
+        )}
+      </div>
+    </CreditsModalContainer>
+  )
+}
+
+export default RedeemCouponModal

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

@@ -0,0 +1,72 @@
+import { Button, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { AddressForm } from '../AddressForm'
+import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ProductInfo } from './ProductInfo'
+import useCountries from '../../context/hooks/useCountries'
+
+type AddressProps = {
+  copy: CreditsRedeemListCopy
+  shippingAddress: string
+  setAddress: (address: Record<string, any>) => void
+  validateAddress: (address: Record<string, any>) => boolean
+  validateErrors: { key: string; message: string }[]
+  item: RedeemableItemType
+  loading: boolean
+  address: Record<string, any> | undefined
+  disabled: boolean
+  handlePayment: () => void
+  shippingProduct: string
+}
+
+export const Address = ({
+  copy,
+  shippingAddress,
+  setAddress,
+  validateAddress,
+  validateErrors,
+  shippingProduct,
+  loading,
+  address,
+  disabled,
+  handlePayment,
+  item,
+}: AddressProps) => {
+  const { storeDomain } = useShopifyContext()
+  const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
+
+  return (
+    <div className="relative">
+      <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>
+        </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]">
+          {shippingProduct && <Text className="mb-5 text-[16px] font-bold" html={shippingProduct}></Text>}
+          <ProductInfo item={item} copy={copy} />
+        </div>
+        <Button
+          loading={loading || !address}
+          variant="primary"
+          className="mx-auto mt-[16px] w-[444px] md:mt-[12px] md:w-full"
+          onClick={handlePayment}
+          disabled={disabled}
+        >
+          {copy.redeemModal.product.paymentButton}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+import { Picture, Text } from '@anker-in/headless-ui'
+
+type ErrorProps = {
+  errorInfo: { imageUrl: string; message: string }
+}
+
+export const Error = ({ errorInfo }: ErrorProps) => {
+  return (
+    <div className="mx-auto max-w-[404px] text-[16px] text-black/40">
+      <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

@@ -0,0 +1,129 @@
+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 { ConsumeType } from '../../context/const'
+
+type InitProps = {
+  copy: CreditsRedeemListCopy
+  item: RedeemableItemType
+  loading: boolean
+  disabled: boolean
+  setStatus: (status: 'address' | 'init' | 'success' | 'error') => void
+}
+
+export const Init = ({ copy, item, loading, disabled, setStatus }: InitProps) => {
+  const rules = useMemo(() => {
+    if (item.config.rules?.length) {
+      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])
+
+  console.log('item', item)
+  return (
+    <div className="flex flex-col">
+      <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-fit">
+            <Picture
+              source={
+                item.config?.type === ConsumeType.Product
+                  ? item.product.images[0]?.url
+                  : copy?.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>
+              )}
+            </div>
+          </div>
+          <div className="mt-[30px] md:mt-[18px]">
+            {item.config.type === 'product' && (
+              <div
+                className={classNames(
+                  'mb-[4px] text-center text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]'
+                )}
+              >
+                {item.config.title}
+              </div>
+            )}
+            <Text
+              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}
+            </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="mt-[4px] flex items-center justify-center">
+              {copy.redeemModal.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>
+                    <div className="min-h-[34px] text-[14px] font-bold text-[#777] md:min-h-[28px] md:text-[12px]">
+                      {item.title}
+                    </div>
+                  </div>
+                  {index !== copy.redeemModal.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]"
+                    ></Picture>
+                  )}
+                </Fragment>
+              ))}
+            </div>
+            <div className="overflow-auto">
+              {rules?.length && (
+                <ul className="ml-[18px] mt-[16px] grid grid-flow-row gap-[4px] text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px]">
+                  {rules.map((text, index) => (
+                    <li className="list-disc" key={index}>
+                      <Text as="div" html={text} className="font-bold" />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        </>
+      </div>
+      <div className="flex-1 bg-white px-[48px] py-[24px] text-center md:px-[16px]">
+        <Text
+          as="p"
+          className="block text-[24px] font-bold leading-[1.2] md:text-[20px] md:leading-[1.2]"
+          html={copy.redeemModal.confirmTitle}
+        ></Text>
+        <Button
+          loading={loading}
+          disabled={disabled}
+          variant="primary"
+          size="lg"
+          className="mt-[16px] w-full md:mt-[12px]"
+          onClick={() => {
+            setStatus('address')
+          }}
+        >
+          {copy.redeemModal.confirmButton}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,72 @@
+import { Picture } from '@anker-in/headless-ui'
+import { formatPrice } from '../../context/utils'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+
+type ProductInfoProps = {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+}
+
+export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
+  const { locale } = useShopifyContext()
+
+  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}
+        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}
+            alt={item.product.title}
+          ></Picture>
+          <div className="flex-1 text-[16px] font-bold leading-[1.4] min-l:!hidden" title={item.product.title}>
+            {item.product.title}
+          </div>
+        </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>
+          <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]">
+                <span>{copy.redeemModal.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 className="ml-1">
+                  {formatPrice({
+                    amount: 0,
+                    currencyCode: item.product.price?.currencyCode!,
+                    locale: locale || 'us',
+                  })}
+                </span>
+              </div>
+            </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 className="ml-1">1</span>
+              </div>
+              <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}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}