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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Style from './quotaInformative.css'
import useFormatMessage from '../../i18n/useFormatMessage'
import {
  QuotaInformative,
  BagQuotaInformative,
  CardQuotaInformative,
  SelectQuotaInformative,
  Close,
} from '../Icons'

interface PopupProps {
  open: boolean
  handleModal: () => void
}

const Popup = ({ open, handleModal }: PopupProps) => {
  const stop = (e: any) => {
    e.stopPropagation()
    e.preventDefault()
  }

  return open ? (
    <div className={Style.quotaInformationOverlay} onClick={handleModal}>
      <div className={Style.quotaInformationModalContainer} onClick={stop}>
        <div className={Style.quotaInformationModalClose} onClick={handleModal}>
          <Close />
        </div>
        <div className={Style.quotaInformationModalTitle}>ORION</div>
        <div className={Style.quotaInformationModalDescription}>
          {useFormatMessage('store/quota.modal.quotainformation.description', {
            store: <span>ORION</span>,
          })}
        </div>
        <div className={Style.quotaInformationModalList}>
          <div className={Style.quotaInformationModalItem}>
            <div className={Style.quotaInformationModalItemIcon}>
              <BagQuotaInformative />
            </div>
            <div className={Style.quotaInformationModalItemDescription}>
              {useFormatMessage(
                'store/quota.modal.quotainformation.instruction-1'
              )}
            </div>
          </div>
          <div className={Style.quotaInformationModalItem}>
            <div className={Style.quotaInformationModalItemIcon}>
              <SelectQuotaInformative />
            </div>
            <div className={Style.quotaInformationModalItemDescription}>
              {useFormatMessage(
                'store/quota.modal.quotainformation.instruction-2'
              )}
            </div>
          </div>
          <div className={Style.quotaInformationModalItem}>
            <div className={Style.quotaInformationModalItemIcon}>
              <QuotaInformative />
            </div>
            <div className={Style.quotaInformationModalItemDescription}>
              {useFormatMessage(
                'store/quota.modal.quotainformation.instruction-3'
              )}
            </div>
          </div>
          <div className={Style.quotaInformationModalItem}>
            <div className={Style.quotaInformationModalItemIcon}>
              <CardQuotaInformative />
            </div>
            <div className={Style.quotaInformationModalItemDescription}>
              {useFormatMessage(
                'store/quota.modal.quotainformation.instruction-4'
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  ) : null
}

export default Popup

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import useFormatMessage from '../../i18n/useFormatMessage'
import { formatter } from '../../utils'
import Popup from './popup'
import style from './quotaInformative.css'

interface Quota {
  quotas: number
  value: number
}

interface Props {
  handleModal: () => void
  open: boolean
  quota: Quota
}

const QuotaInformative = (props: Props) => {
  const { handleModal, open, quota } = props

  return (
    <div className={style.quotaInformationContainer} onClick={handleModal}>
      {useFormatMessage('store/quota.productdetails.quotainformation', {
        store: <span className={style.quotaInformationStore}>ORION</span>,
        quotas: (
          <span className={style.quotaInformationQuantity}>
            {quota.quotas} cuotas
          </span>
        ),
        value: (
          <span className={style.quotaInformationValue}>
            {formatter.format(quota.value)} libres de interés.
          </span>
        ),
      })}
      <Popup open={open} handleModal={handleModal} />
    </div>
  )
}

export default QuotaInformative

```


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

[Assistant]
Here's the implementation:

```css
.quotaInformationContainer {
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  color: #284859;
  font-weight: 700 !important;
  margin: 10px 0;
  cursor: pointer;
  width: 100%;
}
.quotaInformationStore,
.quotaInformationQuantity,
.quotaInformationValue {
  color: #1b998b;
}

.quotaInformationOverlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #23232587;
  z-index: 1000000;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: initial;
}
.quotaInformationModalContainer {
  width: 415px;
  max-width: 100%;
  background: #fff;
  box-shadow: 0px 3px 6px #00000029;
  padding: 24px 26px;
  box-sizing: border-box;
  position: relative;
  cursor: initial;
  margin: 14px;
}

.quotaInformationModalContainer .quotaInformationModalTitle {
  font-size: 26px !important;
  font-weight: bold !important;
  color: #1b998b !important;
  text-align: center;
  border-bottom: 1px solid #707070;
  padding-bottom: 8.5px;
}
.quotaInformationModalList {
  margin-top: 25px;
}
.quotaInformationModalDescription {
  padding-top: 8.5px;
  font-size: 14px !important;
  color: #284859 !important;
  font-weight: bold !important;
  line-height: 16px !important;
}

.quotaInformationModalDescription span {
  color: #1b998b !important;
}

.quotaInformationModalItem {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.quotaInformationModalItemIcon {
  width: 58px;
  margin-right: 20px;
}
.quotaInformationModalList .quotaInformationModalItemDescription {
  font-size: 14px !important;
  line-height: 16px !important;
  width: calc(100% - 80px) !important;
  line-height: 16px;
}

.quotaButton {
  height: 46px;
  width: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #eb5b2b !important;
  cursor: pointer;
}

.quotaInformationModalClose {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import type { ItemToAdd, Product, ProductItem } from '../../interfaces'
import { MyCheckoutButton } from './MyCheckoutButton'
import { useMyCheckoutButton } from './useMyCheckoutButton'

interface Props {
  addToCart: (item: ItemToAdd) => void
  itemToAdd?: ItemToAdd
  isVisible?: boolean
  disabled?: boolean
  validateBeforeOfAdd?: () => boolean | undefined
  multipleAvailableSKUs: boolean
  onClickBehavior?: 'ensure-sku-selection'
  product?: Product
  selectedItem?: ProductItem
  forceOpenModal?: boolean
  handleSelectedItem?: (item: ProductItem) => void
  styles?: any
  isPreview?: boolean
  text?: string
}

export const MyCheckoutButtonContainer = (props: Props) => {
  const button = useMyCheckoutButton(
    props.itemToAdd,
    props.product,
    props.selectedItem,
    props.validateBeforeOfAdd,
    props.disabled,
    props.multipleAvailableSKUs,
    props.onClickBehavior,
    props.forceOpenModal,
    props.addToCart,
    props.handleSelectedItem,
    props.isVisible,
    props.isPreview,
    props.text
  )

  if (!button.show) return null

  return <MyCheckoutButton {...button} />
}

```


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

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

[Assistant]
Here's the implementation:

```css
.myCheckoutButtonContainer {
  width: 100%;
}

.myCheckoutButtonContainer .myCheckoutButtonContent {
  width: 100%;
  height: 42px;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
  border: 1px solid var(--primary-text-color);
  font-size: 16px;
  border-radius: 8px;
  font-weight: var(--text-medium);
}

.myCheckoutButtonContainer .myCheckoutButtonContent:hover {
  background-color: var(--primary-color-button);
  border-color: var(--primary-color-button);
  color: var(--white-color);
}

.myCheckoutButtonContainer .myCheckoutButtonDisabled {
  width: 100%;
  height: 42px;
  border: 1px solid var(--dark-gray-color);
  background-color: var(--white-color);
  color: var(--dark-gray-color);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.myCheckoutButtonContainer .myCheckoutButtonText {
  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/MyCheckoutButton/useMyCheckoutButton.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 {
  newItemSelection,
  selectVariationSelected,
  updateSelectedItem,
} from '../../contexts/global-context/reducers/cartSlice'
import {
  setLoadingAction,
  setStep,
} from '../../contexts/global-context/reducers/checkoutFormSlice'
import { openModal } from '../../contexts/global-context/reducers/modalSlice'
import { selectOrderFormStatus } from '../../contexts/global-context/reducers/orderFormDataSlice'
import { selectSettings } from '../../contexts/global-context/reducers/uiSettingsSlice'
import { AddToCartEvent } from '../../events'
import { useEcommerce } from '../../hooks/useEcommerce'
import type { ItemToAdd, Product, ProductItem } from '../../interfaces'
import { Events } from '../../interfaces'

export const useMyCheckoutButton = (
  itemToAdd: ItemToAdd,
  product: Product,
  selectedItem: ProductItem,
  validateBeforeOfAdd: () => boolean | undefined,
  disabled: boolean,
  multipleAvailableSKUs: boolean,
  onClickBehavior: 'ensure-sku-selection',
  forceOpenModal: boolean,
  addToCart: (item: ItemToAdd) => void,
  handleSelectedItem: (item: ProductItem) => void,
  isVisible: boolean,
  isPreview: boolean,
  text: string
  // eslint-disable-next-line max-params
) => {
  const dispatchGlobal = useDispatch()
  const { handleEcommerce } = useEcommerce()
  const variationSelected = useSelector(selectVariationSelected)
  const { buttonText, isConfigured, hasGoogleAnalytics } =
    useSelector(selectSettings)

  const orderFormStatus = useSelector(selectOrderFormStatus)

  const handleClick = (e?: any) => {
    if (isPreview) return
    e?.preventDefault()
    e?.stopPropagation()

    dispatchGlobal(
      newItemSelection({
        itemToAdd,
        product,
        selectedItem,
      })
    )

    const isProcessClick =
      validateBeforeOfAdd && validateBeforeOfAdd instanceof Function
        ? validateBeforeOfAdd()
        : null

    if (
      (isProcessClick || isProcessClick === null) &&
      !disabled &&
      itemToAdd &&
      (!multipleAvailableSKUs || onClickBehavior !== 'ensure-sku-selection')
    ) {
      dispatchGlobal(setLoadingAction(true))
      addToCart({
        id: itemToAdd.id,
        quantity: itemToAdd.quantity,
        seller: itemToAdd.seller,
      })

      const categories = product?.categories
        ? product?.categories[0]?.split('/')?.filter((item) => item !== '')
        : 'unnkown'

      handleEcommerce(Events.click, {
        onCompleted: () => {
          handleEcommerce(Events.add, {
            products: [
              {
                sku: itemToAdd.id,
                quantity: itemToAdd.quantity,
                price: product?.priceRange?.listPrice?.lowPrice || 0,
                category: categories?.[1] || 'unnkown',
                subcategory: categories?.[1] || 'unnkown',
              },
            ],
          })
        },
      })
    } else {
      handleEcommerce(Events.click)
    }

    const shouldNavigateToSkuSelector =
      onClickBehavior === 'ensure-sku-selection' && multipleAvailableSKUs

    if (shouldNavigateToSkuSelector) {
      dispatchGlobal(setStep(0))
    } else {
      orderFormStatus === 'idle' && dispatchGlobal(setStep(1))
      AddToCartEvent({ selectedItem, product, itemToAdd, hasGoogleAnalytics })
    }

    if ((isProcessClick || isProcessClick === null) && !disabled) {
      localStorage.setItem('minimize_modal', 'false')
      dispatchGlobal(openModal())
    }
  }

  const processShowLogo = () => {
    if (isPreview && text) return text

    if (buttonText) return buttonText

    return 'Compra rápida'
  }

  useEffect(() => {
    if (!variationSelected || !handleSelectedItem || !product) return

    const { items } = product
    const selectedSku = items?.find((item: ProductItem) => {
      return item.itemId === variationSelected.itemId
    })

    if (selectedSku) {
      handleSelectedItem(variationSelected)
    }
  }, [variationSelected])

  useEffect(() => {
    updateSelectedItem({
      itemToAdd,
      product,
      selectedItem,
    })
  }, [itemToAdd])

  useEffect(() => {
    if (forceOpenModal) {
      handleClick()
    }
  }, [forceOpenModal])

  const show = useMemo(() => {
    return isPreview || (isVisible && isConfigured)
  }, [isVisible, isConfigured])

  return {
    disabled,
    show,
    handleClick,
    processShowLogo,
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import style from './myCheckoutButton.css'

interface Props {
  disabled: boolean
  text?: string
  handleClick: () => void
  processShowLogo: () => string
}

export const MyCheckoutButton = ({
  disabled,
  text,
  handleClick,
  processShowLogo,
}: Props) => {
  return (
    <div className={style.myCheckoutButtonContainer}>
      <a onClick={handleClick}>
        <div
          className={
            disabled
              ? style.myCheckoutButtonDisabled
              : style.myCheckoutButtonContent
          }
        >
          <span className={style.myCheckoutButtonText}>
            {text || processShowLogo()}
          </span>
        </div>
      </a>
    </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/EmailForm/EmailForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { Input, Button, Loader } from '../shared'
import { regularExpressions } from '../../utils'
import { MyProfile } from '../Icons'
import global from '../../myCheckout-styles.module.css'
import styles from './emailForm.css'
import Email from '../Icons/Email'
import { ErrorLoadingInformation } from './ErrorLoadingInformation'

interface Props {
  showErrorMessage: boolean
  setShowErrorMessage: React.Dispatch<React.SetStateAction<boolean>>
  handleKeyUpevent: (
    ev: React.KeyboardEvent<HTMLInputElement | HTMLSelectElement>
  ) => void
  loading: boolean
  email: any
  handleClick: () => void
  disabled: boolean
}

const EmailForm = (props: Props) => {
  const {
    showErrorMessage,
    setShowErrorMessage,
    handleKeyUpevent,
    loading,
    email,
    handleClick,
    disabled,
  } = props

  return (
    <div className={styles.emailFormContainer}>
      {loading ? (
        <Loader />
      ) : (
        <div className={styles.emailFormContent}>
          {showErrorMessage ? (
            <ErrorLoadingInformation
              handleClick={() => setShowErrorMessage(false)}
            />
          ) : (
            <Fragment>
              <Input
                type="email"
                placeholder="store/checkoutless.register.email"
                errorMessage="store/checkoutless.register.emailError"
                regularExpression={regularExpressions.email}
                name="email"
                onCustomKeyUpEvent={handleKeyUpevent}
                {...email}
                icon={
                  <Fragment>
                    <MyProfile
                      fill={global.iconAlternative}
                      width={18}
                      height={18}
                      className={global.inMobile}
                    />
                    <Email
                      className={global.inDesktop}
                      fill={global.iconAlternative}
                    />
                  </Fragment>
                }
                showClearButton={true}
                maxLength={50}
              />
              <Button
                value={
                  loading
                    ? 'store/checkoutless.button.loading'
                    : 'store/checkoutless.button.continue'
                }
                onClick={() => handleClick()}
                disabled={disabled}
              />
            </Fragment>
          )}
        </div>
      )}
    </div>
  )
}

export default EmailForm

```


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

[Assistant]
Here's the implementation:

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

.emailFormContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.errorLoadingInfoContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.errorLoadinInfoTextContainer {
  width: 80%;
}

.errorLoadinInfoTextContainer h4 {
  font-size: 18px;
  margin: 10px 0 0 0;
}

.errorLoadinInfoTextContainer p {
  margin-top: 10px;
  font-size: 14px;
  color: var(--dark-gray-color);
}

@media screen and (min-width: 992px) {
  .emailFormContainer {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .emailFormContent {
    width: 100%;
    padding: 0 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/EmailForm/ErrorLoadingInformation.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Button } from '../shared'
import styles from './emailForm.css'
import { ErrorLoading } from '../Icons/ErrorLoading'
import useFormatMessage from '../../i18n/useFormatMessage'
import globalStyles from '../../myCheckout-styles.module.css'

interface Props {
  handleClick: () => void
}

export const ErrorLoadingInformation = ({ handleClick }: Props) => {
  return (
    <div className={styles.errorLoadingInfoContainer}>
      <ErrorLoading />

      <div className={styles.errorLoadinInfoTextContainer}>
        <h4>{useFormatMessage('store/checkoutless.user.sorry')}</h4>
        <p className={globalStyles.textBase}>
          {useFormatMessage('store/checkoutless.user.error')}
        </p>
      </div>

      <Button
        value="store/checkoutless.user.error.retry"
        onClick={handleClick}
      />
    </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/EmailForm/useEmailForm.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type React from 'react'
import { useEffect, useState } from 'react'
import { useLazyQuery } from '@apollo/client'
import { useDispatch, useSelector } from 'react-redux'
import { pathOr } from 'ramda'

import {
  useActions,
  useActionsDispatch,
} from '../../contexts/ActionsProviderV2'
import { useInputValue } from '../../hooks/useInputValue'
import { expireCookie } from '../../utils'
import { setShowLogo } from '../../contexts/global-context/reducers/uiSettingsSlice'
import { setNextStep } from '../../contexts/global-context/reducers/checkoutFormSlice'
import { Events } from '../../interfaces'
import { useEcommerce } from '../../hooks/useEcommerce'
import { GET_USER } from '../../graphql/queries'
import { EnterEmailEvent } from '../../events'
import {
  selectAddressStore,
  selectOrderFormStatus,
  selectProfile,
  setEmail,
  setOrderformStatus,
  setUserInfo,
} from '../../contexts/global-context/reducers/orderFormDataSlice'
import { userInfoMapper } from '../../utils/dataMapper'
import { useCreateAddressExternal } from '../../hooks/useCreateAddressExternal'

const useEmailForm = () => {
  const [disabled, setDisabled] = useState(true)
  const dispatchGlobal = useDispatch()
  const [showErrorMessage, setShowErrorMessage] = useState(false)
  const {
    updateOrderFormProfile,
    handleGetDocumentsClient,
    isOpenModalViewUser,
    isMinimizeViewUser,
  } = useActions()

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

  const profile = useSelector(selectProfile)
  const orderFormStatus = useSelector(selectOrderFormStatus)

  const addressAlternative = useSelector(selectAddressStore)

  const { verifyAndCreateAlternativeAddress } = useCreateAddressExternal()

  const dispatchActions = useActionsDispatch()
  const { handleEcommerce } = useEcommerce()

  const email = useInputValue(profile.email || '')

  const [getUser, { loading }] = useLazyQuery(GET_USER, {
    fetchPolicy: 'cache-and-network',
    onCompleted: async ({ getUser: userData }) => {
      // TODO: Check for what is this logic
      if (
        handleGetDocumentsClient &&
        handleGetDocumentsClient instanceof Function
      ) {
        handleGetDocumentsClient(email?.value || userData?.email || '')
      }

      updateOrderFormProfile({
        email: email.value.toLowerCase(),
      })

      if (profile.email !== email.value) {
        handleEcommerce(Events.authentication)
      }

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

      persistedData
        ? (persistedData.email = email.value)
        : (persistedData = { email: email.value })

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

      const addressAlternativeWhitPostalCode =
        await verifyAndCreateAlternativeAddress(userData, addressAlternative)

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

      dispatchGlobal(setNextStep())
    },
    onError: (error) => {
      const statusCode = pathOr(
        'E_HTTP_500',
        ['graphQLErrors', 0, 'extensions', 'exception', 'code'],
        error
      )

      if (statusCode.includes('404')) {
        updateOrderFormProfile({
          email: email.value.toLowerCase(),
        })

        // New Context
        dispatchGlobal(setOrderformStatus('incomplete'))
        dispatchGlobal(setEmail(email.value.toLocaleLowerCase()))

        localStorage.setItem(
          'checkoutless_data',
          JSON.stringify({ email: email.value })
        )

        dispatchGlobal(setNextStep())
      } else {
        setShowErrorMessage(true)
      }
    },
  })

  useEffect(() => {
    dispatchGlobal(setShowLogo(!loading))
  }, [loading])

  const handleClick = (newEmail?: string) => {
    const emailLogin = newEmail || email.value.toLowerCase()
    const lastNotify = JSON.parse(
      localStorage.getItem('checkoutless_last_notify')
    )

    // reset tries for auth
    if (lastNotify?.email !== emailLogin) {
      clearInterval(interval)
      dispatchActions({
        type: 'SET_SECOND_DIRECT',
        args: 60,
      })
      localStorage.setItem('checkoutless_attempts', '0')
    }

    getUser({
      variables: {
        email: emailLogin,
      },
    })

    // Google Analytics
    EnterEmailEvent({ option: emailLogin })
  }

  useEffect(() => {
    email?.setValue(profile?.email)
    if (profile.email && profile.email !== '') {
      email?.setIsValid(true)
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }, [profile.email])

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (
      (isOpenModalViewUser || isMinimizeViewUser) &&
      profile.email &&
      profile.email !== ''
    ) {
      handleClick(profile.email)

      if (isOpenModalViewUser) {
        dispatchActions({
          type: 'SET_IS_OPEN_MODAL_VIEW_USER',
          args: false,
        })
      }

      if (isMinimizeViewUser) {
        dispatchActions({
          type: 'SET_IS_MINIMIZE_VIEW_USER',
          args: false,
        })
      }
    }
  }, [isOpenModalViewUser, profile.email, isMinimizeViewUser])

  useEffect(() => {
    if (email.value && orderFormStatus === 'idle') {
      handleClick()
    } else {
      expireCookie('x-ecommerce-session')
      expireCookie('x-checkoutless-auth')
    }
  }, [])

  useEffect(() => {
    if (email.isValid) {
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }, [email])

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

  return {
    showErrorMessage,
    setShowErrorMessage,
    handleKeyUpevent,
    loading,
    email,
    handleClick,
    disabled,
  }
}

export default useEmailForm

```


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

[Assistant]
Here's the implementation:

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

import EmailForm from './EmailForm'
import useEmailForm from './useEmailForm'

const Email = () => {
  const emailForm = useEmailForm()

  return (
    <Fragment>
      <EmailForm {...emailForm} />
    </Fragment>
  )
}

export default Email

```


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

[Assistant]
Here's the implementation:

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

import { maximizeModal } from '../../contexts/global-context/reducers/modalSlice'
import styles from './floatingButton.css'

const FloatingButton = () => {
  const dispatchGlobal = useDispatch()

  const onClick = () => {
    localStorage.setItem('minimize_modal', 'false')
    dispatchGlobal(maximizeModal())
  }

  return (
    <span className={styles.floatButton} onClick={onClick}>
      <img
        src="https://kuikpay.vteximg.com.br/arquivos/ids/155424"
        alt="My-checkout-float-button"
      />
    </span>
  )
}

export default FloatingButton

```


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

[Assistant]
Here's the implementation:

```css
.floatButton {
  position: fixed;
  bottom: 0px;
  right: 0px;
  cursor: pointer;
  width: 100px;
  height: 100px;
  z-index: 1000000000000;
}

.floatButton img {
  content: '';
  background-size: 94px 94px;
  background-repeat: no-repeat;
  height: 94px;
  width: 94px;
  position: absolute;
}

```


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

[Assistant]
Here's the implementation:

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

import { closeModal } from '../../contexts/global-context/reducers/modalSlice'
import {
  resetFlow,
  selectLoadingAction,
} from '../../contexts/global-context/reducers/checkoutFormSlice'
import { setNewOrderform } from '../../contexts/global-context/reducers/orderFormDataSlice'
import { resetSimulation } from '../../contexts/global-context/reducers/simulationSlice'

export const useUnavailableProducts = () => {
  const dispatchGlobal = useDispatch()
  const loadingAction = useSelector(selectLoadingAction)

  const handleClose = () => {
    dispatchGlobal(closeModal())
    dispatchGlobal(resetFlow())
    dispatchGlobal(setNewOrderform())
    dispatchGlobal(resetSimulation())
  }

  return {
    handleClose,
    loadingAction,
  }
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Button } from '../shared'
import { EmptyCart } from '../Icons'
import useFormatMessage from '../../i18n/useFormatMessage'
import globalStyles from '../../myCheckout-styles.module.css'
import styles from './unavailableProducts.modules.css'

interface Props {
  handleClose: () => void
}

const UnavailableProducts = ({ handleClose }: Props) => {
  return (
    <div className={styles.unavailableProductsContainer}>
      <div className={styles.unavailableProductsContent}>
        <EmptyCart
          className={styles.unavailableProductsIcon}
          fill={globalStyles.iconPrimary}
        />
        <p
          className={`${styles.unavailableProductsTextEmptyOrder} ${globalStyles.inDesktop}`}
        >
          {useFormatMessage('store/checkoutless.emptyCart.emptyOrder')}
        </p>
        <p
          className={`${styles.unavailableProductsText} ${globalStyles.inMobile}`}
        >
          {useFormatMessage('store/checkoutless.emptyCart.message')}
        </p>
        <p
          className={`${styles.unavailableProductsText} ${globalStyles.inDesktop}`}
        >
          {useFormatMessage('store/checkoutless.emptyCart.messageDeskopt')}
        </p>
        <Button
          value={'store/checkoutless.button.continue'}
          onClick={handleClose}
          secondary
        />
      </div>
    </div>
  )
}

export default UnavailableProducts

```


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

[Assistant]
Here's the implementation:

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

.unavailableProductsContainer .unavailableProductsContent {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unavailableProductsContainer .unavailableProductsIcon {
  height: 68px;
  width: 68px;
}

.unavailableProductsContainer .unavailableProductsText {
  padding: 20px 22%;
  text-align: center;
}

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

  .unavailableProductsContainer .unavailableProductsContent {
    width: 100%;
  }

  .unavailableProductsContainer .unavailableProductsTextEmptyOrder {
    color: var(--primary-color-focus);
    font-size: 22px;
    font-weight: var(--text-bold);
    padding: 20px 22% 0 22%;
    text-align: center;
  }

  .unavailableProductsContainer .unavailableProductsIcon {
    height: 88px;
    width: 88px;
  }

  .unavailableProductsContainer .unavailableProductsText {
    padding: 20px 22% 40px 22%;
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Loader } from '../shared'
import UnavailableProducts from './UnavailableProducts'
import { useUnavailableProducts } from './useUnavailableProducts'

const UnavailableProductsContainer = () => {
  const unavailableProducts = useUnavailableProducts()

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

  return <UnavailableProducts {...unavailableProducts} />
}

export default UnavailableProductsContainer

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import type { Product, ProductItem, Runtime } from '../../interfaces'
import QuotaInformativeComponent from './QuotaInformativeComponent'
import useQuotaInformativeComponent from './useQuotaInformativeComponent'

interface Props {
  sandbox?: boolean
  language?: string
  theme: string
  selectedItem?: ProductItem
  product?: Product
  runtime: Runtime
}

const QuotaInformativeComponentContainer = (props: Props) => {
  const { hidde, initialStyle, orion, styles } = useQuotaInformativeComponent(
    props.product
  )

  const propsComponent = {
    initialStyle,
    language: props.language,
    selectedItem: props.selectedItem,
    styles,
  }

  if (!styles || !orion || hidde) return null

  return <QuotaInformativeComponent {...propsComponent} />
}

export default QuotaInformativeComponentContainer

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { I18nProvider } from '../../i18n'
import type { ProductItem } from '../../interfaces'
import QuotaInformativeContainer from '../QuotaInformative/QuotaInformativeContainer'

interface Props {
  initialStyle: { display: string }
  language: string
  selectedItem: ProductItem
  styles?: any
}

const QuotaInformativeComponent = (props: Props) => {
  const { initialStyle, language, selectedItem, styles } = props

  return (
    <I18nProvider locale={language}>
      <div className={styles.Checkoutless} style={initialStyle}>
        <QuotaInformativeContainer selectedItem={selectedItem} />
      </div>
    </I18nProvider>
  )
}

export default QuotaInformativeComponent

```


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

[Assistant]
Here's the implementation:

```tsx
import { useMemo } from 'react'
import { pathOr } from 'ramda'
import { useSelector } from 'react-redux'

import { useHandleVisualization } from '../../hooks/useHandleVisualization'
import { useValidateStyles } from '../../hooks/useValidateStyles'
import { selectSettings } from '../../contexts/global-context/reducers/uiSettingsSlice'
import type { Product } from '../../interfaces'

const useQuotaInformativeComponent = (product?: Product) => {
  const settings = useSelector(selectSettings)
  const styles = useValidateStyles()
  const { hidde, initialStyle } = useHandleVisualization(product)

  const orion = useMemo(() => pathOr(false, ['orion'], settings), [settings])

  return {
    hidde,
    initialStyle,
    orion,
    styles,
  }
}

export default useQuotaInformativeComponent

```


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

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

[Assistant]
Here's the implementation:

```tsx
import Alert from './Alert/Alert'
import Button from './Button/ButtonContainer'
import Checkbox from './Checkbox/Checkbox'
import HabeasData from './HabeasData'
import Input from './Input/InputContainer'
import Loader from './Loader/Loader'
import Select from './Select/SelectContainer'
import Spinner from './Spinner/Spinner'
import { Toast } from './Toast/Toast'
import { ToolTip } from './Tooltip/Tooltip'

export {
  Alert,
  Button,
  Checkbox,
  HabeasData,
  Input,
  Loader,
  Select,
  Spinner,
  Toast,
  ToolTip,
}

```


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

[Assistant]
Here's the implementation:

```css
.couponContainer {
  display: flex;
  align-items: flex-end;
  height: auto;
  justify-content: space-between;
  width: 100%;
  padding: 2.5%;
}

.couponContainer .couponContentInput {
  flex: 0 1 calc(76% - 0.25rem);
}

.couponContainer .couponInput {
  width: 100%;
}

.couponContainer .couponInput::placeholder {
  color: var(--dark-gray-color) !important;
  font-size: 14px !important;
}

.couponContainer .couponContentButon {
  flex: 0 1 calc(24% - 0.25rem);
}

.couponContentButon [class*='buttonContainer'] {
  height: 25px;
  border-radius: 4px !important;
  font-size: 16px;
}

.couponContentButon [class*='buttonContent'] {
  margin: 0;
}

@media screen and (min-width: 568px) {
  .couponContainer {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 992px) {
  .couponContainer {
    align-items: center;
  }
}

[class*='gridFormTwoCols'] .couponContainer {
  padding: 0;
}

[class*='gridFormTwoCols'] .couponContainer .couponContentInput {
  flex: 0 1 calc(76% - 0.25rem);
}

[class*='gridFormTwoCols'] .couponContainer .couponContentButon {
  flex: 0 1 calc(24% - 0.25rem);
}

.inputValid {
  border-bottom: 1px solid var(--valid-color);
  flex: 0 1 calc(76% - 0.25rem);
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Coupon from './Coupon'
import useCoupon from './useCoupon'

interface Props {
  borderBottom?: boolean
}

const CouponContainer = ({ borderBottom }: Props) => {
  const couponProps = { ...useCoupon(), borderBottom }

  return <Coupon {...couponProps} />
}

export default CouponContainer

```


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

[Assistant]
Here's the implementation:

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

import type { MarketingData, Message } from '../../interfaces'
import { LiteDelete, Offer } from '../Icons'
import { Button, Input } from '../shared'
import CouponInfo from './CouponInfo'
import global from '../../myCheckout-styles.module.css'
import styles from './coupon.css'
import InfoItem from '../shared/InfoItem'
import { Tag } from '../Icons/Tag'

interface CouponType {
  isValid: any
  value: string
  onChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void
  reset: () => void
  setIsValid: Dispatch<any>
  setValue: Dispatch<SetStateAction<string>>
}

interface Props {
  borderBottom: boolean
  coupon: CouponType
  disabled: boolean
  error: Message
  intl: IntlShape
  marketingData: MarketingData
  deleteCoupon: () => void
  handleClick: () => void
  onBlur: () => void
}

const Coupon = (props: Props) => {
  const {
    borderBottom,
    coupon,
    disabled,
    intl,
    marketingData,
    deleteCoupon,
    handleClick,
    onBlur,
  } = props

  return (
    <div className={global.w100}>
      {marketingData?.coupon ? (
        <div className={`${styles.inputValid}`}>
          <InfoItem>
            <InfoItem.Icon>
              <Offer />
            </InfoItem.Icon>
            <InfoItem.Content>
              <CouponInfo
                global={global}
                intl={intl}
                marketingData={marketingData}
              />
            </InfoItem.Content>
            <InfoItem.Edit
              style={{ flex: 0, justifyContent: 'end' }}
              className={global.cursorPointer}
              icon={<LiteDelete fill={global.iconAlternative} />}
              onClick={deleteCoupon}
            />
          </InfoItem>
        </div>
      ) : (
        <div
          className={`${styles.couponContainer} ${
            borderBottom ? global.borderBottom : ''
          }`}
        >
          <div className={styles.couponContentInput}>
            <Input
              placeholder="store/checkoutless.coupon.textInput"
              name="coupon"
              className={styles.couponInput}
              {...coupon}
              errorMessage="store/checkoutless.coupon.error"
              floatLabel={false}
              icon={<Tag width={18} height={18} />}
              showClearButton={true}
              blurFunction={onBlur}
            />
          </div>
          <div className={styles.couponContentButon}>
            {!disabled && (
              <Button
                onClick={handleClick}
                value={'store/checkoutless.coupon.action'}
                disabled={disabled}
              />
            )}
          </div>
        </div>
      )}
    </div>
  )
}

export default Coupon

```


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

[Assistant]
Here's the implementation:

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

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

interface Props {
  global?: any
  intl: IntlShape
  marketingData: MarketingData
}

const CouponInfo = (props: Props) => {
  const { global, intl, marketingData } = props

  return (
    <div>
      <p className={`${global.textSm} ${global.gray}`}>
        {intl.formatMessage({ id: 'store/checkoutless.coupon' })}
      </p>
      <p>{marketingData?.coupon}</p>
    </div>
  )
}

export default CouponInfo

```


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

[Assistant]
Here's the implementation:

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

import { useActions } from '../../contexts/ActionsProviderV2'
import { useUserData } from '../../contexts/UserDataProvider'
import { useInputValue } from '../../hooks/useInputValue'
import type { Message } from '../../interfaces'
import { EnterCouponEvent } from '../../events'
import { selectSettings } from '../../contexts/global-context/reducers/uiSettingsSlice'

const useCoupon = () => {
  const [error, setError] = useState(null)
  const [success, setSuccess] = useState(false)
  const [disabled, setDisabled] = useState(true)
  const { hasGoogleAnalytics } = useSelector(selectSettings)

  const coupon = useInputValue('')
  const intl = useIntl()
  const { insertCoupon } = useActions()
  const { messages, marketingData } = useUserData()

  const handleClick = () => {
    insertCoupon(coupon.value)
  }

  const deleteCoupon = () => {
    insertCoupon('')
  }

  const onBlur = () => {
    if (coupon.value.length === 0) coupon.setIsValid(null)
  }

  useEffect(() => {
    const err = messages?.find(
      (message: Message) =>
        message.code === 'couponNotFound' || message.code === 'couponExpired'
    )

    if (coupon.value && marketingData?.coupon === coupon.value) {
      setSuccess(true)
      coupon.setIsValid(true)
    } else {
      setSuccess(false)
    }

    if (!err) {
      setError(null)

      return
    }

    setError(err)

    if (err) {
      setTimeout(() => {
        setError(null)
      }, 3000)
    }

    if (err && coupon.value) coupon.setIsValid(false)
  }, [messages, marketingData])

  useEffect(() => {
    if (coupon.value.length > 0) {
      setDisabled(false)
    } else {
      setDisabled(true)
    }
  }, [coupon.value])

  useEffect(() => {
    if (success) EnterCouponEvent({ option: coupon.value, hasGoogleAnalytics })
  }, [success])

  return {
    coupon,
    disabled,
    error,
    intl,
    marketingData,
    success,
    deleteCoupon,
    handleClick,
    onBlur,
  }
}

export default useCoupon

```


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

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-else-return */
import React, { useEffect } from 'react'
import { pathOr } from 'ramda'
import { useSelector } from 'react-redux'

import { UserInfo } from '../UserInfo/UserInfo'
import { useUserDataDispatch } from '../../contexts/UserDataProvider'
import { useActions } from '../../contexts/ActionsProviderV2'
import ShippingFormContainer from '../RegisterForm/Shipping/ShippingFormContainer'
import RegisterFormContainer from '../RegisterForm/RegisterFormContainer'
import { MeasurePurchaseProcess } from '../../services/GoogleTagManager'
import { ENTER_EMAIL } from '../../utils/constants'
import { selectSettings } from '../../contexts/global-context/reducers/uiSettingsSlice'
import {
  selectHasAddress,
  selectIsNew,
  selectIsProfileComplete,
  selectItems,
} from '../../contexts/global-context/reducers/orderFormDataSlice'

const UserValidate = () => {
  const items = useSelector(selectItems)
  const dispatchUserData = useUserDataDispatch()
  const { config } = useActions()

  const { hasGoogleAnalytics } = useSelector(selectSettings)
  const profileComplete = useSelector(selectIsProfileComplete)
  const hasAddresses = useSelector(selectHasAddress)
  const isNew = useSelector(selectIsNew)

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (config) {
      const customSubTotalItems = pathOr([], ['customSubTotalItems'], config)

      dispatchUserData({
        type: 'SET_CUSTOM_SUBTOTAL_ITEMS',
        args: {
          customSubTotalItems,
        },
      })
    }
  }, [config])

  useEffect(() => {
    try {
      const persistedData = JSON.parse(
        localStorage.getItem('checkoutless_data')
      )

      MeasurePurchaseProcess({
        stepName: ENTER_EMAIL,
        items,
        option: persistedData?.email,
        hasGoogleAnalytics,
      })
    } catch (error) {
      console.error('Error ', error)
    }
  }, [])

  if (!isNew) {
    if (profileComplete) {
      return <UserInfo />
    } else if (!hasAddresses) {
      return <ShippingFormContainer />
    }
  }

  return <RegisterFormContainer />
}

export default UserValidate

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const CardEmpty = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="45"
      height="45"
      viewBox="0 0 120 80"
    >
      <g fill="none" fillRule="evenodd">
        <path
          fill="#E0E0E3"
          d="M4 0h112a4 4 0 0 1 4 4v72a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
        />
        <path
          fill="#C6C6CB"
          d="M16 19h19a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H16a2 2 0 0 1-2-2V21a2 2 0 0 1 2-2z"
        />
        <path
          fill="#FFF"
          d="M94 0h22c2.213 0 4 1.788 4 3.995v72.01A3.993 3.993 0 0 1 116.003 80H27C79 53 88.999 3.864 88.999 3.864 89.582 1.737 91.79 0 93.999 0z"
          opacity=".2"
        />
        <rect width="20" height="7" x="14" y="56" fill="#A1A1A6" rx="3.5" />
        <rect width="20" height="7" x="38" y="56" fill="#A1A1A6" rx="3.5" />
        <rect width="20" height="7" x="62" y="56" fill="#A1A1A6" rx="3.5" />
        <rect width="20" height="7" x="86" y="56" fill="#A1A1A6" rx="3.5" />
      </g>
    </svg>
  )
}

export default CardEmpty

```


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

[Assistant]
Here's the implementation:

```tsx
import { Add } from './Add'
import { Alert } from './Alert'
import { ArrowBack } from './ArrowBack'
import { ArrowDown } from './ArrowDown'
import { ArrowUp } from './ArrowUp'
import { BellIcon } from './BellIcon'
import { BagQuotaInformative } from './BagQuotaInformative'
import { Calendar } from './Calendar'
import { CardQuotaInformative } from './CardQuotaInformative'
import { Check } from './Check'
import { CheckboxIcon } from './Checkbox'
import { Clock } from './Clock'
import { Close } from './Close'
import { CreditApproved } from './CreditApproved'
import { CreditCard } from './CreditCard'
import { CvcCard } from './CvcCard'
import { Danger } from './Danger'
import { Delete } from './Delete'
import { DenyCredit } from './DenyCredit'
import { Dropup } from './Dropup'
import { EmptyCart } from './emptyCart'
import { Error } from './Error'
import { Identity } from './Identity'
import { Info } from './info'
import { LiteAdd } from './LiteAdd'
import { LiteCheck } from './LiteCheck'
import { LiteClose } from './LiteClose'
import { LiteDelete } from './LiteDelete'
import { Dropdown } from './Dropdown'
import { LiteEdit } from './LiteEdit'
import { LiteLocation } from './LiteLocation'
import { LiteRadioButton } from './LiteRadioButton'
import { Loading } from './Loading'
import { LocationIcon } from './LocationIcon'
import { Lock } from './Lock'
import { Logo } from './Logo'
import { LogoGc } from './LogoGc'
import { LogoKp } from './LogoKp'
import { LogoVTEX } from './LogoVTEX'
import { MainLogo } from './MainLogo'
import { MinimizeButton } from './MinimizeButton'
import { MyData } from './MyData'
import { MyOrder } from './MyOrder'
import { MyProfile } from './MyProfile'
import { Offer } from './Offer'
import { Order } from './Order'
import { OutlineCancel } from './OutlineCancel'
import { OutlineCreate } from './OutlineCreate'
import { PaymentEdit } from './PaymentEdit'
import { Pickup } from './Pickup'
import { ProfileEdit } from './ProfileEdit'
import { QuotaInformative } from './QuotaInformation'
import { RadioButton } from './RadioButton'
import { SelectQuotaInformative } from './SelectQuotaInformative'
import { Shipping } from './Shipping'
import { Store } from './store'
import { UnfilledCheck } from './UnfilledCheck'
import { Verified } from './Verified'
import { VerifiedCredit } from './VerifiedCredit'
import { PaymentPending } from './PaymentPending'

export {
  Add,
  Alert,
  ArrowBack,
  ArrowDown,
  ArrowUp,
  BagQuotaInformative,
  BellIcon,
  Calendar,
  CardQuotaInformative,
  Check,
  CheckboxIcon,
  Clock,
  Close,
  CreditApproved,
  CreditCard,
  CvcCard,
  Danger,
  Delete,
  DenyCredit,
  Dropdown,
  Dropup,
  EmptyCart,
  Error,
  Identity,
  Info,
  LiteAdd,
  LiteCheck,
  LiteClose,
  LiteDelete,
  LiteEdit,
  LiteLocation,
  LiteRadioButton,
  Loading,
  LocationIcon,
  Lock,
  Logo,
  LogoGc,
  LogoKp,
  LogoVTEX,
  MainLogo,
  MinimizeButton,
  MyData,
  MyOrder,
  MyProfile,
  Offer,
  Order,
  OutlineCancel,
  OutlineCreate,
  PaymentEdit,
  Pickup,
  ProfileEdit,
  QuotaInformative,
  RadioButton,
  SelectQuotaInformative,
  Shipping,
  Store,
  UnfilledCheck,
  Verified,
  VerifiedCredit,
  PaymentPending,
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  fill: string
  className?: string
}

export const LiteDelete = (props: Props) => {
  const { fill, className } = props

  return (
    <svg
      id="Icon_borrar"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 20"
      className={className}
    >
      <defs>
        <clipPath id="clip-path">
          <rect
            id="Rectángulo_2116"
            data-name="Rectángulo 2116"
            width="13.567"
            height="17.428"
            fill="none"
          />
        </clipPath>
      </defs>
      <rect
        id="Rectángulo_2117"
        data-name="Rectángulo 2117"
        width="24"
        height="24"
        fill="none"
      />
      <g id="Grupo_4728" data-name="Grupo 4728" transform="translate(5 3)">
        <g
          id="Grupo_4727"
          data-name="Grupo 4727"
          transform="translate(0 0)"
          clipPath="url(#clipPath)"
        >
          <path
            id="Trazado_5986"
            data-name="Trazado 5986"
            d="M11.213,17.718H2.842a.248.248,0,0,1-.247-.227L1.358,2.547a.248.248,0,0,1,.065-.188.244.244,0,0,1,.182-.08H12.45a.244.244,0,0,1,.182.08.248.248,0,0,1,.065.188L11.46,17.491a.247.247,0,0,1-.247.227m-8.143-.5h7.915l1.2-14.448H1.874Z"
            transform="translate(-0.172 -0.289)"
            className={fill}
          />
          <path
            id="Trazado_5987"
            data-name="Trazado 5987"
            d="M13.32,2.774H.247a.248.248,0,0,1,0-.5H13.32a.248.248,0,0,1,0,.5"
            transform="translate(0 -0.289)"
            className={fill}
          />
          <path
            id="Trazado_5988"
            data-name="Trazado 5988"
            d="M7.816,16.622a.247.247,0,0,1-.247-.247V4.5a.247.247,0,1,1,.494,0V16.375a.247.247,0,0,1-.247.247"
            transform="translate(-0.961 -0.539)"
            className={fill}
          />
          <path
            id="Trazado_5989"
            data-name="Trazado 5989"
            d="M10.226,16.6H10.2a.247.247,0,0,1-.224-.268L11.016,4.5a.248.248,0,1,1,.493.043L10.472,16.377a.248.248,0,0,1-.246.226"
            transform="translate(-1.267 -0.543)"
            className={fill}
          />
          <path
            id="Trazado_5990"
            data-name="Trazado 5990"
            d="M5.255,16.6a.248.248,0,0,1-.246-.226L3.972,4.546A.248.248,0,0,1,4.2,4.278a.251.251,0,0,1,.268.225L5.5,16.334a.248.248,0,0,1-.225.268H5.255"
            transform="translate(-0.504 -0.543)"
            className={fill}
          />
          <path
            id="Trazado_5991"
            data-name="Trazado 5991"
            d="M9.679,2.485a.247.247,0,0,1-.247-.247V.673A.179.179,0,0,0,9.253.5h-3.7a.179.179,0,0,0-.178.178V2.238a.248.248,0,0,1-.5,0V.673A.674.674,0,0,1,5.552,0h3.7a.673.673,0,0,1,.673.673V2.238a.247.247,0,0,1-.247.247"
            transform="translate(-0.619 0)"
            className={fill}
          />
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  fill: string
  width?: number
  height?: number
}

export function ArrowRight(props: Props) {
  const { fill, width = 16, height = 16 } = props

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 620 620"
    >
      <g
        xmlns="http://www.w3.org/2000/svg"
        transform="translate(0.000000,622.000000) scale(0.100000,-0.100000)"
        className={fill}
        stroke="none"
      >
        <path d="M1211 5927 c-53 -20 -111 -76 -137 -131 -43 -91 -27 -189 40 -262 25 -26 490 -344 1186 -810 1665 -1116 2243 -1505 2258 -1519 11 -10 -299 -246 -1630 -1244 -904 -677 -1655 -1241 -1670 -1253 -48 -41 -73 -105 -73 -183 1 -45 7 -81 17 -100 23 -42 83 -100 127 -121 53 -26 145 -25 201 3 39 20 3515 2626 3611 2708 51 43 75 83 89 146 17 78 -4 150 -62 212 -27 28 -425 302 -1053 724 -555 374 -1374 925 -1820 1225 -445 300 -834 560 -863 578 -44 27 -66 33 -120 36 -39 2 -81 -2 -101 -9z" />
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  fill: string
  width?: number
  height?: number
}

export const LiteLocation = (props: Props) => {
  const { fill, width = '24', height = '24' } = props

  return (
    <svg
      id="Icon_ubicación"
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 16 16"
    >
      <rect
        id="Rectángulo_2115"
        data-name="Rectángulo 2115"
        width="16"
        height="16"
        transform="translate(0 0)"
        fill="none"
      />
      <g id="Grupo_4698" data-name="Grupo 4698" transform="translate(3.333)">
        <g id="Grupo_4697" data-name="Grupo 4697">
          <path
            id="Trazado_5971"
            data-name="Trazado 5971"
            d="M8.915,2.31A4.705,4.705,0,0,0,5.086.007C4.91,0,4.731,0,4.554.007A4.706,4.706,0,0,0,.726,2.31,4.967,4.967,0,0,0,.449,6.957L4.62,15.873a.221.221,0,0,0,.4,0L9.193,6.955A4.966,4.966,0,0,0,8.915,2.31M8.791,6.769,4.821,15.257.85,6.771A4.526,4.526,0,0,1,1.105,2.54,4.27,4.27,0,0,1,4.577.449c.08,0,.162-.006.244-.006s.163,0,.243.006A4.271,4.271,0,0,1,8.536,2.54a4.524,4.524,0,0,1,.256,4.229"
            transform="translate(0 0)"
            className={fill}
          />
          <path
            id="Trazado_5972"
            data-name="Trazado 5972"
            d="M5.428,2.813A2.645,2.645,0,1,0,8.073,5.458,2.648,2.648,0,0,0,5.428,2.813m0,4.847a2.2,2.2,0,1,1,2.2-2.2,2.2,2.2,0,0,1-2.2,2.2"
            transform="translate(-0.608 -0.615)"
            className={fill}
          />
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export const Offer = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} {...props}>
      <path data-name="Trazado 3270" d="M0 0h24v24H0z" fill="none" />
      <g data-name="Grupo 322" fill="#1b998b" transform="translate(2 2)">
        <path
          data-name="Trazado 3271"
          d="M19.41 9.58l-9-9A1.987 1.987 0 009 0H2a2.006 2.006 0 00-2 2v7a2 2 0 00.59 1.42l9 9A1.987 1.987 0 0011 20a1.955 1.955 0 001.41-.59l7-7A1.955 1.955 0 0020 11a2.02 2.02 0 00-.59-1.42zM11 18.01L2 9V2h7v-.01l9 9z"
        />
        <circle
          data-name="Elipse 123"
          cx={1.5}
          cy={1.5}
          r={1.5}
          transform="translate(3 3)"
        />
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export function Lock() {
  return (
    <svg
      id="outline-lock-24px"
      xmlns="http://www.w3.org/2000/svg"
      width="30"
      height="30"
      viewBox="0 0 30 30"
    >
      <g id="Bounding_Boxes">
        <path
          id="Trazado_2370"
          data-name="Trazado 2370"
          d="M0,0H30V30H0Z"
          fill="none"
        />
        <path
          id="Trazado_2371"
          data-name="Trazado 2371"
          d="M0,0H30V30H0Z"
          fill="none"
          opacity="0.87"
        />
      </g>
      <g id="Outline" transform="translate(5 1.25)">
        <path
          id="Trazado_2372"
          data-name="Trazado 2372"
          d="M21.5,9.75H20.25V7.25a6.25,6.25,0,0,0-12.5,0v2.5H6.5A2.507,2.507,0,0,0,4,12.25v12.5a2.507,2.507,0,0,0,2.5,2.5h15a2.507,2.507,0,0,0,2.5-2.5V12.25A2.507,2.507,0,0,0,21.5,9.75ZM10.25,7.25a3.75,3.75,0,0,1,7.5,0v2.5h-7.5ZM21.5,24.75H6.5V12.25h15ZM14,21a2.5,2.5,0,1,0-2.5-2.5A2.507,2.507,0,0,0,14,21Z"
          transform="translate(-4 -1)"
          fill="#707685"
        />
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export function LogoGc(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      version="1.1"
      id="Capa_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      width={120}
      height={50}
      viewBox="0 -5 207.75 78.55"
      // style="enable-background:new 0 0 207.75 78.55;"
      // xmlXpace="preserve"
      {...props}
    >
      <style type="text/css">
        {`.st0{fill:#2A4959;stroke:#2A4959;stroke-width:1.3567;stroke-miterlimit:10;}
	.st1{fill:#2A4959;stroke:#2A4959;stroke-width:1.3567;stroke-miterlimit:10;}
	.st2{fill:#2A4959;}`}
      </style>
      <g>
        <path
          className="st0"
          d="M48.44,51.84L32.32,35.68l-0.28,0.28v15.88h-1.92V18.39h1.92v14.85l14.94-14.85h2.72L33.68,34.37l17.43,17.47
		H48.44z"
        />
        <path
          className="st0"
          d="M67.31,50.15c-1.28,1.37-3.08,2.06-5.39,2.06c-2.28,0-4.04-0.67-5.29-2.01c-1.25-1.34-1.87-3.22-1.87-5.62
		V32.49h1.92v12.09c0,1.84,0.41,3.26,1.22,4.26c0.84,1,2.19,1.5,4.03,1.5c3.59,0,5.39-1.92,5.39-5.76V32.49h1.87v12.09
		C69.18,46.95,68.56,48.81,67.31,50.15z"
        />
        <path
          className="st0"
          d="M76.23,29.03c-0.34,0-0.7-0.14-1.08-0.42c-0.28-0.28-0.44-0.66-0.47-1.12c0-0.84,0.52-1.36,1.55-1.55
		c0.78,0,1.3,0.52,1.55,1.55C77.77,28.51,77.26,29.03,76.23,29.03z M75.24,51.84V32.49h1.92v19.35H75.24z"
        />
        <path
          className="st0"
          d="M97.1,51.84L86.98,41.77l-1.08,1.08v8.99h-1.92V17.17h1.92v22.91l8.39-8.34H97l-8.76,8.71l11.38,11.38H97.1z"
        />
        <path
          className="st1"
          d="M146.09,51.84v-3.33c-2.03,2.44-4.61,3.65-7.73,3.65c-2.81,0-5.17-0.95-7.07-2.86
		c-1.94-1.94-2.9-4.31-2.9-7.12c0-2.81,0.95-5.17,2.86-7.07c1.94-1.94,4.31-2.9,7.12-2.9c3.09,0,5.67,1.22,7.73,3.65v-3.37h1.92
		v19.35H146.09z M144.08,36.48c-1.59-1.59-3.5-2.39-5.72-2.39c-2.25,0-4.15,0.78-5.72,2.34c-1.59,1.59-2.39,3.51-2.39,5.76
		c0,2.22,0.8,4.12,2.39,5.72c1.59,1.59,3.5,2.39,5.72,2.39c2.25,0,4.15-0.78,5.72-2.34c1.59-1.59,2.39-3.51,2.39-5.76
		C146.47,39.97,145.67,38.07,144.08,36.48z"
        />
        <path
          className="st1"
          d="M164.5,41.58l-2.89,6.19l-7.21-15.27h-2.06l8.15,17.57l-5.01,10.87h2.15l8.93-19.22
		C165.88,41.69,165.19,41.65,164.5,41.58z"
        />
      </g>
      <g>
        <g>
          <path
            className="st2"
            d="M174.85,32.71c-2.81,0-5.63,0-8.44,0c-0.4,0-0.8,0-1.19,0c-0.81,0-0.81,1.26,0,1.26c2.81,0,5.63,0,8.44,0
			c0.4,0,0.8,0,1.19,0C175.66,33.98,175.66,32.71,174.85,32.71L174.85,32.71z"
          />
        </g>
      </g>
      <g>
        <g>
          <path
            className="st2"
            d="M179.49,35.73c-4.17,0-8.34,0-12.51,0c-0.59,0-1.18,0-1.77,0c-0.81,0-0.81,1.26,0,1.26c4.17,0,8.34,0,12.51,0
			c0.59,0,1.18,0,1.77,0C180.3,36.99,180.3,35.73,179.49,35.73L179.49,35.73z"
          />
        </g>
      </g>
      <g>
        <g>
          <path
            className="st2"
            d="M174.85,38.74c-2.81,0-5.63,0-8.44,0c-0.4,0-0.8,0-1.19,0c-0.81,0-0.81,1.26,0,1.26c2.81,0,5.63,0,8.44,0
			c0.4,0,0.8,0,1.19,0C175.66,40,175.66,38.74,174.85,38.74L174.85,38.74z"
          />
        </g>
      </g>
      <path
        className="st1"
        d="M121.37,47.7c-2.04,2.04-4.53,3.05-7.49,3.05c-3.38,0-6.17-1.38-8.37-4.14v13.35h-2.02v-29.9h2.02v3.84
	c2.1-2.76,4.89-4.14,8.37-4.14c2.96,0,5.43,1,7.44,3c2.04,2.04,3.05,4.53,3.05,7.49S123.38,45.7,121.37,47.7z M119.9,34.25
	c-1.67-1.67-3.68-2.51-6.01-2.51c-2.36,0-4.37,0.82-6.01,2.46c-1.68,1.67-2.51,3.69-2.51,6.06c0,2.33,0.84,4.33,2.51,6.01
	c1.67,1.67,3.68,2.51,6.01,2.51c2.36,0,4.37-0.82,6.01-2.46c1.67-1.67,2.51-3.69,2.51-6.06C122.41,37.93,121.57,35.93,119.9,34.25z"
      />
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  fill: string
  height?: number
  strokeWidth?: number
  width?: number
}

export const Shipping = ({
  fill,
  height = 22,
  strokeWidth = 0.5,
  width = 22,
}: Props) => {
  return (
    <svg
      id="Icon_envío"
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 22 22"
    >
      <rect
        id="Rectángulo_2112"
        data-name="Rectángulo 2112"
        width={width}
        height={height}
        fill="none"
      />
      <g
        id="Grupo_4724"
        data-name="Grupo 4724"
        transform="translate(0.917 5.5)"
      >
        <line
          id="Línea_346"
          data-name="Línea 346"
          x2="6.893"
          transform="translate(7.676 8.064)"
          fill="none"
          className={fill}
          strokeWidth={strokeWidth}
        />
        <line
          id="Línea_347"
          data-name="Línea 347"
          x2="1.664"
          transform="translate(3.091 8.064)"
          fill="none"
          className={fill}
          strokeWidth={strokeWidth}
        />
        <g id="Grupo_4723" data-name="Grupo 4723" transform="translate(0 0)">
          <g id="Grupo_4722" data-name="Grupo 4722">
            <path
              id="Trazado_5981"
              data-name="Trazado 5981"
              d="M14.741,7.922V.371a.224.224,0,0,0-.224-.224H4.419"
              transform="translate(-1.304 -0.044)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <path
              id="Trazado_5982"
              data-name="Trazado 5982"
              d="M23.729,10.232h2.215a.2.2,0,0,0,.2-.2V8.418A1.282,1.282,0,0,0,24.72,7.345H20.861"
              transform="translate(-6.156 -2.168)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <path
              id="Trazado_5983"
              data-name="Trazado 5983"
              d="M19.282,1.512h1.683a2.1,2.1,0,0,1,1.967,1.135L24.21,5.624H19.963"
              transform="translate(-5.69 -0.446)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <path
              id="Trazado_5984"
              data-name="Trazado 5984"
              d="M23.637,11.474a1.532,1.532,0,1,0-1.532,1.532A1.532,1.532,0,0,0,23.637,11.474Z"
              transform="translate(-6.071 -2.934)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <path
              id="Trazado_5985"
              data-name="Trazado 5985"
              d="M9.607,11.474a1.532,1.532,0,1,0-1.532,1.532A1.532,1.532,0,0,0,9.607,11.474Z"
              transform="translate(-1.931 -2.934)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <line
              id="Línea_348"
              data-name="Línea 348"
              x1="5.115"
              transform="translate(2.846 2.639)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <line
              id="Línea_349"
              data-name="Línea 349"
              x1="1.583"
              transform="translate(0 2.639)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <line
              id="Línea_350"
              data-name="Línea 350"
              x1="5.615"
              transform="translate(4.707 5.177)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
            <line
              id="Línea_351"
              data-name="Línea 351"
              x1="1.738"
              transform="translate(1.583 5.177)"
              fill="none"
              className={fill}
              strokeWidth={strokeWidth}
            />
          </g>
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export function Order(props: React.SVGProps<SVGSVGElement>) {
  const { fill } = props

  return (
    <svg
      id="outline-receipt-24px"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
    >
      <g id="Bounding_Boxes">
        <path
          id="Trazado_2420"
          data-name="Trazado 2420"
          d="M0,0H24V24H0Z"
          fill="none"
        />
      </g>
      <g id="Outline">
        <g id="Grupo_80" data-name="Grupo 80">
          <path
            id="Trazado_2421"
            data-name="Trazado 2421"
            d="M19.5,3.5,18,2,16.5,3.5,15,2,13.5,3.5,12,2,10.5,3.5,9,2,7.5,3.5,6,2,4.5,3.5,3,2V22l1.5-1.5L6,22l1.5-1.5L9,22l1.5-1.5L12,22l1.5-1.5L15,22l1.5-1.5L18,22l1.5-1.5L21,22V2ZM19,19.09H5V4.91H19Z"
            fill={fill}
          />
          <rect
            id="Rectángulo_45"
            data-name="Rectángulo 45"
            width="12"
            height="2"
            transform="translate(6 15)"
            fill={fill}
          />
          <rect
            id="Rectángulo_46"
            data-name="Rectángulo 46"
            width="12"
            height="2"
            transform="translate(6 11)"
            fill={fill}
          />
          <rect
            id="Rectángulo_47"
            data-name="Rectángulo 47"
            width="12"
            height="2"
            transform="translate(6 7)"
            fill={fill}
          />
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export function Store(props: React.SVGProps<SVGSVGElement>) {
  const { fill, height = 24, width = 24 } = props

  return (
    <svg
      id="Icon_tienda"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      width={width}
      height={height}
      viewBox="0 0 84 84"
    >
      <rect
        id="Rectángulo_2110"
        data-name="Rectángulo 2110"
        width="84"
        height="84"
        fill="none"
      />
      <g
        id="Grupo_4721"
        data-name="Grupo 4721"
        transform="translate(5.001 5.999)"
      >
        <g
          id="Grupo_4720"
          data-name="Grupo 4720"
          transform="translate(0 0)"
          clip-path="url(#clip-path-store-icon)"
        >
          <path
            id="Trazado_5979"
            data-name="Trazado 5979"
            d="M73.1,37.9a.974.974,0,0,1-.691-.286L37.041,2.345,1.669,37.616A.977.977,0,0,1,.287,36.234L36.347.274a1.013,1.013,0,0,1,1.385,0l36.06,35.96A.977.977,0,0,1,73.1,37.9"
            transform="translate(-0.001 0.002)"
            className={fill}
          />
          <path
            id="Trazado_5980"
            data-name="Trazado 5980"
            d="M56.532,52.1h-17.4a.978.978,0,0,1-.978-.975v-24.9H22.161v24.9a.978.978,0,0,1-.978.975H3.783a.975.975,0,0,1-.978-.975V8.85a.978.978,0,0,1,1.955,0V50.143H20.2V25.249a.979.979,0,0,1,.981-.978H39.127a.98.98,0,0,1,.985.978V50.143H55.551V8.85a.978.978,0,0,1,1.955,0V51.121a.972.972,0,0,1-.974.975"
            transform="translate(6.885 19.256)"
            className={fill}
          />
          <defs>
            <clipPath id="clip-path-store-icon">
              <rect
                id="Rectángulo_2109"
                data-name="Rectángulo 2109"
                width="74.082"
                height="71.351"
              />
            </clipPath>
          </defs>
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  className?: string
  fill: string
  onClick?: any
}

export const LiteEdit = (props: Props) => {
  const { className, fill, onClick } = props

  return (
    <svg
      id="Icon_edit"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 20"
      onClick={onClick}
      className={className}
    >
      <rect
        id="Rectángulo_2113"
        data-name="Rectángulo 2113"
        width="24"
        height="24"
        fill="none"
      />
      <g id="Grupo_4716" data-name="Grupo 4716" transform="translate(0.474 3)">
        <g id="Grupo_4726" data-name="Grupo 4726" transform="translate(0 0)">
          <path
            id="Trazado_5972"
            data-name="Trazado 5972"
            d="M5.571,17.756a.312.312,0,0,1-.31-.292l-.223-3.594a.311.311,0,0,1,.049-.189L13.863.143a.31.31,0,0,1,.43-.092l3.588,2.325a.3.3,0,0,1,.134.2.307.307,0,0,1-.043.234L9.2,16.344a.306.306,0,0,1-.151.122l-3.363,1.27a.323.323,0,0,1-.111.02m.093-3.822.191,3.072,2.875-1.085L17.283,2.727,14.217.742Zm3.271,2.241h0Z"
            transform="translate(0.489 0)"
            className={fill}
          />
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```css
.cls1 {
  stroke-width: 2.42px;
}

.cls1,
.cls2,
.cls3 {
  stroke-miterlimit: 10;
}

.cls1,
.cls3 {
  fill: #2d2d2c;
  stroke: #2d2d2c;
}

.cls2 {
  fill: none;
  stroke: #0097c8;
  stroke-width: 3.3px;
}

.cls3 {
  stroke-width: 1.09px;
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  fill: string
  stroke: string
}

export const LiteCheck = (props: Props) => {
  const { fill, stroke } = props

  return (
    <svg
      id="Icon_check"
      xmlns="http://www.w3.org/2000/svg"
      width="46"
      height="46"
      viewBox="0 0 46 46"
    >
      <g
        id="Elipse_194"
        data-name="Elipse 194"
        fill="none"
        stroke="#009e4f"
        strokeWidth="1"
      >
        <circle cx="23" cy="23" r="23" stroke="none" />
        <circle cx="23" cy="23" r="22.5" fill="none" />
      </g>
      <path
        id="Trazado_5965"
        data-name="Trazado 5965"
        d="M10.1,24.9a.6.6,0,0,1-.408-.16L4.8,20.15a.6.6,0,1,1,.815-.869l4.479,4.191L27.525,6.149a.6.6,0,1,1,.84.846L10.524,24.724a.594.594,0,0,1-.421.173"
        transform="translate(6.892 7.525)"
        className={`${fill} ${stroke}`}
        strokeWidth="1"
      />
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

interface Props {
  className?: string
  classNameCircule?: string
  fill: string
  height?: number
  width?: number
}

export function Check({
  className,
  classNameCircule,
  fill,
  height,
  width,
}: Props) {
  return (
    <svg
      id="Icon_check"
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 46 46"
      className={className}
    >
      <g
        id="Elipse_194"
        data-name="Elipse 194"
        fill="none"
        stroke="#009e4f"
        strokeWidth="1"
        className={classNameCircule}
      >
        <circle cx="23" cy="23" r="23" stroke="none" />
        <circle cx="23" cy="23" r="22.5" fill="none" />
      </g>
      <path
        id="Trazado_5965"
        data-name="Trazado 5965"
        d="M10.1,24.9a.6.6,0,0,1-.408-.16L4.8,20.15a.6.6,0,1,1,.815-.869l4.479,4.191L27.525,6.149a.6.6,0,1,1,.84.846L10.524,24.724a.594.594,0,0,1-.421.173"
        transform="translate(6.892 7.525)"
        className={fill}
        strokeWidth="1"
      />
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

export const BellIcon = (props: React.SVGProps<SVGSVGElement>) => {
  const { width = 16, height = 16 } = props

  return (
    <svg width={width} height={height} viewBox="0 0 24 24">
      <g>
        <g data-name="Grupo 4850" id="Grupo_4850">
          <g data-name="Grupo 4808" id="Grupo_4808">
            <path
              d="m11.84,21.32q-0.66,0 -1.3,-0.05l-5.73,-0.53l-3.37,0a1.25,1.29 0 0 1 -0.89,-0.41a1.23,1.26 0 0 1 -0.34,-0.92a1.25,1.29 0 0 1 1.28,-1.21l0.64,0a2.39,2.45 0 0 0 2.39,-2.45l0,-6.56a7.31,7.51 0 1 1 14.64,0l0,6.56a2.39,2.45 0 0 0 2.39,2.45l0.98,0a1.25,1.29 0 0 1 1.25,1.04a1.23,1.26 0 0 1 -1.21,1.51l-3.76,0l-5.71,0.53c-0.42,0.05 -0.86,0.05 -1.3,0.05m-10.36,-2.45a0.61,0.63 0 0 0 -0.64,0.58a0.59,0.61 0 0 0 0.59,0.63l3.42,0l5.76,0.53a13.75,14.14 0 0 0 2.48,0l5.71,-0.53l3.79,0a0.59,0.61 0 0 0 0.59,-0.73a0.61,0.63 0 0 0 -0.61,-0.49l-1.01,0a3.03,3.11 0 0 1 -3.03,-3.11l0,-6.56a6.67,6.85 0 0 0 -13.36,0l0,6.56a3.03,3.11 0 0 1 -3.03,3.11l-0.64,0l-0.02,0z"
              data-name="Trazado 6033"
              fill="#fb8500"
              id="Trazado_6033"
            />
            <path
              d="m11.81,23.73a2.58,2.67 0 0 1 -2.58,-2.65a0.32,0.34 0 0 1 0.64,0a1.94,2.02 0 1 0 3.89,0a0.32,0.34 0 0 1 0.64,0a2.58,2.67 0 0 1 -2.58,2.65"
              data-name="Trazado 6034"
              fill="#fb8500"
              id="Trazado_6034"
            />
            <path
              d="m11.81,4.89a0.32,0.34 0 0 1 -0.3,-0.32l0,-4.06a0.32,0.34 0 0 1 0.61,0l0,4.06a0.32,0.34 0 0 1 -0.32,0.32"
              data-name="Trazado 6035"
              fill="#fb8500"
              id="Trazado_6035"
            />
          </g>
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  fill: string
  width?: string
  height?: string
  className?: string
}

export default function Email(props: Props) {
  const { className, fill, width = '24', height = '24' } = props

  return (
    <svg
      width={width}
      height={height}
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      viewBox="0 0 30 24"
    >
      <g
        data-name="Grupo 4868"
        id="svg_9"
        transform="matrix(0.379712 0 0 0.3926 -1.02267 -4.55776)"
      >
        <g data-name="Grupo 4866" id="svg_10">
          <path
            d="m70.67,70.29l8.52,0a1.04,1.04 0 0 0 1.04,-1.04l0,-54.21a1.04,1.04 0 0 0 -0.03,-0.15a0.96,0.96 0 0 0 -0.05,-0.23a0.89,0.89 0 0 0 -0.12,-0.2c-0.03,-0.04 -0.05,-0.09 -0.08,-0.13l-0.02,-0.01a1.06,1.06 0 0 0 -0.19,-0.14a1.47,1.47 0 0 0 -0.14,-0.09a0.99,0.99 0 0 0 -0.15,-0.04a1.13,1.13 0 0 0 -0.24,-0.05l-0.02,0l-74.15,0l-0.01,0a1.31,1.31 0 0 0 -0.25,0.05c-0.05,0.02 -0.11,0.02 -0.16,0.04a1.06,1.06 0 0 0 -0.13,0.09a1.11,1.11 0 0 0 -0.2,0.14l-0.01,0.01a0.66,0.66 0 0 0 -0.08,0.14a0.68,0.68 0 0 0 -0.12,0.2a0.81,0.81 0 0 0 -0.05,0.22a1.04,1.04 0 0 0 -0.03,0.15l0,54.2a1.04,1.04 0 0 0 1.04,1.05m71.49,-54.21l-34.42,31.8l-34.42,-31.8l68.84,0zm-35.41,52.13l-35.04,0l0,-50.8l35.33,32.64a1.03,1.03 0 0 0 0.7,0.28a1.05,1.05 0 0 0 0.7,-0.28l35.34,-32.64l0,50.8l-7.47,0"
            data-name="Trazado 6070"
            fill={fill}
            id="svg_12"
          />
        </g>
      </g>
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import style from './LogoMyCheckoutSolo.css'

const LogoMyCheckoutSolo = () => {
  return (
    <svg id="Capa_2" viewBox="0 0 121.77 106.03">
      <g id="Capa_1-2">
        <g>
          <path
            className={style.cls1}
            d="M59.65,42.94c7.01,10.13,15.66,18.18,24.33,22.66,.05,.03,.1,.05,.16,.08L119.69,6.25c1.26-2.1-.36-4.75-2.8-4.59L46.76,6.18c-.46,10.14,4.06,24,12.89,36.76Z"
          />
          <path
            className={style.cls1}
            d="M78.52,70.12c-8.77-5.13-17.31-13.35-24.29-23.43-9.62-13.9-14.42-28.51-14.07-40.08L4.5,8.91c-2.79,.18-3.88,3.7-1.68,5.43l39.53,30.94c2.33,1.82,3.91,4.42,4.47,7.32l9.46,49.3c.53,2.74,4.16,3.38,5.59,.99l18.87-31.55c-.74-.39-1.49-.79-2.23-1.23Z"
          />
        </g>
      </g>
    </svg>
  )
}

export default LogoMyCheckoutSolo

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export function Add(props: React.SVGProps<SVGSVGElement>) {
  const { fill } = props

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
    >
      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" className={fill} />
      <path d="M0 0h24v24H0z" fill="none" />
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import * as React from 'react'

export function Info() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      width={30}
      height={30}
    >
      <image
        data-name="2560px-VTEX_Logo.svg"
        width={30}
        height={30}
        xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAA+RJREFUaEPtWFFy0zAQlVzS8kc5AekJmp6g6QlIT0B6gpoPSmlgCEMDpfmIcwLaExBOQHoC0hOQnoDktzAWT5acWG4crRwD0xlrJpMZW1rte293tTJn93zwe+4/KwH8bwVLBUoFVmSgDKEVCVx5eWEK+H57k2882BWMN1jIq4yLesK7MRN8jKI94oINet2Tq5U91wZWBiAdZxuVHhOs6eDUBEDavW6r77Bm4dSVAPhHnTasHuK3mdORMfPCg+DszTDn+nwncTbr4hqOXDBPjJJORfMfrtWY8BpQqoE5T5IOQw0/rxrOCkTOrFe+wYFawokrMNmmMum/6DRBXYD1j2Y2OOsHn1q+qxLuAI5OLxjjz1bdWBMxgJ3dmS3BDoJuC/bpwwmAjvm3tg39449VFopDhMtcJVQg5vF+cPZqnHTPTxMi2A5AjKgQyAA0Yz9mCbtEcgCVSTlndu7NBKG2nw41gIDDfDuaJvgw6J7sFQ/AZOoqOG/VszZRrMrhyRCBU0LG/FM9f4y1W4YKkWKhZF3lhBfuUfOJpIBm/+dsU4cN4jUmy3fDJBWeSwlKgqcBOPqA0ie+qIXiOjh/naxAJLUNBxcQcIek21+Pg6A9sRknAkhWHvEcAGQJdBoonYNZGGUkqpE7xIpEBJBISofwifqjyvq2UH1RWyPODI9UGL1DrsRrMsmiAhCxBRglrZHzDdaVgRt5EmeVST8ZqoJ9xTx5ai8dJGfATD4A83J6g8rStFUW//h9nYWePOXlICXyvwJAcuZvApDVQNVoYnWIQig+O4h9ju6RPisBxCWKRbOoEBrCkDpZHZLYtnn6vf+yEyBHZHsuR4FJnDRMZNNQgLERkn/HBsg47BjfD85P1Em+ZNBywEyuO61Aln2X5FcNYCh7LTmmAEy6JJEAKDY78zwgHjKJg8nqkFlyafEv/XIAcIrLBu9phiZI5i3KUQ/Harb2OFV9kGfeVrrtzlKZDECrMMa/ug46tr2ZYaZC5zve65Chs++kQATAzAWp3wWugQe2RLM4L5vEuDmcQtkqRdnYppMCSgUjlOQj3LQ8XFLMm5YNlCZDOh8n6xQltG4Lt7RdZwARCLNey0cywQOw17exp6uNzKVknyOd913vw84hlERvnpqJN8gNfJUbci5G6GtUP8/DqmAewiTqStN3iVzM5w6hFIia/jyy6P5riyK8F5fs9rdvU22ZoVwhlDao47mN5xQgUzg+YN4aviO55c0iIIUAiA1H18JKpQFVqtEnFT4rjWPEkfyhpbC3BwTpZlMKBeCycVFzSwBFMZnXTqlAXuaKWlcqUBSTee2UCuRlrqh1fwA/x8pA4Jv8tQAAAABJRU5ErkJggg=="
      />
    </svg>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  fill: string
}

export const Pickup = (props: Props) => {
  const { fill } = props

  return (
    <svg
      id="Icon_tienda"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="24"
      viewBox="0 -2 16 16"
    >
      <rect
        id="Rectángulo_2110"
        data-name="Rectángulo 2110"
        width="16"
        height="16"
        fill="none"
      />
      <g id="Grupo_4721" data-name="Grupo 4721" transform="translate(1 2)">
        <g id="Grupo_4720" data-name="Grupo 4720" transform="translate(0 0)">
          <path
            id="Trazado_5979"
            data-name="Trazado 5979"
            d="M13.266,6.752A.179.179,0,0,1,13.14,6.7L6.722.418.3,6.7a.179.179,0,0,1-.251,0,.171.171,0,0,1,0-.246L6.6.049a.186.186,0,0,1,.251,0l6.544,6.406a.171.171,0,0,1,0,.246.179.179,0,0,1-.125.051"
            transform="translate(0 0)"
            className={fill}
          />
          <path
            id="Trazado_5980"
            data-name="Trazado 5980"
            d="M12.555,15.753H9.4a.176.176,0,0,1-.177-.174V11.144h-2.9v4.435a.176.176,0,0,1-.177.174H2.982a.175.175,0,0,1-.177-.174V8.049a.177.177,0,0,1,.355,0V15.4h2.8V10.97A.176.176,0,0,1,6.14,10.8H9.4a.176.176,0,0,1,.179.174V15.4h2.8V8.049a.177.177,0,0,1,.355,0v7.53a.175.175,0,0,1-.177.174"
            transform="translate(-1.046 -3.042)"
            className={fill}
          />
        </g>
      </g>
    </svg>
  )
}

```