tf-checkout-react-native 1.0.45 → 2.0.0-beta.0

package/src/features/checkout-v2/index.tsx

@@ -1,289 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import React, { JSX, useCallback, useMemo, useRef, useState } from 'react'
-import {
-  ScrollView,
-  ScrollViewScrollToOptions,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  ViewStyle,
-} from 'react-native'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
-
-import { CartTimer, FormField, Login } from '../../components'
-import { ICartTimerStyles } from '../../components/cartTimer/types'
-import {
-  ILoginBrandImages,
-  ILoginSuccessData,
-  ILoginViewStyles,
-} from '../../components/login/types'
-import { IError } from '../../types'
-import { logger } from '../../utils/Logger'
-import { useUserProfile } from '../auth/api-hooks'
-import { IRegisterUserResponse } from '../auth/types'
-import { CheckoutForm, PaymentForm } from './form'
-import { CheckoutFormStyles } from './form/styles'
-import { ICheckoutSuccessData, useCheckoutFlow } from './hooks/use-checkout'
-import { CheckoutTexts, OrderResult } from './types'
-import { StripeProvider } from '@stripe/stripe-react-native'
-
-export interface CheckoutV2Props {
-  isSinglePageCheckout?: boolean
-  onCartExpired?: () => void
-  onCheckoutSuccess?: (data: ICheckoutSuccessData) => void
-  onCheckoutError?: (error: any) => void
-  onPaymentSuccess?: (data: OrderResult) => void
-  onPaymentError?: (error: any) => void
-  onLoginSuccess?: (data: ILoginSuccessData) => void
-  onLoginError?: (error: any) => void
-  onLogoutSuccess?: () => void
-  onRegistrationSuccess?: (data: IRegisterUserResponse) => void
-  onRegistrationError?: (error: any) => void
-  isAgeRequired?: boolean
-  minimumAge?: number
-  isPhoneRequired?: boolean
-  isPhoneHidden?: boolean
-  loginBrandImages?: ILoginBrandImages
-  styles?: CheckoutStyles
-  texts?: CheckoutTexts
-}
-
-export interface CheckoutStyles {
-  container?: StyleProp<ViewStyle>
-  contentContainer?: StyleProp<ViewStyle>
-  title?: StyleProp<TextStyle>
-  login?: ILoginViewStyles
-  cartTimer?: ICartTimerStyles
-  form?: CheckoutFormStyles
-  paymentForm?: CheckoutFormStyles
-}
-
-const defaultStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#ffffff',
-    padding: 20,
-  },
-  contentContainer: {
-    paddingBottom: 24,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 20,
-  },
-})
-
-export const CheckoutController = ({
-  isSinglePageCheckout = true,
-  onCartExpired: _onCartExpired,
-  onCheckoutSuccess: _onCheckoutSuccess,
-  onCheckoutError: _onCheckoutError,
-  onPaymentSuccess: _onPaymentSuccess,
-  onPaymentError: _onPaymentError,
-  onLoginSuccess: _onLoginSuccess,
-  onLoginError: _onLoginError,
-  onLogoutSuccess: _onLogoutSuccess,
-  onRegistrationSuccess: _onRegistrationSuccess,
-  onRegistrationError: _onRegistrationError,
-  isAgeRequired = false,
-  minimumAge = 18,
-  isPhoneRequired = false,
-  isPhoneHidden = false,
-  loginBrandImages,
-  styles: stylesProp,
-  texts: textsProp,
-}: CheckoutV2Props) => {
-  const scrollRef = useRef<{
-    scrollTo: (options: ScrollViewScrollToOptions) => void
-  }>(null)
-  const [checkoutSuccessData, setCheckoutSuccessData] = useState<ICheckoutSuccessData>()
-  const [loginMessage, setLoginMessage] = useState('')
-  const [isLoginDialogVisible, setIsLoginDialogVisible] = useState(false)
-  const formTexts = textsProp?.form
-  const loginTexts = useMemo(() => {
-    const baseLogin = textsProp?.login
-    const baseDialog = baseLogin?.dialog ?? {}
-    const dialogMessage = loginMessage || baseDialog.message
-
-    if (!baseLogin && !dialogMessage) {
-      return undefined
-    }
-
-    return {
-      ...baseLogin,
-      dialog: {
-        ...baseDialog,
-        message: dialogMessage,
-      },
-    }
-  }, [loginMessage, textsProp])
-
-  const cartTimerTexts = textsProp?.cartTimer
-
-  const { data: userProfile, invalidate } = useUserProfile()
-
-  const onCheckoutSuccess = useCallback(
-    (data: ICheckoutSuccessData) => {
-      setCheckoutSuccessData(data)
-      _onCheckoutSuccess?.(data)
-    },
-    [_onCheckoutSuccess]
-  )
-
-  const onRegistrationSuccess = useCallback(
-    (data: IRegisterUserResponse) => {
-      _onRegistrationSuccess?.(data)
-      invalidate()
-    },
-    [_onRegistrationSuccess, invalidate]
-  )
-
-  const onRegistrationError = useCallback(
-    (error: any) => {
-      logger.error('[CheckoutController] Registration failed:', { error })
-      _onRegistrationError?.(error)
-      // Show login dialog
-      setLoginMessage(error)
-      setIsLoginDialogVisible(true)
-    },
-    [_onRegistrationError]
-  )
-
-  const checkoutFlow = useCheckoutFlow({
-    onCheckoutSuccess,
-    onCartExpired: _onCartExpired,
-    onCheckoutError: _onCheckoutError,
-    onPaymentError: _onPaymentError,
-    onPaymentSuccess: _onPaymentSuccess,
-    onRegistrationSuccess,
-    onRegistrationError,
-    isPhoneRequired,
-    isAgeRequired,
-    isPhoneHidden,
-    minimumAge,
-    isSinglePageCheckout,
-    customerProfile: userProfile?.data,
-  })
-
-  const { secondsLeft } = checkoutFlow
-
-  const handleLoginError = (error: IError) => {
-    logger.error('[CheckoutController] Login error:', { error })
-    _onLoginError?.(error)
-  }
-
-  const handleLogout = () => {
-    logger.debug('[CheckoutController] User logged out')
-    invalidate()
-    _onLogoutSuccess?.()
-  }
-
-  const handleLoginSuccess = useCallback(
-    (data: ILoginSuccessData) => {
-      logger.debug('[CheckoutController] Login successful', {
-        email: data?.userProfile?.email,
-      })
-      invalidate()
-      _onLoginSuccess?.(data)
-      setIsLoginDialogVisible(false)
-    },
-    [_onLoginSuccess, invalidate]
-  )
-
-  const containerStyle = StyleSheet.flatten([
-    defaultStyles.container,
-    stylesProp?.container,
-  ]) as StyleProp<ViewStyle>
-
-  const contentContainerStyle = StyleSheet.flatten([
-    defaultStyles.contentContainer,
-    stylesProp?.contentContainer,
-  ]) as StyleProp<ViewStyle>
-
-  const titleStyle = StyleSheet.flatten([
-    defaultStyles.title,
-    stylesProp?.title,
-  ]) as StyleProp<TextStyle>
-
-  return (
-    <>
-      <KeyboardAwareScrollView
-        innerRef={(ref) => (scrollRef.current = ref)}
-        style={containerStyle}
-        contentContainerStyle={contentContainerStyle}
-        keyboardShouldPersistTaps="handled"
-        enableAutomaticScroll={false}
-        extraScrollHeight={0}
-      >
-        {/* Login Component */}
-        <Login
-          onLoginSuccessful={handleLoginSuccess}
-          onLoginError={handleLoginError}
-          onLogoutSuccess={handleLogout}
-          isLoginDialogVisible={isLoginDialogVisible}
-          showLoginDialog={() => setIsLoginDialogVisible(true)}
-          hideLoginDialog={() => {
-            setIsLoginDialogVisible(false)
-            setLoginMessage('')
-          }}
-          userFirstName={userProfile?.data?.firstName}
-          brandImages={loginBrandImages}
-          texts={loginTexts}
-          styles={stylesProp?.login}
-        />
-        <FormField
-          fieldType="title"
-          title={formTexts?.form?.sectionTitle || 'Personal Information'}
-          titleStyle={titleStyle}
-        />
-
-        {/* Use our new CheckoutForm component */}
-        {checkoutFlow.checkoutData?.attributes?.additional_payment_information
-          ?.basic_config?.apiKey ? (
-          <StripeProvider
-            publishableKey={
-              checkoutFlow.checkoutData.attributes.additional_payment_information
-                .basic_config.apiKey
-            }
-          >
-            {isSinglePageCheckout || !checkoutSuccessData ? (
-              <CheckoutForm
-                scrollRef={scrollRef}
-                styles={stylesProp?.form}
-                texts={formTexts}
-                {...checkoutFlow}
-              />
-            ) : (
-              <PaymentForm
-                scrollRef={scrollRef}
-                styles={stylesProp?.paymentForm ?? stylesProp?.form}
-                texts={formTexts}
-                onSubmit={async () =>
-                  await checkoutFlow.handlePayment(checkoutSuccessData)
-                }
-                orderItems={checkoutFlow.orderItems}
-              />
-            )}
-          </StripeProvider>
-        ) : null}
-      </KeyboardAwareScrollView>
-
-      {/* Cart Timer */}
-      {typeof secondsLeft === 'number' && secondsLeft > 0 && (
-        <CartTimer
-          secondsLeft={secondsLeft}
-          shouldNotMinimize={false}
-          styles={stylesProp?.cartTimer}
-          texts={cartTimerTexts}
-        />
-      )}
-    </>
-  )
-}
-
-const queryClient = new QueryClient()
-
-export const CheckoutProvider = ({ children }: { children: React.ReactNode }) => {
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-}