[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/useButton.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useSelector } from 'react-redux'

import {
  selectIsMobile,
  selectSettings,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'

const useButton = () => {
  const { isLiteVersion } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)

  return {
    isLiteVersion,
    isMobile,
  }
}

export default useButton

```


[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/ButtonContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import Button from './Button'
import useButton from './useButton'

interface Props {
  value: string
  onClick?: (e: any) => void
  onClickDisabled?: () => void
  disabled?: boolean
  customValue?: string
  secondary?: boolean
  type?: string
  id?: string
  units?: number
  isFixed?: boolean
  className?: string
  isPaymentButton?: boolean
}

const ButtonContainer = (props: Props) => {
  const button = useButton()

  return (
    <Fragment>
      <Button {...props} {...button} />
    </Fragment>
  )
}

export default ButtonContainer

```


[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.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { setShowingBuyButton } from '../../../contexts/global-context/reducers/uiSettingsSlice'
import useFormatMessage from '../../../i18n/useFormatMessage'
import global from '../../../myCheckout-styles.module.css'
import styles from './button.css'

interface Props {
  value: string
  onClick?: (e: any) => void
  onClickDisabled?: () => void
  disabled?: boolean
  customValue?: string
  secondary?: boolean
  type?: string
  id?: string
  units?: number
  isFixed?: boolean
  className?: string
  isPaymentButton?: boolean
}

const Button = ({
  value,
  onClick,
  onClickDisabled,
  disabled = false,
  customValue,
  secondary,
  type = 'button',
  id,
  units,
  isFixed = false,
  className = '',
  isPaymentButton = false,
}: Props) => {
  const dispatchGlobal = useDispatch()

  useEffect(() => {
    if (!isPaymentButton || !isFixed) return undefined
    dispatchGlobal(setShowingBuyButton(true))

    return () => {
      dispatchGlobal(setShowingBuyButton(false))
    }
  }, [])

  return (
    <div className={isFixed ? styles.buttonPosition : global.w100}>
      {
        <div className={styles.buttonContent}>
          <input
            className={`${styles.buttonContainer} ${className}`}
            onClick={onClick}
            type={type}
            value={`${useFormatMessage(value, {
              price: customValue,
            })}${units ? ` - ${units} Und` : ''}`}
            disabled={disabled}
            id={id}
            data-secondary={secondary ? 'on' : 'off'}
          />
          {disabled && onClickDisabled && (
            <button
              className={styles.buttonDisabled}
              value=""
              onClick={onClickDisabled}
            />
          )}
        </div>
      }
    </div>
  )
}

export default Button

```


[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/Loader/Loader.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { MycheckoutSymbolAnimation } from '../../Animations'
import useFormatMessage from '../../../i18n/useFormatMessage'
import globalStyles from '../../../myCheckout-styles.module.css'
import style from './loader.module.css'

interface Props {
  text?: string
}

const Loader = ({ text }: Props) => {
  return (
    <Fragment>
      <div className={style.placeholder} />
      <div className={style.loading}>
        <MycheckoutSymbolAnimation />
        {text && (
          <p className={`${style.message} ${globalStyles.textXl}`}>
            {useFormatMessage(text)}
          </p>
        )}
      </div>
    </Fragment>
  )
}

export default Loader

```


[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/Loader/loader.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}

.loading .message {
  margin-top: 1rem;
  font-family: 'Lato';
  font-weight: lighter;
  color: #011D1A;
  text-align: center;
  width: 50%;
  position: relative;
  top: -175px;
}

.placeholder {
  display: block;
  height: 150px;
}

@media screen and (min-width: 992px) {
  .placeholder {
    display: none;
  }
}

```


[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/HabeasData/index.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { HabeasData } from './HabeasData'
import { useHabeasData } from './useHabeasData'

const HabeasDataContainer = () => {
  const habeasData = useHabeasData()

  return <HabeasData {...habeasData} />
}

export default HabeasDataContainer

```


[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/HabeasData/useHabeasData.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { useActions } from '../../../contexts/ActionsProviderV2'
import {
  selectAcceptHabeasData,
  selectIsProfileComplete,
  setAcceptHabeasData,
  setHabeasData,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import { selectSettings } from '../../../contexts/global-context/reducers/uiSettingsSlice'
import { useUserDataDispatch } from '../../../contexts/UserDataProvider'
import type { HabeasDataInformation } from '../../../interfaces'

export const useHabeasData = () => {
  const habeasData = useSelector(selectAcceptHabeasData)
  const profileComplete = useSelector(selectIsProfileComplete)
  const { habeasDataInformation } = useSelector(selectSettings)
  const { storeTermsAndConditionsContent } = useActions()
  const dispatchUserData = useUserDataDispatch()
  const [storeTermsAndConditions, setStoreTermsAndConditions] = useState({})
  const dispatchGlobal = useDispatch()
  const [habeasDataConfiguration, setHabeasDataConfiguration] =
    useState<HabeasDataInformation>()

  useEffect(() => {
    if (habeasDataInformation) setHabeasDataConfiguration(habeasDataInformation)
  }, [habeasDataInformation])

  const onCheckboxChange = () => {
    dispatchGlobal(setAcceptHabeasData(!habeasData))
    if (!profileComplete) dispatchGlobal(setHabeasData(!habeasData))
  }

  const onStoreCheckboxChange = (id: string) => {
    setStoreTermsAndConditions((prevState: any) => ({
      ...prevState,
      [id]: {
        isSelected: !storeTermsAndConditions[id]?.isSelected,
      },
    }))
  }

  useEffect(() => {
    const storeTermsAndConditionsState = {}

    storeTermsAndConditionsContent?.forEach(
      (storeTermsAndConditionsContentItem) => {
        storeTermsAndConditionsState[storeTermsAndConditionsContentItem?.id] = {
          isSelected: false,
        }
      }
    )

    setStoreTermsAndConditions(storeTermsAndConditionsState)
  }, [])

  useEffect(() => {
    const storeTermsAndConditionsSelected = Object.keys(
      storeTermsAndConditions
    ).filter(
      (storeTermsAndCondition) =>
        storeTermsAndConditions[storeTermsAndCondition]?.isSelected === false
    )

    if (storeTermsAndConditionsSelected?.length) {
      dispatchUserData({
        type: 'SET_STORE_TERMS_AND_CONDITIONS',
        args: {
          storeTermsAndConditions: false,
        },
      })
    } else {
      dispatchUserData({
        type: 'SET_STORE_TERMS_AND_CONDITIONS',
        args: {
          storeTermsAndConditions: true,
        },
      })
    }
  }, [storeTermsAndConditions])

  return {
    habeasData,
    habeasDataConfiguration,
    storeTermsAndConditions,
    storeTermsAndConditionsContent,
    onCheckboxChange,
    onStoreCheckboxChange,
  }
}

```


[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/HabeasData/HabeasData.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

// import useFormatMessage from '../../../i18n/useFormatMessage'
import type {
  HabeasDataInformation,
  StoreTermsAndConditionsContent,
} from '../../../interfaces'
import Checkbox from '../Checkbox/Checkbox'
import styles from './habeasData.css'

interface Props {
  habeasData: boolean
  habeasDataConfiguration: HabeasDataInformation
  storeTermsAndConditions: unknown
  storeTermsAndConditionsContent: StoreTermsAndConditionsContent[]
  onCheckboxChange: (id?: string) => void
  onStoreCheckboxChange: (id: string) => void
}

export const HabeasData = ({
  // habeasData,
  // habeasDataConfiguration,
  storeTermsAndConditions,
  storeTermsAndConditionsContent,
  // onCheckboxChange,
  onStoreCheckboxChange,
}: Props) => {
  return (
    <Fragment>
      {/* <div className={styles.habeasDataContainer}>
        <div className={styles.habeasDataCheckbox}>
          <Checkbox
            isSelected={habeasData}
            onCheckboxChange={onCheckboxChange}
          />
        </div>
        <p>
          {useFormatMessage('store/checkoutless.register.habeasData', {
            terms: (
              <a
                className={styles.habeasDataLink}
                href={habeasDataConfiguration?.url}
                target="_blank"
              >
                {useFormatMessage(
                  'store/checkoutless.register.habeasData.terms'
                )}
              </a>
            ),
            privacy: (
              <a>
                {useFormatMessage(
                  'store/checkoutless.register.habeasData.privacy'
                )}
              </a>
            ),
          })}
        </p>
      </div> */}
      {storeTermsAndConditionsContent?.map((storeTermsAndCondition) => {
        return (
          <div
            key={storeTermsAndCondition?.id}
            className={styles.habeasDataContainer}
          >
            <div className={styles.habeasDataCheckbox}>
              <Checkbox
                id={storeTermsAndCondition?.id}
                isSelected={
                  storeTermsAndConditions[storeTermsAndCondition.id]?.isSelected
                }
                onCheckboxChange={onStoreCheckboxChange}
              />
            </div>
            <div
              dangerouslySetInnerHTML={{
                __html: storeTermsAndCondition?.content,
              }}
            ></div>
          </div>
        )
      })}
    </Fragment>
  )
}

```


[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/HabeasData/habeasData.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.habeasDataContainer {
  display: flex;
  margin: 12px 0px;
}

.habeasDataContainer .habeasDataCheckbox {
  flex: 0;
  position: relative;
}

.habeasDataContainer .habeasDataLink {
  color: var(--primary-color-focus);
  font-size: 12px;
}

.habeasDataContainer p {
  flex: 1;
  font-size: 12px;
  margin-left: 30px;
}

.habeasDataContainer a {
  font-size: 12px;
}

@media screen and (min-width: 992px) {
  .habeasDataContainer .habeasDataLink {
    font-size: 14px;
  }

  .habeasDataContainer p {
    font-size: 14px;
  }

  .habeasDataContainer a {
    font-size: 14px;
  }
}
```


[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/Select/select.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.blockedPlaceholder {
  position: absolute;
  width: 90%;
  height: 30px;
  z-index: 100;
  background: transparent;
  border: none;
}

```


[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/Select/SelectContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import Select from './Select'

interface Props {
  errorMessage?: string
  icon?: any
  isDisabled?: boolean
  isLoading?: boolean
  isValid?: boolean | null
  onBlur?: () => void
  onChange: (option: Option) => void
  onInputChange?: any
  options: Option[]
  placeholder: string
  setIsValid?: (state: boolean) => void
  value: Option
  disable?: boolean
  numOfItemsToShow?: number
}

interface Option {
  label: string
  value: string
}

const CustomSelect = (selectProps: Props) => {
  return (
    <Fragment>
      <Select {...selectProps} />
    </Fragment>
  )
}

export default CustomSelect

```


[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/Select/Select.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.selectPlaceholder {
  color: var(--dark-gray-color) !important;
}

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

```


[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/Select/Select.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useState } from 'react'
import Select, { components } from 'react-select'

import useFormatMessage from '../../../i18n/useFormatMessage'
import { BellIcon, Dropdown } from '../../Icons'
import globalStyles from '../../../myCheckout-styles.module.css'
import styles from './select.module.css'
import Alert from '../Alert/Alert'

interface Props {
  errorMessage?: string
  icon?: any
  isDisabled?: boolean
  isLoading?: boolean
  isValid?: boolean | null
  onBlur?: () => void
  onChange: (option: Option) => void
  onInputChange?: any
  options: Option[]
  placeholder: string
  setIsValid?: (state: boolean) => void
  value: Option
  disable?: boolean
  numOfItemsToShow?: number
}

interface State {
  isFocused: boolean
}
interface Option {
  label: string
  value: string
}

const CustomSelect = (selectProps: Props) => {
  const [alertNonEditable, setAlertNonEditable] = useState(false)
  const {
    errorMessage,
    icon,
    isDisabled = false,
    isLoading,
    isValid,
    onBlur,
    onChange,
    onInputChange,
    options = [],
    placeholder,
    setIsValid,
    value,
    disable,
    numOfItemsToShow = 2,
  } = selectProps

  const error = isValid !== null ? (value?.value ? false : !isValid) : false

  const borderColor = '#a1c10c'
  const selectedColor = '#434343'

  const customStyles = {
    control: (provided: any, state: State) => {
      let borderBottom = '1px solid #707685'

      if (state.isFocused) {
        borderBottom = '1px solid #707685'
      } else if (isValid) {
        borderBottom = `1px solid ${borderColor}`
      } else if (error) {
        borderBottom = `1px solid #d7263d`
      }

      return {
        ...provided,
        width: '100%',
        borderRadius: '0px',
        margin: '0px 0px',
        boxShadow: '0',
        border: '0px',
        borderBottom,
        minHeight: '20px',
        background: 'none',
        height: '23px',
        paddingLeft: '3px',
      }
    },
    singleValue: (provided: any) => {
      let fontWeight = '300'

      if (isValid) fontWeight = '400 !important'

      return {
        ...provided,
        fontWeight,
      }
    },
    valueContainer: (provided: any) => ({
      ...provided,
      padding: '0px',
      marginBottom: '0px',
      position: 'relative',
      top: '-3px',
    }),
    menu: (provided: any) => ({
      ...provided,
      top: 'auto',
      position: 'absolute',
      zIndex: '101',
      border: '1px solid #898F9E',
      margin: '0px',
    }),
    menuList: (provided: any) => ({
      ...provided,
      maxHeight: `${37.5 * numOfItemsToShow}px`,
      paddingBottom: '0px',
    }),
    indicatorSeparator: (provided: any) => ({
      ...provided,
      backgroundColor: '#FFF',
    }),
    option: (provided: any, state: any) => ({
      ...provided,
      borderBottom: '1px solid #919191',
      backgroundColor: state.isSelected ? '#E0E2E796' : '#FFF',
      color: state.isSelected
        ? `${selectedColor} !important`
        : '#616161 !important',
      textAlign: 'center',
    }),
    dropdownIndicator: (provided: any) => ({
      ...provided,
      padding: '0px',
    }),
  }

  const Control = ({ children, ...props }: any) => {
    return (
      <components.Control {...props}>
        <span>{icon || ''}</span>
        {children}
      </components.Control>
    )
  }

  const DropdownIndicator = (props: any) => {
    return (
      <components.DropdownIndicator {...props}>
        <Dropdown
          fill={
            disable ? globalStyles.iconDisable : globalStyles.iconAlternative
          }
        />
      </components.DropdownIndicator>
    )
  }

  useEffect(() => {
    if (value !== null && value?.value !== 'placeholder') {
      setIsValid(true)
    }
  }, [value])

  const noOptionsMessage = useFormatMessage(
    'store/checkoutless.register.noOptions'
  )

  const loadingMessage = useFormatMessage(
    'store/checkoutless.register.alt.loading'
  )

  const PlaceHolder = (
    <div className={styles.selectPlaceholder}>
      {placeholder && useFormatMessage(placeholder)}
    </div>
  )

  return (
    <div>
      {disable && (
        <button
          className={styles.blockedPlaceholder}
          onClick={() => {
            setAlertNonEditable(true)
            setTimeout(() => {
              setAlertNonEditable(false)
            }, 10000)
          }}
        ></button>
      )}
      <Select
        components={
          icon ? { Control, DropdownIndicator } : { DropdownIndicator }
        }
        styles={customStyles}
        value={value}
        onChange={onChange}
        options={options}
        isLoading={isLoading}
        placeholder={PlaceHolder}
        onInputChange={onInputChange}
        noOptionsMessage={() => noOptionsMessage}
        loadingMessage={() => loadingMessage}
        isDisabled={isDisabled}
        onBlur={onBlur}
      />
      {alertNonEditable && (
        <div className={globalStyles.floatAlert}>
          <Alert
            type="warning"
            text="store/checkoutless.summary.nonEditableDelivery"
            icon={<BellIcon />}
          />
        </div>
      )}
      {error && errorMessage && (
        <p className={styles.labelError}>{useFormatMessage(errorMessage)}</p>
      )}
    </div>
  )
}

export default CustomSelect

```


[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/interfaces/interfaces.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Props as CarouselProps } from '../Carousel/Carousel'
import type { Props as InfoItemContentProps } from '../InfoItem/InfoItemContent/InfoItemContent'
import type { Props as InfoItemEditProps } from '../InfoItem/InfoItemEdit/InfoItemEdit'
import type { Props as InfoItemIconProps } from '../InfoItem/InfoItemIcon/InfoItemIcon'
import type { Props as InfoItemProps } from '../InfoItem/InfoItem'
import type { Props as TitleItemProps } from '../Title/TitleItem/TitleItem'
import type { Props as TitleProps } from '../Title/Title'
import type { Props as CarouselItemProps } from '../Carousel/CarouselItems/CarouselItem'

export interface InfoItemContextProps {
  disabled?: boolean
}

export interface CarouselContextProps {
  data: unknown[]
}

export interface TitleHOCProps {
  (props: TitleProps): JSX.Element
  Item: (props: TitleItemProps) => JSX.Element
}

export interface InfoItemHOCProps {
  (props: InfoItemProps): JSX.Element
  Icon: (props: InfoItemIconProps) => JSX.Element
  Content: (props: InfoItemContentProps) => JSX.Element
  Edit: (props: InfoItemEditProps) => JSX.Element
}

export type Message = {
  type: 'success' | 'info'
  header?: string
  text?: string
}

export interface SharedContexProps {
  toastMessage: Message
  setToastMessage: React.Dispatch<React.SetStateAction<Message>>
}

export interface CarouselHOCProps {
  (props: CarouselProps): JSX.Element
  Item: (props: CarouselItemProps) => JSX.Element
}

```


[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/InfoItem/InfoItem.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import type { InfoItemContextProps } from '../interfaces/interfaces'
import styles from './infoItem.module.css'

export interface Props {
  children: ReactElement | ReactElement[]
  className?: string
  disabled?: boolean
  style?: CSSProperties
  firstAction?: () => void
}

export const InfoItemContext = createContext({} as InfoItemContextProps)
const { Provider } = InfoItemContext

export const InfoItem = ({
  children,
  className,
  disabled = false,
  style,
  firstAction,
}: Props) => {
  return (
    <Provider value={{ disabled }}>
      <div
        className={`${styles.infoItemContainer} ${className}`}
        style={style}
        onClick={() => {
          firstAction && firstAction()
        }}
      >
        {children}
      </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/InfoItem/infoItem.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.infoItemContainer {
  align-items: center;
  display: flex;
}

.infoItemContainer .infoItemIcon {
  align-items: center;
  display: flex;
  margin-right: 6px;
}

.infoItemContainer .infoItemContent {
  align-items: center;
  display: flex;
  flex: 1;
  font-weight: var(--text-light);
}

.infoItemContent [class*='couponContainer'] {
  padding: 0 0.5% 2.5% 0.5%;
}

.infoItemContent [class*='inputWithIcon'] {
  padding-left: 26px;
}

.infoItemContent [class*='inputIconContainer']:first-child {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
}

```


[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/InfoItem/index.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { InfoItem as InfoItemHOC } from './InfoItem'
import { InfoItemContent } from './InfoItemContent/InfoItemContent'
import { InfoItemIcon } from './InfoItemIcon/InfoItemIcon'
import type { InfoItemHOCProps } from '../interfaces/interfaces'
import { InfoItemEdit } from './InfoItemEdit/InfoItemEdit'

export const InfoItem: InfoItemHOCProps = Object.assign(InfoItemHOC, {
  Content: InfoItemContent,
  Edit: InfoItemEdit,
  Icon: InfoItemIcon,
})

export default InfoItem

```


[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/TitleItem/TitleItem.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import useFormatMessage from '../../../../i18n/useFormatMessage'
import styles from '../title.css'

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

export const TitleItem = ({
  children,
  className,
  isPrimary = true,
  style,
  title,
}: Props) => {
  return (
    <div className={`${styles.titleContent} ${className}`} style={style}>
      <div className={styles.titleIcon}>{children}</div>
      <div className={isPrimary ? styles.titlePrimary : styles.titleSecondary}>
        <span>{useFormatMessage(title)}</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/Input/Text/Text.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import useFormatMessage from '../../../../i18n/useFormatMessage'
import global from '../../../../myCheckout-styles.module.css'
import { CvcCard, Danger, LiteDelete } from '../../../Icons'
import styles from '../input.css'

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

export const Text = (props: Props) => {
  const {
    blurValidation,
    className = '',
    disabled,
    icon,
    info,
    isValid,
    keyUpValidation,
    maxLength,
    name,
    onChange,
    onPaste,
    onKeyDown,
    placeholder,
    reset,
    setInfo,
    type = 'text',
    value,
    showClearButton = false,
    floatLabel = true,
  } = props

  return (
    <Fragment>
      {icon && <div className={styles.inputIconContainer}>{icon}</div>}
      <input
        className={`${styles.input} ${
          isValid && !disabled && styles.inputValid
        } ${isValid === false && styles.inputInvalid} ${className} ${
          icon && styles.inputWithIcon
        }`}
        type={type}
        value={value}
        onChange={onChange}
        onKeyUp={keyUpValidation}
        onKeyDown={onKeyDown}
        onPaste={onPaste}
        onBlur={blurValidation}
        placeholder={useFormatMessage(placeholder)}
        autoComplete="off"
        id={name}
        disabled={disabled}
        maxLength={maxLength}
      />
      {floatLabel && (
        <label
          className={`${styles.labelPlaceholder} ${
            icon && styles.labelWithIcon
          }`}
        >
          {useFormatMessage(placeholder)}
        </label>
      )}
      {showClearButton && value?.length > 0 && disabled !== true && (
        <div
          className={`${styles.inputIconContainer} ${styles.inputDeleteIcon}`}
        >
          <a onClick={reset} className={global.cursorPointer}>
            <LiteDelete fill={global.iconAlternative} />
          </a>
        </div>
      )}
      {type === 'password' && value?.length < 1 && disabled !== true && (
        <div
          className={styles.inputIconContainer}
          onClick={() => setInfo(!info)}
        >
          <a onClick={reset} className={global.cursorPointer}>
            <Danger fill={'#FF9900'} />
          </a>
        </div>
      )}
      {type === 'password' && info && value?.length < 1 && (
        <div className={styles.inputIconContainer}>
          <p>{useFormatMessage('store/checkoutless.card.cvcInfo')}</p>
          <CvcCard />
        </div>
      )}
    </Fragment>
  )
}

```


[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/Select/Select.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import useFormatMessage from '../../../../i18n/useFormatMessage'
import styles from '../input.css'

interface Props {
  children?: any
  disabled?: boolean
  icon?: any
  isValid?: boolean | null
  name: string
  placeholder: string
  value: string
  blurValidation: () => void
  keyUpValidation: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  onChange?: (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
}

export default function Select(props: Props) {
  const {
    children,
    disabled,
    icon,
    isValid,
    name,
    placeholder,
    value,
    blurValidation,
    keyUpValidation,
    onChange,
  } = props

  return (
    <select
      className={`${styles.input} ${isValid && styles.inputValid} ${
        isValid === false && styles.inputInvalid
      } ${icon && styles.inputIcon}`}
      placeholder={useFormatMessage(placeholder)}
      value={value}
      onChange={onChange}
      onKeyUp={keyUpValidation}
      onBlur={blurValidation}
      id={name}
      name={name}
      disabled={disabled}
    >
      {children}
    </select>
  )
}

```


[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/CarouselItems/CarouselItem.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import styles from '../carousel.modules.css'

export interface Props {
  children?: ReactElement | ReactElement[]
}

export const CarouselItem = ({ children }: Props) => {
  return <div className={styles.carouselItem}>{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/InfoItem/InfoItemIcon/InfoItemIcon.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 '../infoItem.module.css'

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

export const InfoItemIcon = ({ children, className, style }: Props) => {
  return (
    <div className={`${styles.infoItemIcon} ${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/InfoItem/InfoItemContent/InfoItemContent.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import useFormatMessage from '../../../../i18n/useFormatMessage'
import styles from '../infoItem.module.css'

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

export const InfoItemContent = ({
  children,
  className,
  style,
  text,
  value,
}: Props) => {
  return (
    <div className={`${styles.infoItemContent} ${className}`} style={style}>
      {text ? useFormatMessage(text) : children}
      {value}
    </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/InfoItem/InfoItemEdit/InfoItemEdit.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { LiteEdit } from '../../../Icons'
import globalStyles from '../../../../myCheckout-styles.module.css'
import styles from '../infoItem.module.css'
import { InfoItemContext } from '../InfoItem'

export interface Props {
  className?: string
  style?: CSSProperties
  onClick: () => void
  icon?: JSX.Element
  disabledAction?: boolean
  alternativeAction?: () => void
}

export const InfoItemEdit = ({
  className,
  style,
  onClick,
  icon,
  disabledAction,
  alternativeAction,
}: Props) => {
  const { disabled } = useContext(InfoItemContext)

  const handleClick = () => {
    if (disabledAction) {
      if (alternativeAction) alternativeAction()

      return
    }

    if (!onClick) return
    onClick()
  }

  return disabled ? null : (
    <div
      onClick={handleClick}
      className={`${styles.infoItemContent} ${className}`}
      style={style}
    >
      {icon || (
        <LiteEdit
          fill={
            disabledAction
              ? globalStyles.iconDisable
              : globalStyles.iconAlternative
          }
        />
      )}
    </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/UserInfo/UnavailableMessage/useUnavailableMessage.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { useActions } from '../../../contexts/ActionsProviderV2'
import type { Item } from '../../../interfaces'
import { Events } from '../../../interfaces'
import { useEcommerce } from '../../../hooks/useEcommerce'
import { selectItems } from '../../../contexts/global-context/reducers/orderFormDataSlice'

const useUnavailableMessage = () => {
  const items = useSelector(selectItems)
  const [hasError, setHasError] = useState(false)
  const { updateItems } = useActions()
  const { handleEcommerce } = useEcommerce()

  const handleClick = () => {
    const itemsWithoutStock = items.filter(
      (item: Item) => item.availability !== 'available'
    )

    const itemsForDelete = itemsWithoutStock.map((item: Item) => ({
      index: item.index,
      uniqueId: item.uniqueId,
      quantity: 0,
    }))

    const itemsForStatistics = itemsWithoutStock.map((item: Item) => {
      const categories = Object.values(item.productCategories)

      return {
        sku: item.id,
        quantity: item.quantity,
        price: item.sellingPrice || item?.price,
        category: (categories?.[0] as string) || 'unnkown',
        subcategory: (categories?.[1] as string) || 'unnkown',
      }
    })

    updateItems(itemsForDelete)
    handleEcommerce(Events.remove, { products: itemsForStatistics })
  }

  useEffect(() => {
    const itemsAvailability = items.filter(
      (item: Item) => item.availability !== 'available'
    )

    if (itemsAvailability.length) {
      setHasError(true)
    } else {
      setHasError(false)
    }
  }, [items])

  return {
    hasError,
    handleClick,
  }
}

export default useUnavailableMessage

```


[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/UserInfo/UnavailableMessage/UnavailableMessageContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import UnavailableMessage from './UnavailableMessage'
import useUnavailableMessage from './useUnavailableMessage'

const UnavailableMessageContainer = () => {
  const unavailableMessage = useUnavailableMessage()

  return <UnavailableMessage {...unavailableMessage} />
}

export default UnavailableMessageContainer

```


[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/UserInfo/UnavailableMessage/UnavailableMessage.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { Alert } from '../../shared'

interface Props {
  hasError: boolean
  handleClick: () => void
}

const UnavailableMessage = ({ hasError, handleClick }: Props) => {
  return (
    <Fragment>
      {hasError && (
        <Alert
          type="error"
          text="store/checkoutless.userInfo.unavailableProducts"
          link="store/checkoutless.userInfo.unavailableLink"
          handleClick={handleClick}
        />
      )}
    </Fragment>
  )
}

export default UnavailableMessage

```


[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/UserInfo/DetailView/DetailView.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ChangeEvent, Dispatch } from 'react'
import React, { Fragment } from 'react'

import { Input } from '../../shared'
import { InputCVCSF } from '../InputCVC'
import { CreditCard, MyOrder, MyProfile } from '../../Icons'
import { SelectDues } from '../SelectDues'
import {
  setNextSection,
  setSameSection,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { useUserDataDispatch } from '../../../contexts/UserDataProvider'
import BuyButtonContainer from '../../BuyButton'
import InfoItem from '../../shared/InfoItem'
import LoadingProcessOrdeContainer from '../LoadingProcessOrder/LoadingProcessOrderContainer'
import UnavailableProductsContainer from '../../UnavailableProducts/UnavailableProductsContainer'
import type {
  ClientProfileData,
  InputValue,
  Installment,
  Item,
  ProductItem,
  SelectValue,
} from '../../../interfaces'
import globalStyles from '../../../myCheckout-styles.module.css'
import genericStyles from '../../../generic-styles.module.css'
import styles from './detailView.module.css'
import Coupon from '../../Coupon/CouponContainer'
import type { Payment } from '../../../interfaces/orderForm'

interface Props {
  canBuy: boolean
  clientProfileData: ClientProfileData
  cvcRequired: boolean
  cvv: InputValue
  dues: SelectValue
  forceDisabled: boolean
  installments: Installment[]
  isValidCVC: any
  items: Item[]
  loadingOrder: boolean
  loadPaymentForm: boolean
  selectedPaymentMethod: Payment
  selectedItem: ProductItem
  dispatchGlobal: Dispatch<any>
  handleSubmit: (handleClick?: () => void) => void
  onBlurCvv: () => void
  onChangeCvv: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void
}

export const DetailView = ({
  canBuy,
  cvcRequired,
  clientProfileData,
  cvv,
  dues,
  forceDisabled,
  installments,
  isValidCVC,
  items,
  loadingOrder,
  loadPaymentForm,
  selectedPaymentMethod,
  selectedItem,
  dispatchGlobal,
  handleSubmit,
  onBlurCvv,
  onChangeCvv,
}: Props) => {
  const dispatchUserData = useUserDataDispatch()

  return (
    <div className={`${styles.detailViewContainer}`}>
      {loadingOrder ? (
        <LoadingProcessOrdeContainer />
      ) : (
        <Fragment>
          {items?.length ? (
            <Fragment>
              <div
                className={`${styles.detailViewContent} ${globalStyles.marginBottom} ${globalStyles.borderBottom}`}
              >
                <InfoItem
                  firstAction={() => {
                    dispatchUserData({
                      type: 'SET_CLIENT_DATA',
                      args: {
                        clientProfileData: {
                          ...clientProfileData,
                          completed: true,
                        },
                      },
                    })
                    dispatchUserData({
                      type: 'SET_PROFILE_DETAIL',
                      args: true,
                    })
                    dispatchGlobal(setSameSection(''))
                  }}
                >
                  <InfoItem.Icon>
                    <MyProfile fill={globalStyles.iconAlternative} />
                  </InfoItem.Icon>
                  <InfoItem.Content text="store/checkoutless.summary.MyInfo" />
                </InfoItem>

                <InfoItem
                  firstAction={() => dispatchGlobal(setNextSection('summary'))}
                >
                  <InfoItem.Icon>
                    <MyOrder
                      fill={globalStyles.iconAlternative}
                      height={24}
                      width={24}
                    />
                  </InfoItem.Icon>
                  <InfoItem.Content text="store/checkoutless.summary.myOrder" />
                </InfoItem>

                {cvcRequired && selectedPaymentMethod?.paymentMethod === 'tc' && (
                  <InfoItem>
                    <InfoItem.Icon>
                      <CreditCard
                        fill={
                          isValidCVC
                            ? globalStyles.iconAlternative
                            : globalStyles.iconAlternativeSecondary
                        }
                        width={24}
                        height={24}
                      />
                    </InfoItem.Icon>
                    <InfoItem.Content>
                      <div id="cvv-container">
                        {selectedPaymentMethod?.paymentMethod === 'tc' && (
                          <div className={globalStyles.inDesktop}>
                            <SelectDues
                              dues={dues}
                              installments={installments}
                            />
                          </div>
                        )}
                        {selectedPaymentMethod?.paymentMethod === 'tc' &&
                          cvcRequired &&
                          loadPaymentForm && (
                            <Fragment>
                              {selectedPaymentMethod?.gateway ===
                              'paymentez' ? (
                                <Input
                                  type="tel"
                                  placeholder="store/checkoutless.card.cvv"
                                  errorMessage="store/checkoutless.card.invalidSecurityCodeError"
                                  {...cvv}
                                  name="cvc"
                                  maxLength={4}
                                  className={genericStyles.cvcInput}
                                  onChange={onChangeCvv}
                                  blurFunction={onBlurCvv}
                                  deleteBtn={false}
                                  showError={false}
                                />
                              ) : (
                                <InputCVCSF
                                  className={`${styles.secureFieldInput} ${
                                    isValidCVC !== null && !isValidCVC
                                      ? styles.secureFieldInvalidLite
                                      : null
                                  } ${
                                    isValidCVC ? styles.secureFieldValid : null
                                  }`}
                                  isValid={isValidCVC}
                                  itemId={selectedItem?.itemId || 'not-id'}
                                  showError={false}
                                />
                              )}
                            </Fragment>
                          )}
                      </div>
                    </InfoItem.Content>
                  </InfoItem>
                )}
              </div>
              <Coupon borderBottom />
              <BuyButtonContainer
                canBuy={canBuy}
                classNameContainer={globalStyles.w100}
                cvv={cvv.value}
                forceDisabled={forceDisabled}
                handleSubmit={handleSubmit}
                secondary={true}
              />
            </Fragment>
          ) : (
            <UnavailableProductsContainer />
          )}
        </Fragment>
      )}
    </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/UserInfo/DetailView/DetailViewContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { useDetailView } from './useDetailView'
import { DetailView } from './DetailView'

export const DetailViewContainer = () => {
  const viewMobileProps = useDetailView()

  return <DetailView {...viewMobileProps} />
}

```


[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/UserInfo/DetailView/detailView.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.detailViewContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detailViewContainer .detailViewContent {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px 10px;
  width: 100%;
}

.detailViewContainer .secureFieldInput {
  border-bottom: 1px solid var(--primary-color-focus);
  border-radius: 0;
  cursor: text;
  display: inline-block;
  height: 23px;
  line-height: 1.3;
  padding: 0;
  width: 38px;
}

.detailViewContainer .secureFieldValid {
  border-bottom: 1px solid var(--success-color);
}

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

@media screen and (min-width: 992px) {
  .detailViewContainer {
    display: none;
  }
}

```


[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/UserInfo/DetailView/useDetailView.ts from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { selectItemData } from '../../../contexts/global-context/reducers/cartSlice'
import {
  selectLoadingOrder,
  selectSection,
  setNextSection,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import {
  selectItems,
  selectMainPayment,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import { selectTotalValue } from '../../../contexts/global-context/reducers/simulationSlice'
import { selectSettings } from '../../../contexts/global-context/reducers/uiSettingsSlice'
import {
  useUserData,
  useUserDataDispatch,
} from '../../../contexts/UserDataProvider'
import { useCustomerCredit } from '../../../hooks/useCustomerCredit'
import { useInitSecureFields } from '../../../hooks/useInitSecureFields'
import { useInputValue } from '../../../hooks/useInputValue'
import { useSelectValue } from '../../../hooks/useSelectValue'
import type { Installment, Item, SelectValue } from '../../../interfaces'
import { clearNumber, selectIdImgCard } from '../../../utils/payments'
import { useBuyButton } from '../useBuyButton'

export const useDetailView = () => {
  const gateway = localStorage.getItem('gateway')
  const [dataLoad, setDataLoad] = useState(false)

  const dues: SelectValue = useSelectValue(null)
  const cvv = useInputValue('')

  const { clientProfileData, paymentData, totalizers } = useUserData()
  const value = useSelector(selectTotalValue)
  const section = useSelector(selectSection)
  const selectedPaymentMethod = useSelector(selectMainPayment)

  const { onSimulationCredit } = useCustomerCredit()
  const { handleSubmit, canBuy, forceDisabled, isValidCVC, setIsValidCVC } =
    useBuyButton(dues, dataLoad)

  const { selectedItem } = useSelector(selectItemData)
  const { cvcRequired } = useSelector(selectSettings)
  const loadingOrder = useSelector(selectLoadingOrder)
  const items = useSelector(selectItems)

  const dataFranchise = selectIdImgCard(selectedPaymentMethod?.franchise)

  const installments: Installment[] =
    paymentData?.installmentOptions?.find(
      (x) => x?.paymentName?.toLowerCase() === dataFranchise?.nameComplete
    )?.installments || []

  const onChangeCvv = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    e.target.value = clearNumber(e.target.value)
    if (e.target.value.length >= 3) {
      cvv.setIsValid(true)
      setIsValidCVC(true)
    }

    cvv.onChange(e)
  }

  const onBlurCvv = () => {
    const isValid = cvv.value.length >= 3

    cvv.setIsValid(isValid)
    setIsValidCVC(isValid)
  }

  const dispatchGlobal = useDispatch()
  const dispatchUserData = useUserDataDispatch()

  const { loadPaymentForm } = useInitSecureFields(
    gateway,
    selectedPaymentMethod?.paymentMethod,
    cvcRequired
  )

  useEffect(() => {
    const dueCount =
      installments.length > 0 ? installments[0].count.toString() : ''

    const defaultDue = dueCount
      ? {
          label: dueCount,
          value: dueCount,
        }
      : null

    dues.setValue(defaultDue)
  }, [installments])

  useEffect(() => {
    if (selectedPaymentMethod?.paymentMethod === 'BNPL' && totalizers?.length) {
      const shipping = !!totalizers.find((e) => e.id === 'Shipping')

      shipping && onSimulationCredit()
    }
  }, [selectedPaymentMethod, value, totalizers])

  useEffect(() => {
    if (items?.length) setDataLoad(true)

    const itemsWithoutStock = items.filter(
      (item: Item) => item.availability !== 'available'
    )

    if (itemsWithoutStock.length && section !== 'summary') {
      dispatchGlobal(setNextSection('summary'))
    }
  }, [items])

  useEffect(() => {
    dispatchUserData({
      type: 'SET_LITEVIEW_HEADER',
      args: false,
    })
  }, [])

  return {
    canBuy,
    clientProfileData,
    cvcRequired,
    cvv,
    dues,
    forceDisabled,
    installments,
    isValidCVC,
    items,
    loadingOrder,
    loadPaymentForm,
    selectedPaymentMethod,
    selectedItem,
    dispatchGlobal,
    handleSubmit,
    onBlurCvv,
    onChangeCvv,
  }
}

```


[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/UserInfo/LoadingProcessOrder/LoadingProcessOrderForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import useFormatMessage from '../../../i18n/useFormatMessage'
import { formatter } from '../../../utils'
import { LocationIcon, Shipping, Store } from '../../Icons'
import type { ChangeLogistics, PackageSummary } from '../../../interfaces'
import global from '../../../myCheckout-styles.module.css'
import styles from './loadingProcessOrder.module.css'
import type { AddressMC } from '../../../interfaces/orderForm'

interface Props {
  summaryChangeLogistics: ChangeLogistics[]
  packagesSummary: PackageSummary[]
  selectedAddress: AddressMC
  total: number
}

const LoadingProcessOrder = ({
  summaryChangeLogistics,
  packagesSummary,
  selectedAddress,
  total,
}: Props) => {
  return (
    <div className={styles.loadingOrderContainer}>
      <div className={styles.loadingOrderContent}>
        <div className={styles.imageOrderContainer}>
          <span className={styles.imageOrder}></span>
        </div>
        <h2>{useFormatMessage('store/checkoutless.register.pay.loading')}</h2>

        <hr />

        {packagesSummary?.map((logistic, index) => {
          const { deliveryType, selectedSla, storeInfo } = logistic
          const changeDelivery = summaryChangeLogistics?.[index]

          return (
            <div className={styles.wrapperInfoOrder}>
              <div>
                <p className={global.semiBold}>
                  {useFormatMessage(
                    'store/checkoutless.logistics.endingOrderPackages',
                    {
                      package: index + 1,
                      length: packagesSummary.length,
                    }
                  )}
                </p>

                <p className={`${global.enphasis} ${global.semiBold}`}>
                  {deliveryType === 'delivery'
                    ? useFormatMessage(
                        'store/checkoutless.logistics.homeDelivery'
                      )
                    : useFormatMessage(
                        'store/checkoutless.logistics.pickUpInStore'
                      )}
                </p>
              </div>
              {deliveryType === 'delivery' && (
                <Fragment>
                  <div className={styles.containerInfoOrder}>
                    <LocationIcon fill={global.iconPrimary} />
                    <p>
                      {`${selectedAddress?.street} ${selectedAddress?.city} - ${selectedAddress?.state}`}
                    </p>
                  </div>
                  <div className={styles.containerInfoOrder}>
                    <Shipping
                      fill={global.iconAlternativeStrokeSecondary}
                      strokeWidth={1.5}
                    />
                    <p>
                      {useFormatMessage(
                        'store/checkoutless.register.pay.delivery'
                      )}
                      {changeDelivery?.scheduleDelivery?.day &&
                      changeDelivery?.scheduleDelivery?.timeRange ? (
                        <Fragment>
                          <br />
                          {changeDelivery?.scheduleDelivery?.day} |{' '}
                          {changeDelivery?.scheduleDelivery?.timeRange}
                        </Fragment>
                      ) : (
                        selectedSla
                      )}
                    </p>
                  </div>
                </Fragment>
              )}

              {deliveryType === 'pickup-in-point' && (
                <Fragment>
                  <div className={styles.containerInfoOrder}>
                    <Store fill={global.strokeCheckicon} />
                    <p>
                      {useFormatMessage(
                        'store/checkoutless.register.pay.pickup-point'
                      )}{' '}
                      {storeInfo}
                    </p>
                  </div>
                </Fragment>
              )}
            </div>
          )
        })}

        <div className={styles.totals}>
          <p className={global.bold}>
            {useFormatMessage('store/checkoutless.register.pay.total')}{' '}
            {formatter.format(total)}
          </p>
        </div>
      </div>
    </div>
  )
}

export default LoadingProcessOrder

```


[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/UserInfo/LoadingProcessOrder/LoadingProcessOrderContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import LoadingProcessOrderForm from './LoadingProcessOrderForm'
import LiteLoadingProcessOrder from './LiteLoadingProcessOrderForm'
import useLoadingProcessOrder from './useLoadingProcessOrder'

const LoadingProcessOrdeContainer = () => {
  const loadingProcessOrderForm = useLoadingProcessOrder()

  return loadingProcessOrderForm.isMobile &&
    loadingProcessOrderForm.isLiteVersion ? (
    <LiteLoadingProcessOrder {...loadingProcessOrderForm} />
  ) : (
    <LoadingProcessOrderForm {...loadingProcessOrderForm} />
  )
}

export default LoadingProcessOrdeContainer

```


[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/UserInfo/LoadingProcessOrder/useLoadingProcessOrder.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useIntl } from 'react-intl'
import { useSelector } from 'react-redux'

import { useUserData } from '../../../contexts/UserDataProvider'
import { processInfoPackages } from '../../../utils/packages'
import {
  selectIsMobile,
  selectSettings,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'
import {
  selectDeliveryAddress,
  selectLogisticsInfo,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import { selectTotalValue } from '../../../contexts/global-context/reducers/simulationSlice'

const useLoadingProcessOrder = () => {
  const { slas } = useUserData()
  const total = useSelector(selectTotalValue)
  const intl = useIntl()
  const { isLiteVersion } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)
  const logisticsInfo = useSelector(selectLogisticsInfo)
  const selectedAddress = useSelector(selectDeliveryAddress)

  const { summaryChangeLogistics, packagesSummary } = processInfoPackages({
    logisticsInfo,
    intl,
    slas,
  })

  const { deliveryType } = packagesSummary?.[0]

  const changeDelivery = summaryChangeLogistics?.[0]

  const logisticInfo = logisticsInfo?.find(
    (logisticInfoItem) =>
      logisticInfoItem?.selectedDeliveryChannel === 'pickup-in-point'
  )

  return {
    changeDelivery,
    deliveryType,
    isLiteVersion,
    isMobile,
    logisticsInfo,
    packagesSummary,
    selectedAddress,
    slas,
    storeInfo: logisticInfo?.storeName || '',
    summaryChangeLogistics,
    total,
  }
}

export default useLoadingProcessOrder

```


[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/UserInfo/LoadingProcessOrder/LiteLoadingProcessOrderForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Pickup, Shipping } from '../../Icons'
import type { ChangeLogistics } from '../../../interfaces'
import useFormatMessage from '../../../i18n/useFormatMessage'
import global from '../../../myCheckout-styles.module.css'
import styles from './loadingProcessOrder.module.css'
import type { AddressMC } from '../../../interfaces/orderForm'

interface Props {
  changeDelivery: ChangeLogistics
  deliveryType: string
  selectedAddress: AddressMC
  storeInfo: string
}

const LiteLoadingProcessOrder = ({
  changeDelivery,
  deliveryType,
  selectedAddress,
  storeInfo,
}: Props) => {
  return (
    <div className={styles.summaryLoadingProcessOrder}>
      <div className={styles.summaryContainerLite}>
        {deliveryType === 'delivery' ? (
          <Shipping fill={global.iconAlternativeStrokeSecondary} />
        ) : (
          <Pickup fill={global.iconAlternativeSecondary} />
        )}
        <div>
          {deliveryType === 'delivery' ? (
            <p>
              {useFormatMessage('store/checkoutless.summary.shipping')}
              {' - '}
              {selectedAddress?.street}
            </p>
          ) : (
            <p>
              {useFormatMessage('store/checkoutless.logistics.pickUpInStore')}{' '}
              {storeInfo}
            </p>
          )}
          {changeDelivery?.scheduleDelivery?.day &&
            changeDelivery?.scheduleDelivery?.timeRange && (
              <p>
                {changeDelivery?.scheduleDelivery?.day} |{' '}
                {changeDelivery?.scheduleDelivery?.timeRange}
              </p>
            )}
        </div>
      </div>
      <div className={styles.contenedor}>
        <div className={styles.barra}>
          <div className={styles.texto}>
            {useFormatMessage('store/checkoutless.register.processingPayment')}
          </div>
        </div>
      </div>
    </div>
  )
}

export default LiteLoadingProcessOrder

```


[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/UserInfo/LoadingProcessOrder/loadingProcessOrder.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.summaryLoadingProcessOrder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.summaryContainer {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 25px 0px 15px 0px;
}

.summaryLoadingProcessOrder .summaryContainerLite {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 25px 0px 15px 0px;
}

.summaryContainerLite p {
  font-size: 14px !important;
  margin-left: 8px;
}

.summaryContainer p {
  margin-left: 8px;
}

.summaryLoadingProcessOrder .contenedor {
  background-color: var(--primary-color-button);
  border-radius: 12px;
  border: 1px solid var(--primary-color-button);
  height: 40px;
  margin-bottom: 5px;
  position: relative;
  width: 300px;
}

.summaryLoadingProcessOrder .barra {
  -webkit-animation: progressBar 5s linear infinite;
  animation: progressBar 5s linear infinite;
  background: var(--hover-button-color);
  border-radius: 12px;
  height: 100%;
  width: 0;
}

.summaryLoadingProcessOrder .texto {
  align-items: center;
  color: var(--white-color);
  display: flex;
  font-weight: var(--text-regular);
  inset: 0;
  justify-content: center;
  position: absolute;
  width: 100%;
}

@-webkit-keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.loadingOrderContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
  height: 100%;
}

.loadingOrderContent {
  text-align: center;
  height: auto;
}

.loadingOrderContent p {
  padding: 6px 0;
}

.loadingOrderContent hr {
  border: 0 none;
  height: 2px;
}

.loadingOrderContent .totals {
  padding: 12px 0px;
}

.imageOrderContainer {
  position: relative;
  display: flex;
  justify-content: center;
  height: 130px;
  padding-top: 5px;
}

.imageOrder {
  margin-left: -75px;
}

.imageOrder::before {
  content: '';
  background: url('https://kuikpay.vteximg.com.br/arquivos/ids/155411');
  background-size: 105px 105px;
  background-repeat: no-repeat;
  height: 120px;
  width: 120px;
  position: absolute;
}

.wrapperInfoOrder {
  margin-top: 12px;
  border: 1px solid #e0e2e7;
  border-radius: 6px;
  text-align: left;
  padding: 10px 17px 10px 24px;
}

.wrapperInfoOrder div,
.wrapperInfoOrder .containerInfoOrder {
  display: flex;
}

.wrapperInfoOrder .containerInfoOrder {
  align-items: center;
}

.wrapperInfoOrder p {
  margin-left: 7px;
}

```


[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/UserInfo/InformationView/useInformationView.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-loop-func */
import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { selectItemData } from '../../../contexts/global-context/reducers/cartSlice'
import {
  selectLoadingOrder,
  setUserRegistrationSections,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import {
  selectDeliveryAddress,
  selectHasAddress,
  selectItems,
  selectLogisticsInfo,
  selectMainPayment,
  selectPickUpPointAddress,
  selectProfile,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import {
  selectAvailablePaymentMethods,
  selectTotalValue,
} from '../../../contexts/global-context/reducers/simulationSlice'
import {
  selectSettings,
  setVersion,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'
import {
  useUserData,
  useUserDataDispatch,
} from '../../../contexts/UserDataProvider'
import { useCustomerCredit } from '../../../hooks/useCustomerCredit'
import { useInitSecureFields } from '../../../hooks/useInitSecureFields'
import { useInputValue } from '../../../hooks/useInputValue'
import { useSelectValue } from '../../../hooks/useSelectValue'
import type { SelectValue } from '../../../interfaces'
import { arrayEquals } from '../../../utils'
import { clearNumber, selectIdImgCard } from '../../../utils/payments'
import type { Message } from '../../shared/interfaces/interfaces'
import { useBuyButton } from '../useBuyButton'

const messages = {
  dividePackages: 'store/checkoutless.summary.dividedPackage',
  productsNotAvailable: 'store/checkoutless.summary.productsNotAvailable',
}

export const useInformationView = () => {
  const { totalizers, slas } = useUserData()
  const value = useSelector(selectTotalValue)
  const dues: SelectValue = useSelectValue(null)
  const cvv = useInputValue('')
  const [dataLoad, setDataLoad] = useState(false)
  const [showToast, setShowToast] = useState(false)
  const [toastMessage, setToastMessage] = useState<Message>()
  const [isOpenAlertCvv, setIsOpenAlertCvv] = useState<boolean>(false)
  const toastWasShown = useRef(true)

  const gateway = localStorage.getItem('gateway')

  const { onSimulationCredit } = useCustomerCredit()
  const logisticsInfo = useSelector(selectLogisticsInfo)
  const { selectedItem } = useSelector(selectItemData)
  const itemsOrderForm = useSelector(selectItems)
  const addressAlternative = useSelector(selectPickUpPointAddress)

  // new Context
  const hasAddress = useSelector(selectHasAddress)
  const profile = useSelector(selectProfile)
  const selectedAddress = useSelector(selectDeliveryAddress)
  const selectedPayment = useSelector(selectMainPayment)

  const dispatchGlobal = useDispatch()
  const dispatchUserData = useUserDataDispatch()
  const { cvcRequired } = useSelector(selectSettings)
  const loadingOrder = useSelector(selectLoadingOrder)
  const paymentMethods = useSelector(selectAvailablePaymentMethods)

  const dataFranchise = selectIdImgCard(selectedPayment?.franchise)

  const {
    canBuy,
    forceDisabled,
    isValidCVC,
    paymentMessage,
    successAddressAlter,
    handleSubmit,
    setIsValidCVC,
  } = useBuyButton(dues, dataLoad)

  // TODO: Revisar como seleccionar el Payment System del comercio
  const installments =
    paymentMethods?.find(
      (payment) => payment?.name?.toLowerCase() === dataFranchise?.nameComplete
    )?.installmentsOptions || []

  const { loadPaymentForm } = useInitSecureFields(
    gateway,
    selectedPayment?.paymentMethod,
    cvcRequired
  )

  const validateShowAddress =
    !hasAddress ||
    !logisticsInfo ||
    (logisticsInfo?.length < 1 && !!selectedAddress) ||
    (logisticsInfo?.length > 0 &&
      logisticsInfo[0].selectedDeliveryChannel !== 'pickup-in-point') ||
    (logisticsInfo?.length > 0 &&
      logisticsInfo[0].selectedDeliveryChannel === 'pickup-in-point' &&
      !!selectedAddress &&
      logisticsInfo?.some(
        (item) => item.selectedDeliveryChannel === 'delivery'
      )) ||
    (logisticsInfo?.length === 0 && !selectedAddress && !!profile)

  const groupPackagesByItems = (packages: any[]) => {
    const groupPackages = {}
    let index = 0

    while (packages.length > 0) {
      groupPackages[index] = [packages.shift()]
      const filterItem = packages.filter((pack) =>
        arrayEquals(groupPackages[index][0].itemIndex, pack.itemIndex)
      )

      groupPackages[index] = groupPackages[index].concat(filterItem)
      packages = packages.filter(
        (pack) =>
          !arrayEquals(groupPackages[index][0].itemIndex, pack.itemIndex)
      )
      index++
    }

    return groupPackages
  }

  const validateWarningAddress =
    addressAlternative?.addressDeliveryType !== 'delivery' &&
    !!(!selectedAddress || Object.keys(selectedAddress).length === 0) &&
    logisticsInfo?.length > 0 &&
    logisticsInfo?.find((item) => item.selectedDeliveryChannel === 'delivery')

  const existProductsNotAvailable =
    itemsOrderForm.filter((item) => item.availability !== 'available').length >
    0

  useEffect(() => {
    const packages = groupPackagesByItems(
      slas.delivery.concat(slas['pickup-in-point'])
    )

    const packageKeys = Object.keys(packages)

    const existMultiplePackages = packageKeys?.length > 1
    const showToastDividedPackage = localStorage.getItem(
      'show_toast_divided_package'
    )

    const shouldShowToast = showToastDividedPackage !== 'true'

    if (!shouldShowToast && packageKeys.length < 2) {
      localStorage.removeItem('show_toast_divided_package')
      setShowToast(false)
      setToastMessage(null)

      return
    }

    if (
      !existMultiplePackages ||
      !toastWasShown.current ||
      !shouldShowToast ||
      itemsOrderForm.length === 0
    ) {
      return
    }

    toastWasShown.current = false
    setShowToast(true)
    setToastMessage({
      type: 'info',
      header: messages.dividePackages,
      text: existProductsNotAvailable
        ? messages.productsNotAvailable
        : undefined,
    })
    localStorage.setItem('show_toast_divided_package', 'true')
  }, [slas.delivery, slas['pickup-in-point']])

  useEffect(() => {
    if (
      !existProductsNotAvailable ||
      !toastMessage?.header ||
      toastMessage?.text ||
      !showToast
    ) {
      return
    }

    setToastMessage({
      ...toastMessage,
      text: messages.productsNotAvailable,
    })
  }, [toastMessage, itemsOrderForm, existProductsNotAvailable])

  useEffect(() => {
    const dueCount =
      installments.length > 0 ? installments[0].count.toString() : ''

    const defaultDue = dueCount
      ? {
          label: dueCount,
          value: dueCount,
        }
      : null

    dues.setValue(defaultDue)
  }, [installments])

  const onChangeCvv = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    e.target.value = clearNumber(e.target.value)
    if (e.target.value.length >= 3) {
      cvv.setIsValid(true)
      setIsValidCVC(true)
    }

    setIsOpenAlertCvv(false)
    cvv.onChange(e)
  }

  const onBlurCvv = () => {
    const isValid = cvv.value.length >= 3

    setIsOpenAlertCvv(false)

    cvv.setIsValid(isValid)
    setIsValidCVC(isValid)
  }

  const onCloseToast = () => {
    setShowToast(false)
    setToastMessage(null)
  }

  const onRenderCvvContainer = () => setDataLoad(true)

  useEffect(() => {
    if (selectedPayment?.paymentMethod === 'BNPL' && totalizers.length) {
      const shipping = !!totalizers.find((e) => e.id === 'Shipping')

      shipping && onSimulationCredit()
    }
  }, [selectedPayment, value, totalizers])

  useEffect(() => {
    dispatchUserData({
      type: 'SET_LITEVIEW_HEADER',
      args: true,
    })
    // Restores the registration steps
    dispatchGlobal(setUserRegistrationSections(1))

    return () => {
      dispatchGlobal(setVersion(true))
    }
  }, [])

  const handleOpenAlertCvv = (_cvv: boolean) => {
    selectedPayment?.paymentMethod === 'tc' && !_cvv && setIsOpenAlertCvv(true)
  }

  const handleCloseAlertCvv = () => {
    setIsOpenAlertCvv(false)
  }

  return {
    canBuy,
    cvcRequired,
    cvv,
    dues,
    forceDisabled,
    gateway,
    installments,
    isOpenAlertCvv,
    isValidCVC,
    items: itemsOrderForm,
    loadingOrder,
    loadPaymentForm,
    paymentData: selectedPayment,
    paymentMessage,
    profile,
    selectedAddress,
    selectedItem,
    showToast,
    successAddressAlter,
    toastMessage,
    validateShowAddress,
    validateWarningAddress,
    dispatchGlobal,
    handleCloseAlertCvv,
    handleOpenAlertCvv,
    handleSubmit,
    onBlurCvv,
    onChangeCvv,
    onCloseToast,
    onRenderCvvContainer,
  }
}

```


[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/UserInfo/InformationView/InformationViewContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { InformationView } from './InformationView'
import { useInformationView } from './useInformationView'

export const InformationViewContainer = () => {
  const informationViewProps = useInformationView()

  return <InformationView {...informationViewProps} />
}

```


[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/UserInfo/InformationView/informationView.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.informationViewTitleMobile {
  display: flex !important;
}

.informationViewContent {
  margin-top: 14px;
}

.informationViewContent .informationViewEdit {
  flex: 0;
  justify-content: end;
}

.informationViewContent .informationViewPaymentContent {
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

.informationViewContent .secureFieldInput {
  border-bottom: 1px solid var(--primary-color-focus);
  border-radius: 0;
  cursor: text;
  display: inline-block;
  height: 23px;
  line-height: 1.3;
  padding: 0;
  width: 38px;
}

.informationViewContent .secureFieldValid {
  border-bottom: 1px solid var(--success-color);
}

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

.informationViewContent .duesContainer {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.informationViewContent .duesContainer .duesLabel {
  font-size: 12px;
  text-align: left;
  width: 66px;
  margin-right: 10px;
}

.informationViewContent .duesContainer .duesSelect {
  width: 50px;
  min-width: auto;
}

.informationViewContent .incompleteStep {
  text-decoration: underline;
  font-weight: var(--text-bold);
}

.customIconMargin {
  margin: 0 !important;
}

.iconContainer {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 992px) {
  .informationViewTitleMobile {
    display: none !important;
  }

  .informationViewContent .duesContainer .duesLabel {
    font-size: 14px;
    width: 66px;
  }

  .informationViewBuyButton {
    bottom: 0;
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 6%);
    padding: 40px 25px;
    position: fixed;
    width: 30%;
  }
}

```


[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/UserInfo/InformationView/InformationView.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ChangeEvent, Dispatch } from 'react'
import React, { useState, Fragment } from 'react'

import {
  BellIcon,
  CreditCard,
  LiteLocation,
  MyData,
  MyOrder,
  MyProfile,
} from '../../Icons'
import type {
  Address,
  InputValue,
  Installment,
  Item,
  LogisticsInfo,
  ProductItem,
  SelectValue,
} from '../../../interfaces'
import { Alert, Input, Toast } from '../../shared'
import { InputCVCSF } from '../InputCVC'
import { SelectDues } from '../SelectDues'
import { setNextSection } from '../../../contexts/global-context/reducers/checkoutFormSlice'
import BuyButtonContainer from '../../BuyButton'
import InfoItem from '../../shared/InfoItem'
import LoadingProcessOrdeContainer from '../LoadingProcessOrder/LoadingProcessOrderContainer'
import LogisticsSummaryContainer from '../../LogisticsInfo/LogisticsSummary/LogisticsSummaryContainer'
import Summary from '../../Summary'
import Title from '../../shared/Title'
import UnavailableProductsContainer from '../../UnavailableProducts/UnavailableProductsContainer'
import useFormatMessage from '../../../i18n/useFormatMessage'
import globalStyles from '../../../myCheckout-styles.module.css'
import styles from './informationView.module.css'
import Coupon from '../../Coupon/CouponContainer'
import genericStyles from '../../../generic-styles.module.css'
import useLogisticBlock from '../../../hooks/useLogisticBlock'
import type { Message } from '../../shared/interfaces/interfaces'
import type {
  AddressMC,
  Payment,
  ProfileMC,
} from '../../../interfaces/orderForm'
import { ArrowRight } from '../../Icons/ArrowRight'

interface Props {
  canBuy: boolean
  cvcRequired: boolean
  cvv: InputValue
  dues: SelectValue
  forceDisabled: boolean
  gateway: string
  installments: Installment[]
  isOpenAlertCvv: boolean
  isValidCVC: any
  items: Item[]
  loadingOrder: boolean
  loadPaymentForm: boolean
  paymentData: Payment
  paymentMessage: any
  profile: ProfileMC
  selectedAddress: AddressMC
  selectedItem: ProductItem
  showToast: boolean
  successAddressAlter: boolean
  toastMessage: Message
  validateShowAddress: boolean | Address
  validateWarningAddress: LogisticsInfo
  dispatchGlobal: Dispatch<any>
  handleCloseAlertCvv: () => void
  handleOpenAlertCvv: (cvv: boolean) => void
  handleSubmit: (handleClick?: () => void) => void
  onBlurCvv: () => void
  onChangeCvv: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void
  onCloseToast: () => void
  onRenderCvvContainer: () => void
}

export const InformationView = ({
  canBuy,
  cvcRequired,
  cvv,
  dues,
  forceDisabled,
  gateway,
  installments,
  isOpenAlertCvv,
  isValidCVC,
  items,
  loadingOrder,
  loadPaymentForm,
  paymentData,
  paymentMessage,
  profile,
  selectedAddress,
  selectedItem,
  showToast,
  successAddressAlter,
  toastMessage,
  validateShowAddress,
  validateWarningAddress,
  dispatchGlobal,
  handleCloseAlertCvv,
  handleOpenAlertCvv,
  handleSubmit,
  onBlurCvv,
  onChangeCvv,
  onCloseToast,
  onRenderCvvContainer,
}: Props) => {
  const [alertEditableDelivery, setAlertEditableDelivery] = useState(false)

  const { logisticsBlocked } = useLogisticBlock()

  const hanldeAlertEditableDelivery = () => {
    setAlertEditableDelivery(true)
  }

  return (
    <Fragment>
      {loadingOrder && <LoadingProcessOrdeContainer />}
      {items?.length ? (
        <Fragment>
          {!loadingOrder && (
            <Fragment>
              {showToast && (
                <Toast toastMessage={toastMessage} onClose={onCloseToast} />
              )}

              <Title>
                <Title.Item title="store/checkoutless.summary.MyInfo">
                  <MyData
                    fill={globalStyles.iconAlternativeSecondary}
                    height={24}
                    width={24}
                  />
                </Title.Item>

                <InfoItem
                  className={styles.informationViewTitleMobile}
                  firstAction={() => dispatchGlobal(setNextSection('summary'))}
                >
                  <InfoItem.Icon className={styles.customIconMargin}>
                    <MyOrder
                      fill={globalStyles.iconAlternative}
                      height={24}
                      width={24}
                    />
                  </InfoItem.Icon>
                  <InfoItem.Content text="store/checkoutless.summary.myOrder" />
                </InfoItem>
              </Title>

              <InfoItem className={styles.informationViewContent}>
                <InfoItem.Icon className={styles.iconContainer}>
                  <MyProfile
                    fill={globalStyles.iconAlternative}
                    width={24}
                    height={24}
                  />
                </InfoItem.Icon>
                <InfoItem.Content value={profile.email} />
                <InfoItem.Edit
                  className={`${styles.informationViewEdit} ${globalStyles.cursorPointer}`}
                  onClick={() => {
                    dispatchGlobal(setNextSection('clientProfileData'))
                  }}
                />
              </InfoItem>

              {validateShowAddress && (
                <InfoItem className={styles.informationViewContent}>
                  <InfoItem.Icon className={styles.iconContainer}>
                    <LiteLocation
                      fill={globalStyles.iconAlternative}
                      width={24}
                      height={24}
                    />
                  </InfoItem.Icon>
                  {selectedAddress ? (
                    <Fragment>
                      <InfoItem.Content
                        value={`${selectedAddress?.street} ${selectedAddress?.city} - ${selectedAddress?.state}`}
                      />
                      <InfoItem.Edit
                        className={`${styles.informationViewEdit} ${globalStyles.cursorPointer}`}
                        onClick={() => {
                          dispatchGlobal(setNextSection('shippingData'))
                        }}
                        disabledAction={logisticsBlocked}
                        alternativeAction={hanldeAlertEditableDelivery}
                      />
                    </Fragment>
                  ) : (
                    <Fragment>
                      <InfoItem.Content>
                        <a
                          onClick={() => {
                            dispatchGlobal(setNextSection('shippingData'))
                          }}
                          className={`${globalStyles.cursorPointer} ${styles.incompleteStep}`}
                        >
                          {useFormatMessage(
                            'store/checkoutless.user.addAddresInfo'
                          )}
                        </a>
                      </InfoItem.Content>
                      <InfoItem.Edit
                        className={`${styles.informationViewEdit} ${globalStyles.cursorPointer}`}
                        onClick={() => {
                          dispatchGlobal(setNextSection('shippingData'))
                        }}
                        icon={
                          <ArrowRight
                            width={24}
                            fill={globalStyles.iconAlternative}
                          />
                        }
                      />
                    </Fragment>
                  )}
                </InfoItem>
              )}

              {selectedAddress && validateWarningAddress && (
                <Alert
                  type="warning"
                  text="store/checkoutless.summary.notAddress"
                  link="store/checkoutless.summary.notAddressLink"
                  handleClick={() => {
                    dispatchGlobal(setNextSection('shippingData'))
                  }}
                />
              )}

              {selectedAddress && successAddressAlter && (
                <Alert
                  type="warning"
                  text={'store/checkoutless.userInfo.address.alternative'}
                />
              )}

              {alertEditableDelivery && (
                <Alert
                  type="warning"
                  text="store/checkoutless.summary.nonEditableDelivery"
                  icon={<BellIcon />}
                />
              )}

              <LogisticsSummaryContainer
                className={styles.informationViewContent}
                onClick={() => {
                  dispatchGlobal(setNextSection('logisticsInfo'))
                }}
              />

              <InfoItem
                className={styles.informationViewContent}
                style={{
                  alignItems: gateway === 'creditpay' ? 'flex-start' : 'center',
                }}
              >
                <InfoItem.Icon className={styles.iconContainer}>
                  <CreditCard
                    fill={globalStyles.iconAlternative}
                    width={24}
                    height={24}
                  />
                </InfoItem.Icon>
                {paymentData?.paymentMethod ? (
                  <Fragment>
                    {paymentMessage?.isLoaded ? (
                      <InfoItem.Content
                        className={styles.informationViewPaymentContent}
                        value={
                          paymentMessage?.translate
                            ? useFormatMessage(
                                paymentMessage.isPromisoy
                                  ? 'store/checkoutless.register.payOnReceive'
                                  : 'store/checkoutless.register.customerCredit',
                                {
                                  store: <b>ORION</b>,
                                }
                              )
                            : paymentMessage.message
                        }
                      >
                        <div
                          id="cvv-container"
                          style={{
                            width:
                              cvcRequired && paymentData.paymentMethod === 'tc'
                                ? '60%'
                                : '',
                          }}
                        >
                          {paymentData.paymentMethod === 'tc' &&
                            cvcRequired &&
                            loadPaymentForm && (
                              <div
                                style={{
                                  display: cvcRequired ? 'flex' : '',
                                  justifyContent: 'flex-end',
                                }}
                              >
                                <div style={{ marginRight: '12px' }}>
                                  {
                                    // TODO: esta logica es lo de paymentez si viene este campo se muestra el CVV custom
                                    paymentData.gateway === 'paymentez' ? (
                                      <Input
                                        type="tel"
                                        placeholder="store/checkoutless.card.cvv"
                                        {...cvv}
                                        errorMessage="store/checkoutless.card.invalidSecurityCodeError"
                                        name="cvc"
                                        maxLength={4}
                                        className={genericStyles.cvcInput}
                                        onChange={onChangeCvv}
                                        deleteBtn={false}
                                        blurFunction={onBlurCvv}
                                        showError={false}
                                      />
                                    ) : (
                                      <InputCVCSF
                                        className={`${
                                          styles.secureFieldInput
                                        } ${
                                          isValidCVC !== null && !isValidCVC
                                            ? styles.secureFieldInvalidLite
                                            : null
                                        } ${
                                          isValidCVC
                                            ? styles.secureFieldValidLite
                                            : null
                                        }`}
                                        isValid={isValidCVC}
                                        itemId={selectedItem?.itemId || ''}
                                        showError={false}
                                        onRenderCvvContainer={
                                          onRenderCvvContainer
                                        }
                                      />
                                    )
                                  }
                                </div>
                                <div className={styles.duesContainer}>
                                  <span className={styles.duesLabel}>
                                    {useFormatMessage(
                                      'store/checkoutless.register.card.dues'
                                    )}
                                  </span>
                                  <SelectDues
                                    className={styles.duesSelect}
                                    dues={dues}
                                    installments={installments}
                                    showPlaceholder={false}
                                  />
                                </div>
                              </div>
                            )}
                        </div>
                      </InfoItem.Content>
                    ) : (
                      <InfoItem.Content
                        text={'store/checkoutless.register.payOnReceive'}
                      />
                    )}
                    <InfoItem.Edit
                      className={`${styles.informationViewEdit} ${globalStyles.cursorPointer}`}
                      onClick={() => {
                        dispatchGlobal(setNextSection('paymentData'))
                      }}
                    />
                  </Fragment>
                ) : (
                  <Fragment>
                    <InfoItem.Content>
                      <a
                        onClick={() => {
                          dispatchGlobal(setNextSection('paymentData'))
                        }}
                        className={`${globalStyles.cursorPointer} ${styles.incompleteStep}`}
                      >
                        {useFormatMessage(
                          'store/checkoutless.user.addPaymentInfo'
                        )}
                      </a>
                    </InfoItem.Content>
                    <InfoItem.Edit
                      className={`${styles.informationViewEdit} ${globalStyles.cursorPointer}`}
                      onClick={() => {
                        dispatchGlobal(setNextSection('paymentData'))
                      }}
                      icon={
                        <ArrowRight
                          width={24}
                          fill={globalStyles.iconAlternative}
                        />
                      }
                    />
                  </Fragment>
                )}
              </InfoItem>

              <InfoItem className={styles.informationViewContent}>
                <InfoItem.Content>
                  <Coupon />
                </InfoItem.Content>
              </InfoItem>

              {isOpenAlertCvv && (
                <Alert
                  type="warning"
                  text="store/checkoutless.textAlertCvv"
                  description="store/checkoutless.descriptionAlertCvv"
                  handleClickClose={handleCloseAlertCvv}
                />
              )}

              {/* {!profile.habeasData && <HabeasData />} */}
              <Summary
                className={`${styles.informationViewContent} ${globalStyles.inDesktop}`}
              />

              <BuyButtonContainer
                canBuy={canBuy}
                classNameContainer={globalStyles.buyButtonContainerFixed}
                cvv={cvv?.value}
                dues={dues?.value?.value}
                forceDisabled={forceDisabled && !selectedAddress}
                handleSubmit={handleSubmit}
                secondary={true}
                onClickDisabled={() => handleOpenAlertCvv(isValidCVC)}
              />
            </Fragment>
          )}
        </Fragment>
      ) : (
        <UnavailableProductsContainer />
      )}
    </Fragment>
  )
}

```