@anker-in/campaign-ui 0.2.0-beta.1 → 0.2.0-beta.10

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

@@ -2,8 +2,7 @@ import { Picture } from '@anker-in/headless-ui'
 import useClickOutside from '../../context/hooks/useClickOutside'
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
-import { roundedBrands } from '../../const'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 interface Country {
   id: string
@@ -23,7 +22,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const dorpdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)
   })
@@ -75,7 +74,7 @@ export function CountrySelect({ countries, loading, className, value, onChange }
 
       <Picture
         source="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/country-select.png?v=1692202500"
-        imgClassName="pointer-events-none absolute right-0 top-0 bottom-0 !w-[45px] object-cover"
+        className="absolute pointer-events-none right-0 top-0 bottom-0 size-[50px] object-cover"
         alt="arrow"
       />
 

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

@@ -2,8 +2,7 @@ import classNames from 'classnames'
 import { Picture } from '@anker-in/headless-ui'
 import { useEffect, useMemo, useState } from 'react'
 import useClickOutside from '../../context/hooks/useClickOutside'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 interface StateSelectProps {
   states: { code: string; id: string; name: string }[]
@@ -19,7 +18,7 @@ export function StateSelect({ states, stateName = '', stateCode = '', className
   const [show, setShow] = useState(false)
   const [display, setDisplay] = useState<any>('')
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const dropdown = useClickOutside<HTMLDivElement>(() => {
     setShow(false)

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

@@ -7,14 +7,13 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { AddressFormProps } from './type'
-import { roundedBrands } from '../../const'
 
 export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
   const { profile, customer } = useCreditsContext()
   const { locale, brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const [address, setAddress] = useState<Record<string, any>>()
 
   const states = useMemo(() => {

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

@@ -7,14 +7,12 @@ import RedeemProductModal from './RedeemProductModal'
 import { useCreditsContext } from '../context/provider'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { AlpcConsumeType, AlpcErrorCode } from '../context/const'
-import { useHeadlessContext, useProductsByHandles } from '@anker-in/lib'
+import { useHeadlessContext, useProductsByHandles, gaTrack, ROUNDED_BRANDS } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../type'
 import { RedeemableItem } from './RedeemableItem'
 import RulesModal from '../modal/rulesModal'
 import { CreditsRedeemListCopy } from './type'
-import { gaTrack } from '@anker-in/lib'
 import { useRegistration } from '../../../components/registration'
-import { roundedBrands } from '../const'
 
 export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) => {
   const {
@@ -25,7 +23,7 @@ export const CreditsRedeemList = ({ copy }: { copy: CreditsRedeemListCopy }) =>
   } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const isLogin = Object.keys(profile || {}).length > 0
 

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

@@ -1,12 +1,11 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } 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 { roundedBrands } from '../../const'
 
 type AddressProps = {
   copy: CreditsRedeemListCopy
@@ -36,7 +35,7 @@ export const Address = ({
   item,
 }: AddressProps) => {
   const { storeDomain, brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
 
   return (

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

@@ -1,4 +1,4 @@
-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'
@@ -34,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]">

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

@@ -3,8 +3,7 @@ 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 { roundedBrands } from '../../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 type SuccessProps = {
   copy: CreditsRedeemListCopy
@@ -18,7 +17,7 @@ type SuccessProps = {
 
 export const Success = ({ copy, shippingProduct, loading, address, disabled, onClose, item }: SuccessProps) => {
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  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">

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

@@ -8,9 +8,8 @@ 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, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { NoneProductValue } from './NonProductValue'
-import { roundedBrands } from '../const'
 
 export function RedeemableItem({
   copy,
@@ -33,7 +32,7 @@ export function RedeemableItem({
   } = useCreditsContext()
   const { brand } = useHeadlessContext()
   const isLogin = Object.keys(profile || {}).length > 0
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const isDisabled = useMemo(() => {
     if (item.alpc?.remainingInventory <= 0 && item.alpc?.isLimited) {

package/src/components/credits/creditsWaysToGetCredits/CreditsWaysToGetCredits.tsx

@@ -6,18 +6,17 @@ import { useMemo, useState } from 'react'
 import { TaskType, type CreditsWaysToGetCreditsProps } from './type'
 import { useActions } from './useActions'
 import { useCreditsContext } from '../context/provider'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
-import { roundedBrands } from '../const'
 
 export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCreditsProps) => {
   const [showMore, setShowMore] = useState(false)
   const { profile } = useCreditsContext()
   const { authCodeActivate } = useRegistration()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const isLogin = !!profile
 
   const [isUploadReceiptModalOpen, setIsUploadReceiptModalOpen] = useState(false)
@@ -223,6 +222,9 @@ export const CreditsWaysToGetCredits = ({ copy, classNames }: CreditsWaysToGetCr
           copy={copy.subscribe}
           onSuccess={() => {
             setIsSubscribeSuccess(true)
+            setTimeout(() => {
+              setIsSubscribeModalOpen(false)
+            }, 3000)
           }}
           isOpen={isSubscribeModalOpen}
           onClose={() => {

package/src/components/credits/creditsWaysToGetCredits/useActions.ts

@@ -77,7 +77,10 @@ export const useActions = ({
             handleClick: () =>
               handleClickWithTrack({
                 buttonName: copy?.activate,
-                callback: () => authCodeActivate.open(),
+                callback: () => {
+                  authCodeActivate.setAutoSendEmail(true)
+                  authCodeActivate.open()
+                },
                 id: TaskType.Activate,
               }),
           },

package/src/components/credits/modal/MyRewardsModal.tsx

@@ -9,8 +9,7 @@ import { CreditsModalContainer, type ModalContainerProps } from './modalContaine
 import Tip from './tip'
 import LoadingDots from './loadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 export interface MyRewardsMetafields {
   title: string
@@ -45,7 +44,7 @@ interface MyRewardsModalProps extends ModalContainerProps {
 function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const [couponPage, setCouponPage] = useState(1)
   const [productPage, setProductPage] = useState(1)

package/src/components/credits/modal/activitiesModal.tsx

@@ -4,12 +4,11 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
 import dayjs from 'dayjs'
-import { roundedBrands } from '../const'
 
 export interface MyActivitiesMetafields {
   title: string
@@ -46,7 +45,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
   const [page, setPage] = useState(1)
   const { taskIdToTypeMapping } = useCreditsContext()
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const myActivitiesOptions = useMemo(() => {
     return {

package/src/components/credits/modal/creditsUploadReceiptModal.tsx

@@ -2,8 +2,7 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './modalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
-import { useHeadlessContext } from '@anker-in/lib'
-import { roundedBrands } from '../const'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 
 export type ReceiptCopy = {
@@ -47,7 +46,7 @@ export function CreditsUploadReceiptModal({
   })
 
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const handleSubmit = useCallback(() => {
     trigger(

package/src/components/credits/modal/modalContainer.tsx

@@ -1,7 +1,6 @@
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
-import { roundedBrands } from '../const'
 
 export type ModalContainerProps = {
   overlayClassName?: string
@@ -43,7 +42,7 @@ export const CreditsModalContainer = ({
   }, [isOpen, useAnimation])
 
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   return (
     <ReactModal

package/src/components/credits/modal/subscribeModal.tsx

@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Button, Picture, Text } from '@anker-in/headless-ui'
-import { classNames, fetcher, gaTrack, useHeadlessContext } from '@anker-in/lib'
+import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
+import { classNames, fetcher, gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import Cookies from 'js-cookie'
 import { parse } from 'query-string'
 import sha256 from 'crypto-js/sha256'
 import { useCreditsContext } from '../context/provider'
 import { emailValidate } from '../context/utils'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { roundedBrands } from '../const'
 
 export type CreditsSubscribeModalCopy = {
   title: string
@@ -44,7 +43,7 @@ const getAdCookie = () => {
 
 export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubscribeModalProps) {
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
   const { locale } = useRouter()
   const [policy, setPolicy] = useState(false)
   const [email, setEmail] = useState('')
@@ -93,10 +92,12 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
 
     if (!result.errors) {
       setSuccessMessage(copy.successTips || 'Subscribed successfully!')
-      onSuccess && onSuccess()
+      if (onSuccess) {
+        onSuccess()
+      }
       setTimeout(() => {
         setSuccessMessage('')
-      }, 2000)
+      }, 3000)
       gaTrack({
         subscribe_hashed_email: email ? sha256(email) : '',
       })
@@ -177,33 +178,9 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
           </Button>
         </div>
         <div className="flex w-full">
-          <div
-            className="group relative mr-6 cursor-pointer"
-            onClick={() => setPolicy(!policy)}
-            onKeyDown={e => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                setPolicy(!policy)
-              }
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            <input
-              type="checkbox"
-              readOnly
-              checked={policy}
-              className="peer absolute left-0 top-0 h-4 w-4 cursor-pointer opacity-0"
-            />
-            <label
-              className={classNames(
-                'absolute left-[30px] top-0 h-5 cursor-pointer leading-5 before:absolute before:left-[-30px] before:top-0 before:h-4 before:w-4 before:rounded-[2px] before:border before:border-[#aaa] before:content-[""] after:absolute after:left-[-25px] after:top-[1px] after:h-[10px] after:w-[6px] after:rotate-45 after:border-0 after:content-[""] group-hover:before:border-[#17bbef] peer-checked:before:border-[#17bbef] peer-checked:before:bg-[#17bbef] peer-checked:after:border-b-2 peer-checked:after:border-r-2 peer-checked:after:border-white peer-checked:after:bg-[#17bbef]',
-                !rounded && 'rounded-none'
-              )}
-            />
-          </div>
+          <Checkbox checked={policy} onCheckedChange={() => setPolicy(!policy)} required className="border-[#1d1d1f]" />
           <label
-            className="text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
+            className="text-left ml-2 text-[14px] font-semibold text-[#777] [&_a]:underline"
             dangerouslySetInnerHTML={{
               __html: copy?.policy || '',
             }}

package/src/components/credits/modal/tip.tsx

@@ -1,13 +1,12 @@
-import { useHeadlessContext } from '@anker-in/lib'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
-import { roundedBrands } from '../const'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)
 
   const { brand } = useHeadlessContext()
-  const rounded = roundedBrands.includes(brand)
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   return (
     <div

package/src/components/credits/type.ts

@@ -52,6 +52,7 @@ export interface ShippingZone {
 
 export type CreditsPageCommon = {
   pointUnit?: string
+  infoIcon?: string
   ruleLabel?: string
   soldOut?: string
   copied?: string
@@ -63,8 +64,8 @@ export type CreditsPageCommon = {
       url: string
     }
   }
-  activities?: MyActivitiesMetafields
-  rewards?: MyRewardsMetafields
+  activitiesModal?: MyActivitiesMetafields
+  rewardsModal?: MyRewardsMetafields
   validatorInfo?: {
     addressInfo: {
       name: string

package/src/components/registration/authCodeActivate/Message.tsx

@@ -1,7 +1,7 @@
 export const Message = ({ status, message }: { status: string; message: string }) => {
   return (
     status && (
-      <div className="absolute left-5 right-5 top-10 flex items-center gap-2 rounded-sm bg-white px-4 py-3 shadow-lg min-md:left-12 min-md:right-12">
+      <div className="absolute left-5 right-5 top-2 flex items-center gap-2 rounded-sm bg-white px-4 py-3 shadow-lg min-md:left-12 min-md:right-12">
         <div className="flex-shrink-0">
           {status === 'success' && (
             <span className="inline-block h-5 w-5">