@anker-in/campaign-ui 0.5.0-beta.5 → 0.5.0-beta.7

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx

@@ -14,6 +14,7 @@ type Props = {
   itemImage?: { url: string; alt?: string }
   itemValue?: string
   itemOff?: string
+  itemRules?: string[]
   redeemId: number
   userId?: string
   copy: RedeemCouponModalCopy
@@ -29,6 +30,7 @@ export default function RedeemCouponPanel({
   itemImage,
   itemValue,
   itemOff,
+  itemRules,
   redeemId,
   userId,
   copy,
@@ -80,38 +82,45 @@ export default function RedeemCouponPanel({
     setDisabled(false)
   }, [redeemId])
 
+  const rulesSection = itemRules && itemRules.length > 0 && (
+    <div className="w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
+      <ul className="ml-4 grid grid-flow-row gap-[4px]">
+        {itemRules?.map((text, index) => (
+          <li className="list-disc" key={index}>
+            <Text html={text} className="font-bold" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+
   return (
-    <div className="flex flex-col gap-[16px]">
+    <div className="flex flex-col">
       {itemImage?.url && (
-        <div className={cn('relative overflow-hidden w-fit mx-auto', rounded ? 'rounded-[8px]' : 'rounded-none')}>
-          <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] object-contain" />
-          {itemValue && (
-            <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
-              {itemValue}
-              {itemOff ? ` ${itemOff}` : ''}
-            </div>
-          )}
+        <div className="relative w-full px-[24px]">
+          <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>
+            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] w-full object-cover" />
+            {itemValue && (
+              <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
+                {itemValue}
+                {itemOff ? ` ${itemOff}` : ''}
+              </div>
+            )}
+          </div>
         </div>
       )}
 
-      <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
-        {itemCredits} {pointUnit}
-      </p>
-
-      {!couponCode ? (
-        <div className="flex flex-col gap-[12px] text-center">
-          <Text className="block text-[20px] font-[700]" html={copy.confirmTitle} />
-          <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
-            disabled={disabled}
-            loading={loading}
-            onClick={handleConfirm}
-          >
-            {copy.confirmButton}
-          </Button>
+      {!couponCode && (
+        <div className="flex flex-col gap-[16px] px-[24px] py-[20px]">
+          <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
+            {itemCredits} {pointUnit}
+          </p>
+          {rulesSection}
         </div>
-      ) : (
-        <div className="flex flex-col gap-[12px] text-center">
+      )}
+
+      {couponCode && (
+        <div className="flex mt-[16px] flex-col gap-[8px] text-center">
           <div className="flex items-center justify-center gap-[10px]">
             <span className="text-[24px] font-[700]">{couponCode}</span>
             <button
@@ -125,7 +134,10 @@ export default function RedeemCouponPanel({
           <Text className="text-[20px] font-[700]" html={copy.successTitle} />
           <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={copy.successDesc} />
           <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
+            className={cn(
+              'w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]',
+              rounded ? 'rounded-[4px]' : 'rounded-none'
+            )}
             onClick={() => {
               if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
               onClose()
@@ -136,7 +148,28 @@ export default function RedeemCouponPanel({
         </div>
       )}
 
-      {errorInfo && <Text className="text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />}
+      {!couponCode && (
+        <div className="sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]">
+          <div className="flex flex-col gap-[8px] text-center">
+            <Text className="block text-[16px] font-[700] leading-[1.3]" html={copy.confirmTitle} />
+            <Button
+              className={cn(
+                'w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]',
+                rounded ? 'rounded-[4px]' : 'rounded-none'
+              )}
+              disabled={disabled}
+              loading={loading}
+              onClick={handleConfirm}
+            >
+              {copy.confirmButton}
+            </Button>
+          </div>
+
+          {errorInfo && (
+            <Text className="mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />
+          )}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/memberPopup/panels/ConsumeCredits/index.tsx

@@ -116,6 +116,7 @@ function ConsumeCredits({ copy, onClose }: Props) {
             : item.image,
           itemValue: item.value,
           itemOff: copy.off,
+          itemRules: item.rules,
           redeemId: Number(item.redeemId),
           userId: profile?.user_id,
           alpcConfig,
@@ -183,7 +184,7 @@ function ConsumeCredits({ copy, onClose }: Props) {
                         imgClassName={hasProduct ? 'object-cover' : 'h-full w-auto object-contain'}
                       />
                       {!hasProduct && item.value && (
-                        <div className="absolute bottom-[20px] left-[4px] text-[14px] font-[800] leading-none text-white">
+                        <div className="absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white">
                           {item.value} {copy.off}
                         </div>
                       )}

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponModal.tsx

@@ -1,150 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn } from '@anker-in/lib'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import { AlpcErrorCode } from '../../../credits/context/const'
-import { useRedeemCoupon } from './hooks/useRedeemCoupon'
-import useCopy from '../../../credits/context/hooks/useCopy'
-import type { RedeemCouponModalCopy, AlpcConfig } from '../../type'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  itemTitle: string
-  itemCredits: number
-  itemImage?: { url: string; alt?: string }
-  redeemId: number
-  userId?: string
-  copy: RedeemCouponModalCopy
-  pointUnit?: string
-  alpcConfig: AlpcConfig
-  onError?: (code: number) => void
-}
-
-export function RedeemCouponModal({
-  isOpen,
-  onClose,
-  itemTitle,
-  itemCredits,
-  itemImage,
-  redeemId,
-  userId,
-  copy,
-  pointUnit = 'pts',
-  alpcConfig,
-  onError,
-}: Props) {
-  const [couponCode, setCouponCode] = useState<string>()
-  const [errorInfo, setErrorInfo] = useState('')
-  const [disabled, setDisabled] = useState(false)
-  const { copy: copyText, copied } = useCopy()
-
-  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)
-
-  const handleConfirm = useCallback(async () => {
-    setErrorInfo('')
-    const { data } = await trigger({ user_id: userId, rule_id: redeemId })
-    if (!data) {
-      setErrorInfo(copy.commonError)
-      return
-    }
-    if (data.data?.success) {
-      setCouponCode(data.data.coupon_code)
-    } else {
-      let msg = copy.commonError
-      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-        msg = copy.redeemLimitError
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-        msg = copy.inventoryNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-        msg = copy.creditsNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {
-        msg = copy.crossSiteError
-        setDisabled(true)
-      }
-      setErrorInfo(msg)
-      onError?.(data.code)
-    }
-  }, [trigger, userId, redeemId, copy, onError])
-
-  useEffect(() => {
-    if (!isOpen) {
-      setCouponCode(undefined)
-      setErrorInfo('')
-      setDisabled(false)
-    }
-  }, [isOpen])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      className="w-[540px] md:h-auto"
-      scrollClassName="mb-[40px] px-0 min-l:px-0 md:mb-[24px]"
-      titleClassName="h-[56px] bg-[#f5f5f7]"
-    >
-      <div className="bg-[#f5f5f7] px-[48px] pb-[24px] md:px-[16px]">
-        {itemImage?.url && (
-          <div className="relative mx-auto h-[164px] w-[324px]">
-            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="h-full w-full object-cover" />
-          </div>
-        )}
-        <p className={cn('mt-[30px] text-center text-[24px] font-bold md:mt-[18px] md:text-[20px]')}>
-          {itemCredits} {pointUnit}
-        </p>
-      </div>
-
-      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
-        {!couponCode ? (
-          <>
-            <Text className="block text-[24px] font-bold md:text-[20px]" html={copy.confirmTitle} />
-            <Button
-              loading={loading}
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={handleConfirm}
-              disabled={disabled}
-            >
-              {copy.confirmButton}
-            </Button>
-          </>
-        ) : (
-          <>
-            <div className="flex items-center justify-center gap-[10px]">
-              <span className="text-[24px] font-bold">{couponCode}</span>
-              <button
-                className={cn('text-[16px] font-bold underline', copied && 'pointer-events-none')}
-                onClick={() => copyText(couponCode)}
-              >
-                {copied ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-            <Text className="mb-[4px] mt-[16px] text-[24px] font-bold md:text-[20px]" html={copy.successTitle} />
-            <Text className="text-[16px] font-bold text-[#6d6d6f] md:text-[14px]" html={copy.successDesc} />
-            <Button
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={() => {
-                if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
-                onClose()
-              }}
-            >
-              {copy.successButton}
-            </Button>
-          </>
-        )}
-      </div>
-
-      {errorInfo && (
-        <div className="bg-white px-[48px] py-[12px] text-center md:px-[16px]">
-          <Text className="text-[14px] font-semibold text-[#ff0000]" html={errorInfo} />
-        </div>
-      )}
-    </CreditsModalContainer>
-  )
-}