@anker-in/campaign-ui 0.5.21 → 0.5.22

package/src/components/credits/context/hooks/useCountries.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { useHeadlessContext } from '../../../../lib'
 import { type ShippingCountry } from '../../type'
 
-function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
+function useCountries({ shopifyStoreDomain, apiBaseUrl }: { shopifyStoreDomain: string; apiBaseUrl?: string }) {
   const { locale = '' } = useHeadlessContext()
 
   const [isLoading, setLoading] = useState(false)
@@ -13,7 +13,7 @@ function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
     const fetchCountries = async () => {
       setLoading(true)
       try {
-        const response = await fetch('/api/multipass/account/countries', {
+        const response = await fetch(`${apiBaseUrl || ''}/api/multipass/account/countries`, {
           credentials: 'include',
           headers: {
             'current-language': locale,
@@ -39,7 +39,7 @@ function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
     }
 
     fetchCountries()
-  }, [locale])
+  }, [locale, apiBaseUrl])
 
   return {
     isLoading,

package/src/components/credits/context/hooks/useShippingCountries.ts

@@ -3,7 +3,13 @@ import { useEffect, useState } from 'react'
 import { useHeadlessContext } from '../../../../lib'
 import { type ShippingCountry, type ShippingZone } from '../../type'
 
-function useShippingCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
+function useShippingCountries({
+  shopifyStoreDomain,
+  apiBaseUrl,
+}: {
+  shopifyStoreDomain: string
+  apiBaseUrl?: string
+}) {
   const { locale = '' } = useHeadlessContext()
 
   const [isLoading, setLoading] = useState(false)
@@ -13,12 +19,15 @@ function useShippingCountries({ shopifyStoreDomain }: { shopifyStoreDomain: stri
     const fetchCountries = async () => {
       setLoading(true)
       try {
-        const response = await fetch(`/api/multipass/rainbowbridge/uc/shop/shipping_zones?shop=${shopifyStoreDomain}`, {
-          credentials: 'include',
-          headers: {
-            'current-language': locale,
-          },
-        })
+        const response = await fetch(
+          `${apiBaseUrl || ''}/api/multipass/rainbowbridge/uc/shop/shipping_zones?shop=${shopifyStoreDomain}`,
+          {
+            credentials: 'include',
+            headers: {
+              'current-language': locale,
+            },
+          }
+        )
         const res: any = await response.json()
 
         // 国家过滤
@@ -50,7 +59,7 @@ function useShippingCountries({ shopifyStoreDomain }: { shopifyStoreDomain: stri
     }
 
     fetchCountries()
-  }, [locale])
+  }, [locale, apiBaseUrl, shopifyStoreDomain])
 
   return {
     isLoading,

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

@@ -1,5 +1,6 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
+import { useCreditsContext } from '../../context/provider'
 import { AddressForm } from '../AddressForm'
 import { useHeadlessContext } from '../../../../lib'
 import type { RedeemableItem as RedeemableItemType, RedeemModalCommon } from '../../type'
@@ -35,8 +36,9 @@ export const Address = ({
   item,
 }: AddressProps) => {
   const { storeDomain, brand } = useHeadlessContext()
+  const { apiBaseUrl } = useCreditsContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
-  const { countries = [], isLoading: countriesLoading } = useShippingCountries({ shopifyStoreDomain: storeDomain })
+  const { countries = [], isLoading: countriesLoading } = useShippingCountries({ shopifyStoreDomain: storeDomain, apiBaseUrl })
 
   return (
     <div className="relative">

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

@@ -21,7 +21,7 @@ type RedeemProductModalProps = Omit<ModalContainerProps, 'isOpen'> & {
 }
 
 function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModalProps) {
-  const { fetchCreditInfo, profile, pageCommon } = useCreditsContext()
+  const { fetchCreditInfo, profile, pageCommon, apiBaseUrl } = useCreditsContext()
   const { storeDomain } = useHeadlessContext()
 
   const { shippingAddress, shippingProduct } = copy.product
@@ -35,7 +35,7 @@ function RedeemProductModal({ item, copy, onError, ...props }: RedeemProductModa
   })
   const [disabled, setDisabled] = useState(false)
 
-  const { countries = [], isLoading: countriesLoading } = useShippingCountries({ shopifyStoreDomain: storeDomain })
+  const { countries = [], isLoading: countriesLoading } = useShippingCountries({ shopifyStoreDomain: storeDomain, apiBaseUrl })
 
   const { isMutating: loading, trigger } = useRedeemProduct({
     onSuccess(responseData) {

package/src/components/memberPopup/context/provider.tsx

@@ -44,6 +44,7 @@ export function MemberPopupProvider({
       <RegistrationProvider
         email={contextValue.profile?.email}
         copy={{ authCodeActivate: earnCreditsCopy?.authCodeActivate }}
+        apiBaseUrl={contextValue.alpcConfig?.apiBaseUrl}
       >
         <MemberPopupContext.Provider
           value={{

package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx

@@ -37,7 +37,7 @@ async function getRecaptchaToken(sitekey: string): Promise<string> {
 
 export default function ActivitiesSubscribeModal({ copy, email: initialEmail }: Props) {
   const { alpcConfig, setIsSubscribeSuccess, pageHandle } = useMemberPopupContext()
-  const { locale } = alpcConfig
+  const { locale, apiBaseUrl } = alpcConfig
   const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(headlessBrand)
   const [policy, setPolicy] = useState(copy.policyDefaultChecked ?? false)
@@ -60,7 +60,7 @@ export default function ActivitiesSubscribeModal({ copy, email: initialEmail }:
     const { register_source } = getAdCookie()
     const recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')
     try {
-      const response = await fetch('/api/multipass/rainbowbridge/activities', {
+      const response = await fetch(`${apiBaseUrl || ''}/api/multipass/rainbowbridge/activities`, {
         method: 'POST',
         credentials: 'include',
         headers: {
@@ -100,7 +100,7 @@ export default function ActivitiesSubscribeModal({ copy, email: initialEmail }:
     } finally {
       setLoading(false)
     }
-  }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess])
+  }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess, apiBaseUrl])
 
   return (
     <div className="flex flex-col">

package/src/components/memberPopup/panels/EarnCredits/ActivatePanel.tsx

@@ -20,7 +20,7 @@ type Props = {
 }
 
 export default function ActivatePanel({ copy, onClose }: Props) {
-  const { setIsActivateSuccess, fetchCreditInfo, profile } = useMemberPopupContext()
+  const { setIsActivateSuccess, fetchCreditInfo, profile, alpcConfig } = useMemberPopupContext()
   const { locale, brand } = useHeadlessContext()
   const { email } = useRegistration()
   const rounded = ROUNDED_BRANDS.includes(brand)
@@ -29,9 +29,9 @@ export default function ActivatePanel({ copy, onClose }: Props) {
     isMutating: isSendingEmail,
     trigger: triggerSendValidationEmail,
     data: sendEmailData,
-  } = useSendEmailValidation()
+  } = useSendEmailValidation(alpcConfig.apiBaseUrl)
 
-  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
+  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation(undefined, alpcConfig.apiBaseUrl)
 
   const [messageText, setMessageText] = useState('')
   const [messageStatus, setMessageStatus] = useState('')

package/src/components/memberPopup/panels/EarnCredits/CompleteProfilePanel.tsx

@@ -26,8 +26,8 @@ export default function CompleteProfilePanel({ copy, onClose }: Props) {
   const [firstNameError, setFirstNameError] = useState('')
   const [lastNameError, setLastNameError] = useState('')
 
-  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
-  const { countries } = useCountries({ shopifyStoreDomain: storeDomain })
+  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName, apiBaseUrl: alpcConfig.apiBaseUrl })
+  const { countries } = useCountries({ shopifyStoreDomain: storeDomain, apiBaseUrl: alpcConfig.apiBaseUrl })
 
   useEffect(() => {
     if (profile) {

package/src/components/memberPopup/panels/EarnCredits/hooks/useUpdateProfile.ts

@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react'
 type UseUpdateProfileConfig = {
   locale?: string
   appName?: string
+  apiBaseUrl?: string
 }
 
 type ProfileData = {
@@ -13,7 +14,7 @@ type ProfileData = {
   dob?: string
 }
 
-export function useUpdateProfile({ locale = '', appName = '' }: UseUpdateProfileConfig = {}) {
+export function useUpdateProfile({ locale = '', appName = '', apiBaseUrl = '' }: UseUpdateProfileConfig = {}) {
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
@@ -22,7 +23,7 @@ export function useUpdateProfile({ locale = '', appName = '' }: UseUpdateProfile
       setIsLoading(true)
       setError(null)
       try {
-        const response = await fetch('/api/multipass/account/users/update_profile', {
+        const response = await fetch(`${apiBaseUrl}/api/multipass/account/users/update_profile`, {
           method: 'PUT',
           credentials: 'include',
           headers: {
@@ -44,7 +45,7 @@ export function useUpdateProfile({ locale = '', appName = '' }: UseUpdateProfile
         setIsLoading(false)
       }
     },
-    [locale, appName]
+    [locale, appName, apiBaseUrl]
   )
 
   return { updateProfile, isLoading, error }

package/src/components/memberPopup/panels/Referral/hooks/useReferralOverview.ts

@@ -17,7 +17,7 @@ export function useReferralOverview(): {
   const { profile, alpcConfig } = useMemberPopupContext()
   const isLogin = !!profile
 
-  const swrKey = isLogin ? `/api/multipass/mktsrv/v1/referral/reward/overview/cash` : null
+  const swrKey = isLogin ? `${alpcConfig.apiBaseUrl || ''}/api/multipass/mktsrv/v1/referral/reward/overview/cash` : null
 
   const swrFetcher = async (url: string) => {
     const response = await fetch(url, {

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

@@ -16,19 +16,19 @@ import { ROUNDED_BRANDS } from '../../../constants'
 
 export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
   const { locale, brand } = useHeadlessContext()
-  const { email, authCodeActivate } = useRegistration()
+  const { email, authCodeActivate, apiBaseUrl } = useRegistration()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
   const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =
     authCodeActivate
 
-  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
+  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation(undefined, apiBaseUrl)
 
   const {
     isMutating: isSendingEmail,
     trigger: triggerSendValidationEmail,
     data: sendEmailData,
-  } = useSendEmailValidation()
+  } = useSendEmailValidation(apiBaseUrl)
 
   const [messageText, setMessageText] = useState('')
   const [messageStatus, setMessageStatus] = useState('')

package/src/components/registration/context/provider.tsx

@@ -4,6 +4,7 @@ import { AuthCodeActivate } from '../authCodeActivate'
 interface RegistrationContextType {
   email?: string
   copy?: any
+  apiBaseUrl?: string
   authCodeActivate: {
     isOpen: boolean
     open: () => void
@@ -49,7 +50,12 @@ export const useRegistration = () => {
   return context
 }
 
-export const RegistrationProvider = ({ children, email, copy }: PropsWithChildren<{ email?: string; copy?: any }>) => {
+export const RegistrationProvider = ({
+  children,
+  email,
+  copy,
+  apiBaseUrl,
+}: PropsWithChildren<{ email?: string; copy?: any; apiBaseUrl?: string }>) => {
   const [popAuthCode, setPopAuthCode] = useState(false)
   const [onAuthSuccess, setOnAuthSuccess] = useState<(() => void) | undefined>(undefined)
   const [isActivateSuccess, setIsActivateSuccess] = useState(false)
@@ -62,6 +68,7 @@ export const RegistrationProvider = ({ children, email, copy }: PropsWithChildre
       value={{
         email,
         copy,
+        apiBaseUrl,
         authCodeActivate: {
           activeToken,
           isOpen: popAuthCode,

package/src/lib/registration/hooks/useEmailValidation.ts

@@ -8,7 +8,8 @@ export const useEmailValidation = (
     { type: 'responseError'; data: any; response: any },
     string,
     { token: string; code: string }
-  >
+  >,
+  apiBaseUrl?: string
 ) => {
   const { locale } = useHeadlessContext()
   return useSWRMutation(
@@ -16,6 +17,7 @@ export const useEmailValidation = (
     (_, { arg: { token, code } }: { arg: { token: string; code: string } }) => {
       return fetcher({
         url: `/api/multipass/account/users/email_validation`,
+        baseUrl: apiBaseUrl,
         method: 'POST',
         body: { activation_code: token, verify_code: code },
         action: 'account',

package/src/lib/registration/hooks/useSendEmailValidation.ts

@@ -5,13 +5,14 @@ import { fetcher } from '../../utils'
 // data 参数会被 stringify 后放入到邮件链接参数中
 export type RequestData = { email: string; data: any }
 
-export function useSendEmailValidation(): SWRMutationResponse<any, any, string, { email: string } & any> {
+export function useSendEmailValidation(apiBaseUrl?: string): SWRMutationResponse<any, any, string, { email: string } & any> {
   const { appName, locale } = useHeadlessContext()
 
   return useSWRMutation('send-email-validation', (_, { arg: { email, ...rest } }: { arg: RequestData }) =>
     fetcher({
       locale,
       url: '/api/multipass/account/users/send_validation_email',
+      baseUrl: apiBaseUrl,
       method: 'POST',
       body: { email: email, app: appName, ...rest },
       needRecaptcha: true,

package/src/lib/utils/fetcher/fetcher.ts

@@ -3,6 +3,7 @@ import { handleFetchResponse } from './fetchResponse'
 export const fetcher = async ({
   locale = 'en',
   url,
+  baseUrl,
   method = 'POST',
   headers = {},
   repeatKey,
@@ -24,7 +25,7 @@ export const fetcher = async ({
     setTimeout(() => controller.abort(), timeout)
   }
 
-  const data = await fetch(url, {
+  const data = await fetch(`${baseUrl || ''}${url}`, {
     method,
     mode: 'cors',
     credentials: 'include',

package/src/templates/Credits.tsx

@@ -150,7 +150,11 @@ export const CreditsTemplate = ({
 }: CreditsTemplateProps) => {
   return (
     <HeadlessProvider headlessConfig={headlessConfig}>
-      <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>
+      <RegistrationProvider
+        copy={siteConfig.registrationsSettings}
+        email={userContext?.profile?.email}
+        apiBaseUrl={userContext?.apiBaseUrl}
+      >
         <CreditsProvider
           profile={userContext?.profile}
           removeProfile={userContext?.removeProfile}