@anker-in/campaign-ui 0.4.5-beta.11 → 0.4.5-beta.13

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

@@ -26,17 +26,36 @@ interface FetcherOptions {
   fetchOptions: RequestInit
   onReAuth: () => Promise<boolean>
   onUnAuth: () => void
+  apiBaseUrl?: string
 }
 
 let reAuthPromise: Promise<boolean> | undefined
 
 type Fetcher<TData, TBody> = (url: string, data: { arg: TBody }) => Promise<TData>
 
+/**
+ * 统一处理 ALPC 接口返回的数据结构
+ * 兼容一层 data 和两层 data 的场景：
+ * - 两层 data: {data: {data: ..., code: 27004}}
+ * - 一层 data: {data: ..., code: 27004}
+ */
+const normalizeResponseData = (responseData: any) => {
+  if (!responseData) return responseData
+
+  // 如果 responseData.data 存在且是一个对象（不是数组），说明是两层 data 结构
+  if (responseData.data && typeof responseData.data === 'object' && !Array.isArray(responseData.data)) {
+    return responseData.data
+  }
+
+  // 一层 data 结构或其他情况，直接返回
+  return responseData
+}
+
 const fetcher = (options: FetcherOptions) => {
-  return fetch(getAlpcPath(options.locale) + options.url, options.fetchOptions).then(async response => {
+  return fetch(getAlpcPath(options.locale, options.apiBaseUrl) + options.url, options.fetchOptions).then(async response => {
     if (response.status < 300) {
       const responseData = await response.json()
-      return responseData.data
+      return normalizeResponseData(responseData)
     }
 
     // 错误处理
@@ -53,10 +72,10 @@ const fetcher = (options: FetcherOptions) => {
 
         if (result) {
           // 跨区重新登录后需要替换区域标志，所以不能用最开始请求的那个链接
-          return fetch(getAlpcPath(options.locale) + options.url, options.fetchOptions).then(async response => {
+          return fetch(getAlpcPath(options.locale, options.apiBaseUrl) + options.url, options.fetchOptions).then(async response => {
             if (response.status < 300) {
               const responseData = await response.json()
-              return responseData.data
+              return normalizeResponseData(responseData)
             }
 
             if (response.status === 401) {
@@ -77,14 +96,16 @@ const fetcher = (options: FetcherOptions) => {
   })
 }
 
-const reAuth = async (locale: string, retry: boolean, brand: string) => {
-  let reloginResponse = await fetch(`${getAlpcPath(locale)}/cloud/login`, {
+const reAuth = async (locale: string, retry: boolean, brand: string, apiBaseUrl?: string) => {
+  let reloginResponse = await fetch(`${getAlpcPath(locale, apiBaseUrl)}/cloud/login`, {
     method: 'POST',
   })
   let reloginResponseData = await reloginResponse.json()
+  // 兼容两层 data 结构
+  let normalizedData = normalizeResponseData(reloginResponseData)
 
   if (reloginResponse!.status < 300 && !retry) {
-    if (reloginResponseData?.data?.code === 27004) {
+    if (normalizedData?.code === 27004) {
       // 跨区登录错误
       const alpcEUCookie = Cookies.get('alpcEU')
 
@@ -101,17 +122,18 @@ const reAuth = async (locale: string, retry: boolean, brand: string) => {
       }
 
       // 重新尝试换区登录
-      reloginResponse = await fetch(`${getAlpcPath(locale)}/cloud/login`, {
+      reloginResponse = await fetch(`${getAlpcPath(locale, apiBaseUrl)}/cloud/login`, {
         method: 'POST',
       })
       reloginResponseData = await reloginResponse.json()
+      normalizedData = normalizeResponseData(reloginResponseData)
 
       if (reloginResponse.status > 300) {
         return false
       }
     }
   }
-  if (!reloginResponseData?.data?.code) {
+  if (!normalizedData?.code) {
     // 重新登录成功
     return true
   }
@@ -127,7 +149,8 @@ export interface UseMutationConfig<TData> {
 const useMutation = <TData, TBody>(
   url: string,
   fetcher: Fetcher<TData, TBody>,
-  mutationConfig: UseMutationConfig<TData> = {}
+  mutationConfig: UseMutationConfig<TData> = {},
+  brandRef: React.MutableRefObject<string | undefined>
 ) => {
   const innerMutating = useRef<boolean>(false)
 
@@ -140,7 +163,15 @@ const useMutation = <TData, TBody>(
 
   const trigger = useCallback(
     async (fetchData: TBody, opts: UseMutationConfig<TData> = {}) => {
+      console.log('[useAlpcMutation] trigger called with:', { url: urlRef.current, fetchData, brand: brandRef.current })
+
       if (innerMutating.current) {
+        console.log('[useAlpcMutation] already mutating, skipping')
+        return
+      }
+
+      if (!brandRef.current) {
+        console.log('[useAlpcMutation] brand not available, skipping request')
         return
       }
 
@@ -192,7 +223,7 @@ export const useAlpcFetch = <TData>(
   swrOptions?: UseAlpcFetchOptionsSwrOptions<TData, Error>
 ) => {
   const [retry, setRetry] = useState(false)
-  const { removeProfile, alpcBrand } = useCreditsContext()
+  const { removeProfile, alpcBrand, apiBaseUrl } = useCreditsContext()
 
   const { enable, ...otherSwrOptions } = swrOptions || {}
 
@@ -207,12 +238,13 @@ export const useAlpcFetch = <TData>(
 
   const context = useSWR<TData>(
     [url, requestBody],
-    !fetchEnable
+    !fetchEnable || !brand
       ? null
       : ([requestUrl, data]: [string, Record<string, any>]) =>
           fetcher({
             url: requestUrl,
             locale,
+            apiBaseUrl,
             fetchOptions: {
               method: 'POST',
               headers: {
@@ -226,7 +258,7 @@ export const useAlpcFetch = <TData>(
               ...fetchOptions,
             },
             onReAuth: async () => {
-              const result = await reAuth(locale, retry, brand)
+              const result = await reAuth(locale, retry, brand, apiBaseUrl)
 
               if (result) {
                 setRetry(true)
@@ -251,20 +283,30 @@ export const useAlpcFetch = <TData>(
 
 export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutationOptions?: UseMutationConfig<TData>) => {
   const [retry, setRetry] = useState(false)
-  const { removeProfile, alpcBrand } = useCreditsContext()
+  const { removeProfile, alpcBrand, apiBaseUrl } = useCreditsContext()
 
   const { locale = '', brand: headlessBrand } = useHeadlessContext()
   // 优先使用 creditsContext 中的 alpcBrand，如果没有则使用 headlessConfig 中的 brand
   const brand = alpcBrand || headlessBrand
+  const brandRef = useRef(brand)
+  brandRef.current = brand
 
   const { url, initData, headers, ...fetchOptions } = options
+  const initDataRef = useRef(initData)
+  initDataRef.current = initData
 
   const context = useMutation<TData, TBody>(
     url,
-    (requestUrl, data: { arg: TBody }) =>
-      fetcher({
+    (requestUrl, data: { arg: TBody }) => {
+      // Prevent requests when brand is not available
+      if (!brandRef.current) {
+        return Promise.resolve(undefined as unknown as TData)
+      }
+
+      return fetcher({
         url: requestUrl,
         locale,
+        apiBaseUrl,
         fetchOptions: {
           method: 'POST',
           headers: {
@@ -273,12 +315,12 @@ export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutation
           },
           ...fetchOptions,
           body: JSON.stringify({
-            ...initData,
+            ...initDataRef.current,
             ...data.arg,
           }),
         },
         onReAuth: async () => {
-          const result = await reAuth(locale, retry, brand)
+          const result = await reAuth(locale, retry, brandRef.current!, apiBaseUrl)
 
           if (result) {
             setRetry(true)
@@ -291,8 +333,10 @@ export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutation
           // 失败后退出登录
           removeProfile()
         },
-      }),
-    mutationOptions
+      })
+    },
+    mutationOptions,
+    brandRef
   )
 
   return context

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

@@ -13,13 +13,18 @@ function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
     const fetchCountries = async () => {
       setLoading(true)
       try {
-        const response = await fetch(`/api/multipass/rainbowbridge/uc/shop/shipping_zones?shop=${shopifyStoreDomain}`)
+        const response = await fetch(`/api/multipass/rainbowbridge/uc/shop/shipping_zones?shop=${shopifyStoreDomain}`, {
+          headers: {
+            'current-language': locale,
+          },
+        })
         const res: any = await response.json()
 
         // 国家过滤
         let shipsToCountries: ShippingCountry[] = []
         const countrySet = new Set()
-        res.data.data.forEach((shippingZoneItem: ShippingZone) => {
+        const shippingZones = res?.data?.data || res?.data || []
+        shippingZones.forEach((shippingZoneItem: ShippingZone) => {
           shippingZoneItem.countries.forEach(shippingZoneCountryItem => {
             if (!countrySet.has(shippingZoneCountryItem.code)) {
               countrySet.add(shippingZoneCountryItem.code)

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

@@ -15,7 +15,7 @@ function useMyRewards({
   pageSize: number
   consumeType?: AlpcConsumeType
 }) {
-  const {  profile, alpcBrand } = useCreditsContext()
+  const { profile, alpcBrand } = useCreditsContext()
   const { brand: headlessBrand, locale, appName } = useHeadlessContext()
   const brand = alpcBrand || headlessBrand
 
@@ -60,8 +60,11 @@ function useMyRewards({
   }, [consumeType, page, pageSize, profile?.user_id])
 
   useEffect(() => {
+    if (!brand || !profile?.user_id) {
+      return
+    }
     getMyRewards()
-  }, [getMyRewards])
+  }, [getMyRewards, brand])
 
   return {
     myRewards,

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

@@ -38,9 +38,10 @@ export const useRedeemAndBuy = (
         user_id: profile?.user_id,
         rule_id: arg.redeemId,
       })
-      if (res && res?.data?.coupon_code) {
+      const data = (res?.data || res) as { success?: boolean; coupon_code?: string }
+      if (res && data?.coupon_code) {
         buyNow({
-          discountCodes: [res.data.coupon_code],
+          discountCodes: [data.coupon_code],
           lineItems: [
             {
               variant: arg.productVariant,

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

@@ -23,7 +23,7 @@ function useRedeemableList(props?: { consumeType: AlpcConsumeType }) {
     {
       data: { consume_credit_rules: ConsumeCreditRuleResponse[] }
     },
-    { consume_type?: AlpcConsumeType, user_id?: string}
+    { consume_type?: AlpcConsumeType; user_id?: string }
   >({
     url: `/v1/credit/consume_credit_rules`,
     initData: {
@@ -34,32 +34,31 @@ function useRedeemableList(props?: { consumeType: AlpcConsumeType }) {
     },
   })
 
-  const getRedeemableList = useCallback((props?: { consumeType?: AlpcConsumeType}) => {
-    trigger(
-      {
-        user_id: profile?.user_id,
-        ...(props?.consumeType && {consume_type: props.consumeType})
-      },
-      {
-        onSuccess(responseData) {
-          console.log('responseData', responseData)
-          let list = responseData.data.consume_credit_rules || []
-          // let cList = list.filter(i => i.consume_type == 1) || []
-          // let pList = list.filter(i => i.consume_type == 2) || []
-          // cList = cList.sort((prev, next) => prev.consume_credits - next.consume_credits)
-          // pList = pList.sort((prev, next) => prev.consume_credits - next.consume_credits)
-          // const resultList = cList.concat(pList)
-          setRedeemableList(list)
+  const getRedeemableList = useCallback(
+    (props?: { consumeType?: AlpcConsumeType }) => {
+      trigger(
+        {
+          user_id: profile?.user_id,
+          ...(props?.consumeType && { consume_type: props.consumeType }),
         },
-      }
-    )
-  }, [profile, trigger, locale])
+        {
+          onSuccess(responseData) {
+            console.log('responseData', responseData)
+            let list = responseData?.data?.consume_credit_rules || []
+            setRedeemableList(list)
+          },
+        }
+      )
+    },
+    [profile, trigger, locale]
+  )
 
   useEffect(() => {
-    if (!isLoadingProfile) {
-      getRedeemableList({ consumeType: props?.consumeType })
+    if (!brand || isLoadingProfile) {
+      return
     }
-  }, [getRedeemableList, isLoadingProfile])
+    getRedeemableList({ consumeType: props?.consumeType })
+  }, [getRedeemableList, isLoadingProfile, brand])
 
   return {
     listLoading,

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

@@ -13,13 +13,14 @@ export const useSubscribed = () => {
 
   const { activities } = useActivities(activitiesOptions)
   const { data: subscription } = useSubscriptions({ email: profile?.email })
+  const subscriptionData = subscription?.data || subscription
 
   const isSubscribed = useMemo(() => {
-    if (!subscription?.preference) {
+    if (!subscriptionData?.preference) {
       return false
     }
 
-    const subscribeResult = subscription.preference.some(item => {
+    const subscribeResult = subscriptionData.preference.some((item: any) => {
       return item.brand === brand && item.subscribe
     })
 
@@ -30,7 +31,7 @@ export const useSubscribed = () => {
     return activities?.some(item => {
       return item.task_sub_type === TaskSubType.Subscription
     })
-  }, [subscription?.preference, activities])
+  }, [subscriptionData?.preference, activities])
 
   return isSubscribed
 }

package/src/components/credits/context/hooks/useUploadReceipt.tsx

@@ -1,29 +1,50 @@
 import useSWRMutation from 'swr/mutation'
+import { useHeadlessContext } from '@anker-in/lib'
 
-export const uploadReceipt = async (
-  _: any,
-  { arg: { orderName } }: { arg: { orderName: string } }
-): Promise<{
-  ok: boolean
-  code: number
-}> => {
-  const response = await fetch(`/api/multipass/mktsrv/v1/credit/upload_third_party_order`, {
-    credentials: 'include',
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      order_name: orderName,
-    }),
-  })
-  const { data } = await response.json()
-  return {
-    ok: data?.code === 0,
-    code: data?.code,
+/**
+ * 统一处理 ALPC 接口返回的数据结构
+ * 兼容一层 data 和两层 data 的场景
+ */
+const normalizeResponseData = (responseData: any) => {
+  if (!responseData) return responseData
+
+  // 如果 responseData.data 存在且是一个对象（不是数组），说明是两层 data 结构
+  if (responseData.data && typeof responseData.data === 'object' && !Array.isArray(responseData.data)) {
+    return responseData.data
   }
+
+  // 一层 data 结构或其他情况，直接返回
+  return responseData
 }
 
 export const useUploadReceipt = () => {
+  const { locale } = useHeadlessContext()
+
+  const uploadReceipt = async (
+    _: any,
+    { arg: { orderName } }: { arg: { orderName: string } }
+  ): Promise<{
+    ok: boolean
+    code: number
+  }> => {
+    const response = await fetch(`/api/multipass/mktsrv/v1/credit/upload_third_party_order`, {
+      credentials: 'include',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'current-language': locale,
+      },
+      body: JSON.stringify({
+        order_name: orderName,
+      }),
+    })
+    const result = await response.json()
+    const normalizedData = normalizeResponseData(result)
+    return {
+      ok: normalizedData?.data?.code === 0,
+      code: normalizedData?.data?.code ?? -1,
+    }
+  }
+
   return useSWRMutation('/api/multipass/mktsrv/v1/credit/upload_third_party_order', uploadReceipt)
 }

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

@@ -37,6 +37,7 @@ type Context = {
   setOpenMyRewardsModal: (open: boolean) => void
   openActivitiesModal: boolean
   setOpenActivitiesModal: (open: boolean) => void
+  apiBaseUrl?: string
 }
 
 export const CreditsContext = createContext<Context>({
@@ -61,6 +62,7 @@ export const CreditsContext = createContext<Context>({
   setOpenMyRewardsModal: () => {},
   openActivitiesModal: false,
   setOpenActivitiesModal: () => {},
+  apiBaseUrl: undefined,
 })
 
 export function CreditsProvider({
@@ -80,6 +82,7 @@ export function CreditsProvider({
   memberPriceDiscount,
   alpcBrand,
   cartConfig,
+  apiBaseUrl,
 }: PropsWithChildren<Omit<Context, 'openMyRewardsModal' | 'setOpenMyRewardsModal' | 'openActivitiesModal' | 'setOpenActivitiesModal'>>) {
   const [openMyRewardsModal, setOpenMyRewardsModal] = useState(false)
   const [openActivitiesModal, setOpenActivitiesModal] = useState(false)
@@ -102,6 +105,7 @@ export function CreditsProvider({
         memberPriceDiscount,
         alpcBrand,
         cartConfig,
+        apiBaseUrl,
         openMyRewardsModal,
         setOpenMyRewardsModal,
         openActivitiesModal,

package/src/components/credits/context/utils.ts

@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie'
 import { PRICE_SYMBOL } from './const'
 
-export function getAlpcPath(locale = '') {
+export function getAlpcPath(locale = '', apiBaseUrl?: string) {
   let isEU = false
   const alpcEUCookie = Cookies.get('alpcEU')
   if (alpcEUCookie === undefined || alpcEUCookie === '') {
@@ -15,6 +15,11 @@ export function getAlpcPath(locale = '') {
     }
   }
 
+  // 如果提供了自定义的 apiBaseUrl，拼接对应的路径
+  if (apiBaseUrl) {
+    return isEU ? `${apiBaseUrl}/api/multipass/alpc-eu` : `${apiBaseUrl}/api/multipass/alpc`
+  }
+
   if (isEU) {
     return '/api/multipass/alpc-eu'
   }

package/src/components/credits/creditsBenefits/index.tsx

@@ -103,8 +103,7 @@ export const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?:
         </Swiper>
         <div
           id="benefits-pagination"
-          className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] 
-          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full"
+          className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active]:!bg-[#151515]"
         ></div>
       </div>
 

package/src/components/credits/creditsCash/CreditsCash.tsx

@@ -28,13 +28,20 @@ export const CreditsCash = ({ copy, id }: { copy: CreditsCashCopy; id?: string }
   })
 
   const list = useMemo(() => {
-    return productByHandles
-      ?.map((product: Product) => {
-        const config = (copy.list || []).find(item => item.products?.[0]?.handle === product.handle)
+    return (copy?.list || [])
+      .map(config => {
+        const handle = config?.products?.[0]?.handle
+        const sku = config?.products?.[0]?.sku
         const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
-        const productVariant =
-          product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0]
+
+        // 从 productByHandles 中找到对应 handle 的 product
+        const product = productByHandles?.find((p: Product) => p.handle === handle)
+        if (!product) return null
+
+        // 在 product 的 variants 中找到对应 sku 的 variant
+        const productVariant = product.variants?.find((variant: any) => variant.sku === sku) || product.variants?.[0]
         if (!alpcData || !productVariant) return null
+
         return {
           product,
           productVariant,

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

@@ -60,12 +60,10 @@ export const AddressForm = ({ countries, countriesLoading, form, validate, error
   }, [customer, profile?.email, locale])
 
   useEffect(() => {
-    if (customer) {
-      const defaultAddress = getDefaultAddress()
-      setAddress(defaultAddress)
-      onChange(defaultAddress)
-    }
-  }, [customer, getDefaultAddress])
+    const defaultAddress = getDefaultAddress()
+    setAddress(defaultAddress)
+    onChange(defaultAddress)
+  }, [getDefaultAddress])
 
   if (!address) {
     return null

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

@@ -32,8 +32,9 @@ function RedeemCouponModal({
         return
       }
 
-      if (responseData?.data?.success) {
-        setCouponCode(responseData.data.coupon_code)
+      const data = responseData?.data || responseData
+      if (data?.success) {
+        setCouponCode(data.coupon_code)
         fetchCreditInfo(profile?.user_id)
       } else {
         let errorMsg

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

@@ -40,8 +40,9 @@ function RedeemVirtualProductModal({
         return
       }
 
-      if (responseData?.data?.id) {
-        setGiftCardId(responseData.data.id)
+      const data = responseData?.data || responseData
+      if (data?.id) {
+        setGiftCardId(data.id)
         fetchCreditInfo(profile?.user_id)
       } else {
         handleRedeemError(responseData.code)
@@ -120,8 +121,8 @@ function RedeemVirtualProductModal({
       // GiftCard 类型使用 Product 接口，传递默认地址
       const defaultAddress = {
         email: profile?.email || '',
-        firstName: profile?.firstName || '',
-        lastName: profile?.lastName || '',
+        first_name: profile?.firstName || 'Anker',
+        last_name: profile?.lastName || 'Direct',
         address1: 'Default Address',
         city: 'Default City',
         province: 'Default Province',

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

@@ -108,7 +108,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
         // 新增的部分任务都使用了 alpc 同一个任务类型，需要用任务 id 来区分
         return item.task_name.replace('Refund', data.productUnApprovedTask)
       } else if (taskIdToTypeMapping?.[String(item.task_rule_id)]) {
-        return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]]
+        return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]] || item.task_name
       } else {
         return taskNameMap[item.task_sub_type] || item.task_name
       }
@@ -198,7 +198,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
         </Tabs>
       </div>
 
-      <div className="grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]">
+      <div className="grid gap-[18px] overflow-auto md:gap-[12px]">
         {isLoading && (
           <div className="flex h-full flex-col items-center justify-center">
             <LoadingDots />

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

@@ -1,5 +1,4 @@
 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 } from '@anker-in/lib'
 import Cookies from 'js-cookie'
@@ -43,9 +42,8 @@ const getAdCookie = () => {
 }
 
 export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubscribeModalProps) {
-  const { brand } = useHeadlessContext()
+  const { brand, locale } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
-  const { locale } = useRouter()
   const [policy, setPolicy] = useState(false)
   const [email, setEmail] = useState('')
   const [errorMessage, setErrorMessage] = useState('')
@@ -137,7 +135,7 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
       animationClassName="md:translate-y-[100vh]"
       {...props}
     >
-      <div className="flex flex-col gap-[16px] text-center min-l:px-[16px]">
+      <div className="min-l:px-[16px] flex flex-col gap-[16px] text-center">
         <div>
           <Text className={classNames('mb-[24px] text-[22px] font-bold')} html={copy.title}></Text>
         </div>
@@ -173,7 +171,7 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
           >
             <Picture
               source="https://cdn.shopify.com/s/files/1/0512/8568/8505/files/icon_email.png?v=1697527383"
-              className="h-[24px] w-[24px]"
+              className="size-[24px]"
               alt="email"
             />
           </Button>
@@ -181,7 +179,7 @@ export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubs
         <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"
+            className="ml-2 text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
             dangerouslySetInnerHTML={{
               __html: copy?.policy || '',
             }}

package/src/components/index.ts

@@ -1,4 +1,4 @@
-export { default as Chat } from './chat/index.js'
+export { default as Chat } from './chat/index'
 
 export {
   Role,
@@ -7,7 +7,7 @@ export {
   useCopilotChat,
   useCopilotAction,
   useCopilotReadable,
-} from './chat/utils.js'
+} from './chat/utils'
 
 export * from './credits/index.js'