[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Shipping/useShippingForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useState, useEffect, useMemo } from 'react'
import { useLazyQuery } from '@apollo/client'
import { useSelector } from 'react-redux'

import { FillShippingDataEvent } from '../../../events'
import { geocoding, reverseGeocoding } from '../../../services/GoogleApis'
import { GET_CITIES } from '../../../graphql/queries'
import { selectSettings } from '../../../contexts/global-context/reducers/uiSettingsSlice'
import { useCreateShipping } from './useCreateShipping'
import { useInputValue } from '../../../hooks/useInputValue'
import { useSelectValue } from '../../../hooks/useSelectValue'
import { useUserData } from '../../../contexts/UserDataProvider'
import { selectFormAction } from '../../../contexts/global-context/reducers/checkoutFormSlice'
import {
  selectProfile,
  selectShipping,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import type { SelectValue, Step } from '../../../interfaces'
import useFormatMessage from '../../../i18n/useFormatMessage'
import useGeolocation from '../../../hooks/useGeoLocation'
// import { selectUserRegistrationSections } from '../../../contexts/global-context/reducers/checkoutFormSlice'

interface Component {
  types: string[]
}

export const useShippingForm = (steps: Step) => {
  const location = useGeolocation()
  const { userLocation } = useUserData()

  const { address: addressMC } = useSelector(selectShipping)
  const profile = useSelector(selectProfile)
  const formAction = useSelector(selectFormAction)

  const isEdit = useMemo(() => formAction === 'edit', [formAction])

  // const userRegistrationSections = useSelector(selectUserRegistrationSections)

  const [disabled, setDisabled] = useState(true)
  const [hasError, setHasError] = useState(false)
  const [streetIsUpdated, setStreetIsUpdated] = useState(false)
  const [postalCode, setPostalCode] = useState(
    isEdit ? addressMC?.postalCode : ''
  )

  const [geoCoordinates, setGeoCoordinates] = useState([])
  const [canAddAddress, setCanAddAddress] = useState(false)
  const [loadingCities, setLoadingCities] = useState(false)
  const [loadingGeoCoordinates, setLoadingGeoCoordinates] = useState(false)
  const [activeLocation, setActiveLocation] = useState(false)
  const [locationError, setLocationError] = useState({
    error: false,
    idMessage: '',
  })

  const [loadingAction, setLoadingAction] = useState(false)

  const { hasGoogleAnalytics } = useSelector(selectSettings)

  const imgUrl = 'https://kuikpay.vteximg.com.br/arquivos/ids/155414'

  const { createAddressFunction, loading } = useCreateShipping({
    setHasError,
  })

  const [formatedStateCities, setFormatedStateCities] = useState([
    {
      label: useFormatMessage('store/checkoutless.location.EnterCity'),
      value: '1',
      postalCode: '',
    },
  ])

  const country = useSelectValue({
    label: 'Colombia',
    value: 'Colombia',
  })

  const stateCity: SelectValue = useSelectValue(
    (isEdit || formAction === 'none') && addressMC?.city && addressMC?.state
      ? {
          label: `${addressMC.city} - ${addressMC.state}`,
          value: `${addressMC.city} - ${addressMC.state}`,
        }
      : null
  )

  const street = useInputValue(
    (isEdit || formAction === 'none') && addressMC?.street
      ? addressMC?.street
      : ''
  )

  const complement = useInputValue(
    (isEdit || formAction === 'none') && addressMC?.complement
      ? addressMC?.complement
      : ''
  )

  const neighborhood = useInputValue(
    (isEdit || formAction === 'none') && addressMC?.neighborhood
      ? addressMC?.neighborhood
      : ''
  )

  const [getCities, { data: cachedData, loading: loadingLazyCities }] =
    useLazyQuery(GET_CITIES, {
      fetchPolicy: 'cache-and-network',
      onCompleted: ({ getCities: StateCities }) => {
        setFormatedStateCities(
          StateCities?.map((cityValue: any) => ({
            label: `${cityValue.city} - ${cityValue.state}`,
            value: `${cityValue.city}-${cityValue.state}`,
            postalCode: cityValue.postal_code,
          })) || []
        )
        if (StateCities.length > 0) {
          stateCity.setValue({
            label: `${StateCities[0].city} - ${StateCities[0].state}`,
            value: `${StateCities[0].city}-${StateCities[0].state}`,
          })
        }

        setLoadingGeoCoordinates(false)
      },
      onError: () => {
        setLoadingGeoCoordinates(false)
        setFormatedStateCities([])
      },
    })

  // useEffect(() => {
  //   if (
  //     userRegistrationSections === 2 &&
  //     addressAlternative?.addressType === 'search'
  //   ) {
  //     setLoadingAction(true)
  //   }
  // }, [userRegistrationSections])

  useEffect(() => {
    if (steps?.shipping && !steps?.payment) {
      setLoadingAction(false)
    }
  }, [steps])

  useEffect(() => {
    setLoadingCities(loadingLazyCities)
  }, [loadingLazyCities])

  const onInputChangeCities = (newValue: string) => {
    if (newValue) {
      getCities({
        variables: {
          city: encodeURIComponent(newValue.trim()),
        },
      })
    }
  }

  const addressValidation = () => {
    const streetFormatted = encodeURI(street.value).replace(/#/g, '%23')

    if (!streetIsUpdated && !(stateCity?.value?.value && street.value)) return

    geocoding(
      streetFormatted,
      stateCity?.value?.value?.split('-')[0],
      stateCity?.value?.value?.split('-')[1],
      country.value.value
    )
      .then((e: any) => e.json())
      .then((res) => {
        switch (res.status) {
          case 'REQUEST_DENIED':
            street.setIsValid(false)
            setStreetIsUpdated(true)
            break

          case 'OK': {
            if (res.results.length > 0) {
              const route = res.results[0].address_components.find(
                (component: Component) => {
                  return component.types.find(
                    (type: string) =>
                      type === 'route' || type === 'intersection'
                  )
                }
              )

              const neighborhoodMaps =
                res.results[0].address_components.find(
                  (component: Component) => {
                    return component.types.find(
                      (type: string) => type === 'neighborhood'
                    )
                  }
                )?.long_name || ''

              if (!route) {
                street.setIsValid(false)
              } else {
                street.setIsValid(true)

                setGeoCoordinates([
                  res.results[0].geometry.location.lat,
                  res.results[0].geometry.location.lng,
                ])
                !neighborhood.value && neighborhood.setValue(neighborhoodMaps)
                setStreetIsUpdated(false)
              }
            } else {
              street.setIsValid(false)
              setStreetIsUpdated(false)
            }

            break
          }

          default: {
            street.setIsValid(false)
            setStreetIsUpdated(true)
          }
        }
      })
      .catch(() => {
        street.setIsValid(false)
        setStreetIsUpdated(true)
      })
  }

  // TODO: Esto podria ir en un hook dedicado a los temas de geolocalización del usuario
  const getLocation = () => {
    if (!location.loaded) {
      setLoadingGeoCoordinates(false)
      setLocationError({
        error: true,
        idMessage: 'store/checkoutless.location.unAvailable',
      })
    } else {
      switch (location.error) {
        case 200: {
          reverseGeocoding(location.coordinates.lat, location.coordinates.lng)
            .then((e: any) => e.json())
            .then((res) => {
              switch (res.status) {
                case 'ZERO_RESULTS':
                  setLoadingGeoCoordinates(false)
                  setLocationError({
                    error: true,
                    idMessage: 'store/checkoutless.location.zeroResults',
                  })
                  break

                case 'OK': {
                  if (res.results.length > 0) {
                    const route =
                      res.results[0].address_components.find(
                        (component: Component) => {
                          return component.types.find(
                            (type: string) => type === 'route'
                          )
                        }
                      )?.long_name || ''

                    const googleStreet =
                      res.results[0].address_components.find(
                        (component: Component) => {
                          return component.types.find(
                            (type: string) => type === 'street_number'
                          )
                        }
                      )?.long_name || ''

                    const neighborhoodMaps =
                      res.results[0].address_components.find(
                        (component: Component) => {
                          return component.types.find(
                            (type: string) => type === 'neighborhood'
                          )
                        }
                      )?.long_name || ''

                    const city =
                      res.results[0].address_components.find(
                        (component: Component) => {
                          return component.types.find(
                            (type: string) =>
                              type === 'administrative_area_level_2'
                          )
                        }
                      )?.long_name || ''

                    const state =
                      res.results[0].address_components.find(
                        (component: Component) => {
                          return component.types.find(
                            (type: string) =>
                              type === 'administrative_area_level_1'
                          )
                        }
                      )?.long_name || ''

                    if (city !== '') {
                      getCities({
                        variables: { city: encodeURIComponent(city) },
                      })
                    } else {
                      getCities({
                        variables: { city: encodeURIComponent(state) },
                      })
                    }

                    if (cachedData) {
                      setLoadingGeoCoordinates(false)
                    }

                    street.setValue(`${route} # ${googleStreet}`)
                    neighborhood.setValue(neighborhoodMaps)
                    setLocationError({
                      error: false,
                      idMessage: '',
                    })
                  } else {
                    setLoadingGeoCoordinates(false)
                    setLocationError({
                      error: true,
                      idMessage: 'store/checkoutless.location.generalError',
                    })
                  }

                  break
                }

                default: {
                  setLoadingGeoCoordinates(false)
                  setLocationError({
                    error: true,
                    idMessage: 'store/checkoutless.location.generalError',
                  })
                }
              }
            })
            .catch(() => {
              setLoadingGeoCoordinates(false)
              setLocationError({
                error: true,
                idMessage: 'store/checkoutless.location.generalError',
              })
            })
          break
        }

        case 0: {
          setLoadingGeoCoordinates(false)
          setLocationError({
            error: true,
            idMessage: 'store/checkoutless.location.notSuported',
          })
          break
        }

        case 1: {
          setLoadingGeoCoordinates(false)
          setLocationError({
            error: true,
            idMessage: 'store/checkoutless.location.denied',
          })
          break
        }

        default: {
          setLoadingGeoCoordinates(false)
          setLocationError({
            error: true,
            idMessage: 'store/checkoutless.location.generalError',
          })
        }
      }
    }
  }

  const handleClick = () => {
    if (loading) return
    createAddressFunction({
      variables: {
        ...(isEdit ? { id: addressMC.id } : {}),
        profileId: profile.id,
        country: 'COL', // TODO: Este campo debe venir del setup de la tienda
        state: stateCity?.value?.value?.split('-')[1],
        city: stateCity?.value?.value?.split('-')[0],
        street: street.value?.trim(),
        number: '1',
        postalCode,
        receiverName: profile.name,
        geoCoordinates: {
          latitude: geoCoordinates[0],
          longitude: geoCoordinates[1],
        },
        reference: complement?.value?.trim() || '',
        neighborhood: neighborhood?.value?.trim(),
      },
    })
    FillShippingDataEvent({
      option: `${street.value?.trim()} ${
        stateCity?.value?.value?.split('-')[0]
      } - ${stateCity?.value?.value?.split('-')[1]}`,
      hasGoogleAnalytics,
    })
  }

  const handleKeyUpevent = (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    if (ev.key === 'Enter' && !disabled) {
      handleClick()
    }
  }

  const handleKeyUpeventStreet = (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    if (ev.key === 'Shift' || ev.key === 'Tab') setStreetIsUpdated(false)
    else setStreetIsUpdated(true)
    handleKeyUpevent(ev)
  }

  useEffect(() => {
    const { latitude = '', longitude = '' } = addressMC?.geoCoordinates || {}

    setGeoCoordinates([latitude, longitude])
  }, [])

  useEffect(() => {
    if (country?.value?.value && stateCity?.value?.value && !street.value) {
      setCanAddAddress(true)
    }
  }, [country, stateCity])

  useEffect(() => {
    if (country?.value?.value && stateCity?.value?.value) {
      setCanAddAddress(true)
    } else {
      setCanAddAddress(false)
    }

    if (country?.value?.value && stateCity?.value?.value) {
      addressValidation()
    }
  }, [country?.value?.value, stateCity?.value?.value])

  useEffect(() => {
    if (
      stateCity.isValid &&
      street.isValid &&
      neighborhood.isValid &&
      geoCoordinates.length > 0
    ) {
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }, [stateCity, street, geoCoordinates])

  useEffect(() => {
    if (!stateCity?.value?.value) return
    if (formatedStateCities[0].value !== '1') {
      const { postalCode: postalCodeFound } = formatedStateCities?.find(
        (stateCityFiltered: any) =>
          stateCityFiltered.value === stateCity?.value?.value
      )

      setPostalCode(postalCodeFound)
    } else {
      setPostalCode(addressMC?.postalCode)
    }
  }, [stateCity?.value?.value])

  useEffect(() => {
    if (neighborhood?.value?.length > 0) neighborhood.setIsValid(true)
  }, [neighborhood?.value])

  useEffect(() => {
    if (userLocation) {
      setLoadingGeoCoordinates(true)
      if (location.loaded) {
        getLocation()
      }
    }
  }, [userLocation, location.loaded])

  useEffect(() => {
    if (locationError.error) {
      setTimeout(() => {
        setLocationError({
          error: false,
          idMessage: '',
        })
      }, 5000)
    }
  }, [locationError.error])

  return {
    activeLocation,
    // addressAlternative,
    canAddAddress,
    complement,
    disabled,
    formatedStateCities,
    geoCoordinates,
    hasError,
    imgUrl,
    loading,
    loadingCities,
    loadingGeoCoordinates,
    locationError,
    // logisticsInfo,
    formAction,
    neighborhood,
    postalCode,
    stateCity,
    street,
    userLocation,
    addressValidation,
    getLocation,
    handleClick,
    handleKeyUpevent,
    handleKeyUpeventStreet,
    onInputChangeCities,
    setActiveLocation,
    setLoadingGeoCoordinates,
    loadingAction,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Shipping/ShippingForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { useDispatch } from 'react-redux'

import { Input, Select, Button, Alert } from '../../shared'
import { Add, LiteLocation, MyOrder } from '../../Icons'
import useFormatMessage from '../../../i18n/useFormatMessage'
import type { SelectValue, InputValue } from '../../../interfaces'
import { regularExpressions } from '../../../utils'
import global from '../../../myCheckout-styles.module.css'
import styles from './shippingForm.css'
import Title from '../../shared/Title'
import InfoItem from '../../shared/InfoItem'
import { setNextSection } from '../../../contexts/global-context/reducers/checkoutFormSlice'

interface LocationError {
  error: boolean
  idMessage: string
}

interface StateCities {
  label: string
  value: string
  postalCode: string
}

interface Props {
  activeLocation: boolean
  canAddAddress: boolean
  complement: InputValue
  disabled: boolean
  formatedStateCities: StateCities[]
  hasError: boolean
  imgUrl: string
  loading: boolean
  loadingCities: boolean
  loadingGeoCoordinates: boolean
  locationError: LocationError
  neighborhood: InputValue
  stateCity: SelectValue
  street: InputValue
  userLocation: boolean
  formAction: 'none' | 'add' | 'edit'
  addressValidation: () => void
  getLocation: () => void
  handleClick: () => void
  handleKeyUpevent: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  handleKeyUpeventStreet: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onInputChangeCities: (newValue: string) => void
  setActiveLocation: React.Dispatch<React.SetStateAction<boolean>>
  setLoadingGeoCoordinates: React.Dispatch<React.SetStateAction<boolean>>
}

const ShippingForm = (props: Props) => {
  const {
    activeLocation,
    canAddAddress,
    complement,
    disabled,
    formatedStateCities,
    hasError,
    imgUrl,
    loading,
    loadingCities,
    loadingGeoCoordinates,
    locationError,
    neighborhood,
    stateCity,
    street,
    userLocation,
    formAction,
    addressValidation,
    getLocation,
    handleClick,
    handleKeyUpeventStreet,
    onInputChangeCities,
    setActiveLocation,
    setLoadingGeoCoordinates,
  } = props

  const dispatchGlobal = useDispatch()

  return (
    <Fragment>
      {loadingGeoCoordinates ? (
        <div className={styles.locationContainer}>
          <img src={imgUrl} alt="loading..." />
          <p className={styles.locationText}>
            {useFormatMessage('store/checkoutless.location.imgText')}
          </p>
        </div>
      ) : (
        <Fragment>
          {locationError.error && (
            <Alert type="error" text={locationError.idMessage} />
          )}

          {
            // TODO: Logica en exito, probar agregando un producto de marketplace y luego en mercado agregar un producto de pickup
            // addressAlternative?.addressType !== 'residential' &&
            //   logisticsInfo?.length > 0 &&
            //   logisticsInfo[0].selectedDeliveryChannel === 'pickup-in-point' &&
            //   logisticsInfo?.some(
            //     (item) => item.selectedDeliveryChannel === 'delivery'
            //   ) && (
            //     <Alert
            //       type="warning"
            //       text="store/checkoutless.register.notAddress"
            //     />
            //   )
          }

          {formAction === 'none' && (
            <div
              className={`${styles.locationContainer} ${global.cursorPointer}`}
              onClick={() => {
                setLoadingGeoCoordinates(true)
                setActiveLocation(true)
                getLocation()
              }}
            >
              <Title>
                <Title.Item title="store/checkoutless.location.userLocation">
                  <LiteLocation
                    fill={
                      activeLocation
                        ? global.iconPrimary
                        : global.iconAlternativeSecondary
                    }
                  />
                </Title.Item>

                <InfoItem
                  className={global.inMobileFlex}
                  firstAction={() => dispatchGlobal(setNextSection('summary'))}
                >
                  <InfoItem.Icon>
                    <MyOrder
                      fill={global.iconAlternative}
                      height={24}
                      width={24}
                    />
                  </InfoItem.Icon>
                  <InfoItem.Content text="store/checkoutless.summary.myOrder" />
                </InfoItem>
              </Title>
            </div>
          )}
          {userLocation && (
            <div className={styles.containerInfo}>
              <LiteLocation fill={global.iconPrimary} />
              <p>
                {useFormatMessage('store/checkoutless.location.userLocation')}
              </p>
            </div>
          )}
          {formAction === 'add' && !userLocation && (
            <div className={styles.containerInfo}>
              <Add fill={global.iconPrimary} />
              <p>
                {useFormatMessage('store/checkoutless.userInfo.newAddress')}
              </p>
            </div>
          )}
          <Fragment>
            <div className={global.gridFormTwoCols}>
              <div className={styles.cityContainer} data-col="two-col">
                <Select
                  options={formatedStateCities}
                  placeholder="store/checkoutless.register.city"
                  onInputChange={(newValue: string) =>
                    onInputChangeCities(newValue)
                  }
                  isLoading={loadingCities}
                  {...stateCity}
                />
              </div>
              <div data-col="two-col">
                <Input
                  placeholder="store/checkoutless.register.address"
                  name="street"
                  errorMessage="store/checkoutless.register.addressError"
                  blurFunction={addressValidation}
                  onCustomKeyUpEvent={handleKeyUpeventStreet}
                  {...street}
                  disabled={!canAddAddress}
                  showClearButton={true}
                  maxLength={50}
                />
              </div>
              <div>
                <Input
                  placeholder="store/checkoutless.register.neighborhood"
                  name="neighborhood"
                  regularExpression={regularExpressions.neighborhood}
                  errorMessage="store/checkoutless.register.neighborhoodError"
                  {...neighborhood}
                  maxLength={50}
                />
              </div>
              <div>
                <Input
                  placeholder="store/checkoutless.register.complement"
                  name="complement"
                  {...complement}
                  maxLength={50}
                />
              </div>
            </div>
            {hasError && (
              <Alert type="error" text="store/checkoutless.generalError" />
            )}
            <div>
              {formAction === 'none' ? (
                <Button
                  value={
                    loading
                      ? 'store/checkoutless.button.loading'
                      : 'store/checkoutless.button.continue'
                  }
                  onClick={handleClick}
                  disabled={disabled}
                />
              ) : (
                <div className={global.actionButtonContainer}>
                  <Button
                    value={
                      loading
                        ? 'store/checkoutless.button.loading'
                        : 'store/checkoutless.button.save'
                    }
                    onClick={handleClick}
                    disabled={disabled}
                  />
                </div>
              )}
            </div>
          </Fragment>
        </Fragment>
      )}
    </Fragment>
  )
}

export default ShippingForm

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Shipping/ShippingFormContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import type { Step } from '../../../interfaces'
import { Loader } from '../../shared'
import ShippingForm from './ShippingForm'
import { useShippingForm } from './useShippingForm'

interface Props {
  steps?: Step
}

const ShippingFormContainer = ({ steps }: Props) => {
  const shippingForm = useShippingForm(steps)

  if (shippingForm?.loadingAction) return <Loader />

  return <ShippingForm {...shippingForm} />
}

export default ShippingFormContainer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Shipping/shippingForm.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.locationContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.locationText{
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  margin-bottom: 8px;
}

.containerInfo {
  display: flex;
  align-items: center;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Profile/profileForm.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.profileFomrContainer {
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width: 992px) {
  .buyButtonContainer {
    padding: 14px;
    margin-top: 14px;
    width: 100%;
    background: #ffffff 0% 0% no-repeat padding-box;
    z-index: 100;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Profile/profileFormFields.json from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
    "type": "text",
    "name": "email",
    "placeholder": "store/checkoutless.register.email",
    "errorMessage": "store/checkoutless.register.emailError",
    "disabled": true,
    "minLength": null,
    "maxLength": null
  },
  {
    "type": "text",
    "name": "firstName",
    "placeholder": "store/checkoutless.register.name",
    "errorMessage": "store/checkoutless.register.nameError",
    "disabled": false,
    "minLength": 1,
    "maxLength": 40
  },
  {
    "type": "text",
    "name": "lastName",
    "placeholder": "store/checkoutless.register.lastname",
    "errorMessage": "store/checkoutless.register.lastnameError",
    "disabled": false,
    "minLength": 1,
    "maxLength": 40
  },
  {
    "type": "text",
    "name": "phone",
    "placeholder": "store/checkoutless.register.phone",
    "errorMessage": "store/checkoutless.register.phoneError",
    "disabled": false,
    "minLength": 7,
    "maxLength": 10
  },
  {
    "type": "text",
    "name": "document",
    "placeholder": "store/checkoutless.register.document",
    "errorMessage": "store/checkoutless.register.documentError",
    "disabled": false,
    "minLength": 1,
    "maxLength": 10
  }
]

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Profile/ProfileForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useDispatch } from 'react-redux'

import { Alert, Button, HabeasData, Input } from '../../shared'
import { MyData, MyOrder } from '../../Icons'
import { regularExpressions } from '../../../utils'
import { setNextSection } from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { Toast } from '../../shared/Toast/Toast'
import InfoItem from '../../shared/InfoItem'
import type { Message } from '../../shared/interfaces/interfaces'
import type { Section } from '../../../interfaces/StepsAndSections'
import globalStyles from '../../../myCheckout-styles.module.css'
import gridCss from '../../../grid.module.css'
import Title from '../../shared/Title'
import type { ProfileMC } from '../../../interfaces/orderForm'
import profileFormJson from './profileFormFields.json'
import type { InputValue } from '../../../interfaces'

interface Props {
  disabled: boolean
  document: InputValue
  email: InputValue
  firstName: InputValue
  hasError: boolean
  isEdit: boolean
  isLiteVersion: boolean
  isMobile: boolean
  lastName: InputValue
  loadingUser: boolean
  phone: InputValue
  profile: ProfileMC
  section: Section
  showHabeasData: boolean
  toastMessage?: Message
  handleClick: () => void
  handleContinue: () => void
  handleKeyUpevent: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
}

export const ProfileForm = (props: Props) => {
  const dispatchGlobal = useDispatch()

  const {
    disabled,
    handleClick,
    handleKeyUpevent,
    hasError,
    isEdit,
    loadingUser,
    showHabeasData,
    toastMessage,
  } = props

  return (
    <div>
      <Toast toastMessage={toastMessage} onClose={handleClick} />
      <div
        className={`${globalStyles.marginBottom} ${globalStyles.titleContainer}`}
      >
        <Title>
          <Title.Item title="store/checkoutless.summary.myPersonalData">
            <MyData fill={globalStyles.iconAlternativeSecondary} />
          </Title.Item>

          <InfoItem
            className={globalStyles.inMobileFlex}
            firstAction={() => dispatchGlobal(setNextSection('summary'))}
          >
            <InfoItem.Icon>
              <MyOrder
                fill={globalStyles.iconAlternative}
                height={24}
                width={24}
              />
            </InfoItem.Icon>
            <InfoItem.Content text="store/checkoutless.summary.myOrder" />
          </InfoItem>
        </Title>
      </div>
      <div className={gridCss.gridFormTwoCols}>
        {profileFormJson.map(
          ({
            type,
            name,
            errorMessage,
            disabled: inputDisabled,
            placeholder,
            maxLength,
          }) => (
            <div
              className={globalStyles.marginBottom}
              data-col={name === 'email' && `two-col`}
            >
              <Input
                type={type}
                placeholder={placeholder}
                errorMessage={errorMessage}
                regularExpression={regularExpressions[name]}
                name={name}
                disabled={name === 'document' ? isEdit : inputDisabled}
                maxLength={maxLength}
                handleKeyUpevent={handleKeyUpevent}
                {...props[name]}
              />
            </div>
          )
        )}
      </div>
      {showHabeasData && <HabeasData />}
      {hasError && (
        <Alert type="error" text="store/checkoutless.generalError" />
      )}
      <div className={globalStyles.marginBottom}>
        {!isEdit && (
          <Button
            value={
              loadingUser
                ? 'store/checkoutless.button.loading'
                : 'store/checkoutless.button.continue'
            }
            onClick={handleClick}
            disabled={disabled}
          />
        )}
        {isEdit && (
          <div className={globalStyles.actionButtonContainer}>
            <Button
              value={
                loadingUser
                  ? 'store/checkoutless.button.loading'
                  : 'store/checkoutless.button.save'
              }
              onClick={handleClick}
              disabled={disabled}
            />
          </div>
        )}
      </div>
    </div>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Profile/ProfileFormContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { ProfileForm } from './ProfileForm'
import { useProfileForm } from './useProfileForm'

const ProfileFormContainer = () => {
  const profileForm = useProfileForm()

  return <ProfileForm {...profileForm} />
}

export default ProfileFormContainer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/Profile/useProfileForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useDispatch, useSelector } from 'react-redux'
import { useEffect, useRef, useState } from 'react'
import { gql, useMutation } from '@apollo/client'

import {
  useUserData,
  useUserDataDispatch,
} from '../../../contexts/UserDataProvider'
import {
  selectIsMobile,
  selectSettings,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'
import {
  selectSection,
  setNextUserRegistrationSections,
  setPrevStep,
  setSameSection,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { useActions } from '../../../contexts/ActionsProviderV2'
import type { ClientProfileData } from '../../../interfaces'
import { useInputValue } from '../../../hooks/useInputValue'
import constants from '../../../utils/constants'
import { Events } from '../../../interfaces'
import { useEcommerce } from '../../../hooks/useEcommerce'
import { FillPersonalDataEvent } from '../../../events'
import type { Message } from '../../shared/interfaces/interfaces'
import {
  selectProfile,
  setProfile,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import type { OrderFormMC } from '../../../interfaces/orderForm'
import { useFetchIpAddress } from '../../../hooks/useFetchIpAddress'

const CREATE_USER = gql`
  mutation createUser(
    $email: String!
    $habeasData: Boolean!
    $id_number: String!
    $id_type: String!
    $ip: String!
    $lastname: String!
    $name: String!
    $phone_code: String!
    $phone_number: String!
  ) {
    createUser(
      email: $email
      habeasData: $habeasData
      id_number: $id_number
      id_type: $id_type
      ip: $ip
      lastname: $lastname
      name: $name
      phone_code: $phone_code
      phone_number: $phone_number
    ) @context(provider: "kuikpay.my-checkout") {
      id
      name
      lastname
      id_type
      id_number
      email
      phone_code
      phone_number
      habeasData
    }
  }
`

const profileFormInitialState: ClientProfileData = {
  email: '',
  firstName: '',
  lastName: '',
  document: '',
  phone: '',
  habeasData: false,
}

export const useProfileForm = () => {
  const [disabled, setDisabled] = useState(true)
  const [hasError, setHasError] = useState(false)
  const [toastMessage, setToastMessage] = useState<Message>()

  const { storeTermsAndConditions } = useUserData()

  // cargar nuevo contexto

  const profile = useSelector(selectProfile)
  const isEdit = useSelector(
    (state: { orderForm: OrderFormMC }) => state.orderForm.status === 'complete'
  )

  const section = useSelector(selectSection)
  const dispatchUserData = useUserDataDispatch()
  const dispatchGlobal = useDispatch()
  const { isLiteVersion, hasGoogleAnalytics } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)
  const { updateOrderFormProfile, storeTermsAndConditionsContent } =
    useActions()

  const { ipAddress } = useFetchIpAddress()

  const email = useInputValue(profile.email)
  const firstName = useInputValue(profile.name)
  const lastName = useInputValue(profile.lastname)
  const document = useInputValue(profile.document)
  const phone = useInputValue(profile.phone)
  const { handleEcommerce } = useEcommerce()
  const initialRenderer = useRef(true)
  const existStoreTermAndConditions = storeTermsAndConditionsContent?.length > 0
  const [showHabeasData, setShowHabeasData] = useState(false)

  const { prefix, documentType } = constants

  // TODO: review this logic
  const refreshProfileFormInitialState = () => {
    profileFormInitialState.email = email?.value
    profileFormInitialState.firstName = firstName?.value
    profileFormInitialState.lastName = lastName?.value
    profileFormInitialState.document = document?.value
    profileFormInitialState.phone = phone?.value
    profileFormInitialState.habeasData = profile.habeasData
  }

  const areThereChangesForm = () => {
    const enteredFields: ClientProfileData = {
      email: email?.value,
      firstName: firstName?.value,
      lastName: lastName?.value,
      document: document?.value,
      phone: phone?.value,
      habeasData: profile.habeasData,
    }

    return (
      Object.entries(enteredFields).toString() ===
      Object.entries(profileFormInitialState).toString()
    )
  }

  const handleContinue = () => {
    dispatchUserData({
      type: 'SET_CHANGE_INFO',
      args: {
        isEdit: false,
        isNewInfo: false,
        userLocation: false,
        isChangeEmail: false,
      },
    })
    dispatchGlobal(setPrevStep())
  }

  const [createUserFunction, { loading: loadingUser }] = useMutation(
    CREATE_USER,
    {
      onCompleted: (data) => {
        const { createUser } = data

        const user = {
          email: createUser.email,
          firstName: createUser.name,
          lastName: createUser.lastname,
          documentType: createUser.id_type,
          document: createUser.id_number,
          phone: createUser.phone_number,
        }

        dispatchGlobal(
          setProfile({
            id: createUser.id,
            email: createUser.email,
            name: createUser.name,
            lastname: createUser.lastname,
            documentType: createUser.id_type,
            document: createUser.id_number,
            phone: createUser.phone_number,
            phoneCode: createUser.phone_code,
            habeasData: createUser.habeasData,
          })
        )

        handleEcommerce(Events.authentication)

        updateOrderFormProfile(user)

        if (isEdit) {
          dispatchGlobal(setSameSection(section))
          setToastMessage({
            type: 'success',
            header: 'store/checkoutless.user.userEditedMessageHeader',
            text: 'store/checkoutless.user.userEditedMessageText',
          })
        } else {
          dispatchGlobal(setNextUserRegistrationSections())
        }
      },
      onError: (error) => {
        setHasError(true)
        console.error(`error`, error)
      },
    }
  )

  const handleClick = () => {
    if (loadingUser) return
    if (areThereChangesForm()) {
      if (isEdit) {
        handleContinue()
      } else {
        dispatchGlobal(setNextUserRegistrationSections())
      }

      return
    }

    refreshProfileFormInitialState()
    createUserFunction({
      variables: {
        email: email.value.toLowerCase(),
        id_number: document.value,
        id_type: documentType,
        ip: ipAddress,
        lastname: lastName.value?.trim(),
        name: firstName.value?.trim(),
        phone_code: prefix,
        phone_number: phone.value,
        habeasData: true,
      },
    })
    FillPersonalDataEvent({ hasGoogleAnalytics })
  }

  const handleKeyUpevent = (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    if (ev.key === 'Enter' && !disabled) {
      handleClick()
    }
  }

  useEffect(() => {
    const acceptStoreTermsAndConditions = existStoreTermAndConditions
      ? storeTermsAndConditions
      : true

    if (isEdit && !showHabeasData) {
      const newData = JSON.stringify({
        ...profile,
        email: email.value,
        name: firstName.value,
        lastname: lastName.value,
        document: document.value,
        phone: phone.value,
      })

      const clientProfileDataString = JSON.stringify(profile)

      setShowHabeasData(newData !== clientProfileDataString)
    }

    if (
      email.isValid &&
      firstName.isValid &&
      lastName.isValid &&
      document.isValid &&
      phone.isValid &&
      acceptStoreTermsAndConditions
    ) {
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }, [email, firstName, lastName, document, phone])

  useEffect(() => {
    refreshProfileFormInitialState()
  }, [])

  useEffect(() => {
    if (isEdit) return
    setShowHabeasData(!profile.habeasData)
  }, [isEdit])

  useEffect(() => {
    if (!isEdit || !initialRenderer.current) return

    dispatchUserData({
      type: 'SET_HABEAS_DATA',
      args: {
        habeasData: false,
      },
    })

    if (existStoreTermAndConditions) {
      dispatchUserData({
        type: 'SET_STORE_TERMS_AND_CONDITIONS',
        args: {
          storeTermsAndConditions: false,
        },
      })
    }
  }, [isEdit])

  return {
    disabled,
    document,
    email,
    firstName,
    handleClick,
    handleContinue,
    handleKeyUpevent,
    hasError,
    isEdit,
    isLiteVersion,
    isMobile,
    lastName,
    loadingUser,
    phone,
    section,
    showHabeasData,
    toastMessage,
    profile,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/TriggerCollapsible/triggerCollapsible.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.triggerCollapsibleContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
}

.triggerCollapsibleInfo {
  display: flex;
  align-items: center;
}

.triggerCollapsibleText {
  margin-left: 10px;
  margin-right: 22px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/TriggerCollapsible/useTriggerCollapsible.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useUserData } from '../../../contexts/UserDataProvider'
import type { Section } from '../../ViewValidate'

const useTriggerCollapsible = (id: Section) => {
  const userData = useUserData()

  const validateAddressAlterAndLogistic =
    userData[id]?.addressAlternative &&
    userData?.logisticsInfo?.length > 0 &&
    userData?.logisticsInfo[0].selectedDeliveryChannel === 'pickup-in-point' &&
    !userData?.logisticsInfo?.some(
      (item) => item.selectedDeliveryChannel === 'delivery'
    ) &&
    userData?.clientProfileData?.completed

  return { validateAddressAlterAndLogistic }
}

export default useTriggerCollapsible

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/TriggerCollapsible/TriggerCollapsibleContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import type { Section } from '../../ViewValidate'
import { TriggerCollapsible } from './TriggerCollapsible'
import useTriggerCollapsible from './useTriggerCollapsible'

interface Props {
  text?: string
  icon?: JSX.Element
  open?: boolean
  id: Section
  show?: boolean
}

const TriggerCollapsibleContainer = (props: Props) => {
  const { validateAddressAlterAndLogistic } = useTriggerCollapsible(props.id)

  return (
    <TriggerCollapsible
      {...props}
      validateAddressAlterAndLogistic={validateAddressAlterAndLogistic}
    />
  )
}

export default TriggerCollapsibleContainer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/RegisterForm/TriggerCollapsible/TriggerCollapsible.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'

import { Dropdown, Check } from '../../Icons'
import { useUserData } from '../../../contexts/UserDataProvider'
import EditButton from '../EditButton/EditButtonContainer'
import type { Section } from '../../ViewValidate'
import useFormatMessage from '../../../i18n/useFormatMessage'
import global from '../../../myCheckout-styles.module.css'
import styles from './triggerCollapsible.css'

interface Props {
  text?: string
  icon?: JSX.Element
  open?: boolean
  id: Section
  show?: boolean
  validateAddressAlterAndLogistic: boolean
}

export const TriggerCollapsible = (props: Props) => {
  const {
    text,
    icon,
    open = false,
    id,
    show = true,
    validateAddressAlterAndLogistic,
  } = props

  const userData = useUserData()

  return (
    <div className={styles.triggerCollapsibleContainer}>
      <div className={styles.triggerCollapsibleInfo}>
        {icon}
        <div className={styles.triggerCollapsibleText}>
          {text && <p className={global.textXl}>{useFormatMessage(text)}</p>}
        </div>
        {(userData[id]?.completed || validateAddressAlterAndLogistic) && (
          <Check fill={global.iconSecondary} />
        )}
      </div>
      <span className={global.cursorPointer}>
        {open ? (
          <Fragment>
            {show && (
              <EditButton
                completed={userData[id]?.completed}
                orderSection={id}
              />
            )}
          </Fragment>
        ) : (
          <Dropdown fill={global.arrowDownIcon} />
        )}
      </span>
    </div>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Constants/index.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const Cards = {
  Visa: {
    image: 'https://kuikpay.vteximg.com.br/arquivos/ids/155401',
  },
  Mastercard: {
    image: 'https://kuikpay.vteximg.com.br/arquivos/ids/155402',
  },
  'American Express': {
    image: 'https://kuikpay.vteximg.com.br/arquivos/ids/155404',
  },
  Diners: {
    image: 'https://kuikpay.vteximg.com.br/arquivos/ids/155403',
  },
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Models/payments.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const PaymentsList = {
  CreditCard: 'creditCardPaymentGroup',
  PaymentOnDelivery: 'promissory',
  Orion: 'creditpay',
}

export const PaymentKey = {
  CreditCard: 'creditCardPaymentGroup',
  Orion: 'Orion',
}

export const PaymentTemplate = {
  Custom: 'CustomPayment',
  Card: 'CreditCart',
}

export const TemplateKey = {
  Card: 'creditCardPaymentGroup-template',
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/label.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.paymentLabelContainer {
  display: flex;
  position: relative;
  margin: 8px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
}

.paymentLabelContainer label {
  cursor: pointer;
  margin: 0 12px;
}

.paymentLabelContainer .paymentCustomCreditLabel {
  font-size: 14px !important;
  color: #284859;
  line-height: 24px;
  margin: 12px 0px;
  border-radius: 8px;
  box-shadow: 0px 3px 6px #0000000f;
  padding: 5px 28px;
  margin-bottom: 15px;
  cursor: initial;
}

.paymentLabelContainer .paymentCustomCreditLabel b {
  color: #1b998b;
}

@media screen and (min-width: 992px) {
  .paymentLabelContainer {
    margin: 16px;
  }

  .paymentLabelContainer .paymentCustomCreditLabel {
    margin: 16px 0px;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/PaymentOption.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, useMemo } from 'react'

import { PaymentKey, PaymentsList } from '../Models/payments'
import type { LabelProps } from './Label'
import Label from './Label'
import useFormatMessage from '../../../i18n/useFormatMessage'
import globalStyle from '../../../myCheckout-styles.module.css'
import type { GroupPaymentMethods } from '../../../interfaces/simulation'

interface PaymentOptionProps {
  payments: Partial<GroupPaymentMethods>
  orion?: boolean
  customLabel?: string
  children?: React.ReactNode
  selected?: boolean
  paymentDataSection: string
}

const PaymentOption = ({
  payments,
  orion = false,
  customLabel,
  children,
  selected = false,
  paymentDataSection,
}: PaymentOptionProps) => {
  const orionText = useFormatMessage(
    'store/checkoutless.register.customerCredit',
    {
      store: <b>ORION</b>,
    }
  )

  const label: LabelProps = useMemo(() => {
    return customLabel
      ? {
          type: payments.groupName,
          label: customLabel,
          useCustomLabel: true,
        }
      : orion
      ? {
          type: PaymentsList.Orion,
          label: orionText,
          useCustomLabel: true,
        }
      : {
          type: payments.groupName,
          paymentSystem: payments.paymentMethods[0].id,
          label:
            payments.groupName !== PaymentKey.CreditCard
              ? payments.paymentMethods[0].name ||
                'store/checkoutless.register.creditCard'
              : 'store/checkoutless.register.creditCard',
          useCustomLabel: payments.groupName === PaymentKey.CreditCard,
        }
  }, [payments, orion, customLabel])

  return paymentDataSection === 'list' ? (
    <div className={globalStyle.borderBottom}>
      <Label {...label} />
    </div>
  ) : selected ? (
    <div>{children}</div>
  ) : (
    <Fragment />
  )
}

export default PaymentOption

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/Orion.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useMemo } from 'react'

import { usePayment } from '../../../contexts/PaymentContext'
import { PaymentsList } from '../Models/payments'
import useFormatMessage from '../../../i18n/useFormatMessage'
import type { LabelProps } from './Label'
import Label from './Label'
import { useCustomerCredit } from '../../../hooks/useCustomerCredit'
import { formatter } from '../../../utils'
import CustomerCreditPayment from '../../CustomerCreditPayment'
import { Button } from '../../shared'
import globalStyles from '../../../myCheckout-styles.module.css'
import CouponContainer from '../../Coupon/CouponContainer'

interface OrionProps {
  units: number
  totalOfferings: number
}

const Orion = ({ units, totalOfferings }: OrionProps) => {
  const { styles, paymentMethod, loadingOrder, handleClick, disabled, value } =
    usePayment()

  const {
    simulationCredit,
    credit,
    onSimulationCredit,
    showMinMessage,
    onChangePaymet,
    validateCredit,
    canPayWithCredit,
  } = useCustomerCredit()

  useEffect(() => {
    if (paymentMethod === PaymentsList.Orion) {
      onSimulationCredit()
    }

    onChangePaymet()
  }, [paymentMethod])

  const label: LabelProps = {
    type: PaymentsList.Orion,
    label: useFormatMessage('store/checkoutless.register.customerCredit', {
      store: <b>ORION</b>,
    }),
    useCustomLabel: true,
  }

  const showCustomerCreditPaymentMessage = useMemo(
    () => credit?.credit && showMinMessage,
    [credit, showMinMessage]
  )

  const showCustomerCreditPayment = useMemo(
    () => paymentMethod === PaymentsList.Orion && !showMinMessage,
    [paymentMethod, showMinMessage]
  )

  const showBuyButton = useMemo(
    () => paymentMethod === PaymentsList.Orion,
    [paymentMethod]
  )

  const message = useFormatMessage(
    'store/checkoutless.register.customerCredit.study.initialmessage',
    {
      value: (
        <b>{formatter.format(simulationCredit?.quotaValue)}, sin interés.</b>
      ),
      quantity: <b>{simulationCredit?.quotaQuantity} cuotas mensuales</b>,
    }
  )

  return (
    <div className={styles.paymentMethodContainer}>
      <Label {...label}>
        {simulationCredit && !showMinMessage && (
          <div
            className={styles.paymentCustomCreditLabel}
            style={{
              marginLeft: paymentMethod === 'bnpl' ? -28 : 0,
              boxShadow: paymentMethod === 'bnpl' && 'none',
            }}
          >
            {message}
          </div>
        )}
        {showCustomerCreditPaymentMessage && (
          <div className={styles.paymentCustomCreditLabel}>
            {useFormatMessage(
              'store/checkoutless.register.customerCredit.study.approved.minmessage',
              { value: <b>{formatter.format(credit?.approved)}</b> }
            )}
          </div>
        )}
      </Label>
      {showCustomerCreditPayment && (
        <CustomerCreditPayment
          credit={credit}
          validateCredit={validateCredit}
        />
      )}
      <CouponContainer />
      {showBuyButton && (
        <div className={globalStyles.buyButtonContainer}>
          <Button
            value={
              loadingOrder
                ? 'store/checkoutless.register.processingPayment'
                : 'store/checkoutless.register.pay'
            }
            onClick={() =>
              handleClick({
                paymentMethod: 'BNPL',
                gateway: 'creditpay',
              })
            }
            disabled={!canPayWithCredit || disabled}
            customValue={`${formatter.format(value + totalOfferings)}`}
            units={units}
            isPaymentButton={true}
          />
        </div>
      )}
    </div>
  )
}

export default Orion

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/CreditCart.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'

import type { LabelProps } from './Label'
import Label from './Label'
import { PaymentKey } from '../Models/payments'
import Form from '../../RegisterForm/Form'
import { usePayment } from '../../../contexts/PaymentContext'
import { Cards } from '../Constants'
import { selectIdImgCard } from '../../../utils/payments'
import styles from './CreditCard.module.css'
import { selectSettings } from '../../../contexts/global-context/reducers/uiSettingsSlice'
import type { GroupPaymentMethods } from '../../../interfaces/simulation'

interface CreditCardProps {
  payments: GroupPaymentMethods
}

const CreditCard = ({ payments }: CreditCardProps) => {
  const {
    disabled,
    error,
    franchiseImg,
    gateway,
    loadingOrder,
    paymentMethod,
    handleClick,
    handledClickDisabled,
    setError,
    setFranchiseImg,
  } = usePayment()

  const { additionalData } = useSelector(selectSettings)

  const [selectedCard, setSelectedCard] = useState(null)

  useEffect(() => {
    if (franchiseImg) {
      const paymentSelected = payments.paymentMethods.find((payment) => {
        const name = payment.name.toLowerCase()

        return franchiseImg && franchiseImg === name
      })

      setSelectedCard(paymentSelected)
    }
  }, [franchiseImg, payments])

  const label: LabelProps = useMemo(
    () => ({
      type: payments.groupName,
      label:
        payments.groupName !== PaymentKey.CreditCard
          ? payments.paymentMethods[0].name ||
            'store/checkoutless.register.creditCard'
          : 'store/checkoutless.register.creditCard',
      useCustomLabel: payments.groupName === PaymentKey.CreditCard,
    }),
    [payments]
  )

  const show = useMemo(
    () => paymentMethod === payments.groupName,
    [paymentMethod]
  )

  const cardInfo = useMemo(() => {
    const response = selectIdImgCard(franchiseImg)

    return response?.nameComplete || franchiseImg
  }, [franchiseImg])

  return (
    <div>
      <Label {...label} />
      {show && (
        <Fragment>
          <div className={styles.cardsImgContainer}>
            {payments.paymentMethods.map((payment, index) => {
              const infoCard = Cards[payment.name]
              const name = payment.name.toLocaleLowerCase()

              return infoCard ? (
                <img
                  key={`payment-logo-${index}`}
                  src={infoCard?.image}
                  alt={payment?.name}
                  style={{
                    opacity:
                      name.includes(franchiseImg) ||
                      franchiseImg === name ||
                      cardInfo === name
                        ? '1'
                        : '0.4',
                  }}
                />
              ) : (
                <Fragment />
              )
            })}
          </div>
          <Form
            handledPaymentDisabled={handledClickDisabled}
            handlePayment={handleClick}
            loading={loadingOrder}
            error={error}
            setError={setError}
            disabled={disabled}
            paymentMethod={paymentMethod}
            payments={payments}
            id={gateway === 'creditpay' || !gateway ? 'noop' : gateway}
            gateway={additionalData?.paymentez === 'true' && 'paymentez'}
            setFranchiseImg={setFranchiseImg}
            selectedCard={selectedCard}
          />
        </Fragment>
      )}
    </div>
  )
}

export default CreditCard

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/Label.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'
import classNames from 'classnames'

import { usePayment } from '../../../contexts/PaymentContext'
import globalStyles from '../../../myCheckout-styles.module.css'
import labelStyles from './label.css'

export interface LabelProps {
  children?: any
  label: string
  paymentSystem?: string
  type: string
  useCustomLabel?: boolean
}

const Label = ({
  children,
  label,
  paymentSystem,
  type,
  useCustomLabel,
}: LabelProps) => {
  const { global, styles, paymentMethod, intl, onSelectedPayment } =
    usePayment()

  const labelClasses = classNames(
    paymentMethod === type && global.enphasis,
    paymentMethod === type && styles.radioEmphasis
  )

  return useMemo(
    () => (
      <div
        className={labelStyles.paymentLabelContainer}
        onClick={() => {
          onSelectedPayment(type, paymentSystem)
        }}
      >
        <input
          id={`payment-${type}`}
          type="radio"
          value={type}
          checked={paymentMethod === type}
          readOnly
          className={globalStyles.cursorPointer}
        />
        <label htmlFor={`payment-${type}`} className={labelClasses}>
          {useCustomLabel ? intl.formatMessage({ id: label }) : label}
          {children}
        </label>
      </div>
    ),
    [paymentMethod, type, label, intl]
  )
}

export default Label

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/CustomPayment.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'

import { usePayment } from '../../../contexts/PaymentContext'
import type { LabelProps } from './Label'
import Label from './Label'
import { formatter } from '../../../utils'
import { Button } from '../../shared'
import globalStyles from '../../../myCheckout-styles.module.css'
import CouponContainer from '../../Coupon/CouponContainer'
import type { GroupPaymentMethods } from '../../../interfaces/simulation'

interface CreditCardProps {
  payments: GroupPaymentMethods
  units: number
  totalOfferings: number
}

const CustomPayment = ({
  payments,
  units,
  totalOfferings,
}: CreditCardProps) => {
  const { handleClick, styles, loadingOrder, disabled, value, paymentMethod } =
    usePayment()

  const payment = useMemo(() => payments.paymentMethods[0], [payments])

  const label: LabelProps = useMemo(
    () => ({
      type: payment.groupName,
      label: payment.name,
    }),
    [payment]
  )

  const show = useMemo(
    () => paymentMethod === payment.groupName,
    [paymentMethod, payment]
  )

  return useMemo(
    () => (
      <div className={styles.paymentMethodContainer}>
        <Label {...label} />
        {show && (
          <div>
            <div className={styles.paymentMethodPromissory}>
              {payment.description || label?.label}
            </div>
            <CouponContainer />
            <div className={globalStyles.buyButtonContainer}>
              <Button
                value={
                  loadingOrder
                    ? 'store/checkoutless.register.processingPayment'
                    : 'store/checkoutless.register.pay'
                }
                onClick={() =>
                  handleClick({
                    paymentMethod: payment.id,
                    gateway: 'custom',
                  })
                }
                disabled={disabled}
                customValue={`${formatter.format(value + totalOfferings)}`}
                units={units}
                isPaymentButton={true}
                isFixed={false}
              />
            </div>
          </div>
        )}
      </div>
    ),
    [show, value]
  )
}

export default CustomPayment

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/Payments/Components/CreditCard.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.cardsImgContainer {
  display: flex;
  align-self: center;
  justify-content: center;
}

.cardsImgContainer img {
  margin-right: 10px;
  height: 25px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Tooltip/toolTip.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.tooltip .contentTooltip {
  visibility: hidden;
  position: absolute;
  min-width: 120px;
  max-width: 340px;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  z-index: 1000000000000;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background: #ffffff;
  right: 0;
  top: -40px;
}

.tooltip:hover .contentTooltip {
  visibility: visible;
  opacity: 1;
}

.tooltipChildren {
  cursor: pointer;
}

.contentTooltip span {
  color: #1b998b;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Tooltip/Tooltip.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import styles from './toolTip.css'

export const ToolTip = ({ tooltip, children }: any) => {
  return (
    <div className={styles.tooltip}>
      <div className={styles.tooltipChildren}>{children}</div>
      <div className={styles.contentTooltip}>
        {tooltip}
        <span className="arrow"></span>
      </div>
    </div>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Title/Title.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { CSSProperties, ReactElement } from 'react'
import React from 'react'

import styles from './title.css'

export interface Props {
  children: ReactElement | ReactElement[]
  className?: string
  style?: CSSProperties
}

export const Title = ({ children, className, style }: Props) => {
  return (
    <div className={`${styles.titleContainer} ${className}`} style={style}>
      {children}
    </div>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Title/title.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.titleContainer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.titleContainer .titleContent {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.titleContainer .titleIcon {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0px 5px 0px 0px;
}

.titleContainer .titlePrimary {
  align-items: center;
  color: var(--primary-color-focus);
  display: flex;
  font-size: 16px;
}

.titleContainer .titleSecondary {
  align-items: center;
  color: var(--primary-text-color);
  display: flex;
  font-size: 14px;
}

@media screen and (min-width: 992px) {
  .titleContainer {
    border-bottom: 1px solid var(--primary-color-focus);
    padding-bottom: 4px;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Title/index.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Title as TitleHOC } from './Title'
import { TitleItem } from './TitleItem/TitleItem'
import type { TitleHOCProps } from '../interfaces/interfaces'

export const Title: TitleHOCProps = Object.assign(TitleHOC, {
  Item: TitleItem,
})

export default Title

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Input/useInput.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type React from 'react'
import { useEffect, useState } from 'react'
import { useIntl } from 'react-intl'

interface Props {
  children?: any
  className?: string
  disabled?: boolean
  errorMessage?: string
  isValid?: boolean | null
  maxLength?: number
  name: string
  placeholder: string
  regularExpression?: RegExp
  showError?: boolean
  type?: string
  value: string
  blurFunction?: () => void
  onChange?: (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onCustomKeyDownEvent?: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onCustomKeyUpEvent?: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  reset: () => void
  setIsValid?: (state: boolean) => void
}

const useInput = (props: Props) => {
  const [info, setInfo] = useState(false)
  const intl = useIntl()
  const {
    children,
    className = '',
    disabled,
    errorMessage,
    isValid,
    maxLength,
    name,
    placeholder,
    regularExpression,
    showError = true,
    type = 'text',
    value,
    blurFunction,
    onChange,
    onCustomKeyUpEvent,
    reset,
    setIsValid,
  } = props

  const keyUpValidation = (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    onCustomKeyUpEvent && onCustomKeyUpEvent(ev)
    if (regularExpression) {
      if (regularExpression.test(value)) {
        setIsValid(true)
      } else {
        setIsValid(false)
      }
    }
  }

  const blurValidation = () => {
    if (regularExpression) {
      if (regularExpression.test(value)) {
        setIsValid(true)
      } else {
        setIsValid(false)
      }
    }

    if (blurFunction) blurFunction()
  }

  useEffect(() => {
    if (value?.length > 0) setIsValid(true)
  }, [])

  return {
    children,
    className,
    disabled,
    errorMessage,
    info,
    intl,
    isValid,
    maxLength,
    name,
    placeholder,
    showError,
    type,
    value,
    blurValidation,
    keyUpValidation,
    onChange,
    reset,
    setInfo,
  }
}

export default useInput

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Input/input.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.inputContent {
  display: flex;
  flex-direction: column;
}

.inputContent .groupInput {
  position: relative;
  width: 100%;
}

.inputContent .inputIconContainer {
  bottom: 0;
  position: absolute;
  z-index: 80;
}

.inputContent .inputwidth {
  width: 100%;
}

.inputContent .input {
  border: 1px solid transparent;
  border-bottom: 1px solid var(--dark-gray-color);
  width: 100%;
  outline: none;
  padding-bottom: 2px;
  padding-left: 5px;
}

.inputContent .inputWithIcon {
  padding-left: 22px;
}

.inputContent .input[disabled] {
  color: var(--dark-gray-color);
}

.inputContent .input::placeholder {
  color: transparent !important;
}

.inputContent .input:not(:placeholder-shown) ~ .labelPlaceholder {
  transform: scale(0.9) translateY(-1.2rem) translateX(0rem);
}

.inputContent .input:focus ~ .labelPlaceholder {
  transform: scale(0.9) translateY(-1.2rem) translateX(0rem);
}

.inputContent .labelPlaceholder {
  position: absolute;
  left: 5px;
  bottom: 2px;
  color: var(--dark-gray-color);
  opacity: 1;
  pointer-events: none;
  transform-origin: 0 0;
  user-select: none;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.inputContent .input:not(:placeholder-shown) ~ .labelWithIcon {
  transform: scale(0.9) translateY(-1.8rem) translateX(-1.5rem);
}

.inputContent .input:focus ~ .labelWithIcon {
  transform: scale(0.9) translateY(-1.8rem) translateX(-1.5rem);
}

.inputContent .labelWithIcon {
  left: 24px;
}

.inputContent .inputValid {
  border-bottom: 1px solid var(--valid-color);
  font-weight: 400;
}

.inputContent .inputInvalid {
  border-bottom: 1px solid var(--error-color);
}

.inputContent .inputDeleteIcon {
  right: 20px;
  bottom: 0px;
}

.inputContent .deleteContent {
  display: initial;
}

.inputContent .cancelContent {
  display: none;
}

.inputContent .inputLabelError {
  color: var(--error-color) !important;
  font-size: 14px !important;
}

@media screen and (min-width: 992px) {
  .inputContent .input {
    padding-left: 5px;
  }

  .inputContent .inputWithIcon {
    padding-left: 30px;
  }

  .inputContent .input:not(:placeholder-shown) ~ .labelPlaceholder {
    transform: scale(0.9) translateY(-1.2rem) translateX(0rem);
  }

  .inputContent .input:focus ~ .labelPlaceholder {
    transform: scale(0.9) translateY(-1.2rem) translateX(0rem);
  }

  .inputContent .labelPlaceholder {
    left: 5px;
    bottom: 4px;
  }

  .inputContent .input:not(:placeholder-shown) ~ .labelWithIcon {
    transform: scale(0.9) translateY(-1.8rem) translateX(-2rem);
  }

  .inputContent .input:focus ~ .labelWithIcon {
    transform: scale(0.9) translateY(-1.8rem) translateX(-2rem);
  }

  .inputContent .labelWithIcon {
    left: 30px;
    bottom: 4px;
  }

  .inputContent .inputDeleteIcon {
    z-index: 100;
  }

  .inputContent .deleteContent {
    display: none;
  }

  .inputContent .cancelContent {
    display: initial;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Input/InputContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Input from './Input'
import useInput from './useInput'

interface Props {
  children?: any
  className?: string
  deleteBtn?: boolean
  disabled?: boolean
  errorMessage?: string
  floatLabel?: boolean
  icon?: any
  isValid?: boolean | null
  maxLength?: number
  name: string
  placeholder: string
  regularExpression?: RegExp
  showClearButton?: boolean
  showError?: boolean
  type?: string
  value: string
  blurFunction?: () => void
  onChange?: (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onCustomKeyUpEvent?: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onKeyDown?: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onPaste?: (
    e: React.ClipboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  reset: () => void
  setIsValid?: (state: boolean) => void
}

const InputContainer = (props: Props) => {
  const input = useInput({ ...props })

  return <Input {...input} {...props} />
}

export default InputContainer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Input/Input.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import type { IntlShape } from 'react-intl'

import styles from './input.css'
import Select from './Select/Select'
import { Text } from './Text/Text'

interface Props {
  children?: any
  className?: string
  deleteBtn?: boolean
  disabled?: boolean
  errorMessage?: string
  floatLabel?: boolean
  icon?: any
  info: boolean
  intl: IntlShape
  isValid?: boolean | null
  maxLength?: number
  name: string
  placeholder: string
  showClearButton?: boolean
  showError?: boolean
  type?: string
  value: string
  blurValidation: () => void
  keyUpValidation: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onChange?: (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onFocus?: (
    e: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onKeyDown?: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onPaste?: (
    e: React.ClipboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  reset: () => void
  setInfo: React.Dispatch<React.SetStateAction<boolean>>
}

const Input = (props: Props) => {
  const {
    type = 'text',
    errorMessage,
    isValid = false,
    className = '',
    showError = true,
    intl,
  } = props

  return (
    <div className={`${styles.inputContent} ${className}`}>
      <div className={styles.groupInput}>
        {type === 'select' ? <Select {...props} /> : <Text {...props} />}
      </div>
      {showError && isValid === false && errorMessage && (
        <p className={styles.inputLabelError}>
          {intl.formatMessage({ id: errorMessage })}
        </p>
      )}
    </div>
  )
}

export default Input

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Alert/alert.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.fixedContainerError {
  top: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 10;
}

.textError {
  max-width: 90%;
}

.linkError {
  text-decoration: underline;
  cursor: pointer;
}

.container {
  display: flex;
  margin: 12px 0px 0px 0px;
  padding: 4px;
  border-radius: 2px;
  align-items: flex-start;
  width: 100%;
  border-left: 5px solid;
  background-color: #fff;
  box-shadow: 0px 1px 5px 0px #00000042;
}

.container[data-type='success'] {
  border-color: #009e4e;
}

.container[data-type='warning'] {
  border-color: #fb8500;
}

.container[data-type='error'] {
  border-color: #ff0000e0;
}

.container[data-type='relevant'] {
  border-color: #3CB9DE;
}

.container .iconContainer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 5px;
}

.container .textContainer {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.container .textContaine p {
  margin-bottom: 4px;
}

.container[data-type='success'] .iconContainer {
  border-color: #009e4e;
}

.container[data-type='warning'] .iconContainer {
  border-color: #fb8500;
}

.container[data-type='error'] .iconContainer {
  border-color: #ff0000e0;
}

.container[data-type='relevant'] .iconContainer {
  border-color: #FFFFFF;
  margin: 0px 15px 0px 5px;
}

.container .alertDescription {
  font-size: 12px;
  color: var(--dark-gray-color);
  margin-top: 10px;
}

.containerRelevant {
  border-radius: 8px;
  padding: 15px 10px;
  background-color: #3CB9DE;
  border: 1px solid #3CB9DE;
}

.containerArrow::after {
  content: "";
  position: absolute;
  border-width: 10px;
  border-style: solid;
  left: 50%;
  border-color: #3CB9DE transparent transparent transparent;
}

.textRelevant {
  color: #FFFFFF !important;
}

.containerArrow {
  margin-bottom: 12px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Alert/Alert.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'

import useFormatMessage from '../../../i18n/useFormatMessage'
import globalStyles from '../../../myCheckout-styles.module.css'
import styles from './alert.css'
import { useAlert } from './useAlert'

export interface Props {
  className?: string
  classNameText?: string
  classNameDescription?: string
  customText?: string
  description?: string
  duration?: number
  enableAutoClose?: boolean
  hideOnClick?: boolean
  icon?: JSX.Element
  isOpen?: boolean
  link?: string
  text: string
  type: 'success' | 'warning' | 'error' | 'relevant'
  handleClick?: () => void
  handleClickClose?: () => void
}

const Alert = ({
  className,
  classNameText,
  classNameDescription,
  customText,
  description,
  duration,
  enableAutoClose = false,
  hideOnClick = true,
  icon,
  isOpen = true,
  link,
  text,
  type,
  handleClick,
  handleClickClose,
}: Props) => {
  const { showAlert, getIcon, handleCloseAlert } = useAlert({
    duration,
    enableAutoClose,
    hideOnClick,
    icon,
    isOpen,
    type,
    handleClickClose,
  })

  return showAlert ? (
    <Fragment>
      <div
        className={`${styles.container} ${styles[className]}`}
        data-type={type}
        onClick={() => handleCloseAlert()}
      >
        <div className={styles.iconContainer}>{getIcon()}</div>
        <div className={styles.textContainer}>
          <p
            className={`${globalStyles.textBase} ${styles.textError} ${styles[classNameText]}`}
          >
            {useFormatMessage(text, { customText })}
            {link && (
              <a
                onClick={handleClick}
                className={`${globalStyles.textBase} ${styles.textError} ${styles.linkError}`}
              >
                {useFormatMessage(link)}
              </a>
            )}
          </p>
          {description && (
            <span
              className={`${styles.alertDescription} ${styles[classNameDescription]}`}
            >
              {useFormatMessage(description)}
            </span>
          )}
        </div>
      </div>
      {type === 'relevant' && <div className={styles.containerArrow}></div>}
    </Fragment>
  ) : null
}

export default Alert

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Alert/useAlert.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useRef, useState } from 'react'

import { Danger, UnfilledCheck } from '../../Icons'

interface Props {
  duration?: number
  enableAutoClose: boolean
  hideOnClick: boolean
  icon?: JSX.Element
  isOpen: boolean
  type: 'success' | 'warning' | 'error' | 'relevant'
  handleClickClose?: () => void
}

export const useAlert = ({
  duration,
  enableAutoClose,
  hideOnClick,
  icon,
  isOpen,
  type,
  handleClickClose,
}: Props) => {
  const [showAlert, setShowAlert] = useState<boolean>(isOpen)
  const timeoutId = useRef<number>()

  const handleCloseAlert = () => {
    if (handleClickClose) handleClickClose()
    if (hideOnClick) setShowAlert(false)
  }

  useEffect(() => {
    if (enableAutoClose && isOpen) {
      if (timeoutId.current) clearTimeout(timeoutId.current)
      setShowAlert(true)
      timeoutId.current = window.setTimeout(
        () => handleCloseAlert(),
        duration * 1000 || 5000
      )
    }
  }, [isOpen, enableAutoClose])

  const getIcon = () => {
    if (icon) {
      return icon
    }

    switch (type) {
      case 'success':
        return <UnfilledCheck width={16} height={16} fill={'#009e4e'} />

      case 'warning':
        return <Danger fill={'#FF9900'} warn="c" />

      case 'error':
        return <Danger fill={'#cb4242'} />

      case 'relevant':
        return <Danger fill={'#FFFFFF'} warn="c" />

      default:
        return <UnfilledCheck width={16} height={16} fill={'#009e4e'} />
    }
  }

  return {
    showAlert,
    getIcon,
    handleCloseAlert,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Toast/useToast.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useEffect, useRef, useState } from 'react'

import type { Message } from '../interfaces/interfaces'

interface Props {
  toastMessage: Message
  onClose?: () => void
}

export const useToast = ({ toastMessage, onClose }: Props) => {
  const [message, setMessage] = useState<Message>(null)
  const timeoutId = useRef<number>()

  const resetToast = () => {
    setMessage(null)
    if (onClose) onClose()
  }

  const handledClick = () => {
    resetToast()
  }

  useEffect(() => {
    if (toastMessage) {
      if (timeoutId.current) clearTimeout(timeoutId.current)
      setMessage(toastMessage)
      timeoutId.current = window.setTimeout(() => resetToast(), 5000)
    }
  }, [toastMessage])

  return {
    message,
    resetToast,
    handledClick,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Toast/toast.modules.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.toastContainer {
  background-color: #4d4d4d;
  border-radius: 6px;
  display: flex;
  height: max-content;
  inset: 0;
  justify-content: space-between;
  padding: 12px 16px 12px 10px;
  position: absolute;
  width: 100%;
  z-index: 10000;
}

.toastContainer .toastIconCheck {
  fill: var(--success-color);
}

.toastContainer .toastIconCheckCircule {
  fill: var(--white-color);
  stroke: var(--white-color);
}

.toastCircle {
  align-items: center;
  background-color: var(--white-color);
  border-radius: 100%;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.toastContainer .toastContent {
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 10px;
}

.toastContainer .toastContentHeader {
  font-size: 14px;
  font-weight: var(--text-semi-bold);
  margin-bottom: 4px;
}

.toastContainer .toastContentMessage {
  font-size: 12px;
}

.toastContainer .toastIconCloseContent {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  width: 40px;
}

.toastContainer .toastIconClose {
  fill: var(--white-color);
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Toast/Toast.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import useFormatMessage from '../../../i18n/useFormatMessage'
import { Check, LiteClose, BellIcon } from '../../Icons'
import type { Message } from '../interfaces/interfaces'
import { useToast } from './useToast'
import styles from './toast.modules.css'

interface Props {
  toastMessage: Message
  onClose?: () => void
}

export const Toast = ({ toastMessage, onClose }: Props) => {
  const { message, handledClick } = useToast({
    toastMessage,
    onClose,
  })

  return message ? (
    <div className={styles.toastContainer}>
      {message.type === 'success' && (
        <Check
          classNameCircule={styles.toastIconCheckCircule}
          fill={styles.toastIconCheck}
          height={24}
          width={24}
        />
      )}
      {message.type === 'info' && (
        <div className={styles.toastCircle}>
          <BellIcon />
        </div>
      )}

      <div className={styles.toastContent}>
        {message.header && (
          <span className={styles.toastContentHeader}>
            {useFormatMessage(message.header)}
          </span>
        )}
        {message.text && (
          <span className={styles.toastContentMessage}>
            {useFormatMessage(message.text)}
          </span>
        )}
      </div>

      <button
        className={styles.toastIconCloseContent}
        onClick={() => handledClick()}
      >
        <LiteClose fill={styles.toastIconClose} />
      </button>
    </div>
  ) : null
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Checkbox/checkbox.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.checkboxContainer {
  position: relative;
}

.checkboxContainer .checkboxContent {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkboxContainer .check {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid var(--gray-color);
  border-radius: 4px;
  cursor: pointer;
}

.checkboxContainer .checkboxContent:checked ~ .check {
  background-color: var(--primary-color-focus);
  border: none;
}

.checkboxContainer .check:after {
  content: '';
  position: absolute;
  display: none;
}

.checkboxContainer .checkboxContent:checked ~ .check:after {
  display: block;
}

.checkboxContainer .check:after {
  left: 8px;
  top: 2px;
  width: 5px;
  height: 12px;
  border: solid var(--white-color);
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Checkbox/Checkbox.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import styles from './checkbox.css'

interface Props {
  isSelected: boolean
  onCheckboxChange: (_id?: string) => void
  id?: string
}

const Checkbox = (props: Props) => {
  const { isSelected, onCheckboxChange, id = '' } = props

  return (
    <label className={styles.checkboxContainer}>
      <input
        id={id}
        className={styles.checkboxContent}
        type="checkbox"
        onChange={() => onCheckboxChange(id)}
        checked={isSelected}
      />
      <span className={styles.check}></span>
    </label>
  )
}

export default Checkbox

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Spinner/spinner.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.spinner {
    -webkit-animation: spin 0.5s linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    animation: spin 0.5s linear infinite;
  }

  .spinner svg {
    width: 100%;
    height: 100%;
  }
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Spinner/Spinner.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'

import { Loading } from '../../Icons'
import styles from './spinner.css'

interface SpinnerProps {
  size: number
}

const Spinner = ({ size = 50 }: SpinnerProps) => {
  return useMemo(
    () => (
      <div
        className={styles.spinner}
        style={{
          width: size,
          height: size,
          margin: 'auto',
        }}
      >
        <Loading />
      </div>
    ),
    []
  )
}

export default Spinner

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Carousel/carousel.modules.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.carouselContainer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.carouselContainer .carouselArrowsContent {
  align-items: center;
  background: var(--white-color);
  border-radius: 50px;
  box-shadow: 0px 4px 6px 4px rgb(0 0 0 / 8%);
  display: flex;
  height: 26px;
  justify-content: center;
  position: absolute;
  width: 26px;
}

.carouselContainer .carouselArrowBackContent {
  left: -34px;
}

.carouselContainer .carouselForwardArrowContent {
  right: -34px;
}

.carouselContainer .carouselIconArrowBack {
  margin-bottom: 4px;
}

.carouselContainer .carouselIconForwardArrow {
  margin-top: 4px;
  transform: rotate(180deg);
}

.carouselContainer .carouselIcon {
  height: 24px;
  width: 24px;
}

.carouselContainer .carouselItem {
  display: flex;
  width: 100%;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Carousel/index.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Carousel as CarouselHOC } from './Carousel'
import { CarouselItem } from './CarouselItems/CarouselItem'
import type { CarouselHOCProps } from '../interfaces/interfaces'

export const Carousel: CarouselHOCProps = Object.assign(CarouselHOC, {
  Item: CarouselItem,
})

export default Carousel

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Carousel/Carousel.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { CSSProperties, ReactElement } from 'react'
import React, { createContext, useEffect, useState } from 'react'

import { ArrowBack } from '../../Icons'
import type { CarouselContextProps } from '../interfaces/interfaces'
import globalSyles from '../../../myCheckout-styles.module.css'
import styles from './carousel.modules.css'

export interface Props {
  children: ReactElement | ReactElement[]
  className?: string
  data: unknown[]
  itemLimit?: number
  style?: CSSProperties
}

export const CarouselContext = createContext({} as CarouselContextProps)
const { Provider } = CarouselContext

export const Carousel = ({
  children,
  data,
  itemLimit = 4,
  className,
  style,
}: Props) => {
  const [showArrows, setShowArrows] = useState<boolean>(true)

  useEffect(() => {
    if (data?.length <= itemLimit) setShowArrows(false)
  }, [data])

  return (
    <Provider value={{ data }}>
      <div className={`${className} ${styles.carouselContainer}`} style={style}>
        {showArrows && (
          <a
            className={`${styles.carouselArrowsContent} ${styles.carouselArrowBackContent} ${globalSyles.cursorPointer}`}
          >
            <ArrowBack
              className={`${styles.carouselIcon} ${styles.carouselIconArrowBack}`}
              fill={globalSyles.iconAlternative}
            />
          </a>
        )}
        {children}
        {showArrows && (
          <a
            className={`${styles.carouselArrowsContent} ${styles.carouselForwardArrowContent} ${globalSyles.cursorPointer}`}
          >
            <ArrowBack
              className={`${styles.carouselIcon} ${styles.carouselIconForwardArrow}`}
              fill={globalSyles.iconAlternative}
            />
          </a>
        )}
      </div>
    </Provider>
  )
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of mycheckout-sdk/src/components/shared/Button/button.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.buttonPosition {
  bottom: 0;
  width: 100% !important;
  right: 0;
  left: 0;
  background-color: var(--white-color);
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 6%);
  z-index: 100;
}

.buttonContent {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
  position: relative;
}

.buttonContent .buttonContainer {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  opacity: 1;
  font-weight: var(--text-regular);
  font-size: 20px;
}

.buttonContent .buttonContainer[data-secondary='off']:hover {
  background-color: var(--primary-color-button);
  color: var(--white-color);
}

.buttonContent .buttonContainer[data-secondary='off'] {
  background-color: var(--white-color);
  border: 1px solid var(--primary-color-button);
  color: var(--primary-color-button);
}

.buttonContent .buttonContainer[data-secondary='off']:disabled {
  border: 1px solid var(--dark-gray-color);
  background-color: var(--white-color);
  color: var(--dark-gray-color);
}

.buttonContent .buttonContainer[data-secondary='on'] {
  background-color: var(--primary-color-button);
  border: 1px solid var(--primary-color-button);
  color: var(--white-color);
}

.buttonContent .buttonContainer[data-secondary='on']:disabled {
  border: 1.5px solid var(--light-grey-color);
  background-color: var(--light-grey-color);
  color: var(--gray);
}

.buttonContent .buttonDisabled {
  background: transparent;
  width: 100%;
  height: 46px;
  border-radius: 12px;
  position: absolute;
}

@media screen and (min-width: 992px) {
  .buttonPosition {
    position: initial;
    width: auto;
    background-color: transparent;
    box-shadow: none;
    z-index: 0;
  }

  .buttonContent .buttonContainer {
    height: 46px;
  }
}

```