@anker-in/campaign-ui 0.1.10 → 0.2.0

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

@@ -0,0 +1,38 @@
+import { Text } from '@anker-in/headless-ui'
+import { RedeemableItem } from '../type'
+import { ConsumeType } from '../context/const'
+import { CreditsRedeemListCopy } from './type'
+
+export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+  // shipping coupon 仅展示文案
+  if (item.config?.type === ConsumeType.ShippingCoupon) {
+    return (
+      <div className="absolute left-[16px] l-xxl:left-[12px] bottom-[8px] l:left-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]">
+        <Text
+          className="text-[32px] font-bold leading-none md:text-[12px] l-xxl:text-[20px] w-[70%] md:w-full md-l:text-[14px]"
+          html={item.config?.value}
+          as="p"
+        />
+      </div>
+    )
+  } else {
+    return (
+      <div className="absolute left-[16px] l-xxl:left-[12px] l:left-[8px] bottom-[8px] font-extrabold text-white md:bottom-[4px] md:left-[5px]">
+        {item.config?.value ? (
+          <div className="flex items-end">
+            <Text
+              className="text-[64px] font-extrabold leading-none md:text-[20px] l-xxl:text-[40px] md-l:text-[22px]"
+              html={item.config?.value.toString()}
+            />
+            <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 className="text-[24px] w-[70%] font-bold leading-none" html={item.config?.title} as="p" />
+        )}
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,211 @@
+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 { useHeadlessContext } from '@anker-in/lib'
+import { CreditsRedeemListCopy } from './type'
+import { NoneProductValue } from './RedeemProductModal/NonProductValue'
+
+function RedeemCouponModal({
+  item,
+  copy,
+  onError,
+  ...props
+}: ModalContainerProps & {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+  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 } = 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[item.config?.type]?.url && (
+            <Picture source={copy.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>
+        </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-[#FF0000]">
+            <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 { 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'
+
+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 } = useHeadlessContext()
+  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,121 @@
+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'
+import { NoneProductValue } from './NonProductValue'
+
+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])
+
+  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 && <NoneProductValue item={item} copy={copy} />}
+            </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/NonProductValue.tsx

@@ -0,0 +1,23 @@
+import { Text } from '@anker-in/headless-ui'
+import { RedeemableItem } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ConsumeType } from '../../context/const'
+
+export const NoneProductValue = ({ item, copy }: { item: RedeemableItem; copy: CreditsRedeemListCopy }) => {
+  // 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 ? copy?.off : copy?.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

@@ -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 { useHeadlessContext } from '@anker-in/lib'
+
+type ProductInfoProps = {
+  item: RedeemableItemType
+  copy: CreditsRedeemListCopy
+}
+
+export const ProductInfo = ({ item, copy }: ProductInfoProps) => {
+  const { locale } = useHeadlessContext()
+
+  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>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { Button, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import type { RedeemableItem as RedeemableItemType } from '../../type'
+import { CreditsRedeemListCopy } from '../type'
+import { ProductInfo } from './ProductInfo'
+
+type SuccessProps = {
+  copy: CreditsRedeemListCopy
+  shippingProduct: string
+  loading: boolean
+  address: Record<string, any> | undefined
+  disabled: boolean
+  onClose: () => void
+  item: RedeemableItemType
+}
+
+export const Success = ({ copy, shippingProduct, loading, address, disabled, onClose, item }: SuccessProps) => {
+  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">
+        <div className="mb-[16px] grid grid-flow-row gap-y-[4px] md:mb-[12px]">
+          {copy.redeemModal.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>
+
+        {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]">
+          <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={onClose}
+          disabled={disabled}
+        >
+          {copy.redeemModal.product.paymentButton}
+        </Button>
+      </div>
+    </div>
+  )
+}