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

[Assistant]
Here's the implementation:

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

import {
  selectFormAction,
  setFormAction,
  setPrevStep,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { useUpdateSelectedAddress } from '../../../hooks/useUpdateSelectedAddress'
import { useValidateStyles } from '../../../hooks/useValidateStyles'
import vtexStyles from '../vtex-styles.module.css'
import kuikpayStyles from '../userInfo-module.css'
import genericStyles from '../generic-styles.module.css'
import {
  selectIsMobile,
  selectSettings,
  selectTheme,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'
import { ChangeShippingEvent } from '../../../events'
import {
  selectShipping,
  setUpdateAddresses,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import { useUserDataDispatch } from '../../../contexts/UserDataProvider'

const DELETE_ADDRESS = gql`
  mutation deleteAddress($id: ID!) {
    deleteAddress(id: $id)
      @context(provider: "kuikpay.my-checkout", scope: "private") {
      message
      data {
        id
        country
        state
        city
        street
        number
        postalCode
        receiverName
        geoCoordinates {
          latitude
          longitude
        }
        reference
      }
    }
  }
`

const useAddresses = () => {
  const dispatchGlobal = useDispatch()
  const dispatchUserData = useUserDataDispatch()
  const initialRender = useRef(true)

  const theme = useSelector(selectTheme)
  const { address, availableAddresses } = useSelector(selectShipping)
  const { isLiteVersion, hasGoogleAnalytics } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)
  const formAction = useSelector(selectFormAction)

  const [warning, setWarning] = useState({ show: false, id: '', address: '' })
  const [selectedAddress, setSelectedAddress] = useState(address?.id)
  const [toastMessage, setToastMessage] = useState(null)
  const showForm = useMemo(() => formAction !== 'none', [formAction])

  const global = useValidateStyles()

  let styles = kuikpayStyles

  if (theme === 'vtex') {
    styles = vtexStyles
  } else if (theme === 'generic') {
    styles = genericStyles
  }

  const { updateSelectedAddress } = useUpdateSelectedAddress(selectedAddress)
  const [messages, setMessages] = useState({
    deleted: false,
    edited: false,
    error: false,
  })

  useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false
    } else {
      // TODO: Cada vez que el usuario cambia se hace llamado al back para actualizar la direccion,
      // Algunos de estos llamados serian innecesarios si el usuario cambia muchas veces
      updateSelectedAddress({
        variables: {
          userArgs: { selectedAddress },
        },
      })
      setWarning({ show: false, id: '', address: '' })
      const addressNewSelect = availableAddresses?.find(
        (addressItem) => addressItem.id === selectedAddress
      )

      if (addressNewSelect) {
        ChangeShippingEvent({ address: addressNewSelect, hasGoogleAnalytics })
      }
    }
  }, [selectedAddress])

  useEffect(() => {
    if (address) ChangeShippingEvent({ address, hasGoogleAnalytics })
  }, [])

  const [deleteAddress] = useMutation(DELETE_ADDRESS, {
    onCompleted: ({ deleteAddress: addressDelete }) => {
      const filteredAddress = availableAddresses.filter(
        (addressItem) => addressItem.id !== addressDelete.data?.id
      )

      setMessages({ deleted: true, edited: false, error: false })
      setWarning({ show: false, id: '', address: '' })
      dispatchGlobal(
        setUpdateAddresses({
          availableAddresses: filteredAddress,
        })
      )
    },
    onError: () => {
      setMessages({ deleted: false, edited: false, error: true })
      setWarning({ show: false, id: '', address: '' })
    },
  })

  const handleDelete = (addressId: string) => {
    const selectedAddressDelete = availableAddresses?.find(
      (addressItem) => addressItem.id === addressId
    )

    setMessages({ deleted: false, edited: false, error: false })
    setWarning({
      show: true,
      id: selectedAddressDelete?.id || '',
      address: selectedAddressDelete?.street || '',
    })
  }

  const handleEdit = (addressId: string) => {
    initialRender.current = true
    const editAddress = availableAddresses?.find(
      (addressItem) => addressItem.id === addressId
    )

    dispatchGlobal(
      setUpdateAddresses({
        selectedAddress: editAddress,
      })
    )
    dispatchGlobal(setFormAction('edit'))
    dispatchUserData({
      type: 'SET_CHANGE_INFO',
      args: {
        isEdit: false,
        isNewInfo: true,
        userLocation: false,
        isChangeEmail: false,
      },
    })
    setToastMessage({
      type: 'success',
      header: 'store/checkoutless.user.addressEditedMessageHeader',
      text: 'store/checkoutless.user.addressEditedMessageText',
    })
    setMessages({ deleted: false, edited: true, error: false })
    setWarning({ show: false, id: '', address: '' })
  }

  const handleCreate = (userLocation: boolean) => {
    dispatchUserData({
      type: 'SET_CHANGE_INFO',
      args: {
        isEdit: false,
        isNewInfo: true,
        userLocation,
        isChangeEmail: false,
      },
    })
    dispatchGlobal(setFormAction('add'))
    setMessages({ deleted: false, edited: false, error: false })
    setWarning({ show: false, id: '', address: '' })
  }

  const handleContinue = () => {
    dispatchGlobal(setPrevStep())
  }

  useEffect(() => {
    setSelectedAddress(address?.id)
  }, [address])

  const handleClick = () => {
    deleteAddress({
      variables: {
        id: warning.id,
      },
    })
    setMessages({ deleted: false, edited: false, error: false })
    setWarning({ show: false, id: '', address: '' })
  }

  const handleCloseToast = () => {
    setMessages({ deleted: false, edited: false, error: false })
    setToastMessage(null)
  }

  return {
    availableAddresses,
    global,
    isLiteVersion,
    isMobile,
    messages,
    selectedAddress,
    showForm,
    styles,
    toastMessage,
    warning,
    handleClick,
    handleCloseToast,
    handleContinue,
    handleCreate,
    handleDelete,
    handleEdit,
    setSelectedAddress,
  }
}

export default useAddresses

```


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

[Assistant]
Here's the implementation:

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

import useAddresses from './useAddresses'
import AddressList from './AddressList'

const AddressesContainer = () => {
  const addresses = useAddresses()

  return (
    <Fragment>
      <AddressList {...addresses} />
    </Fragment>
  )
}

export default AddressesContainer

```


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

[Assistant]
Here's the implementation:

```css
/* Address styles */

.addressContainer {
  display: flex;
  margin-bottom: 8px;
  justify-content: space-between;
  align-items: center;
}

/* Addresses styles */

.addContainer {
  display: flex;
  align-items: center;
  margin: 8px 0 8px 0;
}

```


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

[Assistant]
Here's the implementation:

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

import Address from './Address/AddressContainer'
import { LiteAdd, LiteLocation } from '../../Icons'
import { Alert, Button } from '../../shared'
import ShippingFormContainer from '../../RegisterForm/Shipping/ShippingFormContainer'
import UnavailableMessage from '../UnavailableMessage/UnavailableMessageContainer'
import useFormatMessage from '../../../i18n/useFormatMessage'
import globalStyles from '../../../myCheckout-styles.module.css'
import addressStyles from './address.module.css'
import { Toast } from '../../shared/Toast/Toast'
import type { AddressMC } from '../../../interfaces/orderForm'
import { selectAddressStore } from '../../../contexts/global-context/reducers/orderFormDataSlice'
import { emptyFunction } from '../../../utils'
import type { Message } from '../../shared/interfaces/interfaces'

interface Props {
  availableAddresses: AddressMC[]
  global: any
  messages: any
  selectedAddress: string
  showForm: boolean
  styles: any
  toastMessage: Message | null
  warning: any
  handleClick: () => void
  handleCloseToast: () => void
  handleContinue: () => void
  handleCreate: (userLocation: boolean) => void
  handleDelete: (addressId: string) => void
  handleEdit: (addressId: string) => void
  setSelectedAddress: React.Dispatch<React.SetStateAction<string>>
}

const AddressList = (props: Props) => {
  const {
    availableAddresses,
    global,
    messages,
    selectedAddress,
    showForm,
    styles,
    toastMessage,
    warning,
    handleClick,
    handleCloseToast,
    handleContinue,
    handleCreate,
    handleDelete,
    handleEdit,
    setSelectedAddress,
  } = props

  const addressAlternative = useSelector(selectAddressStore)

  return (
    <div>
      {!showForm && (
        <div>
          {messages.deleted && (
            <Alert
              type="success"
              text="store/checkoutless.userInfo.addressDeleted"
            />
          )}
          {messages.edited && (
            <Toast toastMessage={toastMessage} onClose={handleCloseToast} />
          )}
          {messages.error && (
            <Alert
              type="error"
              text="store/checkoutless.userInfo.deleteAddressError"
            />
          )}
          {warning.show && (
            <Alert
              type="warning"
              text={'store/checkoutless.userInfo.confirmDeleteAddress'}
              link="store/checkoutless.userInfo.deleteLink"
              handleClick={handleClick}
              customText={warning.address}
            />
          )}
          <UnavailableMessage />
          <div
            className={`${styles.containerLocation} ${globalStyles.blueColor} ${globalStyles.borderBottom}`}
            onClick={() => handleCreate(true)}
          >
            <div
              className={`${styles.iconContainer} ${globalStyles.cursorPointer}`}
            >
              <LiteLocation fill={globalStyles.iconAlternativeSecondary} />
            </div>
            <p className={`${styles.locationP} ${globalStyles.cursorPointer}`}>
              {useFormatMessage('store/checkoutless.location.userLocation')}
            </p>
          </div>
          {availableAddresses?.map((address) => {
            return (
              <Address
                key={address.id}
                address={address}
                selectedAddress={selectedAddress}
                setSelectedAddress={setSelectedAddress}
                handleDelete={handleDelete}
                handleEdit={handleEdit}
              />
            )
          })}
          {addressAlternative && availableAddresses?.length <= 0 && (
            <Address
              key={addressAlternative.id}
              address={addressAlternative}
              selectedAddress={selectedAddress}
              setSelectedAddress={emptyFunction}
              handleDelete={emptyFunction}
              handleEdit={emptyFunction}
            />
          )}
          <div
            className={`${addressStyles.addContainer} ${styles.marginLeftIcon} ${globalStyles.borderBottom}`}
          >
            <button
              className={`${globalStyles.flexContainer} ${globalStyles.marginBottom} ${globalStyles.cursorPointer}`}
              onClick={() => handleCreate(false)}
            >
              <div
                className={`${styles.marginLeftIcon} ${styles.iconContainer}`}
              >
                <LiteAdd fill={global.iconAlternative} />
              </div>
              <p>
                {useFormatMessage('store/checkoutless.userInfo.newAddress')}
              </p>
            </button>
          </div>
          <div className={globalStyles.actionButtonContainer}>
            <Button
              value={'store/checkoutless.next'}
              onClick={handleContinue}
            />
          </div>
        </div>
      )}
      {showForm && <ShippingFormContainer />}
    </div>
  )
}

export default AddressList

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { LiteEdit, LiteDelete } from '../../../Icons'
import globalStyles from '../../../../myCheckout-styles.module.css'
import addressStyles from '../address.module.css'
import type { AddressMC } from '../../../../interfaces/orderForm'

interface Props {
  address: AddressMC
  selectedAddress: string
  setSelectedAddress: any
  handleDelete: any
  handleEdit: any
  styles: any
  global: any
}

const Address = ({
  address: { street, id: addressId, city, state },
  selectedAddress,
  setSelectedAddress,
  handleDelete,
  handleEdit,
  styles,
  global,
}: Props) => {
  return (
    <div
      className={`${addressStyles.addressContainer} ${globalStyles.borderBottom}`}
    >
      <div
        className={addressStyles.addressContainer}
        onClick={() => setSelectedAddress(addressId)}
      >
        <input
          id={`address-${addressId}`}
          type="radio"
          value={addressId}
          checked={addressId === selectedAddress}
          className={`${styles.inputClasses} ${globalStyles.cursorPointer}`}
          onClick={() => setSelectedAddress(addressId)}
        />
        <p className={styles.infoContainer}>{`${street} ${city} - ${state}`}</p>
      </div>
      <div className={styles.iconsContainer}>
        <div className={`${styles.edit} ${globalStyles.cursorPointer}`}>
          <LiteEdit
            fill={global.iconAlternative}
            onClick={() => handleEdit(addressId)}
          />
        </div>
        <a
          className={styles.liteDelete}
          onClick={() => {
            if (addressId !== selectedAddress) handleDelete(addressId)
          }}
        >
          {addressId !== selectedAddress && (
            <LiteDelete fill={global.iconAlternative} />
          )}
        </a>
      </div>
    </div>
  )
}

export default Address

```


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

[Assistant]
Here's the implementation:

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

import Address from './Address'
import useAddress from './useAddress'
import type { AddressMC } from '../../../../interfaces/orderForm'

interface Props {
  address: AddressMC
  selectedAddress: string
  setSelectedAddress: any
  handleDelete: any
  handleEdit: any
}

const AddressContainer = (props: Props) => {
  const adress = useAddress()

  return (
    <Fragment>
      <Address {...props} {...adress} />
    </Fragment>
  )
}

export default AddressContainer

```


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

[Assistant]
Here's the implementation:

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

import vtexStyles from '../../vtex-styles.module.css'
import kuikpayStyles from '../../userInfo-module.css'
import genericStyles from '../../generic-styles.module.css'
import { useUserData } from '../../../../contexts/UserDataProvider'
import { useValidateStyles } from '../../../../hooks/useValidateStyles'
import {
  selectIsMobile,
  selectSettings,
} from '../../../../contexts/global-context/reducers/uiSettingsSlice'

const useAddress = () => {
  const { theme } = useUserData()
  const { isLiteVersion } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)

  const global = useValidateStyles()

  let styles = kuikpayStyles

  if (theme === 'vtex') {
    styles = vtexStyles
  } else if (theme === 'generic') {
    styles = genericStyles
  }

  return {
    styles,
    global,
    theme,
    isLiteVersion,
    isMobile,
  }
}

export default useAddress

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import {
  Dropup,
  Delete,
  ArrowBack,
  LiteClose,
  CreditCard,
  LiteEdit,
  LiteLocation,
  MyData,
  MyOrder,
  MyProfile,
  Shipping,
} from '../../Icons'
import { LogoMyCheckout } from '../../Icons/LogoMycheckout'
import globalStyles from '../../../myCheckout-styles.module.css'
import stylesButton from '../../shared/Button/button.css'
import stylesHeader from '../../Header/header.css'
import stylesInfoItem from '../../shared/InfoItem/infoItem.module.css'
import stylesInformationView from '../../UserInfo/InformationView/informationView.module.css'
import stylesItem from '../../Summary/Item/item.css'
import stylesModal from '../../Modal/modal.css'
import stylesSummary from '../../Summary/summary-modules.css'
import stylesTitle from '../../shared/Title/title.css'
import stylesTotals from '../../Summary/Totals/totals.css'
import stylesUserInfo from '../../UserInfo/userInfo-module.css'

export const KuikpayModalPreview = () => {
  return (
    <div className={globalStyles.Checkoutless}>
      <div id="kuikpay-modal" className={stylesModal.modalContainer}>
        <div className={stylesHeader.headerContainer}>
          <div
            className={`${stylesHeader.headerContent} ${stylesHeader.headerBoxShadow}`}
          >
            <div className={stylesHeader.headerFlex}>
              <a>
                <ArrowBack
                  className={`${globalStyles.cursorPointer} ${stylesHeader.headerIcon}`}
                  fill={globalStyles.iconAlternative}
                />
              </a>
            </div>
            <LogoMyCheckout className={stylesHeader.headerLogo} />
            <div
              className={`${stylesHeader.headerIconClose} ${stylesHeader.headerFlex}`}
            >
              <a>
                <LiteClose
                  className={`${globalStyles.cursorPointer} ${stylesHeader.headerIcon}`}
                  background={globalStyles.iconBackground}
                  fill={globalStyles.iconAlternative}
                />
              </a>
            </div>
          </div>
        </div>
        <div className={stylesModal.modalBodyWrapper}>
          <div className={stylesUserInfo.userInfoContainer}>
            <div className={stylesTitle.titleContainer}>
              <div className={stylesTitle.titleContent}>
                <div className={stylesTitle.titleIcon}>
                  <MyData fill={globalStyles.iconAlternativeSecondary} />
                </div>
                <div className={stylesTitle.titlePrimary}>
                  <span>Mis datos</span>
                </div>
              </div>
            </div>
            <div
              className={`${stylesInfoItem.infoItemContainer} ${stylesInformationView.informationViewContent}`}
            >
              <div className={stylesInfoItem.infoItemIcon}>
                <MyProfile
                  fill={globalStyles.iconAlternative}
                  width={16}
                  height={16}
                />
              </div>
              <div className={stylesInfoItem.infoItemContent}>
                juan.galvis@vtex.com.br
              </div>
              <div
                className={`${stylesInfoItem.infoItemContent} ${stylesInformationView.informationViewEdit} ${globalStyles.cursorPointer}`}
              >
                <LiteEdit fill={globalStyles.iconAlternative} />
              </div>
            </div>
            <div
              className={`${stylesInfoItem.infoItemContainer} ${stylesInformationView.informationViewContent}`}
            >
              <div className={stylesInfoItem.infoItemIcon}>
                <LiteLocation
                  fill={globalStyles.iconAlternative}
                  width={18}
                  height={18}
                />
              </div>
              <div className={stylesInfoItem.infoItemContent}>
                Car******************5 Bog********. - BOG********.
              </div>
              <div
                className={`${stylesInfoItem.infoItemContent} ${stylesInformationView.informationViewEdit} ${globalStyles.cursorPointer}`}
              >
                <LiteEdit fill={globalStyles.iconAlternative} />
              </div>
            </div>
            <div
              className={`${stylesInfoItem.infoItemContainer} ${stylesInformationView.informationViewContent}`}
            >
              <div className={stylesInfoItem.infoItemIcon}>
                <Shipping fill={globalStyles.iconAlternative} />
              </div>
              <div className={stylesInfoItem.infoItemContent}>
                Envío Express
              </div>
              <div
                className={`${stylesInfoItem.infoItemContent} ${stylesInformationView.informationViewEdit} ${globalStyles.cursorPointer}`}
              >
                <LiteEdit fill={globalStyles.iconAlternative} />
              </div>
            </div>
            <div
              className={`${stylesInfoItem.infoItemContainer} ${stylesInformationView.informationViewContent}`}
            >
              <div className={stylesInfoItem.infoItemIcon}>
                <CreditCard
                  fill={globalStyles.iconAlternative}
                  width={16}
                  height={16}
                />
              </div>
              <div className={stylesInfoItem.infoItemContent}>
                *** *** *** 1344
              </div>
              <div
                className={`${stylesInfoItem.infoItemContent} ${stylesInformationView.informationViewEdit} ${globalStyles.cursorPointer}`}
              >
                <LiteEdit fill={globalStyles.iconAlternative} />
              </div>
            </div>
            <div className={stylesSummary.summaryContainer}>
              <div
                className={`${stylesTitle.titleContainer} ${stylesSummary.summaryTitle}`}
              >
                <div className={stylesTitle.titleContent}>
                  <div className="_kuikpay-title__titleIcon">
                    <MyOrder
                      fill={globalStyles.iconPrimary}
                      width={24}
                      height={24}
                    />
                  </div>
                  <div className={stylesTitle.titlePrimary}>
                    <span>Mi orden</span>
                  </div>
                </div>
                <a className={stylesSummary.summaryIconCollapsible}>
                  <Dropup fill={globalStyles.iconPrimary} />
                </a>
              </div>
              <div className={stylesSummary.summaryContent}>
                <div className={stylesSummary.summaryItems}>
                  <div
                    className={`${stylesItem.itemContainer} ${globalStyles.borderBottom}`}
                  >
                    <div className={stylesItem.itemContent}>
                      <div className={stylesItem.itemDeleteContainer}>
                        <a>
                          <Delete
                            fill={globalStyles.iconAlternative}
                            background={globalStyles.iconBackground}
                            backgroundSecondary={
                              globalStyles.iconBackgroundSecondary
                            }
                          />
                        </a>
                      </div>
                      <div className={stylesItem.itemImageContainer}>
                        <img
                          width="74"
                          height="74"
                          src="http://amalia.vteximg.com.br/arquivos/ids/158065-300-360/04-suiza-flores_negra-1.jpg?v=637460854554700000"
                          alt="Blusa Suiza Negro flores Talla S - Color Negro flores"
                        />
                      </div>
                      <div className={stylesItem.itemRightContainer}>
                        <div className={stylesItem.itemRightMiddle}>
                          <div className={stylesItem.itemRightMiddleName}>
                            <p>
                              Blusa Suiza Negro flores Talla S - Color Negro
                              flores
                            </p>
                          </div>
                          <p>1 un</p>
                        </div>
                        <div className={stylesItem.itemPriceContainer}>
                          <p className={stylesItem.itemPriceBold}>$58,000</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className={`${stylesItem.itemContainer} ${globalStyles.borderBottom}`}
                  >
                    <div className={stylesItem.itemContent}>
                      <div className={stylesItem.itemDeleteContainer}>
                        <a>
                          <Delete
                            fill={globalStyles.iconAlternative}
                            background={globalStyles.iconBackground}
                            backgroundSecondary={
                              globalStyles.iconBackgroundSecondary
                            }
                          />
                        </a>
                      </div>
                      <div className={stylesItem.itemImageContainer}>
                        <img
                          width="74"
                          height="74"
                          src="http://amalia.vteximg.com.br/arquivos/ids/158061-300-360/02-Suecia-Rayas-colores-1.jpg?v=637460854523970000"
                          alt="Chaleco Suecia Rayas colores Talla XS/S - Color Rayas colores"
                        />
                      </div>
                      <div className={stylesItem.itemRightContainer}>
                        <div className={stylesItem.itemRightMiddle}>
                          <div className={stylesItem.itemRightMiddleName}>
                            <p>
                              Blusa Suiza Negro flores Talla S - Color Negro
                              flores
                            </p>
                          </div>
                          <p>1 un</p>
                        </div>
                        <div className={stylesItem.itemPriceContainer}>
                          <p className={stylesItem.itemPriceBold}>$58,000</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={stylesTotals.totalsContainer}>
                  <div className={stylesTotals.totalsTextOveflow}>
                    <p className={stylesTotals.totalsLabel}>Subtotal</p>
                    <p className={stylesTotals.totalsLabel}>Envío</p>
                    <p className={stylesTotals.totalsLabel}>
                      Impuesto de bolsas plásticas
                    </p>
                    <div className={stylesTotals.totalsDiscounts}></div>
                    <p className={stylesTotals.totalsLabel}>Total</p>
                  </div>
                  <div className={stylesTotals.totalsValues}>
                    <p className={stylesTotals.totalsLabel}>$92,300</p>
                    <p className={stylesTotals.totalsLabel}>$5,000</p>
                    <p className={stylesTotals.totalsLabel}>$200</p>
                    <div className={stylesTotals.totalsDiscounts}></div>
                    <p className={stylesTotals.totalsLabel}>$97,500</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          className={`${globalStyles.buyButtonContainer} ${globalStyles.buyButtonContainerFixed}`}
        >
          <div className={globalStyles.w100}>
            <div className={stylesButton.buttonContent}>
              <input
                className={stylesButton.buttonContainer}
                type="button"
                data-secondary="on"
                value="Pagar $97,500 - 2 Und"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { MyCheckoutButton } from '../../MyCheckoutButton/MyCheckoutButton'
import useKuikpayButton from './useKuikpayButtonPreview'

type Props = {
  text?: string
}

export const KuikpayButtonPreview = (props: Props) => {
  const kuikpayButtonPreviewProps = useKuikpayButton()

  return <MyCheckoutButton {...kuikpayButtonPreviewProps} text={props.text} />
}

```


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

[Assistant]
Here's the implementation:

```tsx
const useKuikpayButtonPreview = () => {
  const disabled = false

  const handleClick: () => void = () => {}

  const processShowLogo = () => {
    return 'Compra rápida'
  }

  return { disabled, handleClick, processShowLogo }
}

export default useKuikpayButtonPreview

```


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

[Assistant]
Here's the implementation:

```typescript
import { clone, prop, filter } from 'ramda'

import type {
  InitialSelectionType,
  ProductItem,
  SelectedVariations,
  SelectedVariationsNotNull,
  SelectorProductItem,
  Variations,
} from '../../../interfaces'

export const parseSku = (sku: ProductItem) => {
  const result = clone(sku) as any
  const variationValues = {} as Record<string, string>

  for (const variation of sku.variations) {
    variationValues[variation.name] = variation.values[0]
  }

  const variations = sku.variations.map(prop('name'))

  result.variationValues = variationValues
  result.variations = variations

  return result
}

export const isColor = (variation: string) => {
  if (!variation) return false

  const possibleValues = [
    'cor',
    'color',
    'colour',
    'colore',
    'farbe',
    'couleur',
    'kleuren',
    'culoare',
    'värit',
    'kolory',
    'farve',
    'färger',
    'farby',
    'boje',
    'colori',
  ]

  return possibleValues.includes(variation.toLowerCase())
}

export const buildEmptySelectedVariation = (variations: Variations) => {
  const variationNames = Object.keys(variations)
  const result = {} as Record<string, null>

  for (const variationName of variationNames) {
    result[variationName] = null
  }

  return result
}

export const selectedVariationFromItem = (
  item: SelectorProductItem,
  variations: Variations
) => {
  const variationNames = Object.keys(variations)
  const result = {} as Record<string, string>

  for (const variationName of variationNames) {
    result[variationName] = item.variationValues[variationName]
  }

  return result
}

export const getNewSelectedVariations = (
  query: Record<string, string> | undefined,
  skuSelected: ProductItem,
  variations: Variations,
  initialSelection?: InitialSelectionType
  // eslint-disable-next-line max-params
) => {
  const emptyVariations = buildEmptySelectedVariation(variations)

  if (skuSelected == null) {
    return emptyVariations
  }

  const hasSkuInQuery = Boolean(query?.skuId)
  const parsedSku = parseSku(skuSelected)

  if (hasSkuInQuery || initialSelection === 'complete') {
    return selectedVariationFromItem(parsedSku, variations)
  }

  if (initialSelection === 'image') {
    const colorVariationName = parsedSku.variations.find(isColor)

    return {
      ...emptyVariations,
      ...(colorVariationName
        ? {
            [colorVariationName]: parsedSku.variationValues[colorVariationName],
          }
        : {}),
    }
  }

  return emptyVariations
}

export const isSkuSelected =
  (selectedNotNull: SelectedVariationsNotNull) =>
  (sku: SelectorProductItem) => {
    const hasAll = Object.keys(selectedNotNull).every((variationName) => {
      const selectedValue = selectedNotNull[variationName]

      return sku.variationValues[variationName] === selectedValue
    })

    return hasAll
  }

export const findListItemsWithSelectedVariations = (
  items: SelectorProductItem[],
  selectedVariations: SelectedVariations
) => {
  const selectedNotNull = filter(
    Boolean,
    selectedVariations
  ) as SelectedVariationsNotNull

  const selectedCount = Object.keys(selectedNotNull).length

  if (selectedCount === 0) {
    // return all
    return items
  }

  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  return items.filter(isSkuSelected(selectedNotNull))
}

export const findItemWithSelectedVariations = (
  items: SelectorProductItem[],
  selectedVariations: SelectedVariations
) => {
  const selectedNotNull = filter(
    Boolean,
    selectedVariations
  ) as SelectedVariationsNotNull

  const selectedCount = Object.keys(selectedNotNull).length

  if (selectedCount === 0) {
    // may return any item, return first element
    return items[0]
  }

  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  return items.find(isSkuSelected(selectedNotNull))
}

export function getDefaultSeller(sellers?: any) {
  if (!sellers || sellers.length === 0) {
    return
  }

  const defaultSeller = sellers.find((seller: any) => seller.sellerDefault)

  if (defaultSeller) {
    return defaultSeller
  }

  return sellers[0]
}

```


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

[Assistant]
Here's the implementation:

```tsx
import { head } from 'ramda'
import { useMemo } from 'react'

import type {
  ImageMap,
  SelectorProductItem,
  Variations,
  Image,
} from '../../../interfaces'
import { isColor } from '../utils'

export const useImagesMap = (
  items: SelectorProductItem[],
  variations: Variations
) => {
  return useMemo(() => {
    const filteredItems = items

    const variationNames = Object.keys(variations)

    const result: ImageMap = {}

    for (const variationName of variationNames) {
      // Today, only "Color" variation should show image, need to find a more resilient way to tell this, waiting for backend
      if (!isColor(variations[variationName].originalName)) {
        continue
      }

      const imageMap = {} as Record<string, Image | undefined>
      const variationValues = variations[variationName].values

      for (const variationValue of variationValues) {
        const item = filteredItems.find(
          (sku) => sku.variationValues[variationName] === variationValue.name
        )

        imageMap[variationValue.name] = item && head(item.images)
      }

      result[variationName] = imageMap
    }

    return result
  }, [items, variations])
}

```


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

[Assistant]
Here's the implementation:

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

import type {
  ProductItem,
  SkuSpecification,
  Variations,
} from '../../../interfaces'

const getVariationsFromItems = (
  skuItems: ProductItem[],
  visibleVariations?: string[]
) => {
  const variations: Variations = {}
  const variationsSet: Record<string, Set<string>> = {}

  for (const skuItem of skuItems) {
    for (const currentVariation of skuItem.variations) {
      const { name, values } = currentVariation

      if (
        !visibleVariations ||
        visibleVariations.includes(name.toLowerCase().trim())
      ) {
        const [value] = values
        const currentSet = variationsSet[name] || new Set()

        currentSet.add(value)
        variationsSet[name] = currentSet
      }
    }
  }

  const variationsNames = Object.keys(variationsSet)

  // Transform set back to array
  for (const variationName of variationsNames) {
    const set = variationsSet[variationName]

    variations[variationName] = {
      originalName: variationName,
      values: Array.from(set).map((value) => ({
        name: value,
        originalName: value,
      })),
    }
  }

  return variations
}

const getVariationsFromSpecifications = (
  skuSpecifications: SkuSpecification[],
  visibleVariations?: string[]
) => {
  const variations: Variations = {}

  for (const specification of skuSpecifications) {
    if (
      !visibleVariations ||
      visibleVariations.includes(
        specification.field.originalName.toLowerCase().trim()
      )
    ) {
      variations[specification.field.name] = {
        originalName: specification.field.originalName,
        values: specification.values.map((value) => ({
          name: value.name,
          originalName: value.originalName,
        })),
      }
    }
  }

  return variations
}

export const useVariations = ({
  skuItems,
  skuSpecifications,
}: {
  skuItems: ProductItem[]
  skuSpecifications: SkuSpecification[]
}) => {
  const isSkuSpecificationsEmpty = skuSpecifications.length === 0

  const variationsSource = isSkuSpecificationsEmpty
    ? skuItems
    : skuSpecifications

  const result = useMemo(() => {
    return isSkuSpecificationsEmpty
      ? getVariationsFromItems(variationsSource as ProductItem[])
      : getVariationsFromSpecifications(variationsSource as SkuSpecification[])
  }, [variationsSource, isSkuSpecificationsEmpty])

  return result
}

```


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

[Assistant]
Here's the implementation:

```css
.skuItemContainer {
  position: relative;
  margin-bottom: 16px;
  width: 100%;
}

.skuItemContainer .skuItemContent {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.skuItemContainer .skuItemContent p {
  font-size: 14px;
}

.skuItemContainer .skuItemVariatonContent {
  display: flex;
  margin-top: 6px;
}

.skuItemContainer .skuItemVariatonItem {
  align-items: center;
  border: 2px solid var(--gray-color);
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  margin-right: 8px;
  opacity: 1;
  padding: 0px;
  width: 32px;
}

.skuItemContainer .skuItemVariatonItemSelected {
  border: 2px solid var(--valid-color);
  color: var(--valid-color);
}

.skuItemContainer .skuItemVariatonItemDisabled {
  opacity: 0.5 !important;
  cursor: initial !important;
}

.skuItemContainer .skuItemVariatonItemImg {
  height: 28px;
  width: 30px;
}

@media screen and (min-width: 992px) {
  .skuItemContainer .skuItemVariatonItem {
    height: 44px;
    width: 44px;
  }

  .skuItemContainer .skuItemVariatonItemImg {
    height: 40px;
    width: 42px;
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { pathOr } from 'ramda'

import { isColor } from '../utils'
import useFormatMessage from '../../../i18n/useFormatMessage'
import styles from './skuItem.module.css'
import Carousel from '../../shared/Carousel'

interface Props {
  variationList: unknown[]
  isAvailableVariation: (variation: any, position: number) => number | boolean
  isSelected: (variation: any) => boolean
  onChangeSelector: (variation: any, index: number) => void
}

const SkuSelector = ({
  variationList,
  isAvailableVariation,
  isSelected,
  onChangeSelector,
}: Props) => {
  return (
    <Carousel data={variationList}>
      <Carousel.Item>
        <div className={styles.skuItemContainer}>
          {variationList.map((variation: any, index: number) => {
            const variationsElements = pathOr([], ['variations'], variation)

            return (
              <div className={styles.skuItemContent} key={index}>
                <p>{`${useFormatMessage('store/checkoutless.text.select')} ${
                  variation?.name
                }:`}</p>
                <div className={styles.skuItemVariatonContent}>
                  {variationsElements.map((v, i) => {
                    const imageUrl = pathOr(
                      '',
                      ['elements', 0, 'images', 0, 'imageUrl'],
                      v
                    )

                    const selected = isSelected(v)
                    const isAvailable = isAvailableVariation(v, index)
                    const renderImage = isColor(variation?.name) && imageUrl

                    return (
                      <div
                        className={`${styles.skuItemVariatonItem} ${
                          selected ? styles.skuItemVariatonItemSelected : null
                        } ${
                          !isAvailable
                            ? styles.skuItemVariatonItemDisabled
                            : null
                        }`}
                        onClick={() =>
                          isAvailable && onChangeSelector(v, index)
                        }
                        key={`${v?.variation}-${i}`}
                      >
                        {renderImage ? (
                          <img
                            src={imageUrl}
                            className={styles.skuItemVariatonItemImg}
                          />
                        ) : (
                          v?.variation
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>
      </Carousel.Item>
    </Carousel>
  )
}

export default SkuSelector

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import SkuSelector from './SkuSelector'
import useSkuSelector from './useSkuSelector'

interface Props {
  setDisabled: (disabled: boolean) => void
}

const SkuSelectorContainer = (props: Props) => {
  const skuSelector = useSkuSelector(props)

  return <SkuSelector {...skuSelector} />
}

export default SkuSelectorContainer

```


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

[Assistant]
Here's the implementation:

```tsx
import { pathOr, equals } from 'ramda'
import { useMemo, useState, useCallback, useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'

import { arrayEquals } from '../../../utils'
import { useActions } from '../../../contexts/ActionsProviderV2'
import {
  selectItemData,
  setVariationSelected,
  updateItemToAdd,
} from '../../../contexts/global-context/reducers/cartSlice'
import type { VariationsV2, ProductItem } from '../../../interfaces'

interface Props {
  setDisabled: (disabled: boolean) => void
}

const getSelectedVariation = (variations: VariationsV2[]) => {
  const variation = pathOr('', [0, 'values', 0], variations)

  return [variation]
}

const getPossibleVariation = (
  variationList: any[],
  variations: VariationsV2[]
): string[] => {
  const variationsElement = pathOr(null, [0], variationList)

  if (variationsElement) {
    const name = pathOr('', ['name'], variationsElement)
    const dataName = pathOr(
      '',
      ['values', 0],
      variations.find((v) => v?.name === name)
    )

    const list = pathOr([], ['variations'], variationsElement).find(
      (v) => v?.variation === dataName
    )

    const elements = pathOr([], ['elements'], list)

    return elements.map((e) => e?.itemId)
  }

  return []
}

const useSkuSelector = (props: Props) => {
  const { setDisabled } = props
  const dispatchGlobal = useDispatch()
  const initialRender = useRef(true)
  const [actualItems, setActualItems] = useState([])
  const [actualSelectedItem, setActualSelectedItem] = useState<ProductItem>()

  const visibleVariations = pathOr(
    [],
    ['skuSelectorProps', 'visibleVariations'],
    useActions()
  )

  const {
    product: { items, productId },
    selectedItem: { variations, itemId: currentItemId },
    itemToAdd,
  } = useSelector(selectItemData)

  const [selectedVariation, setSelectedVariation] = useState(
    getSelectedVariation(variations)
  )

  const variationList = useMemo(() => {
    const variationsElements = items.reduce((a: any, b: any) => {
      const availableQuantity = pathOr(
        0,
        ['sellers', 0, 'commertialOffer', 'AvailableQuantity'],
        b
      )

      const images = pathOr(0, ['images'], b)
      const itemId = pathOr('', ['itemId'], b)

      // eslint-disable-next-line array-callback-return
      pathOr([], ['variations'], b).map((variation) => {
        const name = pathOr('', ['values', 0], variation)

        const elements = {
          name,
          availableQuantity,
          images,
          itemId,
        }

        const element = {
          variation: name,
          elements: [elements],
        }

        if (
          a[variation?.name]?.variations &&
          a[variation?.name]?.variations.length
        ) {
          const elementIndex = a[variation?.name]?.variations.findIndex(
            (e: any) => e?.variation === name
          )

          if (elementIndex !== -1) {
            a[variation?.name]?.variations[elementIndex]?.elements?.push(
              elements
            )
          } else {
            a[variation?.name]?.variations?.push(element)
          }
        } else {
          a[variation?.name] = {
            name: variation?.name,
            variations: [element],
          }
        }
      })

      return a
    }, {})

    if (!visibleVariations.length) return Object.values(variationsElements)

    return Object.values(variationsElements).filter((variaton: any) =>
      visibleVariations.some((v: any) => {
        const config = v?.toLowerCase()
        const originalName = variaton?.name?.toLowerCase()

        return config === originalName
      })
    )
  }, [items, visibleVariations])

  const [possibleVariations, setPosibleVariations] = useState(
    getPossibleVariation(variationList, variations)
  )

  useEffect(() => {
    let sameItems = false

    if (actualItems.length) {
      sameItems = arrayEquals(items, actualItems)
    }

    if (!sameItems) {
      setActualItems(items)
      setActualSelectedItem(undefined)
    } else if (items.length && selectedVariation) {
      const selectedItem = items.find((item) => {
        const variationsElements = pathOr([], ['variations'], item)
          .filter((v) => {
            if (!visibleVariations.length) return true

            return visibleVariations.some(
              (vv) =>
                vv?.toLowerCase() === pathOr('', ['name'], v).toLowerCase()
            )
          })
          .map((v) => {
            return pathOr('', ['values', 0], v)
          })

        return equals(variationsElements, selectedVariation)
      })

      setActualItems(items)
      setActualSelectedItem(selectedItem)

      const availableQuantity = pathOr(
        0,
        ['sellers', 0, 'commertialOffer', 'AvailableQuantity'],
        selectedItem
      )

      if (
        selectedItem &&
        availableQuantity &&
        selectedItem?.itemId !== currentItemId
      ) {
        setDisabled(false)
        dispatchGlobal(setVariationSelected(selectedItem))
        dispatchGlobal(
          updateItemToAdd({
            ...itemToAdd,
            id: selectedItem?.itemId,
          })
        )
      }
    } else {
      setDisabled(true)
    }
  }, [selectedVariation, items, visibleVariations])

  useEffect(() => {
    if (
      actualSelectedItem &&
      selectedVariation.length &&
      variationList.length
    ) {
      setDisabled(variationList.length > selectedVariation?.length)
    }
  }, [selectedVariation, variationList])

  const onChangeSelector = (variation: any, index: number) => {
    if (index === 0) {
      setPosibleVariations(
        pathOr([], ['elements'], variation).map((v) => v?.itemId)
      )
      setSelectedVariation([pathOr('', ['variation'], variation)])

      return setDisabled(true)
    }

    const prevState = JSON.parse(JSON.stringify(selectedVariation))

    prevState[index] = pathOr('', ['variation'], variation)
    setSelectedVariation(prevState)
  }

  useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false
    } else if (!actualSelectedItem) {
      setDisabled(true)
    }
  }, [actualSelectedItem])

  useEffect(() => {
    if (variationList.length === 0 || !productId) return
    setSelectedVariation(getSelectedVariation(variations))
    setPosibleVariations(getPossibleVariation(variationList, variations))
  }, [productId, JSON.stringify(variationList)])

  const isSelected = useCallback(
    (variation: any) => {
      const elements = pathOr('', ['variation'], variation)

      return selectedVariation.some((s) => s === elements)
    },
    [selectedVariation]
  )

  // eslint-disable-next-line array-callback-return
  const isAvailableVariation = useCallback(
    (variation: any, position: number) => {
      const elements = pathOr([], ['elements'], variation)
      const available = !!elements.filter((e) => e?.availableQuantity).length

      if (position > 0) {
        let possible = 0
        let lastAvailableQuantity = 0
        // eslint-disable-next-line
        elements.map((e) => {
          if (possibleVariations.some((p) => p === e?.itemId)) {
            possible++
            lastAvailableQuantity = e?.availableQuantity
          }
        })

        return available && possible && lastAvailableQuantity
      }

      // eslint-disable-next-line array-callback-return
      return available
    },
    [selectedVariation, possibleVariations]
  )

  return {
    variationList,
    isAvailableVariation,
    isSelected,
    onChangeSelector,
  }
}

export default useSkuSelector

```


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

[Assistant]
Here's the implementation:

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

import useFormatMessage from '../../../i18n/useFormatMessage'
import { Alert } from '../../Icons'
import { MessageResendAwait } from './MessageResendAwait'
import styles from '../accessKeyForm.css'

interface Props {
  second: number
  canSendCode: boolean
  handleClick: () => void
}

export const MessageAwaitFullPage = ({
  canSendCode,
  second,
  handleClick,
}: Props) => {
  return (
    <div className={styles.accessKeyFullPageContainer}>
      <div className={styles.accessKeyIconContent}>
        <Alert
          className={styles.accessKeyIcon}
          fill={styles.accessKeyIconFill}
          stroke={styles.accessKeyIconStroke}
        />
      </div>
      <Fragment>
        <h3 className={`${styles.accessKeyTitleMessage}`}>
          {useFormatMessage('store/checkoutless.accessKey.sessionExpireTitle')}
        </h3>
        <p className={`${styles.accessKeyTextMessage}`}>
          {useFormatMessage('store/checkoutless.accessKey.sessionExpireText', {
            minutes: Math.ceil(second / 60),
          })}
        </p>
      </Fragment>
      <Fragment>
        <MessageResendAwait
          {...{ canSendCode, handleClick, second }}
        ></MessageResendAwait>
      </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/AccessKeyForm/Messages/MessageResendAwait.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { MessageResendAwaitInfo } from './MessageResendAwaitInfo'
import styles from '../accessKeyForm.css'

interface Props {
  canSendCode: boolean
  second: number
  handleClick: () => void
  message?: string | boolean
}

export const MessageResendAwait = (props: Props) => {
  return (
    <Fragment>
      <div className={styles.accessKeyMessageContainer}>
        <MessageResendAwaitInfo {...props} />
      </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/AccessKeyForm/Messages/MessageResendAwaitInfo.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 styles from '../accessKeyForm.css'

interface Props {
  canSendCode: boolean
  handleClick: () => void
  message?: string | boolean
  second: number
}

export const MessageResendAwaitInfo = (props: Props) => {
  const { canSendCode, handleClick, message, second } = props

  return (
    <Fragment>
      {canSendCode ? (
        <Fragment>
          {message && (
            <p className={styles.accessKeyCountdownSecondsMessage}>{message}</p>
          )}
          <a
            onClick={handleClick}
            className={`${global.underline} ${styles.accessKeyColorGreen}`}
          >
            {useFormatMessage('store/checkoutless.accessKey.resendCode')}
          </a>
        </Fragment>
      ) : (
        <Fragment>
          <p className={styles.accessKeyCountdownSecondsMessage}>
            {useFormatMessage(
              'store/checkoutless.accessKey.countdownSecondsMessage'
            )}
          </p>
          <p className={styles.accessKeyColorGreen}>
            {useFormatMessage('store/checkoutless.accessKey.countdownSeconds', {
              seconds: second,
            })}
          </p>
        </Fragment>
      )}
    </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/LogisticsInfo/DeliveryChannel/useDeliveryChannel.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import {
  selectIsMobile,
  selectSettings,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'
import { usePackagesManager } from '../Packages/usePackagesManager'
import useLogisticBlock from '../../../hooks/useLogisticBlock'
import { selectAddressStore } from '../../../contexts/global-context/reducers/orderFormDataSlice'

const useDeliveryChannel = () => {
  const { packageManager } = usePackagesManager()
  const { logisticsBlocked } = useLogisticBlock()
  const addressAlternative = useSelector(selectAddressStore)
  const { isLiteVersion } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)
  const intl = useIntl()

  const availableDelivery = useMemo(
    () =>
      !!packageManager.delivery.currentItems.length &&
      !(logisticsBlocked && addressAlternative),
    [packageManager.delivery]
  )

  const availablePickUp = useMemo(
    () =>
      !!packageManager.pickUp.currentItems.length &&
      !(logisticsBlocked && addressAlternative),
    [packageManager.pickUp]
  )

  return {
    availableDelivery,
    availablePickUp,
    intl,
    isLiteVersion,
    isMobile,
  }
}

export default useDeliveryChannel

```


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

[Assistant]
Here's the implementation:

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

import styles from '../logisticsInfo-module.css'
import global from '../../../myCheckout-styles.module.css'
import { usePackagesManager } from '../Packages/usePackagesManager'
import { Alert } from '../../shared'
import { BellIcon } from '../../Icons'
import useLogisticBlock from '../../../hooks/useLogisticBlock'

interface Props {
  availableDelivery: boolean
  availablePickUp: boolean
  intl: IntlShape
}

const DeliveryChannel = (props: Props) => {
  const { availableDelivery, availablePickUp, intl } = props

  const { deliveryChannel: deliveryType, setDeliveryChannel: setDeliveryType } =
    usePackagesManager()

  const { logisticsBlocked } = useLogisticBlock()
  const [alertNonEditable, setAlertNonEditable] = useState(false)

  const showNonEditableAlert = () => {
    setAlertNonEditable(true)
    setTimeout(() => {
      setAlertNonEditable(false)
    }, 10000)
  }

  return (
    <div>
      <div>
        <div
          className={
            availablePickUp && availableDelivery
              ? styles.deliveryChannelContainer
              : styles.oneOptionDelivery
          }
        >
          {availableDelivery && (
            <div
              className={styles.container}
              onClick={() => {
                if (logisticsBlocked) {
                  showNonEditableAlert()

                  return
                }

                availableDelivery ? setDeliveryType('delivery') : ''
              }}
            >
              <div className={styles.iconContainer}>
                <input
                  checked={deliveryType === 'delivery'}
                  disabled={logisticsBlocked}
                  type="radio"
                />
              </div>
              <p className={deliveryType === 'delivery' ? global.enphasis : ''}>
                {intl.formatMessage({
                  id: 'store/checkoutless.logistics.delivery',
                })}
              </p>
            </div>
          )}
          {!logisticsBlocked && availablePickUp && (
            <div
              className={styles.container}
              onClick={() => {
                setDeliveryType('pickUp')
              }}
            >
              <div className={styles.iconContainer}>
                <input
                  checked={deliveryType === 'pickUp'}
                  disabled={logisticsBlocked}
                  type="radio"
                />
              </div>
              <p
                className={
                  !logisticsBlocked && deliveryType === 'pickUp'
                    ? global.enphasis
                    : ''
                }
              >
                {intl.formatMessage({
                  id: 'store/checkoutless.logistics.pickUp',
                })}
              </p>
            </div>
          )}
        </div>
      </div>
      {alertNonEditable && (
        <div className={global.floatAlert}>
          <Alert
            type="warning"
            text="store/checkoutless.summary.nonEditableDelivery"
            icon={<BellIcon />}
          />
        </div>
      )}
    </div>
  )
}

export default DeliveryChannel

```


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

[Assistant]
Here's the implementation:

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

import DeliveryChannel from './DeliveryChannel'
import useDeliveryChannel from './useDeliveryChannel'

const DeliveryChannelContainer = () => {
  const deliveryChannel = useDeliveryChannel()

  return (
    <Fragment>
      <DeliveryChannel {...deliveryChannel} />
    </Fragment>
  )
}

export default DeliveryChannelContainer

```


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

[Assistant]
Here's the implementation:

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

// import { LiteRadioButton } from '../../Icons'
import styles from '../logisticsInfo-module.css'
import { usePackagesManager } from '../Packages/usePackagesManager'

interface Props {
  availablePickUp: boolean
  availableDelivery: boolean
  global: any
  intl: IntlShape
}

const LiteDeliveryChannel = (props: Props) => {
  const { availablePickUp, availableDelivery, intl } = props

  const { deliveryChannel: deliveryType, setDeliveryChannel: setDeliveryType } =
    usePackagesManager()

  return (
    <div>
      <div>
        <div
          className={
            availablePickUp && availableDelivery
              ? styles.deliveryChannelContainer
              : styles.oneOptionDelivery
          }
        >
          {availableDelivery && (
            <div className={styles.container}>
              <div className={styles.iconContainer}>
                <input
                  type="radio"
                  value="delivery"
                  checked={deliveryType === 'delivery'}
                  className={styles.inputClasses}
                  onClick={() => {
                    availableDelivery ? setDeliveryType('delivery') : ''
                  }}
                />
              </div>
              <p>
                {intl.formatMessage({
                  id: 'store/checkoutless.logistics.delivery',
                })}
              </p>
            </div>
          )}
          {availablePickUp && (
            <div className={styles.container}>
              <div className={styles.iconContainer}>
                <input
                  type="radio"
                  value="pickUp"
                  checked={deliveryType === 'pickUp'}
                  className={styles.inputClasses}
                  onClick={() => {
                    setDeliveryType('pickUp')
                  }}
                />
              </div>
              <p>
                {intl.formatMessage({
                  id: 'store/checkoutless.logistics.pickUp',
                })}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default LiteDeliveryChannel

```


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

[Assistant]
Here's the implementation:

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

import { Select } from '../../shared'
import type { SlaSimulation } from '../../../interfaces/simulation'

interface Props {
  deliveryDate: any
  deliveryTime: any
  formatedEstimateDate: any
  formatedEstimateTime: any
  numOfItemsToShow: number
  selectedSla: SlaSimulation
  selectIconCalendar: () => JSX.Element
  selectIconClock: () => JSX.Element
}

const ScheduleDelivery = (props: Props) => {
  const {
    deliveryDate,
    deliveryTime,
    formatedEstimateDate,
    formatedEstimateTime,
    numOfItemsToShow,
    selectedSla,
    selectIconCalendar,
    selectIconClock,
  } = props

  useEffect(() => {
    if (selectedSla?.availableDeliveryWindow.length > 0) return
    deliveryDate.reset()
    deliveryTime.reset()
  }, [selectedSla])

  return (
    <Fragment>
      {selectedSla?.availableDeliveryWindow.length > 0 && (
        <Fragment>
          <Select
            options={formatedEstimateDate}
            placeholder="store/checkoutless.logistics.date"
            icon={selectIconCalendar()}
            numOfItemsToShow={numOfItemsToShow}
            {...deliveryDate}
          />
          <Select
            options={formatedEstimateTime}
            placeholder="store/checkoutless.logistics.date"
            numOfItemsToShow={numOfItemsToShow}
            icon={selectIconClock()}
            {...deliveryTime}
          />
        </Fragment>
      )}
    </Fragment>
  )
}

export default ScheduleDelivery

```


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

[Assistant]
Here's the implementation:

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

import { Clock, Calendar } from '../../Icons'
import { formatter, isMobile as validateIsMobile } from '../../../utils'
import { useSelectValue } from '../../../hooks/useSelectValue'
import global from '../../../myCheckout-styles.module.css'
import { usePackagesManager } from '../Packages/usePackagesManager'

const fmtDay = new Intl.DateTimeFormat('es-CO', {
  weekday: 'long',
  day: '2-digit',
  month: 'short',
})

const fmtTime = new Intl.DateTimeFormat('es-CO', {
  hour12: true,
  hour: 'numeric',
  minute: 'numeric',
})

const useScheduleDelivery = () => {
  const { packageManager, setPackageManager, deliveryChannel } =
    usePackagesManager()

  const [dateOptions, setDateOptions] = useState({})

  const [formatedEstimateDate, setFormatedEstimateDate] = useState([
    {
      label: '',
      value: '',
    },
  ])

  const isMobile = validateIsMobile()
  const numOfItemsToShow = useMemo(() => (isMobile ? 2 : 4), [isMobile])

  const [formatedEstimateTime, setFormatedEstimateTime] = useState([
    {
      label: 'Seleccione la fecha de entrega',
      value: 'placeholder',
      deliveryWindow: {
        startDateUtc: '',
        endDateUtc: '',
      },
    },
  ])

  const deliveryDate: any = useSelectValue({
    label: 'Fecha de entrega',
    value: 'placeholder',
  })

  const deliveryTime: any = useSelectValue({
    label: 'Hora de entrega',
    value: 'placeholder',
  })

  const deliveryWindows = useMemo(
    () =>
      packageManager[deliveryChannel].selectedSla?.availableDeliveryWindow.map(
        (option) => {
          const startDate = new Date(option.startDateUtc.split('+')[0])
          const endDate = new Date(option.endDateUtc.split('+')[0])

          const day = `${fmtDay.format(startDate)}`
          const timeRange = `${fmtTime.format(startDate)} - ${fmtTime.format(
            endDate
          )}`

          const price = formatter.format(option.price / 100)

          return {
            day,
            timeRange,
            price,
            deliveryWindow: option,
          }
        }
      ) || [],
    [packageManager]
  )

  useEffect(() => {
    if (packageManager[deliveryChannel].selectedSla.deliveryWindow) {
      const selectedDeliveryWindow = deliveryWindows.find(
        (dw) =>
          dw.deliveryWindow.startDateUtc ===
            packageManager[deliveryChannel].selectedSla.deliveryWindow
              .startDateUtc &&
          dw.deliveryWindow.endDateUtc ===
            packageManager[deliveryChannel].selectedSla.deliveryWindow
              .endDateUtc
      )

      if (selectedDeliveryWindow) {
        deliveryDate.setValue({
          label: selectedDeliveryWindow.day,
          value: selectedDeliveryWindow.day,
        })
      }
    }
  }, [])

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

    for (const deliveryWindow of deliveryWindows) {
      const keys = Object.keys(deliveryWindowsGroupByDate)

      if (keys.includes(deliveryWindow.day)) {
        deliveryWindowsGroupByDate[deliveryWindow.day].push(deliveryWindow)
      } else {
        deliveryWindowsGroupByDate[deliveryWindow.day] = [deliveryWindow]
      }
    }

    setDateOptions(deliveryWindowsGroupByDate)

    const dates = Object.keys(deliveryWindowsGroupByDate)

    setFormatedEstimateDate(
      dates.map((date) => {
        return {
          label: date,
          value: date,
        }
      })
    )

    // TODO: Revisar como afecta esta logica
    // if (selectedSla?.availableDeliveryWindows.length < 1) {
    //   setDeliveryWindow({
    //     startDateUtc: '',
    //     endDateUtc: '',
    //   })
    //   setScheduleDelivery({
    //     day: '',
    //     timeRange: '',
    //   })
    //   setDisabled(false)
    // } else if (
    //   deliveryDate.value.value === 'placeholder' ||
    //   deliveryTime.value.value === 'placeholder'
    // ) {
    //   setDisabled(true)
    // }
  }, [packageManager])

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (deliveryDate?.value?.value !== 'placeholder') {
      if (packageManager[deliveryChannel].selectedSla.deliveryWindow) {
        const selectedDeliveryWindow = deliveryWindows.find(
          (dw) =>
            dw.deliveryWindow.startDateUtc ===
              packageManager[deliveryChannel].selectedSla.deliveryWindow
                .startDateUtc &&
            dw.deliveryWindow.endDateUtc ===
              packageManager[deliveryChannel].selectedSla.deliveryWindow
                .endDateUtc &&
            dw.day === deliveryDate?.value?.value
        )

        if (selectedDeliveryWindow) {
          deliveryTime.setValue({
            label: selectedDeliveryWindow.timeRange,
            value: selectedDeliveryWindow.timeRange,
          })
        } else {
          deliveryTime.setValue({
            label: 'Hora de entrega',
            value: 'placeholder',
          })
        }
      }

      setFormatedEstimateTime(
        dateOptions[deliveryDate?.value?.value]?.map((option: any) => {
          return {
            label: `${option.timeRange} (${option.price})`,
            value: option.timeRange,
            deliveryWindow: option.deliveryWindow,
          }
        })
      )

      setPackageManager({
        ...packageManager,
        [deliveryChannel]: {
          ...packageManager[deliveryChannel],
          selectedSla: {
            ...packageManager[deliveryChannel].selectedSla,
            deliveryWindow: {
              startDateUtc: '',
              endDateUtc: '',
            },
          },
        },
      })
    }
  }, [deliveryDate?.value?.value])

  useEffect(() => {
    if (
      !deliveryTime?.value?.value ||
      deliveryTime?.value?.value === 'placeholder'
    ) {
      return
    }

    const deliveryWindowLabel = formatedEstimateTime?.find(
      (option) => option.value === deliveryTime?.value?.value
    )

    const deliveryWindow = deliveryWindowLabel?.deliveryWindow

    setPackageManager({
      ...packageManager,
      [deliveryChannel]: {
        ...packageManager[deliveryChannel],
        selectedSla: {
          ...packageManager[deliveryChannel].selectedSla,
          deliveryWindow: {
            startDateUtc: deliveryWindow?.startDateUtc,
            endDateUtc: deliveryWindow?.endDateUtc,
          },
        },
      },
    })
  }, [deliveryTime?.value?.value])

  const selectIconCalendar = () => (
    <Calendar
      fill={
        deliveryDate?.value?.value !== 'placeholder'
          ? global.iconAlternativeSecondary
          : global.iconAlternative
      }
      width={'24'}
      height={'16'}
    />
  )

  const selectIconClock = () => (
    <Clock
      fill={
        deliveryTime?.value?.value !== 'placeholder'
          ? global.iconAlternativeSecondary
          : global.iconAlternative
      }
      width={'24'}
      height={'22'}
    />
  )

  return {
    deliveryDate,
    deliveryTime,
    formatedEstimateDate,
    formatedEstimateTime,
    numOfItemsToShow,
    selectedSla: packageManager[deliveryChannel].selectedSla,
    selectIconCalendar,
    selectIconClock,
  }
}

export default useScheduleDelivery

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import ScheduleDelivery from './ScheduleDelivery'
import useScheduleDelivery from './useScheduleDelivery'

const scheduleDeliveryContainer = () => {
  const scheduleDelivery = useScheduleDelivery()

  return <ScheduleDelivery {...scheduleDelivery} />
}

export default scheduleDeliveryContainer

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Select } from '../../shared'
import ScheduleDelivery from '../ScheduleDelivery/ScheduleDeliveryContainer'
import styles from '../logisticsInfo-module.css'
import type { SlaSimulation } from '../../../interfaces/simulation'
import useLogisticBlock from '../../../hooks/useLogisticBlock'

interface Props {
  selectedSla?: SlaSimulation
  formatedStore: any
  selectIcon: () => JSX.Element
  store: any
}

const PickupInStore = (props: Props) => {
  const { selectedSla, formatedStore, selectIcon, store } = props

  const { logisticsBlocked } = useLogisticBlock()

  return (
    <div className={styles.shippingContainer}>
      <Select
        options={formatedStore}
        placeholder="store/checkoutless.register.city"
        icon={selectIcon()}
        {...store}
        disable={logisticsBlocked}
      />
      {selectedSla && <ScheduleDelivery />}
    </div>
  )
}

export default PickupInStore

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import PickupInStore from './PickupInStore'
import usePickupInStore from './usePickupInStore'

const PickupInStoreContainer = () => {
  const pickupInStore = usePickupInStore()

  return <PickupInStore {...pickupInStore} />
}

export default PickupInStoreContainer

```


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

[Assistant]
Here's the implementation:

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

import { Store } from '../../Icons'
import { formatter } from '../../../utils'
import { useSelectValue } from '../../../hooks/useSelectValue'
import useFormatMessage from '../../../i18n/useFormatMessage'
import global from '../../../myCheckout-styles.module.css'
import { usePackagesManager } from '../Packages/usePackagesManager'

const usePickupInStore = () => {
  const { packageManager, setPackageManager } = usePackagesManager()

  const [formatedStore, setFormatedStore] = useState([
    {
      label: '',
      value: '',
    },
  ])

  const store: any = useSelectValue({
    label: useFormatMessage('store/checkoutless.logistics.chooseStore'),
    value: 'placeholder',
  })

  useEffect(() => {
    setFormatedStore(
      packageManager.pickUp.availableSlas.map((sla) => {
        if (packageManager.pickUp.selectedSla.id === sla.id) {
          store.setValue({
            label: `${sla.pickupStoreInfo?.friendlyName} ${sla.pickupStoreInfo?.address?.street}`,
            value: sla.id,
          })
        }

        const price = formatter.format(sla.price)

        return {
          label: `${sla.pickupStoreInfo?.friendlyName} ${sla.pickupStoreInfo?.address?.street} - (${price})`,
          value: sla.id,
        }
      })
    )
  }, [packageManager.pickUp])

  useEffect(() => {
    if (
      store.value.value !== 'placeholder' &&
      store.value.value !== packageManager.pickUp.selectedSla.id
    ) {
      setPackageManager({
        ...packageManager,
        pickUp: {
          ...packageManager.pickUp,
          selectedSla: packageManager.pickUp.availableSlas.find(
            (sla) => sla.id === store.value.value
          ),
        },
      })
    }
  }, [store.value.value])

  const selectIcon = () => {
    return (
      <Store
        width={22}
        height={22}
        fill={
          packageManager.pickUp.selectedSla
            ? global.iconPrimary
            : global.iconTerciary
        }
      />
    )
  }

  return {
    formatedStore,
    selectIcon,
    store,
    selectedSla: packageManager.pickUp.selectedSla,
  }
}

export default usePickupInStore

```


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

[Assistant]
Here's the implementation:

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

import type { ItemMC } from '../../../interfaces/orderForm'
import type {
  LogisticInfoSimulation,
  SlaSimulation,
} from '../../../interfaces/simulation'

export const PackagesManagerContext = React.createContext<PackageContext>({
  packageManager: {
    delivery: {
      selectedSla: null,
      addressId: '',
      availableSlas: [],
      currentItems: [],
      remainingItems: [],
    },
    pickUp: {
      selectedSla: null,
      addressId: '',
      availableSlas: [],
      currentItems: [],
      remainingItems: [],
    },
  },
  handleContinue: null,
  actualItems: [],
  packageNumber: 0,
  deliveryChannel: 'delivery',
  setDeliveryChannel: null,
  setPackageManager: null,
  disable: true,
})

export interface PackageManagerOptions {
  selectedSla: SlaSimulation
  addressId: string
  availableSlas: SlaSimulation[]
  availableSlasId?: string[]
  currentItems: ItemMC[]
  currentIndexes?: number[]
  remainingItems: Array<{
    item: ItemMC
    logisticInfo: LogisticInfoSimulation
  }>
}

export interface PackageManager {
  delivery: PackageManagerOptions
  pickUp: PackageManagerOptions
}

export interface PackageContext {
  handleContinue: (selectedLogistic: PackageManagerOptions) => void
  packageManager: PackageManager
  actualItems: ItemMC[]
  packageNumber: number
  deliveryChannel: 'delivery' | 'pickUp'
  setDeliveryChannel: React.Dispatch<
    React.SetStateAction<'delivery' | 'pickUp'>
  >
  setPackageManager: React.Dispatch<React.SetStateAction<PackageManager>>
  disable: boolean
}

export const usePackagesManager = () => {
  return useContext(PackagesManagerContext)
}

```


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

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-loop-func */
import React from 'react'

import Packages from './Packages'
import { usePackages } from './usePackagesNew'
import { PackagesManagerContext } from './usePackagesManager'

const PackagesContainer = () => {
  const packages = usePackages()

  return (
    <PackagesManagerContext.Provider
      value={{
        packageManager: packages.packageManager,
        handleContinue: packages.handleContinue,
        actualItems: packages.actualItems,
        packageNumber: packages.packageNumber,
        deliveryChannel: packages.deliveryChannel,
        setDeliveryChannel: packages.setDeliveryChannel,
        setPackageManager: packages.setPackageManager,
        disable: packages.disable,
      }}
    >
      <Packages global={packages.global} isEdit={packages.isEdit} />
    </PackagesManagerContext.Provider>
  )
}

export default PackagesContainer

```


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

[Assistant]
Here's the implementation:

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

import type { Sla } from '../../../interfaces'
import { arrayEquals, mergeArrays } from '../../../utils'
import {
  useUserData,
  useUserDataDispatch,
} from '../../../contexts/UserDataProvider'
import { selectSettings } from '../../../contexts/global-context/reducers/uiSettingsSlice'
import {
  setNextUserRegistrationSections,
  setPrevStep,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { useActionsDispatch } from '../../../contexts/ActionsProviderV2'
import { FillShippingTypeDataEvent } from '../../../events'

const usePackages = () => {
  const { items, slas, logisticsInfo, changeLogistics, isNew, isEdit } =
    useUserData()

  const dispatchGlobal = useDispatch()
  const dispatchUserData = useUserDataDispatch()
  const dispatchActions = useActionsDispatch()
  const [deliveryType, setDeliveryType] = useState('')
  const [disabled, setDisabled] = useState(false)
  const [itemsUsed, setItemsUsed] = useState([])

  const { hasGoogleAnalytics } = useSelector(selectSettings)

  const [actualPackage, setActualPackage] = useState({
    imgUrl: [],
    delivery: [],
    pickup: [],
    itemsIndex: [],
  })

  const [infoPackages, setInfoPackages] = useState({
    packages: {},
    totalPackages: 0,
    step: 0,
    packageKeys: [],
  })

  const [selectedLogistic, setSelectedLogistic] = useState({
    selectedSla: '',
    selectedDeliveryChannel: '',
  })

  const [deliveryWindow, setDeliveryWindow] = useState({
    startDateUtc: '',
    endDateUtc: '',
  })

  const [scheduleDelivery, setScheduleDelivery] = useState({
    day: '',
    timeRange: '',
  })

  useEffect(() => {
    dispatchActions({
      type: 'SET_IS_LOADING_CVV_FIELD',
      args: false,
    })
  }, [])

  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 handleClick = () => {
    let formatLogistics = [
      {
        shippingPackage: infoPackages.step,
        selectedSla: selectedLogistic.selectedSla,
        selectedDeliveryChannel: selectedLogistic.selectedDeliveryChannel,
      },
    ]

    let actualLogistics = actualPackage.itemsIndex?.map((info) => {
      return {
        itemIndex: info,
        selectedSla: selectedLogistic.selectedSla,
        selectedDeliveryChannel: selectedLogistic.selectedDeliveryChannel,
      }
    })

    if (deliveryWindow.startDateUtc && deliveryWindow.startDateUtc !== '') {
      actualLogistics = actualLogistics.map((info) => {
        return { ...info, deliveryWindow }
      })
      formatLogistics = formatLogistics.map((info) => {
        return { ...info, deliveryWindow, scheduleDelivery }
      })
    }

    const allLogistics = mergeArrays(
      logisticsInfo,
      actualLogistics,
      'itemIndex'
    )

    const allChangeLogistics = mergeArrays(
      changeLogistics,
      formatLogistics,
      'shippingPackage'
    )

    dispatchUserData({
      type: 'SET_SLAS',
      args: {
        ...slas,
        packages: allChangeLogistics,
        dontUpdateLogistics: true,
      },
    })
    dispatchUserData({
      type: 'SET_LOGISTICS_INFO',
      args: allLogistics,
    })
    dispatchUserData({
      type: 'SET_CHANGE_LOGISTICS',
      args: allChangeLogistics,
    })
    setDeliveryWindow({
      startDateUtc: '',
      endDateUtc: '',
    })

    if (items.length === itemsUsed.length) {
      if (isNew || isEdit) {
        dispatchGlobal(setNextUserRegistrationSections())
      } else {
        dispatchGlobal(setPrevStep())
      }
    } else {
      setInfoPackages({ ...infoPackages, step: infoPackages.step + 1 })
    }

    // TODO: Faltaria mover el envio de analytics al nuevo hook
    FillShippingTypeDataEvent({
      option: selectedLogistic.selectedSla,
      hasGoogleAnalytics,
    })
  }

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

    const packageKeys = Object.keys(packages)

    setInfoPackages({
      packages,
      totalPackages: packageKeys?.length,
      step: 1,
      packageKeys,
    })
  }, [])

  useEffect(() => {
    if (!logisticsInfo || logisticsInfo?.length <= 0) return
    if (infoPackages.step === 0) return
    if (items.length === itemsUsed.length) return
    const temporalPackages = infoPackages
    const index = `${temporalPackages?.step - 1}`
    const packages = temporalPackages?.packages[index]
    let itemsIndex = packages ? packages[0]?.itemIndex : []
    let stepPackage = temporalPackages?.packages[index]

    itemsIndex = itemsIndex.filter((item: any) => !itemsUsed.includes(item))

    while (itemsIndex.length < 1) {
      delete temporalPackages?.packages[index]
      const filteredPackages = Object.values(temporalPackages?.packages)
      const groupFilteredPackages = { ...filteredPackages }

      temporalPackages.packages = groupFilteredPackages
      itemsIndex = groupFilteredPackages[index][0].itemIndex
      stepPackage = groupFilteredPackages[index]
      itemsIndex = itemsIndex.filter(
        (item: number) => !itemsUsed.includes(item)
      )
    }

    if (itemsIndex.length !== stepPackage[0].itemIndex.length) {
      // Si cambia el número de items para el paquete se recalculan todos los precios
      stepPackage.forEach((pack: Sla) => {
        const newPriceByItem = pack.prices.filter((itemIndex) => {
          const item = parseInt(Object.keys(itemIndex)[0], 10)

          return itemsIndex.includes(item)
        })

        const usedPrices = newPriceByItem.map((price) => Object.values(price))
        const mergePrices = [].concat([], ...usedPrices)
        const total = mergePrices.reduce(
          (acc: number, next: number) => acc + next,
          0
        )

        pack.price = total / 100
      })
    }

    setItemsUsed(itemsUsed.concat(itemsIndex))

    setDeliveryType(temporalPackages?.packages[index][0].deliveryChannel)
    const actualDelivery = stepPackage.filter(
      (sla: Sla) => sla.deliveryChannel === 'delivery'
    )

    const actualPickup = stepPackage.filter(
      (sla: Sla) => sla.deliveryChannel === 'pickup-in-point'
    )

    const imgUrl: string[] = []

    items.forEach((item, i) => {
      if (itemsIndex.includes(i)) {
        imgUrl.push(item.imageUrl)
      }
    })
    setActualPackage({
      imgUrl,
      delivery: actualDelivery,
      pickup: actualPickup,
      itemsIndex,
    })
    // eslint-disable-next-line vtex/prefer-early-return
    if (logisticsInfo?.length > 0) {
      const selectedSlaPackage = logisticsInfo.find((sla) => {
        const indice = itemsIndex.find((item: number) => {
          return sla.itemIndex === item
        })

        return typeof indice === 'number'
      })

      setDeliveryType(selectedSlaPackage?.selectedDeliveryChannel)

      setSelectedLogistic({
        selectedSla: selectedSlaPackage?.selectedSla,
        selectedDeliveryChannel: selectedSlaPackage?.selectedDeliveryChannel,
      })
    }

    setInfoPackages(temporalPackages)
  }, [infoPackages.step])

  return {
    infoPackages,
    deliveryType,
    actualPackage,
    setDeliveryType,
    selectedLogistic,
    setSelectedLogistic,
    setDeliveryWindow,
    setScheduleDelivery,
    setDisabled,
    handleClick,
    disabled,
    isEdit,
  }
}

export default usePackages

```