tf-checkout-react-native 1.0.37 → 1.0.39

package/src/features/form/index.tsx

@@ -0,0 +1,185 @@
+import { useField } from 'formik'
+import React from 'react'
+import { Text } from 'react-native'
+
+import {
+  Checkbox,
+  DatePicker,
+  DropdownMaterial,
+  Input,
+  PhoneInput,
+  RadioGroup,
+} from '../../components'
+import { ICheckboxStyles } from '../../components/checkbox/types'
+import { IDatePickerStyles } from '../../components/datePicker/types'
+import { IDropdownMaterialStyles } from '../../components/dropdownMaterial/types'
+import { IInputStyles } from '../../components/input/types'
+import { IPhoneInputStyles } from '../../components/phoneInput/types'
+import { IRadioGroupStyles } from '../../components/radioGroup/types'
+import { FieldConfig } from './types'
+
+export interface FormikFieldComponentStyles {
+  input?: IInputStyles
+  select?: IDropdownMaterialStyles
+  selectMulti?: IDropdownMaterialStyles
+  phone?: IPhoneInputStyles
+  checkbox?: ICheckboxStyles
+  radio?: IRadioGroupStyles
+  datePicker?: IDatePickerStyles
+}
+
+interface FormikFieldProps<TValues extends Record<string, unknown>> {
+  field: FieldConfig<TValues>
+  styles?: FormikFieldComponentStyles
+}
+
+export const FormikField = React.memo(
+  <TValues extends Record<string, unknown>>({
+    field,
+    styles: componentStyles,
+  }: FormikFieldProps<TValues>) => {
+    const [formikField, meta, helpers] = useField(field.name)
+
+    const value = formikField.value
+    const error = meta.touched ? meta.error : undefined
+
+    if (field.hide) return null
+
+    const handleChange = (val: string | number | boolean | string[]) => {
+      field.onChange?.(val)
+      helpers.setValue(val)
+    }
+
+    switch (field.type) {
+      case 'input':
+        return (
+          <Input
+            id={field.name}
+            value={value}
+            label={field.label ?? 'Label'}
+            placeholder={field.placeholder}
+            error={error}
+            onTextChanged={(_, val) => handleChange(val)}
+            styles={componentStyles?.input}
+          />
+        )
+
+      case 'textarea':
+        return (
+          <Input
+            id={field.name}
+            value={value}
+            label={field.label ?? 'Label'}
+            placeholder={field.placeholder}
+            error={error}
+            multiline
+            numberOfLines={4}
+            onTextChanged={(_, val) => handleChange(val)}
+            styles={componentStyles?.input}
+          />
+        )
+
+      case 'select': {
+        const options = field.options ?? []
+        return (
+          <DropdownMaterial
+            items={options}
+            selectedOption={
+              options.find((o) => o.value === value) ?? {
+                value: '',
+                label: field.placeholder ?? `Select ${field.label}`,
+              }
+            }
+            onSelectItem={(item) => handleChange(item.value)}
+            materialInputProps={{
+              label: field.label ?? 'Select',
+              error,
+            }}
+            styles={componentStyles?.select}
+          />
+        )
+      }
+
+      case 'select_multi': {
+        const options = field.options ?? []
+        const selectedValues = (Array.isArray(value) ? value : []) as string[]
+        const selectedOptions = options.filter((o) => selectedValues.includes(o.value))
+        const displayOption = {
+          value: '',
+          label:
+            selectedOptions.length > 0
+              ? selectedOptions.map((o) => o.label).join(', ')
+              : `Select ${field.label ?? 'items'}`,
+        }
+        return (
+          <DropdownMaterial
+            items={options}
+            selectedOption={displayOption}
+            onSelectItem={(item) => {
+              let newValues = [...selectedValues]
+              if (newValues.includes(String(item.value))) {
+                newValues = newValues.filter((v) => v !== item.value)
+              } else {
+                newValues.push(String(item.value))
+              }
+              handleChange(newValues)
+            }}
+            materialInputProps={{
+              label: field.label ?? 'Select Multiple',
+              error,
+            }}
+            styles={componentStyles?.selectMulti ?? componentStyles?.select}
+          />
+        )
+      }
+
+      case 'phone':
+        return (
+          <PhoneInput
+            phoneNumber={value}
+            onChangePhoneNumber={(payload) => handleChange(payload.input)}
+            error={error}
+            texts={{ label: field.label }}
+            styles={componentStyles?.phone}
+          />
+        )
+
+      case 'checkbox':
+        return (
+          <Checkbox
+            isActive={!!value}
+            text={field.label || ''}
+            onPress={() => handleChange(!value)}
+            styles={componentStyles?.checkbox}
+          />
+        )
+
+      case 'radio':
+        return (
+          <RadioGroup
+            options={field.options ?? []}
+            selectedValue={value}
+            onValueChange={(val) => handleChange(val)}
+            label={field.label}
+            error={error}
+            styles={componentStyles?.radio}
+          />
+        )
+
+      case 'datePicker':
+        return (
+          <DatePicker
+            selectedDate={value ? new Date(value) : undefined}
+            onSelectDate={(date) => handleChange(date.toISOString())}
+            error={error}
+            text={field.label || 'Select date'}
+            placeholder={field.placeholder}
+            styles={componentStyles?.datePicker}
+          />
+        )
+
+      default:
+        return <Text>{field.type} is not supported</Text>
+    }
+  }
+)

package/src/features/form/styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native'
+
+import R from '../../res'
+
+export default StyleSheet.create({
+  dropdownContainer: {
+    width: '100%',
+    height: 50,
+    marginBottom: 24,
+  },
+  dropdownButton: {
+    height: 55,
+    borderWidth: 1,
+    borderRadius: 5,
+  },
+  dropdownLabel: {
+    fontSize: 16,
+    color: R.colors.primary,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    marginBottom: 16,
+    color: R.colors.primary,
+  },
+  header: {
+    fontSize: 28,
+    fontWeight: '800',
+    marginBottom: 16,
+    color: R.colors.primary,
+  },
+  text: {
+    fontSize: 14,
+    marginBottom: 16,
+    color: R.colors.primary,
+  },
+})

package/src/features/form/types.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react'
+
+export enum FieldType {
+  INPUT = 'input',
+  TEXTAREA = 'textarea',
+  SELECT = 'select',
+  SELECT_MULTI = 'select_multi',
+  PHONE = 'phone',
+  CHECKBOX = 'checkbox',
+  RADIO = 'radio',
+  DATE_PICKER = 'datePicker',
+  TITLE = 'title',
+  COMPONENT = 'component',
+}
+
+export interface BaseFieldConfig<TValues extends {}> {
+  name: string
+  type: FieldType
+  label?: string
+  placeholder?: string
+  required?: boolean
+  options?: { value: string; label: string }[]
+  defaultValue?: TValues[keyof TValues]
+  onChange?: (value: any) => void
+  hide?: boolean
+}
+
+// Specialized config when type = component
+export interface ComponentFieldConfig<TValues extends {}>
+  extends Omit<BaseFieldConfig<TValues>, 'type'> {
+  type: FieldType.COMPONENT
+  render: (field: BaseFieldConfig<TValues>) => ReactElement
+}
+
+// Union type: either a normal field or a component field
+export type FieldConfig<TValues extends {}> =
+  | BaseFieldConfig<TValues>
+  | ComponentFieldConfig<TValues>

package/src/features/geo/api-hooks.ts

@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
+
+import { ApiResponse } from '../../api/api.types'
+import { Client } from '../../api/ApiClient'
+import { CountriesResponse, StatesResponse } from './types'
+
+/**
+ * Hook to fetch countries list
+ */
+export const useCountries = () => {
+  return useQuery<ApiResponse<CountriesResponse>, AxiosError>({
+    queryKey: ['countries'],
+    queryFn: () =>
+      Client.get<ApiResponse<CountriesResponse>>(`countries/list`).then(
+        (response) => response.data
+      ),
+    staleTime: 1000 * 60 * 60 * 24, // 24 hours - countries rarely change
+  })
+}
+
+/**
+ * Hook to fetch states for a country
+ */
+export const useStates = (countryId?: string) => {
+  return useQuery<ApiResponse<StatesResponse>, AxiosError>({
+    queryKey: ['states', countryId],
+    queryFn: () =>
+      Client.get<ApiResponse<Record<string, string>>>(
+        `countries/${countryId}/states/`
+      ).then((response) => {
+        return {
+          ...response.data,
+          data: Object.entries(response.data.data || {}).map(([id, name]) => ({
+            label: String(name),
+            value: id,
+            code: id, // Use the key as the state code (ISO-2/state code)
+          })),
+        }
+      }),
+    enabled: !!countryId && countryId !== '-1',
+  })
+}

package/src/features/geo/types.ts

@@ -0,0 +1,15 @@
+export interface CountryInfo {
+  id: string
+  code: string
+  name: string
+}
+
+export interface StateInfo {
+  label: string
+  value: string
+  code: string // ISO-2/state code for Stripe
+}
+
+export type CountriesResponse = CountryInfo[]
+
+export type StatesResponse = StateInfo[]

package/src/helpers/Config.ts

@@ -0,0 +1,81 @@
+import _forEach from 'lodash/forEach'
+
+import { Client } from '../api/ApiClient'
+import Constants from '../api/Constants'
+import { getDomainByClientAndEnv } from './Domains'
+import { LocalStorageKeys, storeData } from './LocalStorage'
+import { LogLevel } from '../utils/Logger'
+
+export type EnvType = 'PROD' | 'DEV' | 'STAG'
+
+export interface IConfigAuth {
+  ACCESS_TOKEN: string
+  REFRESH_TOKEN: string
+  TOKEN_TYPE: string
+  SCOPE: string
+}
+
+export interface IConfig {
+  EVENT_ID?: string | number
+  CLIENT?: string
+  ENV?: EnvType
+  CLIENT_ID?: string
+  CLIENT_SECRET?: string
+  TIMEOUT?: number
+  BRAND?: string
+  ARE_SUB_BRANDS_INCLUDED?: boolean
+  AUTH?: IConfigAuth
+  logLevel?: LogLevel
+  [key: string]: string | number | boolean | undefined | IConfigAuth
+}
+
+export const Config: IConfig = {} as IConfig
+
+export const setConfig = async (configs: IConfig): Promise<string | undefined> => {
+  _forEach(configs, (value, key) => {
+    Config[key] = value
+  })
+
+  if (Config.ENV) {
+    if (Config.ENV === 'PROD') {
+      Client.setBaseUrl(Constants.BASE_URL)
+    } else if (Config.ENV === 'DEV') {
+      Client.setBaseUrl(Constants.BASE_URL_DEV)
+    } else if (Config.ENV === 'STAG') {
+      Client.setBaseUrl(Constants.BASE_URL_STAG)
+    }
+  } else {
+    Client.setBaseUrl(Constants.BASE_URL)
+  }
+
+  if (Config.TIMEOUT) {
+    Client.setTimeOut(Config.TIMEOUT)
+  }
+
+  if (Config.CLIENT) {
+    Client.setDomain(getDomainByClientAndEnv(Config.CLIENT, Config.ENV))
+  }
+
+  if (!Config.CLIENT_SECRET) {
+    Config.CLIENT_SECRET = Constants.CLIENT_SECRET
+  }
+  if (!Config.Client_ID) {
+    Config.CLIENT_ID = Constants.CLIENT_ID
+  }
+
+  if (!Config.ARE_SUB_BRANDS_INCLUDED) {
+    Config.ARE_SUB_BRANDS_INCLUDED = false
+  }
+
+  Config.IS_BILLING_STREET_NAME_REQUIRED = true
+
+  if (Config.AUTH) {
+    await storeData(LocalStorageKeys.ACCESS_TOKEN, Config.AUTH.ACCESS_TOKEN)
+    await storeData(LocalStorageKeys.AUTH_TOKEN_TYPE, Config.AUTH.TOKEN_TYPE || 'Bearer')
+    await storeData(LocalStorageKeys.AUTH_SCOPE, Config.AUTH.SCOPE)
+    await storeData(LocalStorageKeys.REFRESH_TOKEN, Config.AUTH.REFRESH_TOKEN)
+    Client.setAccessToken(Config.AUTH.ACCESS_TOKEN)
+  }
+
+  return undefined
+}