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

[Assistant]
Here's the implementation:

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

import EmailForm from '../EmailForm/EmailFormContainer'
import UserValidate from '../UserValidate'
import ViewValidate from '../ViewValidate'
import OrderPlaced from '../OrderPlaced'
import type { ItemToRemove, ResponseValidateItem } from '../../interfaces'
import { selectStep } from '../../contexts/global-context/reducers/checkoutFormSlice'
import SkuSelectorContainer from '../SkuSelector/SkuSelectorContainer'
import { selectItems as selectItemsSimulation } from '../../contexts/global-context/reducers/simulationSlice'
import {
  selectItems as selectItemsOrderForm,
  selectPackages,
} from '../../contexts/global-context/reducers/orderFormDataSlice'
import RemoveUnavailableProducts from '../RemoveUnavailableProducts/RemoveUnavailableProductsContainer'
import { existUnavailableProducts } from '../../utils/simulation'

interface Props {
  validateItems?: () => ResponseValidateItem[] | []
}

export const ModalSteps = ({ validateItems }: Props) => {
  const step = useSelector(selectStep)
  const itemsSimulation = useSelector(selectItemsSimulation)
  const itemsOrderForm = useSelector(selectItemsOrderForm)
  const [loading, setLoading] = useState(false)
  const [unavailableItems, setUnavailableItems] = useState<ItemToRemove[] | []>(
    []
  )

  const packages = useSelector(selectPackages)
  const existMultiplesPackages =
    packages?.length > 1 &&
    unavailableItems.length === 0 &&
    !loading &&
    !existUnavailableProducts(itemsSimulation)

  const getProductsNotMyCheckout = () => {
    if (!validateItems) return []

    const dataValidateItems = validateItems() || []
    const itemToRemove: ItemToRemove[] = []

    if (dataValidateItems.length > 0) {
      dataValidateItems.forEach((validateItem) => {
        const foundItem = itemsOrderForm.find(
          (item) => item.id === validateItem.id
        )

        if (foundItem?.id) {
          itemToRemove.push({
            quantity: 0,
            uniqueId: foundItem.uniqueId,
            ...validateItem,
          })
        }
      })
    }

    return itemToRemove
  }

  useEffect(() => {
    if (loading) return
    const productsNotMyCheckout = getProductsNotMyCheckout()
    let unavailableProducts: ItemToRemove[] = []

    if (itemsOrderForm?.length > 0) {
      unavailableProducts = itemsSimulation
        ?.filter(
          (item) =>
            item.availability !== 'available' &&
            item.availability !== 'cannotBeDelivered'
        )
        .map((item) => {
          const foundItem = itemsOrderForm.find(
            (itemOrderForm) => itemOrderForm.id === item.id
          )

          return {
            uniqueId: foundItem?.uniqueId,
            imageUrl: foundItem?.imageUrl,
            quantity: 0,
          }
        })
    }

    setUnavailableItems([...productsNotMyCheckout, ...unavailableProducts])
  }, [itemsSimulation, itemsOrderForm, loading])

  if (unavailableItems?.length > 0 || existMultiplesPackages) {
    return (
      <RemoveUnavailableProducts
        itemsToRemove={unavailableItems}
        onClick={() => {
          setLoading(true)
          setTimeout(() => setLoading(false), 3000)
        }}
        screenToGoToCheckout={
          existMultiplesPackages
            ? 'multiplesPackages'
            : 'removeUnavailableProducts'
        }
      />
    )
  }

  switch (step) {
    case 0:
      return <SkuSelectorContainer />

    case 1:
      return <EmailForm />

    case 2:
      return <UserValidate />

    case 3:
      return <ViewValidate />

    case 4:
      return <ViewValidate />

    case 5:
      return <OrderPlaced />

    default: {
      return null
    }
  }
}

```


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

[User] Show me the implementation of mycheckout-sdk/src/components/Modal/modal.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
.modalContainer {
  position: fixed;
  background-color: var(--white-color);
  box-shadow: 2px -2px 6px #00000029;
  z-index: 1000000000000;
  justify-content: center;
  padding-top: 0;
  overflow-y: auto;
  padding: 0px 12px 11px 12px;
  width: 100%;
  bottom: 0;
  left: 0;
  max-height: 40%;
}

.modalContainer .modalBodyWrapper {
  margin-top: 40px;
  position: relative;
}

.modalContainer .modalFull {
  height: 100%;
}

.modalContainer .modalAuto {
  height: auto;
}

@media screen and (min-width: 992px) {
  .modalContainer {
    padding: 0;
    width: 44%;
    top: 0;
    right: 0;
    height: 100%;
    max-height: 100%;
    bottom: initial;
    left: initial;
    border-radius: 8px 0px 0px 0px;
  }

  .modalContainer::-webkit-scrollbar {
    width: 10px;
    background-color: #f8f8f8;
    height: 10px;
  }

  .modalContainer::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #e8e8e8;
  }

  .modalContainer .modalBodyWrapper {
    padding: 20px 24px 0 24px;
    height: 100%;
    max-height: calc(94% - 150px);
    overflow-y: auto;
  }

  .modalContainer .modalBodyWrapper[data-showing-buy="false"] {
    height: 100%;
    max-height: 94%;
  }
}

@media screen and (min-width: 1100px) {
  .modalContainer {
    width: 40%;
  }
}

@media screen and (min-width: 1200px) {
  .modalContainer {
    width: 36%;
  }
}

@media screen and (min-width: 1200px) {
  .modalContainer {
    width: 33%;
  }
}

@media screen and (min-width: 1400px) {
  .modalContainer {
    width: 30%;
  }
}
```


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

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

[Assistant]
Here's the implementation:

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

import Portal from '../Portal'
import { Alert } from '../shared'
import { ModalSteps } from './ModalSteps'
import FloatingButton from '../FloatingButton'
import Header from '../Header/HeaderContainer'
import type { ResponseValidateItem } from '../../interfaces'
import styles from './modal.css'

interface Props {
  errorOrder: string
  isFullscreen: boolean
  isModalOpen: boolean
  showFloatButton: boolean
  showingBuyButton: boolean
  clearOrderFormProfile: () => void
  validateItems?: () => ResponseValidateItem[] | []
}

export const Modal = ({
  errorOrder,
  isFullscreen,
  isModalOpen,
  showFloatButton,
  showingBuyButton,
  clearOrderFormProfile,
  validateItems,
}: Props) => {
  return (
    <Fragment>
      {isModalOpen && (
        <Portal>
          <div
            id="kuikpay-modal"
            className={`${styles.modalContainer} ${
              isFullscreen ? styles.modalFull : styles.modalAuto
            }`}
          >
            <Header clearOrderFormProfile={clearOrderFormProfile} />
            <div
              className={styles.modalBodyWrapper}
              data-showing-buy={showingBuyButton}
            >
              {errorOrder && (
                <Alert
                  duration={20}
                  enableAutoClose={true}
                  text="store/checkoutless.register.checkoutErrorTitle"
                  description="store/checkoutless.register.checkoutError"
                  type="relevant"
                  className="containerRelevant"
                  classNameText="textRelevant"
                  classNameDescription="textRelevant"
                />
              )}

              <ModalSteps validateItems={validateItems} />
            </div>
          </div>
        </Portal>
      )}
      {showFloatButton && (
        <Portal>
          <div className={styles.modal}>
            <FloatingButton />
          </div>
        </Portal>
      )}
    </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/Modal/ModalContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Modal } from './Modal'
import { useModal } from './useModal'
import type { InitialProps } from '../../interfaces'

const ModalContainer = (props: InitialProps) => {
  const modal = useModal(props)

  return <Modal {...modal} {...props} />
}

export default ModalContainer

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import AccessKeyForm from './AccessKeyForm'
import useAccessKeyForm from './useAccessKeyForm'

const AccessKeyFormContainer = () => {
  const accessKeyFormProps = useAccessKeyForm()

  return <AccessKeyForm {...accessKeyFormProps} />
}

export default AccessKeyFormContainer

```


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

[Assistant]
Here's the implementation:

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

import {
  selectSection,
  setPrevStep,
  setSameSection,
} from '../../contexts/global-context/reducers/checkoutFormSlice'
import {
  selectIsMobile,
  selectSettings,
} from '../../contexts/global-context/reducers/uiSettingsSlice'
import { LOGIN, VERIFY_CODE } from '../../graphql/queries'
import {
  useActionsDispatch,
  useActions,
} from '../../contexts/ActionsProviderV2'
import {
  selectAddressStore,
  selectProfile,
  setIsLoggedIn,
  setUserInfo,
} from '../../contexts/global-context/reducers/orderFormDataSlice'
import { userInfoMapper } from '../../utils/dataMapper'
import { useCreateAddressExternal } from '../../hooks/useCreateAddressExternal'

const TIME_RESEND_EMAIL = 0
let TIME_BLOCKED_EMAIL = 60

const useAccessKeyForm = () => {
  const {
    secondAfterEmail: { second, intervalSetSecond: interval },
  } = useActions()

  const intl = useIntl()
  const section = useSelector(selectSection)
  const addressAlternative = useSelector(selectAddressStore)

  const [value, setValue] = useState(['', '', '', '', '', ''])
  const [ref] = useState([null, null, null, null, null, null])
  const [error, setError] = useState(false)
  const inputAuto = useRef<any>(null)
  const [canSendCode, setcanSendCode] = useState(second === TIME_BLOCKED_EMAIL)
  const [showInputsCode, setShowInputsCode] = useState(true)

  const dispatchActions = useActionsDispatch()
  const { isLiteVersion } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)
  const { email } = useSelector(selectProfile)
  const dispatchGlobal = useDispatch()
  const [completedValue, setCompletedValue] = useState('')
  const { verifyAndCreateAlternativeAddress } = useCreateAddressExternal()

  const isLite = isLiteVersion && isMobile

  const [verifyCode] = useLazyQuery(VERIFY_CODE, {
    onCompleted: async (data) => {
      if (!data) return setError(true)
      const { verifyCode: userData } = data

      let persistedData = JSON.parse(localStorage.getItem('checkoutless_data'))

      persistedData
        ? (persistedData.authorizedEmail = userData.data.email)
        : (persistedData = {
            email: userData.data.email,
            authorizedEmail: userData.data.email,
          })

      localStorage.setItem('checkoutless_data', JSON.stringify(persistedData))
      localStorage.setItem('checkoutless_attempts', '0')

      const addressAlternativeWhitPostalCode =
        await verifyAndCreateAlternativeAddress(userData, addressAlternative)

      dispatchGlobal(
        setUserInfo(
          userInfoMapper(userData.data, addressAlternativeWhitPostalCode)
        )
      )

      dispatchGlobal(setIsLoggedIn(true))

      if (section === 'registerFormProfile' || section === 'return') {
        dispatchGlobal(setPrevStep())
      }

      dispatchGlobal(setSameSection(section))
    },
    onError: () => {
      setError(true)
    },
  })

  const clearCountSecond = () => {
    clearInterval(interval)
    dispatchActions({
      type: 'SET_RESTART',
    })
  }

  const initCountSecond = () => {
    setcanSendCode(false)
    clearInterval(interval)
    const newInterval = setInterval(() => {
      dispatchActions({
        type: 'SET_SECOND',
      })
    }, 1000)

    dispatchActions({
      type: 'SET_INTERVAL_SECOND',
      args: newInterval,
    })
  }

  const [login] = useLazyQuery(LOGIN, {
    fetchPolicy: 'cache-and-network',
    onCompleted: () => {
      setValue(['', '', '', '', '', ''])
      setError(false)
      localStorage.setItem('checkoutless_attempts', '0')
    },
    onError: (e) => {
      const attempts =
        parseInt(localStorage.getItem('checkoutless_attempts'), 10) || 0

      if (attempts >= 3) {
        TIME_BLOCKED_EMAIL = 600
        dispatchActions({
          type: 'SET_SECOND_DIRECT',
          args: TIME_BLOCKED_EMAIL,
        })
      }

      setShowInputsCode(false)
      initCountSecond()
      console.error('error: ', e)
    },
  })

  const onChangeValue = (newValue: string, index: number) => {
    if (newValue.length === 6 && index === 0) {
      setValue(newValue.split(''))
      ref[ref.length - 1].focus()
    }

    if (newValue.match(/(\d|^(?![\s\S]))/g) && newValue.length <= 2) {
      setValue([
        ...value.slice(0, index),
        newValue.slice(-1),
        ...value.slice(index + 1),
      ])
      if (newValue.length > 0 && ref[index + 1]) {
        ref[index + 1].focus()
      }
    }
  }

  const onRemove = (key: string, index: number) => {
    if (key === 'Backspace') {
      ref[index - 1].focus()
    }
  }

  const handleClick = () => {
    login({
      variables: {
        email,
      },
    })
    initCountSecond()
    if (error) setError(false)
    if (!showInputsCode) setShowInputsCode(true)
  }

  const updateAttempts = () => {
    let attempts =
      parseInt(localStorage.getItem('checkoutless_attempts'), 10) || 0

    localStorage.setItem('checkoutless_attempts', JSON.stringify(++attempts))
  }

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

    if (second === TIME_BLOCKED_EMAIL || second < TIME_RESEND_EMAIL) {
      if (!showInputsCode) setShowInputsCode(true)

      login({
        variables: {
          email,
        },
      })
      initCountSecond()
      localStorage.setItem(
        'checkoutless_last_notify',
        JSON.stringify({ email })
      )
    } else {
      setShowInputsCode(false)
    }
  }, [])

  useEffect(() => {
    if (!value.includes('')) {
      verifyCode({
        variables: {
          email,
          code: value.reduce((acc: string, next: string) => acc + next),
        },
      })
      updateAttempts()
    }
  }, [value])

  useEffect(() => {
    if (!completedValue) return

    setValue(completedValue.split(''))
  }, [completedValue])

  useEffect(() => {
    if (!('OTPCredential' in window)) return

    const ac = new AbortController()

    const o: any = {
      otp: { transport: ['sms'] },
      signal: ac.signal,
    }

    navigator.credentials
      .get(o)

      .then((otp: any) => {
        inputAuto.current.value = otp.code
        setCompletedValue(otp.code)
        console.warn(`otp`, otp)
      })
      .catch((err) => {
        console.error(err)
      })
  }, [])

  useEffect(() => {
    const validateSeconds = second <= TIME_RESEND_EMAIL

    TIME_BLOCKED_EMAIL = 60
    if (validateSeconds) {
      clearCountSecond()
    }

    setcanSendCode(validateSeconds || second === TIME_BLOCKED_EMAIL)
  }, [second])

  return {
    error,
    handleClick,
    intl,
    inputAuto,
    isLite,
    onChangeValue,
    onRemove,
    refInput: ref,
    setCompletedValue,
    value,
    canSendCode,
    showInputsCode,
    second,
  }
}

export default useAccessKeyForm

```


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

[Assistant]
Here's the implementation:

```tsx
import type { Dispatch, MutableRefObject, SetStateAction } from 'react'
import React from 'react'
import type { IntlShape } from 'react-intl'

import useFormatMessage from '../../i18n/useFormatMessage'
import { Error } from '../Icons'
import { MessageResendAwait } from './Messages/MessageResendAwait'
import { MessageAwaitFullPage } from './Messages/MessageAwaitFullPage'
import global from '../../myCheckout-styles.module.css'
import styles from './accessKeyForm.css'

interface Props {
  error: boolean
  handleClick: () => void
  intl: IntlShape
  inputAuto: MutableRefObject<any>
  isLite: boolean
  onChangeValue: (newValue: string, index: number) => void
  onRemove: (key: string, index: number) => void
  refInput: any[]
  setCompletedValue: Dispatch<SetStateAction<string>>
  value: string[]
  canSendCode: boolean
  showInputsCode: boolean
  second: number
}

const AccessKeyForm = (props: Props) => {
  const {
    error,
    handleClick,
    intl,
    inputAuto,
    isLite,
    onChangeValue,
    onRemove,
    refInput,
    setCompletedValue,
    value,
    canSendCode,
    showInputsCode,
    second,
  } = props

  return (
    <div className={styles.accessKeyContainer}>
      {showInputsCode ? (
        <div className={styles.accessKeyContent}>
          {error && (
            <div className={`${styles.accessKeyIconContent}`}>
              <Error className={global.inMobile} width={27} height={27} />
            </div>
          )}
          <div className={styles.accessKeyTitleContent}>
            {!error && (
              <p className={styles.accessKeyTitle}>
                {intl.formatMessage({
                  id: 'store/checkoutless.accessKey.message',
                })}
              </p>
            )}
            {error && (
              <p className={styles.accessKeyTitle}>
                {intl.formatMessage({
                  id: 'store/checkoutless.accessKey.messageError',
                })}
              </p>
            )}
          </div>
          <div style={{ display: 'none' }}>
            <input
              required
              onChange={(e) => setCompletedValue(e.currentTarget.value)}
              maxLength={6}
              ref={inputAuto}
            />
          </div>
          <div className={styles.accessKeyInputContent}>
            <input
              className={`${error && styles.accessKeyError} ${
                styles.accessKeyInput
              }`}
              ref={(input) => {
                refInput[0] = input
              }}
              value={value[0]}
              onChange={({ target }) => onChangeValue(target.value, 0)}
              type="number"
              autoComplete="one-time-code"
            />
            <input
              className={`${error && styles.accessKeyError} ${
                styles.accessKeyInput
              }`}
              ref={(input) => {
                refInput[1] = input
              }}
              value={value[1]}
              onChange={({ target }) => onChangeValue(target.value, 1)}
              onKeyUp={({ key }) => onRemove(key, 1)}
              type="number"
            />
            <input
              className={`${error && styles.accessKeyError} ${
                styles.accessKeyInput
              }`}
              ref={(input) => {
                refInput[2] = input
              }}
              value={value[2]}
              onChange={({ target }) => onChangeValue(target.value, 2)}
              onKeyUp={({ key }) => onRemove(key, 2)}
              type="number"
            />
            <input
              className={`${error && styles.accessKeyError} ${
                styles.accessKeyInput
              }`}
              ref={(input) => {
                refInput[3] = input
              }}
              value={value[3]}
              onChange={({ target }) => onChangeValue(target.value, 3)}
              onKeyUp={({ key }) => onRemove(key, 3)}
              type="number"
            />
            <input
              className={`${error && styles.accessKeyError} ${
                styles.accessKeyInput
              }`}
              ref={(input) => {
                refInput[4] = input
              }}
              value={value[4]}
              onChange={({ target }) => onChangeValue(target.value, 4)}
              onKeyUp={({ key }) => onRemove(key, 4)}
              type="number"
            />
            <input
              className={`${error && styles.accessKeyError} ${
                styles.accessKeyInput
              }`}
              ref={(input) => {
                refInput[5] = input
              }}
              value={value[5]}
              onChange={({ target }) => onChangeValue(target.value, 5)}
              onKeyUp={({ key }) => onRemove(key, 5)}
              type="number"
            />
          </div>
          {!error && (
            <div className={styles.accessKeySendContainer}>
              <MessageResendAwait
                {...{
                  canSendCode,
                  handleClick,
                  isLite,
                  second,
                  message: useFormatMessage(
                    'store/checkoutless.accessKey.question'
                  ),
                }}
              ></MessageResendAwait>
            </div>
          )}
          {error && (
            <MessageResendAwait
              {...{
                canSendCode,
                handleClick,
                isLite,
                second,
                message: useFormatMessage(
                  'store/checkoutless.accessKey.question'
                ),
              }}
            ></MessageResendAwait>
          )}
        </div>
      ) : (
        <MessageAwaitFullPage
          {...{ canSendCode, second, handleClick, isLite }}
        ></MessageAwaitFullPage>
      )}
    </div>
  )
}

export default AccessKeyForm

```


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

[Assistant]
Here's the implementation:

```css
.accessKeyContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}

.accessKeyContainer .accessKeyContent {
  width: 100%;
}

.accessKeyContainer .accessKeyIconContent {
  text-align: center;
  margin-bottom: 16px;
}

.accessKeyContainer .accessKeyIcon {
  height: 44px;
  width: 44px;
}

.accessKeyContainer .accessKeyIconFill {
  fill: var(--success-color);
}

.accessKeyContainer .accessKeyIconStroke {
  stroke: var(--success-color);
}

.accessKeyContainer .accessKeyTitleContent {
  margin-bottom: 40px;
}

.accessKeyContainer .accessKeyTitle {
  text-align: center;
}

.accessKeyContainer .accessKeyInputContent {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}

.accessKeyContainer .accessKeyError {
  border-color: var(--error-color);
}

.accessKeyContainer .accessKeyInput {
  font-weight: var(--text-medium);
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  border-radius: 0;
  width: 30px;
  outline: 0;
  border-width: 0 0 1px;
  text-align: center;
  background-color: transparent;
}

.accessKeyContainer .accessKeyInput::-webkit-inner-spin-button,
.accessKeyContainer .accessKeyInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.accessKeyContainer .accessKeyInput:focus {
  border-color: var(--valid-color);
}

.inputContent .accessKeyInput::placeholder {
  color: transparent;
}

.inputContent .accessKeyInput:not(:placeholder-shown) {
  border-color: var(--valid-color);
}

.accessKeyContainer .accessKeySendContainer {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.accessKeyContainer .accessKeyTitleMessage {
  font-size: 18px;
  text-align: center;
  padding: 0px 15px;
  margin-bottom: 15px;
}

.accessKeyContainer .accessKeyTitleMessageContainerHidden {
  display: none;
}

.accessKeyContainer .accessKeyTextMessage {
  text-align: center;
  font-size: 14px;
  padding: 0px 15px;
  color: var(--primary-color-focus);
  margin-bottom: 15px;
}

.accessKeyContainer .accessKeyMessageContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.accessKeyContainer .accessKeyMessageContainer a {
  font-weight: var(--text-bold);
  cursor: pointer;
}

.accessKeyContainer .accessKeyCountdownSecondsMessage {
  font-size: 14px;
  margin-right: 6px;
}

.accessKeyContainer .accessKeyColorGreen {
  color: var(--primary-color-focus);
  font-size: 14px;
}

@media screen and (min-width: 992px) {
  .accessKeyContainer {
    position: absolute;
    inset: 0;
  }

  .accessKeyContainer .accessKeyContent {
    padding: 0 30px;
  }

  .accessKeyContainer .accessKeyTitleContent {
    display: flex;
    justify-content: center;
    padding: 0px 20px;
    margin-bottom: 80px;
  }

  .accessKeyContainer .accessKeyTitle {
    font-size: 18px;
  }

  .accessKeyContainer .accessKeyMessageContainer a {
    font-size: 16px;
    text-decoration: none !important;
  }

  .accessKeyContainer .accessKeyCountdownSecondsMessage {
    font-size: 16px;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .accessKeyContainer .accessKeyFullPageContainer {
    padding: 0 67px;
  }

  .accessKeyContainer .accessKeyIcon {
    height: 88px;
    width: 88px;
  }

  .accessKeyContainer .accessKeyIconFill {
    fill: var(--alert-color);
  }

  .accessKeyContainer .accessKeyIconStroke {
    stroke: var(--alert-color);
  }

  .accessKeyContainer .accessKeyTextMessage {
    font-size: 16px;
    color: var(--primary-text-color);
  }

  .accessKeyContainer .accessKeyInputContent {
    margin: 26px 20px 50px;
  }

  .accessKeyContainer .accessKeyTitleMessage {
    font-size: 24px;
    padding: 0 80px;
  }
}

```


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

[Assistant]
Here's the implementation:

```css
.removeUnavailableProductsContainer {
  display: flex;
  flex-direction: column;
  margin: 0px 5px 12px 5px;
  padding: 0px 7px 0px 15px;
  border-radius: 2px;
  align-items: center;
  padding-bottom: 12px;
}

.centerContainer {
  height: 100%;
  justify-content: center;
}

.itemsContainer {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 74px));
  gap: 10px;
  justify-content: center;
  align-content: center;
}

.buttonsContainer {
  padding: 10px;
  margin-top: 0px;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.buttonsContainer [class*='buttonContent'] [class*='buttonContainer'] {
  font-size: 16px;
}

.buttonCheckout {
  margin-top: 14px;
  width: 100%;
  background: none;
  border: none;
  text-decoration: underline;
  padding: 1px 0;
  cursor: pointer;
}

@media (min-width: 992px) {
  .itemsContainer {
    margin: 28px 0 0 0;
  }

  .buttonsContainer {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }

  .buttonsContainer [class*='buttonContent'] [class*='buttonContainer'] {
    font-size: 20px;
  }
}

```


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

[Assistant]
Here's the implementation:

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

import styles from './removeUnavailableProducts.css'
import { Alert, Button } from '../shared'
import { MyCheckoutAnimation } from '../Animations'
import globalStyles from '../../myCheckout-styles.module.css'
import type { ItemToRemove } from '../../interfaces'
import type { ScreenToGoToCheckout } from '../../interfaces/StepsAndSections'

interface Props {
  itemsToRemove: ItemToRemove[]
  showAnimation: boolean
  screenToGoToCheckout: ScreenToGoToCheckout
  handleClick: () => void
}

export const RemoveUnavailableProducts = ({
  itemsToRemove,
  showAnimation,
  screenToGoToCheckout,
  handleClick,
}: Props) => {
  return (
    <div
      className={`${styles.removeUnavailableProductsContainer} ${
        showAnimation && styles.centerContainer
      }`}
    >
      {showAnimation ? (
        <MyCheckoutAnimation />
      ) : screenToGoToCheckout === 'removeUnavailableProducts' ? (
        <Fragment>
          <Alert
            className={globalStyles.bold}
            text="store/checkoutless.validateItems.text"
            description="store/checkoutless.validateItems.description"
            type="warning"
            hideOnClick={false}
          />

          <div className={styles.itemsContainer}>
            {itemsToRemove?.map((item: ItemToRemove) => (
              <img width={74} height={74} src={item.imageUrl} alt={item.name} />
            ))}
          </div>

          <div className={styles.buttonsContainer}>
            <Button
              onClick={handleClick}
              value="store/checkoutless.validateItems.deleteAndContinue"
            />

            {/* <input
              className={`${styles.buttonCheckout} ${globalStyles.bold}`}
              onClick={() => window.open('/checkout', '_blank')}
              type="button"
              value={useFormatMessage(
                'store/checkoutless.validateItems.checkout'
              )}
            /> */}
          </div>
        </Fragment>
      ) : (
        <Fragment>
          <Alert
            className={globalStyles.bold}
            text="store/checkoutless.multiplePackages.text"
            description="store/checkoutless.multiplePackages.description"
            type="warning"
            hideOnClick={false}
          />

          <div className={styles.buttonsContainer}>
            <Button
              onClick={() => window.open('/checkout', '_blank')}
              value="store/checkoutless.validateItems.checkout"
            />
          </div>
        </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/RemoveUnavailableProducts/RemoveUnavailableProductsContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import type { ItemToRemove } from '../../interfaces'
import type { ScreenToGoToCheckout } from '../../interfaces/StepsAndSections'
import { RemoveUnavailableProducts } from './RemoveUnavailableProducts'
import { useRemoveUnavaibleProducts } from './useRemoveUnavaibleProducts'

interface Props {
  itemsToRemove: ItemToRemove[]
  screenToGoToCheckout: ScreenToGoToCheckout
  onClick: () => void
}

const RemoveUnavailableProductsContainer = (props: Props) => {
  const removeUnavailableProductsProps = useRemoveUnavaibleProducts(props)

  return <RemoveUnavailableProducts {...removeUnavailableProductsProps} />
}

export default RemoveUnavailableProductsContainer

```


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

[Assistant]
Here's the implementation:

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

import { useActions } from '../../contexts/ActionsProviderV2'
import type { ItemToRemove } from '../../interfaces'
import type { ScreenToGoToCheckout } from '../../interfaces/StepsAndSections'

interface Props {
  itemsToRemove: ItemToRemove[]
  screenToGoToCheckout: ScreenToGoToCheckout
  onClick: () => void
}

export const useRemoveUnavaibleProducts = ({
  itemsToRemove,
  screenToGoToCheckout,
  onClick,
}: Props) => {
  const { updateItems } = useActions()
  const [showAnimation, setShowAnimation] = useState(true)

  const handleClick = () => {
    const itemsWithoutStock = itemsToRemove.map((item: ItemToRemove) => {
      return {
        uniqueId: item.uniqueId,
        quantity: 0,
      }
    })

    updateItems(itemsWithoutStock)
    onClick()
  }

  useEffect(() => {
    setTimeout(() => setShowAnimation(false), 3000)
  }, [])

  return {
    itemsToRemove,
    screenToGoToCheckout,
    showAnimation,
    handleClick,
  }
}

```


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

[Assistant]
Here's the implementation:

```css
.cartCustomerCredit {
  box-shadow: 0px 3px 6px #00000029;
  background: #fff;
  margin: 0 0 20px;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-left: 25px;
  box-sizing: border-box;
  width: calc(100% - 28px);
}

.cartCustomerCreditTitle {
  color: #284859 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.cartCustomerCreditDescription {
  line-height: 20px !important;
  color: #284859 !important;
  text-align: center;
}

.cartCustomerCreditIcon {
  width: 68px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.cartCustomerCredit .cartCustomerCreditDescription {
  font-size: 14px !important;
  max-width: 190px;
}

.cartCustomerCredit .cartCustomerCreditSuccessTitle {
  color: #a1c10c !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.cartCustomerCredit .cartCustomerCreditSuccessApproved {
  font-size: 14px !important;
  text-align: center;
  max-width: 160px;
  margin: 3px auto 0;
}

.cartCustomerCredit .cartCustomerCreditSuccessApproved b {
  font-weight: bold;
  color: #1b998b !important;
}

.cartCustomerCredit .cartCustomerCreditSuccessMessage {
  font-size: 14px !important;
  font-weight: bold;
  color: #284859;
  margin-top: 7px;
}

.cartCustomerCredit .cartCustomerCreditDenyTitle {
  color: #cb4242 !important;
  font-size: 16px !important;
  font-weight: bold;
}

.cartCustomerCredit .cartCustomerCreditDenyMessage {
  font-size: 12px !important;
  color: #284859 !important;
  line-height: 18px;
  text-align: center;
  max-width: 220px;
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useIntl } from 'react-intl'

import type { ICredit } from '../../interfaces'
import { ApprovedCart } from './ApprovedCart'
import { DenyCart } from './DenyCart'
import { VerifyCart } from './VerifyCart'

const CustomerCreditPayment = ({
  credit,
  validateCredit,
}: {
  credit: ICredit
  validateCredit: boolean
}) => {
  const intl = useIntl()

  if (credit?.credit && !validateCredit) {
    return <ApprovedCart intl={intl} credit={credit} />
  }

  if (!credit?.credit && !validateCredit) return <DenyCart intl={intl} />

  return <VerifyCart intl={intl} />
}

export default CustomerCreditPayment

```


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

[Assistant]
Here's the implementation:

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

import { VerifiedCredit } from '../Icons'
import Style from './style.module.css'

export const VerifyCart = ({ intl }: { intl: IntlShape }) => {
  return (
    <div className={Style.cartCustomerCredit}>
      <div className={Style.cartCustomerCreditIcon}>
        <VerifiedCredit />
      </div>
      <div className={Style.cartCustomerCreditTitle}>
        {intl.formatMessage({
          id: 'store/checkoutless.register.customerCredit.study.title',
        })}
      </div>
      <div className={Style.cartCustomerCreditDescription}>
        {intl.formatMessage({
          id: 'store/checkoutless.register.customerCredit.study.description',
        })}
      </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/CustomerCreditPayment/DenyCart.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { DenyCredit } from '../Icons'
import Style from './style.module.css'

export const DenyCart = ({ intl }: { intl: IntlShape }) => {
  return (
    <div className={Style.cartCustomerCredit}>
      <div className={Style.cartCustomerCreditIcon}>
        <DenyCredit />
      </div>
      <div className={Style.cartCustomerCreditDenyTitle}>
        {intl.formatMessage({
          id: 'store/checkoutless.register.customerCredit.study.deny.title',
        })}
      </div>
      <div className={Style.cartCustomerCreditDenyMessage}>
        {intl.formatMessage({
          id: 'store/checkoutless.register.customerCredit.study.deny.description',
        })}
      </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/CustomerCreditPayment/ApprovedCart.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import Style from './style.module.css'
import type { ICredit } from '../../interfaces'
import { CreditApproved } from '../Icons'
import useFormatMessage from '../../i18n/useFormatMessage'
import { formatter } from '../../utils'

export const ApprovedCart = ({
  intl,
  credit,
}: {
  intl: IntlShape
  credit: ICredit
}) => {
  return (
    <div className={Style.cartCustomerCredit}>
      <div className={Style.cartCustomerCreditIcon}>
        <CreditApproved />
      </div>
      <div className={Style.cartCustomerCreditSuccessTitle}>
        {intl.formatMessage({
          id: 'store/checkoutless.register.customerCredit.study.approved.title',
        })}
      </div>
      <div className={Style.cartCustomerCreditSuccessApproved}>
        {useFormatMessage(
          'store/checkoutless.register.customerCredit.study.approved.description',
          { value: <b>{formatter.format(credit?.approved)}</b> }
        )}
      </div>
      <div className={Style.cartCustomerCreditSuccessMessage}>
        {intl.formatMessage({
          id: 'store/checkoutless.register.customerCredit.study.approved.message',
        })}
      </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/Header/HeaderContainer.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Header from './Header'
import useHeader from './useHeader'

interface Props {
  className?: string
  clearOrderFormProfile: () => void
}

const HeaderContainer = (props: Props) => {
  const headerForm = useHeader(props)

  return <Header {...props} {...headerForm} />
}

export default HeaderContainer

```


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

[Assistant]
Here's the implementation:

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

import constants from '../../utils/constants'
import { useUserDataDispatch } from '../../contexts/UserDataProvider'
import { minimizeModal } from '../../contexts/global-context/reducers/modalSlice'
import {
  resetFlow,
  selectFormAction,
  selectLoadingOrder,
  selectPaymentDataSection,
  selectSection,
  selectStep,
  selectUserRegistrationSections,
  setErrorOrder,
  setFormAction,
  setPaymentDataSection,
  setPreviousUserRegistrationSections,
  setPrevSection,
  setPrevStep,
  setStep,
} from '../../contexts/global-context/reducers/checkoutFormSlice'
import {
  setNewOrderform,
  setRestorePayment,
} from '../../contexts/global-context/reducers/orderFormDataSlice'
import { useCurrentPaymentMethod } from '../../hooks/usePaymentInfo'
import { resetSimulation } from '../../contexts/global-context/reducers/simulationSlice'
import useAvailablePaymentMethods from '../../hooks/useAvailablePaymentMethods'

interface Props {
  clearOrderFormProfile: () => void
}

const useHeader = (props: Props) => {
  const { clearOrderFormProfile } = props
  const dispatchGlobal = useDispatch()
  const [hideBackArrow, setHideBackArrow] = useState(false)

  const currentPaymentMethod = useCurrentPaymentMethod()

  const loadingOrder = useSelector(selectLoadingOrder)
  const step = useSelector(selectStep)
  const userRegistrationSections = useSelector(selectUserRegistrationSections)
  const section = useSelector(selectSection)
  const paymentSection = useSelector(selectPaymentDataSection)
  const formAction = useSelector(selectFormAction)
  const { availablePaymentMethods } = useAvailablePaymentMethods()

  const dispatchUserData = useUserDataDispatch()

  useEffect(() => {
    setHideBackArrow(step > 1)
  }, [step])

  const handleMinimize = () => {
    localStorage.setItem('minimize_modal', 'true')
    localStorage.removeItem('automatically_login_user')
    localStorage.removeItem('show_toast_divided_package')

    dispatchGlobal(minimizeModal())
    dispatchGlobal(setErrorOrder(null))

    if (step === constants.lastStep) {
      dispatchGlobal(resetFlow())
    }
  }

  const onClick = () => {
    if (userRegistrationSections > 1) {
      if (step === 3) {
        dispatchGlobal(setStep(2))
      } else {
        dispatchGlobal(setPreviousUserRegistrationSections())
      }

      return
    }

    dispatchUserData({
      type: 'SET_CHANGE_INFO',
      args: {
        isEdit: false,
        isNewInfo: false,
        userLocation: false,
        isChangeEmail: step === 2,
      },
    })
    dispatchGlobal(setFormAction('none'))
    dispatchGlobal(
      setRestorePayment({ paymentId: currentPaymentMethod?.id || '' })
    )

    if (step - 1 === 1) {
      clearOrderFormProfile()
      localStorage.removeItem('checkoutless_data')
      localStorage.setItem('automatically_login_user', 'false')
      localStorage.removeItem('show_toast_divided_package')

      dispatchGlobal(setNewOrderform())
      dispatchGlobal(resetSimulation())
    }

    if (step === 4 && section === 'summary') {
      dispatchGlobal(setPrevSection())
    }

    if (step === 3 && section === 'paymentData' && formAction === 'add') {
      if (paymentSection === 'list') {
        dispatchGlobal(setFormAction('none'))
        if (availablePaymentMethods?.length === 0) {
          dispatchGlobal(setPrevStep())
        }
      }

      if (paymentSection === 'details') {
        dispatchGlobal(setPaymentDataSection('list'))
        dispatchGlobal(setFormAction('add'))
      }

      return
    }

    dispatchGlobal(setPrevStep())
  }

  return {
    hideBackArrow,
    loadingOrder,
    handleMinimize,
    onClick,
  }
}

export default useHeader

```


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

[Assistant]
Here's the implementation:

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

import { LiteClose, ArrowBack } from '../Icons'
import { LogoMyCheckout } from '../Icons/LogoMycheckout'
import global from '../../myCheckout-styles.module.css'
import styles from './header.css'

interface Props {
  className?: string
  hideBackArrow: boolean
  loadingOrder: boolean
  handleMinimize: () => void
  onClick: () => void
}

const Header = ({
  className,
  hideBackArrow,
  loadingOrder,
  handleMinimize,
  onClick,
}: Props) => {
  return (
    <div className={`${styles.headerContainer} ${className}`}>
      {!loadingOrder && (
        <Fragment>
          <div className={`${styles.headerContent} ${styles.headerBoxShadow}`}>
            <div className={styles.headerFlex}>
              {hideBackArrow && (
                <a onClick={onClick}>
                  <ArrowBack
                    className={`${global.cursorPointer} ${styles.headerIcon}`}
                    fill={global.iconAlternative}
                  />
                </a>
              )}
            </div>

            <LogoMyCheckout className={styles.headerLogo} />

            <div className={`${styles.headerIconClose} ${styles.headerFlex}`}>
              <a onClick={handleMinimize}>
                <LiteClose
                  className={`${global.cursorPointer} ${styles.headerIcon}`}
                  background={global.iconBackground}
                  fill={global.iconAlternative}
                />
              </a>
            </div>
          </div>
        </Fragment>
      )}
    </div>
  )
}

export default Header

```


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

[Assistant]
Here's the implementation:

```css
.headerContainer {
  position: absolute;
  height: 28px;
  width: 100%;
  inset: 0;
}

.headerContainer .headerContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 28px;
  padding: 0 12px;
}

.headerContainer .headerBoxShadow {
  box-shadow: 0px 3px 6px #0000000b;
}

.headerContainer .headerFlex {
  flex: 1 1 30%;
}

.headerContainer .headerLogo {
  flex: 1 0 40%;
  height: 18px;
}

.headerContainer .headerIconClose {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.headerContainer .headerIcon {
  height: 24px;
  width: 24px;
}

@media screen and (min-width: 992px) {
  .headerContainer {
    height: 40px;
  }

  .headerContainer .headerContent {
    height: 40px;
    padding: 0 20px;
  }

  .headerContainer .headerLogo {
    flex: 1 0 40%;
    height: 22px;
  }

  .headerContainer .headerIcon {
    height: 30px;
    width: 30px;
  }
}

```


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

[Assistant]
Here's the implementation:

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

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

.switchContainer {
  display: flex;
  max-width: 326px;
  margin-left: auto;
  margin-right: auto;
}

.marginContainer {
  margin-top: 15px;
}

.picker {
  border: 1px solid #c4c5ca;
  border-radius: 100px;
  display: flex;
  justify-content: space-around;
  padding: 5px 10px;
  margin-top: 8px;
  text-align: center;
}

.selected,
.selected.selected p {
  color: #2953b2;
  border-color: #2953b2;
}

.pickerContainer {
  margin: 15px 0px;
  padding: 12px 0px;
  border-bottom: solid 1px;
  border-top: solid 1px;
  border-color: #00000029;
}

.dateContainer,
.storeContainer,
.scheduleDeliveryContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deliveryChannelContainer {
  display: flex;
  justify-content: space-evenly;
  padding-top: 15px;
}

.oneOptionDelivery {
  padding-top: 15px;
  margin-left: 3px;
}

.dateSelect {
  width: 46%;
}

.timeSelect {
  width: 53%;
}

.summaryContainer {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e2e7;
}

.RegisterSummaryContainer {
  padding: 8px 0px;
  border-top: 1px solid #e0e2e7;
}

.summaryItem {
  display: flex;
  margin: 4px 0px;
}

.packagesContainer {
  display: flex;
}

.packagesContainer p {
  margin: 12px 14px 8px 0px;
}

.imagesContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.imagesContainer img {
  height: 52px;
  margin-top: 8px;
}

.marginRightIcon {
  margin-right: 22px;
}

.shippingContainer {
  margin-top: 16px;
}

.scheduleContainer {
  margin: 15px 0px 10px 0px;
  height: 28px;
}

@media (min-width: 992px) {
  .buyButtonContainer {
    position: fixed;
    padding: 14px;
    margin-top: 14px;
    box-shadow: inset 0px 3px 6px #0000000f;
    width: 30%;
    right: 0;
    bottom: 0;
    background: #ffffff 0% 0% no-repeat padding-box;
    z-index: 10;
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

import Delivery from './Delivery/DeliveryContainer'
import PickupInStore from './PickupInStore/PickupInStoreContainer'
import { usePackagesManager } from './Packages/usePackagesManager'

const LogisticsInfo = () => {
  const { deliveryChannel } = usePackagesManager()

  return useMemo(
    () => (
      <div>
        {deliveryChannel === 'delivery' ? <Delivery /> : <PickupInStore />}
      </div>
    ),
    [deliveryChannel]
  )
}

export default LogisticsInfo

```


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

[Assistant]
Here's the implementation:

```typescript
import { MycheckoutSymbolAnimation } from './MycheckoutSymbolAnimation/MycheckoutSymbolAnimation'
import { MyCheckoutAnimation } from './MyCheckoutAnimation/MyCheckoutAnimation'

export { MycheckoutSymbolAnimation, MyCheckoutAnimation }

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Summary } from './Summary'
import { useSummary } from './useSummary'
import UnavailableProductsContainer from '../UnavailableProducts/UnavailableProductsContainer'

interface Props {
  className?: string
  isCollapsible?: boolean
  isVisible?: boolean
}

const index = ({
  className,
  isCollapsible = true,
  isVisible = true,
}: Props) => {
  const summary = useSummary(isCollapsible)

  const { items } = summary

  if (!isVisible) return null

  return items.length ? (
    <Summary className={className} {...summary} />
  ) : (
    <UnavailableProductsContainer />
  )
}

export default index

```


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

[Assistant]
Here's the implementation:

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

import { useActions } from '../../contexts/ActionsProviderV2'
import { setPrevStep } from '../../contexts/global-context/reducers/checkoutFormSlice'
import { selectItems } from '../../contexts/global-context/reducers/orderFormDataSlice'
import {
  setIsFullscreen,
  setIsSummaryOpen,
} from '../../contexts/global-context/reducers/uiSettingsSlice'
import { useUserDataDispatch } from '../../contexts/UserDataProvider'
import type { CustomItems, Item } from '../../interfaces'

export const useSummary = (isCollapsible: boolean) => {
  const [open, setOpen] = useState(!isCollapsible)
  const [someItemUnavailable, setSomeItemUnavailable] = useState(false)
  const [itemsGift, setItemsGift] = useState<Item[]>([])
  const [itemsCustoms, setItemsCustoms] = useState<Item[]>([])

  const dispatchGlobal = useDispatch()

  const items = useSelector(selectItems)

  const { config } = useActions()

  const dispatchUserData = useUserDataDispatch()

  const customItems = useMemo(
    () => pathOr<CustomItems[]>([], ['customItems'], config),
    [config]
  )

  const sendToFinish = useMemo(() => {
    const impossibleRemove = pathOr<CustomItems[]>([], ['customItems'], config)

    return impossibleRemove.filter((i) => i.sendToFinish)
  }, [config])

  const handleClick = (isOpen: boolean) => {
    dispatchGlobal(setIsSummaryOpen(isOpen))
    setOpen(isOpen)
  }

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

  const isCustomItem = (item: Item) => {
    return sendToFinish.some((send) => send?.sku === item?.id)
  }

  const getCustomItem = (item: Item) => {
    return customItems.find((send) => send?.sku === item?.id)
  }

  useEffect(() => {
    const gifts: Item[] = []

    const itemsAvailability = items.filter((item: Item) => {
      const itemCustom = getCustomItem(item)

      if (item.isGift) {
        gifts.push({
          ...item,
          ...itemCustom,
          name: itemCustom?.name || item.name,
        })
      }

      return item.availability !== 'available'
    })

    const itemToFinish = items
      .filter((item: Item) => {
        return sendToFinish.some((i) => i?.sku === item?.id)
      })
      .map((item: Item) => {
        const itemCustom = getCustomItem(item)

        return {
          ...item,
          ...itemCustom,
          name: itemCustom?.name || item.name,
        }
      })

    setItemsCustoms(itemToFinish)

    if (gifts.length > 0) {
      setItemsGift(gifts)
    } else {
      setItemsGift([])
    }

    if (itemsAvailability.length) {
      setSomeItemUnavailable(true)
      setOpen(true)
      dispatchGlobal(setIsSummaryOpen(true))
    } else {
      setSomeItemUnavailable(false)
    }

    const offerings: any = []
    let totalOfferings = 0

    items.forEach((item) => {
      if (item.bundleItems?.length > 0) {
        const totalOfferingByItem: number = item.bundleItems
          .map((el) => el.price)
          .reduce((crr, next) => crr + next)

        offerings.push(totalOfferingByItem)
      }
    })

    if (offerings.length > 0) {
      totalOfferings = offerings.reduce(
        (crr: number, next: number) => crr + next
      )
      dispatchUserData({
        type: 'SET_OFFERINGS_PRICE',
        args: totalOfferings / 100,
      })
    } else {
      dispatchUserData({
        type: 'SET_OFFERINGS_PRICE',
        args: 0,
      })
    }
  }, [items, sendToFinish])

  useEffect(() => {
    dispatchGlobal(setIsFullscreen(true))

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

  return {
    config,
    isCollapsible,
    items,
    itemsCustoms,
    itemsGift,
    open,
    someItemUnavailable,
    getCustomItem,
    handleClick,
    handleContinue,
    isCustomItem,
  }
}

```


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

[Assistant]
Here's the implementation:

```css
.summaryContainer {
  background-color: var(--white-color);
  inset: 0;
  position: fixed;
}

.summaryContainerOverflow {
  height: 100%;
  max-height: calc(100% - 60px);
  overflow-y: auto;
  padding-bottom: 40px;
}

.summaryContainer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.summaryContainer::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.summaryContainer .summaryTitle {
  margin-top: 40px;
  padding: 0 20px;
}

.summaryContainer .summaryContent {
  padding: 0 20px;
}

.summaryContainer .summaryIconCollapsible {
  display: none;
}

.summaryContainer .summaryItems {
  margin: 14px 0px 10px 0px;
}

.summaryContainer .summaryButtonContainer {
  position: fixed;
  padding: 0px 6px 10px 6px;
  box-shadow: inset 0px 3px 6px #0000000f;
  bottom: 0;
  right: 0;
  background: #ffffff 0% 0% no-repeat padding-box;
  z-index: 100;
  width: 100%;
}

@media screen and (min-width: 992px) {
  .summaryContainer {
    position: relative;
    margin-top: 30px;
  }

  .summaryContainerOverflow {
    padding-bottom: 0px;
  }

  .summaryContainer .summaryTitle {
    margin-top: 20px;
    padding: 0;
  }

  .summaryContainer .summaryContent {
    padding: 0 0 16px 0;
    margin: 0;
  }

  .summaryContainer .summaryIconCollapsible {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

import { Dropdown, Dropup, MyOrder } from '../Icons'
import { Button } from '../shared'
import HeaderContainer from '../Header/HeaderContainer'
import ItemContainer from './Item/ItemContainer'
import Title from '../shared/Title'
import Totals from './Totals'
import type { Config, CustomItems, Item } from '../../interfaces'
import globalStyles from '../../myCheckout-styles.module.css'
import styles from './summary-modules.css'

interface Props {
  className?: string
  config: Partial<Config>
  isCollapsible: boolean
  items: Item[]
  itemsCustoms: Item[]
  itemsGift: Item[]
  open: boolean
  someItemUnavailable: boolean
  getCustomItem: (item: Item) => CustomItems
  handleClick: (isOpen: boolean) => void
  handleContinue: () => void
  isCustomItem: (item: Item) => boolean
}

export const Summary = ({
  className,
  isCollapsible,
  items,
  itemsCustoms,
  itemsGift,
  open,
  someItemUnavailable,
  getCustomItem,
  handleClick,
  handleContinue,
  isCustomItem,
}: Props) => {
  return (
    <div className={`${styles.summaryContainer} ${className}`}>
      <HeaderContainer
        className={globalStyles.inMobile}
        clearOrderFormProfile={() => {}}
      />
      <a
        onClick={() =>
          isCollapsible
            ? handleClick(!open)
            : !someItemUnavailable && handleContinue()
        }
        className={globalStyles.cursorPointer}
      >
        <Title className={styles.summaryTitle}>
          <Title.Item title="store/checkoutless.summary.showOrder">
            <MyOrder fill={globalStyles.iconPrimary} width={24} height={24} />
          </Title.Item>
          {open && isCollapsible ? (
            <div className={styles.summaryIconCollapsible}>
              <Dropup fill={globalStyles.iconPrimary} />
            </div>
          ) : (
            <div className={styles.summaryIconCollapsible}>
              <Dropdown fill={globalStyles.iconPrimary} />
            </div>
          )}
        </Title>
      </a>
      <div className={`${styles.summaryContainerOverflow}`}>
        <div className={styles.summaryContent}>
          {open && (
            <Fragment>
              <div className={styles.summaryItems}>
                {items?.map((item: Item, index: number) => {
                  const isSendfinish = isCustomItem(item)
                  const customItem = getCustomItem(item)

                  if (!item.isGift && !isSendfinish) {
                    return (
                      <ItemContainer
                        key={`${item.id}-${index}`}
                        item={{
                          ...item,
                          ...customItem,
                          name: customItem?.name || item.name,
                          index,
                        }}
                      />
                    )
                  }

                  return null
                })}

                {itemsGift.map((item: Item, index: number) => (
                  <ItemContainer key={item.id} item={{ ...item, index }} />
                ))}

                {itemsCustoms.map((item: Item, index: number) => (
                  <ItemContainer key={item.id} item={{ ...item, index }} />
                ))}
              </div>
              <Totals />
              {!isCollapsible && (
                <div className={styles.summaryButtonContainer}>
                  <Button
                    value={'store/checkoutless.button.continue'}
                    onClick={handleContinue}
                    secondary={true}
                    disabled={someItemUnavailable}
                  />
                </div>
              )}
            </Fragment>
          )}
        </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/OrderPlaced/index.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { OrderPlacedPending } from './OrderPlacedPending'
import { OrderPlaced } from './OrderPlaced'
import { useOrderPlaced } from './useOrderPlaced'

const OrderPlacedContainer = () => {
  const { status } = useOrderPlaced()

  if (status === 'pending') return <OrderPlacedPending />

  return <OrderPlaced />
}

export default OrderPlacedContainer

```


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

[Assistant]
Here's the implementation:

```css
.orderPlacedContainer {
  margin-top: 28px;
  position: relative;
  width: 100%;
}

.orderPlacedContainer .orderPlacedContent {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.orderPlacedContainer .orderPlacedIcon {
  height: 46px;
  width: 46px;
}

.orderPlacedContainer .orderPlacedTextThanks {
  color: var(--success-color);
  font-size: 22px;
  margin-bottom: 20px;
  margin-top: 14px;
  text-align: center;
}

.orderPlacedContainer .orderPlacedTextTitlePending {
  color: var(--primary-text-color);
  font-size: 18px;
  margin-bottom: 20px;
  margin-top: 14px;
  text-align: center;
}

.orderPlacedContainer .orderPlacedTextPending {
  font-size: 14px;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .orderPlacedContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    margin: 0;
    padding: 0 30px;
    position: absolute;
    width: 100%;
  }

  .orderPlacedContainer .orderPlacedIcon {
    height: 88px;
    width: 88px;
  }

  .orderPlacedContainer .orderPlacedTextThanks {
    font-weight: var(--text-bold);
  }

  .orderPlacedContainer .orderPlacedTextTitlePending {
    font-size: 22px;
    font-weight: var(--text-bold);
  }

  .orderPlacedContainer .orderPlacedText {
    padding: 20px 22% 40px 22%;
    font-size: 12px;
    text-align: center;
  }

  .orderPlacedContainer .orderPlacedTextPending {
    padding: 20px 10% 40px 10%;
    font-size: 16px;
    text-align: center;
  }
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Check } from '../Icons'
import useFormatMessage from '../../i18n/useFormatMessage'
import globalStyles from '../../myCheckout-styles.module.css'
import styles from './orderPlaced.modules.css'

export const OrderPlaced = () => {
  return (
    <div className={styles.orderPlacedContainer}>
      <div className={styles.orderPlacedContent}>
        <Check
          className={styles.orderPlacedIcon}
          fill={globalStyles.iconSecondary}
        />

        <p className={styles.orderPlacedTextThanks}>
          {useFormatMessage('store/checkoutless.orderPlaced.thanks')}
        </p>
        <p className={`${styles.orderPlacedText} ${globalStyles.inDesktop}`}>
          {useFormatMessage(
            'store/checkoutless.orderPlaced.confirmationMessage'
          )}
        </p>
      </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/OrderPlaced/OrderPlacedPending.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { PaymentPending } from '../Icons'
import useFormatMessage from '../../i18n/useFormatMessage'
import globalStyles from '../../myCheckout-styles.module.css'
import styles from './orderPlaced.modules.css'

export const OrderPlacedPending = () => {
  return (
    <div className={styles.orderPlacedContainer}>
      <div className={styles.orderPlacedContent}>
        <PaymentPending
          className={styles.orderPlacedIcon}
          fill={globalStyles.iconSecondary}
        />

        <p className={styles.orderPlacedTextTitlePending}>
          {useFormatMessage('store/checkoutless.orderPlaced.pending')}
        </p>
        <p className={`${styles.orderPlacedTextPending}`}>
          {useFormatMessage('store/checkoutless.orderPlaced.pendingMessage')}
        </p>
      </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/OrderPlaced/useOrderPlaced.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { closeModal } from '../../contexts/global-context/reducers/modalSlice'
import { useActions } from '../../contexts/ActionsProviderV2'
import type { Item } from '../../interfaces'
import {
  selectItems,
  selectMainPayment,
  setNewOrderform,
} from '../../contexts/global-context/reducers/orderFormDataSlice'
import {
  resetFlow,
  setUserRegistrationSections,
} from '../../contexts/global-context/reducers/checkoutFormSlice'
import { resetSimulation } from '../../contexts/global-context/reducers/simulationSlice'

export const useOrderPlaced = () => {
  const selectedPaymentMethod = useSelector(selectMainPayment)
  const items = useSelector(selectItems)
  const { clearData, redirectUrl } = useActions()
  const dispatchGlobal = useDispatch()

  const status = useMemo(() => {
    if (
      selectedPaymentMethod?.paymentMethod === 'tc' ||
      selectedPaymentMethod?.bin
    ) {
      return 'pending'
    }

    return 'approved'
  }, [selectedPaymentMethod])

  useEffect(() => {
    const itemsToRemove = items?.map((item: Item) => {
      return {
        uniqueId: item.uniqueId,
        quantity: 0,
      }
    })

    if (redirectUrl) {
      setTimeout(() => {
        window.location.replace(redirectUrl)
      }, 3000)
    } else {
      clearData(itemsToRemove)
      setTimeout(() => {
        dispatchGlobal(closeModal())
        dispatchGlobal(resetFlow())
        dispatchGlobal(setNewOrderform({ noDeleteEmail: true }))
        dispatchGlobal(resetSimulation())
      }, 3000)
    }

    dispatchGlobal(setUserRegistrationSections(1))
  }, [])

  return { status }
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import styles from './dataFormCompleted.css'

interface Props {
  children: JSX.Element[] | JSX.Element
}

const DataFormCompleted = (props: Props) => {
  const { children } = props

  return <div className={styles.dataFormCompletedContainer}>{children}</div>
}

export default DataFormCompleted

```


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

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

[Assistant]
Here's the implementation:

```css
.dataFormCompletedContainer {
  padding: 0px 32px;
  margin-bottom: 8px;
}

```


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

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

[Assistant]
Here's the implementation:

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

import { Dropup, LiteEdit, OutlineCreate } from '../../Icons'
import type { Section } from '../../ViewValidate'
import type { Address } from '../../../interfaces'
import global from '../../../myCheckout-styles.module.css'
import styles from './editButton.css'

interface Props {
  completed: boolean
  orderSection: Section
  handleClientData: () => void
  handleShippingData: () => void
  addressAlternative: Address
  theme: string
}

const EditButton = (props: Props) => {
  const {
    completed,
    orderSection,
    handleClientData,
    addressAlternative,
    handleShippingData,
    theme,
  } = props

  return (
    <Fragment>
      {!completed ? (
        <span className={global.cursorPointer}>
          <Dropup fill={global.arrowUpIcon} />
        </span>
      ) : (
        <a
          onClick={() => {
            if (orderSection === 'clientProfileData') {
              handleClientData()
            } else if (orderSection === 'shippingData') {
              if (!addressAlternative) {
                handleShippingData()
              }
            }
          }}
        >
          <LiteEdit
            className={styles.iconEditContainer}
            fill={
              orderSection === 'shippingData' && addressAlternative
                ? '#9798a5'
                : null
            }
          />
          <OutlineCreate
            className={styles.iconCreateContainer}
            theme={theme}
            fill={
              orderSection === 'shippingData' && addressAlternative
                ? '#9798a5'
                : null
            }
          />
        </a>
      )}
    </Fragment>
  )
}

export default EditButton

```


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

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

[Assistant]
Here's the implementation:

```css
.iconEditContainer {
  display: initial;
}

.iconCreateContainer {
  display: none;
}

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

  .iconCreateContainer {
    display: initial;
  }
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import EditButton from './EditButton'
import useEditButton from './useEditButton'
import type { Section } from '../../ViewValidate'

interface Props {
  completed: boolean
  orderSection: Section
}

const EditButtonContainer = (props: Props) => {
  const editButton = useEditButton()

  return <EditButton {...editButton} {...props} />
}

export default EditButtonContainer

```


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

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

[Assistant]
Here's the implementation:

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

import {
  useUserDataDispatch,
  useUserData,
} from '../../../contexts/UserDataProvider'
import { setNextSection } from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { useValidateStyles } from '../../../hooks/useValidateStyles'
import {
  selectIsMobile,
  selectSettings,
} from '../../../contexts/global-context/reducers/uiSettingsSlice'

const useEditButton = () => {
  const {
    clientProfileData,
    shippingData,
    shippingData: { addressAlternative },
    theme,
  } = useUserData()

  const dispatchUserData = useUserDataDispatch()
  const dispatchGlobal = useDispatch()
  const { isLiteVersion } = useSelector(selectSettings)
  const isMobile = useSelector(selectIsMobile)
  const global = useValidateStyles()

  const handleClientData = () => {
    const isMasked = clientProfileData?.firstName?.includes('**')

    if (isMasked) {
      dispatchGlobal(setNextSection('registerFormProfile'))
    }

    dispatchUserData({
      type: 'SET_CLIENT_DATA',
      args: {
        clientProfileData: {
          ...clientProfileData,
          completed: false,
        },
      },
    })
  }

  const handleShippingData = () => {
    const isMasked = shippingData?.selectedAddress?.street?.includes('**')

    if (isMasked) {
      dispatchGlobal(setNextSection('registerFormShipping'))
    }

    dispatchUserData({
      type: 'SET_SHIPPING_DATA',
      args: {
        shippingData: {
          ...shippingData,
          completed: false,
        },
      },
    })
  }

  return {
    global,
    handleClientData,
    addressAlternative,
    handleShippingData,
    theme,
    isLiteVersion,
    isMobile,
  }
}

export default useEditButton

```


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

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

[Assistant]
Here's the implementation:

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

import { CREATE_ADDRESS } from '../../../graphql/mutations'
import { useActions } from '../../../contexts/ActionsProviderV2'
import {
  selectFormAction,
  selectSection,
  setFormAction,
  setNextUserRegistrationSections,
  setSameSection,
} from '../../../contexts/global-context/reducers/checkoutFormSlice'
import { useUserDataDispatch } from '../../../contexts/UserDataProvider'
import type { Address } from '../../../interfaces'
import {
  selectShipping,
  setAddressDelivery,
  setUpdateAddresses,
} from '../../../contexts/global-context/reducers/orderFormDataSlice'
import type { AddressMC } from '../../../interfaces/orderForm'

interface Props {
  setHasError?: any
}

export const useCreateShipping = (props?: Props) => {
  const { updateSelectedAddress } = useActions()
  const section = useSelector(selectSection)

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

  const { availableAddresses } = useSelector(selectShipping)
  const formAction = useSelector(selectFormAction)

  const processCompletedAddress = (
    addressData: Address,
    isAlternateAddress = false
  ) => {
    updateSelectedAddress({
      ...addressData,
      reference: addressData.reference,
    })

    if (formAction === 'edit') {
      const editedAddresses = availableAddresses.map<AddressMC>(
        (availableAddress) => {
          if (availableAddress.id === addressData.addressId) {
            return {
              id: addressData.addressId,
              city: addressData.city,
              complement: addressData.reference,
              country: addressData.country,
              number: addressData.number,
              reference: addressData.reference,
              geoCoordinates: {
                latitude: addressData.geoCoordinates.latitude,
                longitude: addressData.geoCoordinates.longitude,
              },
              neighborhood: addressData.neighborhood,
              postalCode: addressData.postalCode,
              receiverName: addressData.receiverName,
              state: addressData.state,
              street: addressData.street,
              addressDeliveryType: 'delivery',
            }
          }

          return availableAddress
        }
      )

      dispatchGlobal(
        setUpdateAddresses({ availableAddresses: editedAddresses })
      )
    } else if (formAction === 'add') {
      const newAddress: AddressMC = {
        id: addressData.addressId,
        city: addressData.city,
        complement: addressData.reference,
        country: addressData.country,
        number: addressData.number,
        reference: addressData.reference,
        geoCoordinates: {
          latitude: addressData.geoCoordinates.latitude,
          longitude: addressData.geoCoordinates.longitude,
        },
        neighborhood: addressData.neighborhood,
        postalCode: addressData.postalCode,
        receiverName: addressData.receiverName,
        state: addressData.state,
        street: addressData.street,
        addressDeliveryType: 'delivery',
      }

      dispatchGlobal(
        setUpdateAddresses({
          availableAddresses: [...availableAddresses, newAddress],
          selectedAddress: newAddress,
        })
      )

      dispatchGlobal(setFormAction('none'))

      return
    } else {
      !isAlternateAddress && dispatchGlobal(setNextUserRegistrationSections())
    }

    if (formAction !== 'none') {
      dispatchUserData({
        type: 'SET_CHANGE_INFO',
        args: {
          isEdit: false,
          isNewInfo: false,
          userLocation: false, // TODO: Migrar userLocation a contexto de redux es el unico que se usa aqui
          isChangeEmail: false,
        },
      })
      dispatchGlobal(setSameSection(section))
    }

    // New Context
    dispatchGlobal(
      setAddressDelivery({
        id: addressData.addressId,
        city: addressData.city,
        complement: addressData.reference,
        country: addressData.country,
        geoCoordinates: {
          latitude: addressData.geoCoordinates.latitude,
          longitude: addressData.geoCoordinates.longitude,
        },
        neighborhood: addressData.neighborhood,
        postalCode: addressData.postalCode,
        receiverName: addressData.receiverName,
        reference: addressData.reference,
        state: addressData.state,
        street: addressData.street,
        number: addressData.number,
        addressDeliveryType: 'delivery',
      })
    )

    dispatchGlobal(setFormAction('none'))
  }

  const [createAddressFunction, { loading }] = useMutation(CREATE_ADDRESS, {
    onCompleted: (data) => {
      const { createAddress } = data
      const addressData: Address = {
        addressId: createAddress.id,
        addressType: 'residential',
        city: createAddress.city,
        complement: createAddress.reference,
        country: createAddress.country,
        geoCoordinates: {
          latitude: createAddress.geoCoordinates.latitude,
          longitude: createAddress.geoCoordinates.longitude,
        },
        neighborhood: createAddress.neighborhood,
        postalCode: createAddress.postalCode,
        receiverName: createAddress.receiverName,
        reference: createAddress.reference,
        state: createAddress.state,
        street: createAddress.street,
      }

      processCompletedAddress(addressData)
    },
    onError: (error) => {
      if (props?.setHasError) props?.setHasError(true)
      console.error(`ERROR CREATE SHIPPING`, error)
    },
  })

  return {
    loading,
    createAddressFunction,
    processCompletedAddress,
  }
}

```