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

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

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+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'
+
+export type CreditsSubscribeModalCopy = {
+  title: string
+  desc?: string
+  placeholder: string
+  policy?: string
+  successTips?: string
+  dealsType?: string
+}
+
+interface CreditsSubscribeModalProps extends ModalContainerProps {
+  copy: CreditsSubscribeModalCopy
+  onSuccess?: () => void
+}
+
+const getAdCookie = () => {
+  if (typeof window === 'undefined') {
+    return { register_source: '' }
+  }
+  const { search, href } = window.location || {}
+  const query = parse(search)
+
+  return {
+    fbuy_ref_code: Cookies.get('fbuy_ref_code'),
+    affiliate: Cookies.get('affiliate'),
+    ref: Cookies.get('ref_ads'),
+    inviter_code: query.ic || query.inviter_code || Cookies.get('inviter_code'),
+    register_source: query.redirect || Cookies.get('reg_source') || href,
+    deals_type: Cookies.get('deal'),
+    transfer_id: Cookies.get('transfer_id'),
+  }
+}
+
+export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubscribeModalProps) {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const { locale } = useRouter()
+  const [policy, setPolicy] = useState(false)
+  const [email, setEmail] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  const [successMessage, setSuccessMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { profile } = useCreditsContext()
+
+  const handleEmailChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorMessage('')
+    setEmail(event.target?.value?.trim())
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    setErrorMessage('')
+    if (!email) {
+      return setErrorMessage('Please fill in your email')
+    }
+
+    if (!emailValidate(email)) {
+      return setErrorMessage('Invalid email address')
+    }
+
+    if (!policy) {
+      return setErrorMessage('Please agree to the policy')
+    }
+
+    setLoading(true)
+    const { register_source } = getAdCookie()
+
+    const result = await fetcher({
+      locale,
+      action: 'subscribe',
+      url: '/api/multipass/subscribe/subscribe_emails',
+      method: 'POST',
+      body: {
+        email,
+        register_source,
+        brand,
+        deals_type: copy.dealsType || 'vip_subscribe',
+      },
+      headers: {},
+      type: '',
+    })
+    setLoading(false)
+
+    if (!result.errors) {
+      setSuccessMessage(copy.successTips || 'Subscribed successfully!')
+      if (onSuccess) {
+        onSuccess()
+      }
+      setTimeout(() => {
+        setSuccessMessage('')
+      }, 3000)
+      gaTrack({
+        subscribe_hashed_email: email ? sha256(email) : '',
+      })
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'subscribe',
+        event_parameters: {
+          page_group: copy.dealsType || 'vip_subscribe',
+          position: 'pop_up',
+        },
+      })
+      gaTrack({
+        event: 'uaEvent',
+        eventCategory: 'subscribe',
+        eventAction: copy.dealsType || 'vip_subscribe',
+        eventLabel: 'pop_up',
+        nonInteraction: false,
+      })
+    } else {
+      setErrorMessage(result.errors || result.statusText)
+    }
+  }, [email, policy, locale, brand, copy.dealsType, copy.successTips, onSuccess])
+
+  useEffect(() => {
+    if (profile && profile?.email) {
+      setEmail(profile?.email)
+    }
+  }, [profile])
+
+  return (
+    <CreditsModalContainer
+      className="w-[540px] md:h-auto"
+      scrollClassName="mb-[40px] min-l:px-[48px] md:mb-[24px]"
+      titleClassName="h-[56px]"
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      {...props}
+    >
+      <div className="flex flex-col gap-[16px] text-center min-l:px-[16px]">
+        <div>
+          <Text className={classNames('mb-[24px] text-[22px] font-bold')} html={copy.title}></Text>
+        </div>
+        {copy.desc && (
+          <Text
+            className="mb-[8px] text-left text-[16px] font-semibold leading-[1.4] text-[#1F2021]"
+            html={copy.desc}
+          ></Text>
+        )}
+        <div
+          className={classNames(
+            'relative flex h-[52px] w-full overflow-hidden rounded-[2px] md:grid md:h-auto md:grid-rows-1 md:gap-[16px]',
+            !rounded && 'rounded-none'
+          )}
+        >
+          <input
+            className={classNames(
+              'h-full flex-1 rounded-l-[2px] border-[1px] border-[#d8d8d8] px-[14px] py-[17px] text-[16px] font-semibold leading-[1] outline-none placeholder:text-[#999] md:h-[52px] md:rounded-[2px]',
+              !rounded && 'rounded-none'
+            )}
+            placeholder={copy.placeholder}
+            value={email}
+            onChange={handleEmailChange}
+          />
+          <Button
+            variant="primary"
+            onClick={handleSubmit}
+            loading={loading}
+            className={classNames(
+              'legacy-headless-ui-primary-button !h-full !min-w-0 !rounded-l-none !rounded-r-[2px] !px-[40px] !py-[13px]',
+              !rounded && 'rounded-none'
+            )}
+          >
+            <Picture
+              source="https://cdn.shopify.com/s/files/1/0512/8568/8505/files/icon_email.png?v=1697527383"
+              className="h-[24px] w-[24px]"
+              alt="email"
+            />
+          </Button>
+        </div>
+        <div className="flex w-full">
+          <Checkbox checked={policy} onCheckedChange={() => setPolicy(!policy)} required className="border-[#1d1d1f]" />
+          <label
+            className="text-left ml-2 text-[14px] font-semibold text-[#777] [&_a]:underline"
+            dangerouslySetInnerHTML={{
+              __html: copy?.policy || '',
+            }}
+          />
+        </div>
+        <div
+          className={classNames(
+            'w-full text-left text-[16px] font-semibold',
+            errorMessage && 'text-[#F84D4F]',
+            successMessage && 'text-[#52C41A]'
+          )}
+        >
+          <Text html={successMessage || errorMessage || ''} />
+        </div>
+      </div>
+    </CreditsModalContainer>
+  )
+}

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

@@ -0,0 +1,101 @@
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import classNames from 'classnames'
+import { useState } from 'react'
+
+function Tip({ info, index }: { info: string; index: number }) {
+  const [show, setShow] = useState(false)
+
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  return (
+    <div
+      className="relative ml-[6px] cursor-pointer"
+      onClick={() => {
+        setShow(!show)
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+        }
+      }}
+      onMouseOver={() => {
+        setShow(true)
+      }}
+      onFocus={() => {
+        setShow(true)
+      }}
+      onMouseLeave={() => {
+        setShow(false)
+      }}
+      onBlur={() => {
+        setShow(false)
+      }}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM9.765 10.7118H8.316C8.316 9.71658 8.95624 9.11788 9.5487 8.56386C10.0589 8.08679 10.5336 7.64285 10.5336 7.0074C10.5336 6.2766 9.9918 5.9112 9.1854 5.9112C8.3916 5.9112 7.7994 6.327 7.5474 7.0704L6.3 6.3648C6.7788 5.13 7.938 4.5 9.2232 4.5C10.6218 4.5 11.9826 5.3316 11.9826 6.9192C11.9826 7.95842 11.3297 8.58584 10.7324 9.15979C10.2289 9.64359 9.765 10.0894 9.765 10.7118ZM9.9918 12.69C9.9918 13.2066 9.5634 13.635 9.0468 13.635C8.5176 13.635 8.1018 13.2066 8.1018 12.69C8.1018 12.1608 8.5176 11.745 9.0468 11.745C9.5634 11.745 9.9918 12.1608 9.9918 12.69Z"
+          fill="#999999"
+        />
+      </svg>
+      <div
+        className={classNames(
+          'absolute -right-[14px] hidden min-w-[300px] shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          index === 0 ? 'top-[33px]' : 'bottom-[33px]',
+          show && '!block'
+        )}
+      >
+        <i
+          className="absolute right-[8px] blur-[12px]"
+          style={
+            index === 0
+              ? {
+                  top: '-9px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderBottom: '8px solid rgba(0,0,0,0.12)',
+                }
+              : {
+                  bottom: '-9px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderTop: '8px solid rgba(0,0,0,0.12)',
+                }
+          }
+        ></i>
+        <i
+          className="absolute right-[8px]"
+          style={
+            index === 0
+              ? {
+                  top: '-7px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderBottom: '8px solid #fff ',
+                }
+              : {
+                  bottom: '-7px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderTop: '8px solid #fff ',
+                }
+          }
+        ></i>
+        <p
+          className={classNames(
+            'relative block rounded-[4px] bg-white px-[14px] py-[12px]',
+            !rounded && 'rounded-none'
+          )}
+        >
+          <span className="block text-left text-[14px] font-semibold leading-[1.4] text-[#333]">{info}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Tip

package/src/components/credits/type.ts

@@ -0,0 +1,78 @@
+import type { Product, ProductVariant } from '@anker-in/lib'
+import type { AlpcConsumeType, ConsumeType } from './context/const'
+import { MyActivitiesMetafields } from './modal/activitiesModal'
+import { MyRewardsMetafields } from './modal/MyRewardsModal'
+
+export interface Subscription {
+  preference: {
+    subscribe: boolean
+    brand: string
+  }[]
+}
+
+export type RedeemableItem = {
+  config: {
+    title: string
+    desc: string
+    rules: string[]
+    image: {
+      url: string
+    }
+    type: ConsumeType
+    value: string
+  }
+  alpc: {
+    id: string
+    consumeCredits: number
+    remainingInventory: number
+    isLimited: boolean
+    consumeType: AlpcConsumeType
+    showCredit: boolean
+    title: string
+  }
+  product: Product
+  variant: ProductVariant
+}
+
+export interface ShippingCountry {
+  id: string
+  name: string
+  code: string
+  provinces: {
+    id: string
+    name: string
+    code: string
+  }[]
+}
+
+export interface ShippingZone {
+  name: string
+  countries: ShippingCountry[]
+}
+
+export type CreditsPageCommon = {
+  pointUnit?: string
+  infoIcon?: string
+  ruleLabel?: string
+  soldOut?: string
+  copied?: string
+  off?: string
+  copy?: string
+  giftCardLabel?: string
+  imageMapping?: {
+    [key in ConsumeType]: {
+      url: string
+    }
+  }
+  activitiesModal?: MyActivitiesMetafields
+  rewardsModal?: MyRewardsMetafields
+  validatorInfo?: {
+    addressInfo: {
+      name: string
+      country: string
+      province: string
+      city: string
+      address: string
+    }
+  }
+}

package/src/components/index.ts

@@ -1,6 +1,4 @@
-// eslint-disable-next-line import/extensions
-
-export { default as Chat } from './chat/index.js'
+export { default as Chat } from './chat/index'
 
 export {
   Role,
@@ -9,4 +7,8 @@ export {
   useCopilotChat,
   useCopilotAction,
   useCopilotReadable,
-} from './chat/utils.js'
+} from './chat/utils'
+
+export * from './credits/index'
+
+export * from './registration/index'

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

@@ -0,0 +1,43 @@
+export const Message = ({ status, message }: { status: string; message: string }) => {
+  return (
+    status && (
+      <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">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16388)">
+                  <circle cx="10" cy="10" r="10" fill="#1677FF" />
+                  <path d="M10 16L10 10" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="6.5" r="1.5" transform="rotate(-180 10 6.5)" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16388">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+          {status === 'error' && (
+            <span className="inline-block h-5 w-5">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16236)">
+                  <circle cx="10" cy="10" r="10" fill="#F84D4F" />
+                  <path d="M10 5L10 11" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="14.5" r="1.5" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16236">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+        </div>
+        <p className="text-sm font-semibold leading-[120%] text-[#333]">{message}</p>
+      </div>
+    )
+  )
+}