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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import Lottie from 'react-lottie'

import * as animation from './MycheckoutSymbolLottie.json'

export const MycheckoutSymbolAnimation = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animation,
  }

  return (
    <div>
      <Lottie options={defaultOptions} width={400} height={400} />
    </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/Summary/Attachment/useAttachment.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useActions } from '../../../contexts/ActionsProviderV2'
import type { Offering } from '../../../interfaces'

interface Props {
  offering: Offering
  index: number
}

const useAttachment = ({ offering, index }: Props) => {
  const { addItemOffering, removeItemOffering } = useActions()

  const handleAdd = () => {
    addItemOffering({
      itemIndex: index,
      offeringId: offering.id,
    })
  }

  const handleDelete = () => {
    removeItemOffering({
      itemIndex: index,
      offeringId: offering.id,
    })
  }

  return { handleAdd, handleDelete }
}

export default useAttachment

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Attachment from './Attachment'
import useAttachment from './useAttachment'
import type { BundleItem, Offering } from '../../../interfaces'

interface Props {
  offering: Offering
  bundleItem: BundleItem
  index: number
}

const AttachmentContainer = (props: Props) => {
  const attachment = useAttachment(props)

  return <Attachment {...attachment} {...props} />
}

export default AttachmentContainer

```


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

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

[Assistant]
Here's the implementation:

```css
.attachmentContainer {
  display: flex;
  padding-bottom: 8px;
  position: relative;
}

.attachmentDelete {
  position: absolute;
  left: -6px;
  top: -6px;
  cursor: pointer;
  z-index: 1;
}

.attachmentImageContainer {
  width: 56px;
  height: 56px;
}

.attachmentImage {
  width: 56px !important;
  height: 56px !important;
  max-width: none !important;
}

.attachmentContent {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.attachmentMiddle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0px 8px 0px 8px;
}

.attachmentName {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attachmentText {
  font-size: 12px !important;
  font-weight: 400 !important;
}

.attachmentPriceContent {
  display: flex;
  align-items: center;
  padding: 0px 8px 0px 8px;
}

.attachmentPrice {
  font-size: 14px !important;
  font-weight: 400 !important;
}

.attachmentOffering {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 18px;
}

.attachmentInfo {
  padding: 0 7px;
  max-width: 60%;
  margin-right: auto;
}

.attachmentButton {
  min-width: 30%;
}

@media screen and (min-width: 992px) {
  .attachmentText {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .attachmentPrice {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

import type { BundleItem, Offering } from '../../../interfaces'
import { Button } from '../../shared'
import { Delete, Verified } from '../../Icons'
import { formatter } from '../../../utils'
import global from '../../../myCheckout-styles.module.css'
import styles from './attachment.css'

interface Props {
  offering: Offering
  bundleItem: BundleItem
  index: number
  handleAdd: () => void
  handleDelete: () => void
}

const Attachment = (props: Props) => {
  const { bundleItem, offering, handleAdd, handleDelete } = props

  return (
    <Fragment>
      {bundleItem ? (
        <div className={`${styles.attachmentContainer}`}>
          <div className={styles.attachmentDelete}>
            <div onClick={handleDelete}>
              <Delete
                fill={global.iconSecondary}
                background={global.iconBackground}
                backgroundSecondary={global.iconBackgroundSecondary}
              />
            </div>
          </div>
          <div className={styles.attachmentImageContainer}>
            <img
              className={styles.attachmentImage}
              src={'https://kuikpay.vteximg.com.br/arquivos/ids/155417'}
              alt={bundleItem.name}
            />
          </div>
          <div className={styles.attachmentContent}>
            <div className={styles.attachmentMiddle}>
              <div className={styles.attachmentName}>
                <p className={styles.attachmentText}>{bundleItem.name}</p>
              </div>
            </div>
            <div className={styles.attachmentPriceContent}>
              <p className={styles.attachmentPrice}>
                {formatter.format(bundleItem.price / 100)}
              </p>
            </div>
          </div>
        </div>
      ) : (
        <div className={styles.attachmentOffering}>
          <div>
            <Verified />
          </div>
          <div className={styles.attachmentInfo}>
            <p className={styles.attachmentPrice}>
              {offering.name} - {formatter.format(offering.price / 100)}
            </p>
          </div>
          <div className={styles.attachmentButton}>
            <Button
              onClick={handleAdd}
              value="store/checkoutless.attachment.add"
            />
          </div>
        </div>
      )}
    </Fragment>
  )
}

export default Attachment

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Product from './Item'
import useProduct from './useItem'
import type { Item } from '../../../interfaces'

interface Props {
  item: Item
}

const DefaultViewContainer = (props: Props) => {
  const product = useProduct(props)

  return <Product {...product} {...props} />
}

export default DefaultViewContainer

```


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

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

[Assistant]
Here's the implementation:

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

import { Delete } from '../../Icons'
import { formatter } from '../../../utils'
import { Alert, Spinner } from '../../shared'
import Attachment from '../Attachment/AttachmentContainer'
import type { Item, Offering, Config } from '../../../interfaces'
import globalStyles from '../../../myCheckout-styles.module.css'
import styles from './item.css'

interface Props {
  item: Item
  config: Partial<Config>
  loading: boolean
  handleClick: () => void
  newSellingPrice: number
  visibleVariations: any[]
  listPriceToUse: number
  sellingPriceToUse: number
}

const Product = (props: Props) => {
  const {
    item: {
      imageUrl,
      name,
      sellingPrice,
      quantity,
      availability,
      offerings,
      bundleItems,
      isGift,
      listPrice,
      skuSpecifications,
      measurementUnit,
      unitMultiplier,
      hiddenRemove,
      hiddenUnits,
      description,
      index,
    },
    loading,
    handleClick,
    visibleVariations,
    listPriceToUse,
    sellingPriceToUse,
  } = props

  const intl = useIntl()

  return (
    <div className={`${styles.itemContainer} ${globalStyles.borderBottom}`}>
      <div className={`${styles.itemContent}`}>
        {!isGift && !loading && !hiddenRemove && (
          <div className={styles.itemDeleteContainer} onClick={handleClick}>
            <Delete
              fill={globalStyles.iconAlternative}
              background={globalStyles.iconBackground}
              backgroundSecondary={globalStyles.iconBackgroundSecondary}
            />
          </div>
        )}
        <div className={styles.itemImageContainer}>
          <img width={74} height={74} src={imageUrl} alt={name} />
          {loading && (
            <div className={styles.itemOverlaySpinner}>
              <Spinner size={24} />
            </div>
          )}
        </div>
        <div className={styles.itemRightContainer}>
          <div className={styles.itemRightMiddle}>
            <div className={styles.itemRightMiddleName}>
              {isGift && (
                <p>
                  {intl.formatMessage({
                    id: 'store/checkoutless.summary.isGift',
                  })}
                </p>
              )}
              <p>{name}</p>
              {description && <p>{description}</p>}
            </div>
            {skuSpecifications?.length > 0 && (
              <div className={styles.itemSkuSpecifications}>
                {skuSpecifications
                  ?.filter((item) => {
                    if (!visibleVariations.length) return true

                    return visibleVariations.some(
                      (v) => v.toLowerCase() === item?.fieldName?.toLowerCase()
                    )
                  })
                  .map((item, i) => (
                    <p key={i}>
                      {item.fieldName}: {item.fieldValues}{' '}
                      {skuSpecifications.length - 1 !== i && '-'}
                    </p>
                  ))}
              </div>
            )}
            {!isGift && !hiddenUnits && (
              <p>{`${quantity * unitMultiplier} ${measurementUnit}`}</p>
            )}
          </div>
          <div className={styles.itemPriceContainer}>
            {!isGift && (
              <Fragment>
                {listPrice > sellingPrice ? (
                  <Fragment>
                    {sellingPriceToUse > 0 && (
                      <p className={globalStyles.lineThrough}>
                        {formatter.format(listPriceToUse)}
                      </p>
                    )}

                    <p className={styles.itemPriceBold}>
                      {sellingPriceToUse > 0
                        ? formatter.format(sellingPriceToUse)
                        : 'Gratis'}
                    </p>
                  </Fragment>
                ) : (
                  <p className={styles.itemPriceBold}>
                    {sellingPriceToUse > 0
                      ? formatter.format(sellingPriceToUse)
                      : 'Gratis'}
                  </p>
                )}
              </Fragment>
            )}
          </div>
        </div>
      </div>
      {offerings?.map((offering: Offering) => {
        const bundleItem = bundleItems.find((item) => item.id === offering.id)

        return (
          <Attachment
            key={offering.id}
            offering={offering}
            bundleItem={bundleItem}
            index={index}
          />
        )
      })}
      {availability !== 'available' && availability !== 'cannotBeDelivered' && (
        <Alert type="warning" text="store/checkoutless.summary.unavailable" />
      )}
      {availability === 'cannotBeDelivered' && (
        <Alert
          type="warning"
          text="store/checkoutless.summary.unavailableLogistic"
        />
      )}
    </div>
  )
}

export default Product

```


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

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

[Assistant]
Here's the implementation:

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

import type { Item } from '../../../interfaces'
import { Events } from '../../../interfaces'
import { useActions } from '../../../contexts/ActionsProviderV2'
// import { useUserData } from '../../../contexts/UserDataProvider'
import { useEcommerce } from '../../../hooks/useEcommerce'
import { RemovedFromCartEvent } from '../../../events'
import { selectSettings } from '../../../contexts/global-context/reducers/uiSettingsSlice'

interface Props {
  item: Item
}

const useProduct = (props: Props) => {
  const {
    item: {
      sellingPrice,
      quantity,
      uniqueId,
      index,
      price,
      id,
      productCategories,
      listPrice,
      showTotalMount,
    },
  } = props

  const { updateItems, config, skuSelectorProps } = useActions()

  const { handleEcommerce } = useEcommerce()
  const { hasGoogleAnalytics } = useSelector(selectSettings)

  // const { subtotalExcludePrice } = useUserData()
  const visibleVariations = pathOr([], ['visibleVariations'], skuSelectorProps)

  // const percentage =
  //   price > sellingPrice ? Math.ceil(((sellingPrice - price) / price) * 100) : 0

  const newSellingPrice = Number.isNaN(sellingPrice) ? listPrice : sellingPrice

  const [loading, setLoading] = useState(false)

  const listPriceToUse = showTotalMount ? listPrice * quantity : listPrice

  const sellingPriceToUse = showTotalMount
    ? newSellingPrice * quantity
    : newSellingPrice

  const handleClick = () => {
    setLoading(true)
    updateItems([
      {
        id,
        index,
        uniqueId,
        quantity: 0,
      },
    ])

    const categories = Object?.values(productCategories) || []
    const dataProduct = [
      {
        sku: id,
        quantity,
        price: sellingPrice || price,
        category: (categories?.[0] as string) || 'unnkown',
        subcategory: (categories?.[1] as string) || 'unnkown',
      },
    ]

    handleEcommerce(Events.remove, { products: dataProduct })
    RemovedFromCartEvent({ item: props.item, hasGoogleAnalytics })
    setLoading(false)
  }

  return {
    config,
    loading,
    handleClick,
    newSellingPrice,
    visibleVariations,
    listPriceToUse,
    sellingPriceToUse,
  }
}

export default useProduct

```


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

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

[Assistant]
Here's the implementation:

```css
.itemContainer {
  margin-bottom: 12px;
}

.itemContainer .itemUnavailable {
  display: flex;
  border-radius: 2px;
  align-items: center;
  margin-bottom: 12px;
}

.itemContainer .itemContent {
  display: flex;
  padding-bottom: 8px;
  position: relative;
}

.itemContainer .itemDeleteContainer {
  position: absolute;
  left: -6px;
  top: -6px;
  cursor: pointer;
  z-index: 1;
}

.itemContainer .itemImageContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.itemContainer .itemImageContainer  img {
  max-width: none;
}

.itemContainer .itemOverlaySpinner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
}

.itemContainer .itemRightContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.itemContainer .itemRightMiddle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0px 8px 0px 8px;
}
.itemContainer .itemRightMiddle p {
  font-size: 14px;
}

.itemContainer .itemRightMiddleName {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.itemContainer .itemText {
  font-size: 12px !important;
}

.itemContainer .itemSkuSpecifications {
  display: flex;
  flex-wrap: wrap;
}

.itemContainer .itemPriceContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 8px 0px 8px;
}

.itemContainer .itemPriceContainer p {
  font-size: 14px;
}

.itemContainer .itemPriceBold {
  font-weight: var(--text-semi-bold);
}

@media screen and (min-width: 992px) {
  .itemContainer {
    padding: 0 16px;
  }
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { Totals } from './Totals'
import { useTotals } from './useTotals'

const TotalsContainer = () => {
  const totals = useTotals()

  return <Totals {...totals} />
}

export default TotalsContainer

```


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

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

[Assistant]
Here's the implementation:

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

import { useActions } from '../../../contexts/ActionsProviderV2'
import { selectItems } from '../../../contexts/global-context/reducers/orderFormDataSlice'
import {
  selectPromotions,
  selectTotals,
  selectTotalValue,
} from '../../../contexts/global-context/reducers/simulationSlice'
import { useUserData } from '../../../contexts/UserDataProvider'
import { useValidateStyles } from '../../../hooks/useValidateStyles'
import type { CustomSubTotalItems } from '../../../interfaces'
import { DiscountIdentifier } from '../../../interfaces'

export const useTotals = (): any => {
  const global = useValidateStyles()

  // TODO: Los totales se deberian sacar de la simulacion del carrito no del orderForm
  const { subtotalExcludePrice, totalOfferings } = useUserData()

  const cartItems = useSelector(selectItems)
  const totals = useSelector(selectTotals)
  const promotions = useSelector(selectPromotions)
  const value = useSelector(selectTotalValue)

  const { config, hideDiscount } = useActions()

  const { items, shipping, tax, discount: discounts } = totals
  const exclusivePromotion = useMemo(() => {
    if (!promotions?.length) return null
    const promotionList = []

    for (let t = 0; t < promotions.length; t++) {
      let sum = 0
      let isGift = false

      for (let e = 0; e < cartItems.length; e++) {
        for (let o = 0; o < cartItems[e].priceTags.length; o++) {
          if (cartItems[e].priceTags[o].identifier === promotions[t].id) {
            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
            sum += cartItems[e].priceTags[o].value
            isGift = cartItems[e].priceTags[o].name === DiscountIdentifier.GIFT
          }
        }
      }

      if (sum !== 0) {
        promotionList.push({
          id: promotions[t].id,
          name: promotions[t].name,
          value: sum,
          isGift,
        })
      }
    }

    return promotionList
  }, [promotions])

  const customSubTotalItems = useMemo<CustomSubTotalItems[]>(
    () => pathOr([], ['customSubTotalItems'], config),
    [config]
  )

  const discountCustomItem = useMemo(() => {
    return customSubTotalItems.reduce((a, b) => {
      a += b?.value

      return a
    }, 0)
  }, [customSubTotalItems])

  const totalExcludePrice = Number(
    Object.values(subtotalExcludePrice).reduce((total: number, val: number) => {
      return total + val
    }, 0)
  )

  const subtotal =
    items + totalOfferings - totalExcludePrice - discountCustomItem

  return {
    config,
    customSubTotalItems,
    discounts,
    exclusivePromotion,
    global,
    hideDiscount,
    items,
    shipping,
    subtotal,
    subtotalExcludePrice,
    tax,
    totalOfferings,
    value,
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

import type { CustomSubTotalItems } from '../../../interfaces'
import { formatter } from '../../../utils'
import { ExclusivePromotions } from './ExclusivePromotions'
import styles from './totals.css'

interface Props {
  config: any
  customSubTotalItems: CustomSubTotalItems[]
  discounts: any
  exclusivePromotion: any
  hideDiscount: boolean
  items: any
  shipping: any
  subtotal: any
  subtotalExcludePrice: any
  tax: any
  totalOfferings: number
  value: number
}

export const Totals = ({
  customSubTotalItems,
  discounts,
  exclusivePromotion,
  hideDiscount,
  items,
  shipping,
  subtotal,
  tax,
  totalOfferings,
  value,
}: Props) => {
  const intl = useIntl()

  return (
    <div className={styles.totalsContainer}>
      <div className={styles.totalsLabelsContainer}>
        {!Number.isNaN(items) && items !== undefined && (
          <p className={styles.totalsLabel}>
            {intl.formatMessage({ id: 'store/checkoutless.summary.subtotal' })}
          </p>
        )}
        {!Number.isNaN(shipping) && shipping !== undefined && (
          <p className={styles.totalsLabel}>
            {intl.formatMessage({
              id: 'store/checkoutless.summary.shipping',
            })}
          </p>
        )}
        {!Number.isNaN(tax) && tax !== undefined && (
          <p className={styles.totalsLabel}>
            {intl.formatMessage({ id: 'store/checkoutless.summary.taxes' })}
          </p>
        )}
        {customSubTotalItems.length
          ? customSubTotalItems.map((custom, index) => {
              return (
                <p key={index} className={styles.totalsLabel}>
                  {custom.name}
                </p>
              )
            })
          : null}

        {!Number.isNaN(discounts) && discounts !== undefined && (
          <p className={styles.totalsLabel}>
            {intl.formatMessage({
              id: 'store/checkoutless.summary.discounts',
            })}
          </p>
        )}
        {!hideDiscount && (
          <div className={styles.totalsDiscounts}>
            {exclusivePromotion?.map((promotion: any, index: number) =>
              ExclusivePromotions({ text: promotion.name, key: index })
            )}
          </div>
        )}
        <p className={styles.totalsLabel}>
          {intl.formatMessage({ id: 'store/checkoutless.summary.total' })}
        </p>
      </div>
      <div className={styles.totalsValues}>
        {!Number.isNaN(items) && items !== undefined && (
          <p className={styles.totalsLabel}>{formatter.format(subtotal)}</p>
        )}
        {!Number.isNaN(shipping) && shipping !== undefined && (
          <p className={styles.totalsLabel}>{formatter.format(shipping)}</p>
        )}
        {!Number.isNaN(tax) && tax !== undefined && (
          <p className={styles.totalsLabel}>{formatter.format(tax)}</p>
        )}
        {customSubTotalItems.length
          ? customSubTotalItems.map((custom, index) => {
              return (
                <p key={index} className={styles.totalsLabel}>
                  {formatter.format(custom.value)}
                </p>
              )
            })
          : null}

        {!Number.isNaN(discounts) && discounts !== undefined && (
          <p className={styles.totalsLabel}>{formatter.format(discounts)}</p>
        )}
        {!hideDiscount && (
          <div className={styles.totalsDiscounts}>
            {exclusivePromotion?.map((promotion: any, index: number) =>
              ExclusivePromotions({
                text: promotion.value,
                isGift: promotion.isGift,
                key: index,
              })
            )}
          </div>
        )}

        <p className={styles.totalsLabel}>
          {value !== 0
            ? formatter.format(value + totalOfferings)
            : intl.formatMessage({
                id: 'store/checkoutless.summary.undefinedTotal',
              })}
        </p>
      </div>
    </div>
  )
}

```


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

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

[Assistant]
Here's the implementation:

```css
.totalsContainer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.totalsContainer .totalsLabelsContainer {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(70% - 1rem);
}

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

.totalsContainer .totalsDiscounts {
  margin: 6px 0 6px 14px;
  font-size: 12px;
}

.totalsContainer .totalsDiscounts p {
  font-size: 12px;
}

.totalsContainer .totalsDiscountsNumber {
  text-align: end;
}

.totalsContainer .totalsValues {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex: 0 1 30%;
}

@media screen and (min-width: 992px) {
  .totalsContainer {
    padding: 0 16px;
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

import { formatter } from '../../../utils'
import global from '../../../myCheckout-styles.module.css'

const messages = {
  free: {
    id: 'store/checkoutless.summary.free',
  },
}

interface Props {
  isGift?: boolean
  key: number
  text: string | number
}

export const ExclusivePromotions = ({ isGift = false, key, text }: Props) => {
  const intl = useIntl()

  if (typeof text === 'string') {
    if (text.length >= 28) text = `${text.substring(0, 27)}...`

    return <p>{text}</p>
  }

  return (
    <p key={key} className={`${global.textBase}`}>
      {isGift
        ? intl.formatMessage(messages.free)
        : formatter.format(text / 100)}
    </p>
  )
}

```


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

[Assistant]
Here's the implementation:

```tsx
import { gql } from '@apollo/client'

export const CREATE_ORDER = gql`
  mutation CreateOrder($orderArgs: OrderInput) {
    createOrder(orderArgs: $orderArgs)
      @context(provider: "kuikpay.my-checkout", scope: "private") {
      id
      transaction {
        RedirectResponseCollection {
          redirectUrl
        }
      }
    }
  }
`

export const CREATE_ADDRESS = gql`
  mutation createAddress(
    $id: ID
    $profileId: String!
    $country: String!
    $state: String!
    $city: String!
    $street: String!
    $number: String!
    $postalCode: String!
    $receiverName: String!
    $geoCoordinates: GeocoordinatesInput!
    $reference: String
    $neighborhood: String!
  ) {
    createAddress(
      id: $id
      profileId: $profileId
      country: $country
      state: $state
      city: $city
      street: $street
      number: $number
      postalCode: $postalCode
      receiverName: $receiverName
      geoCoordinates: $geoCoordinates
      reference: $reference
      neighborhood: $neighborhood
    ) @context(provider: "kuikpay.my-checkout") {
      id
      profile
      country
      state
      city
      street
      number
      postalCode
      receiverName
      geoCoordinates {
        latitude
        longitude
      }
      reference
      neighborhood
    }
  }
`

export const UPDATE_SELECTED_ADDRESS = gql`
  mutation updateUser($userArgs: UserInput) {
    updateUser(userArgs: $userArgs)
      @context(provider: "kuikpay.my-checkout", scope: "private") {
      message
      data {
        selectedAddress {
          id
          street
        }
      }
    }
  }
`

export const ECOMMERCE = gql`
  mutation ecommerce($args: EcommerceInput) {
    ecommerce(args: $args)
      @context(provider: "kuikpay.my-checkout", scope: "private") {
      event
    }
  }
`

export const CREATE_ADDRESS_EXTERNAL = gql`
  mutation externalAddress($args: AddressInput) {
    externalAddress(args: $args)
      @context(provider: "kuikpay.my-checkout", scope: "private") {
      id
      country
      state
      city
      street
      number
      postalCode
      receiverName
      geoCoordinates {
        latitude
        longitude
      }
      neighborhood
      reference
      isEqual
    }
  }
`

```


[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/graphql/mutations/createUser.graphql from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation createUser(
  $name: String!
  $lastname: String!
  $id_type: String!
  $id_number: String!
  $email: String!
  $phone_code: String!
  $phone_number: String!
) {
  createUser(
    name: $name
    lastname: $lastname
    id_type: $id_type
    id_number: $id_number
    email: $email
    phone_code: $phone_code
    phone_number: $phone_number
  ) {
    id
    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/graphql/mutations/createAddress.graphql from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation createAddress(
  $email: String!
  $country: String!
  $state: String!
  $city: String!
  $street: String!
  $number: String!
  $postalCode: String!
  $receiverName: String!
  $geoCoordinates: GeocoordinatesInput!
  $reference: String
  $neighborhood: String
) {
  createAddress(
    email: $email
    country: $country
    state: $state
    city: $city
    street: $street
    number: $number
    postalCode: $postalCode
    receiverName: $receiverName
    geoCoordinates: $geoCoordinates
    reference: $reference
    neighborhood: $neighborhood
  ) {
    id
    email
    country
    state
    city
    street
    number
    postalCode
    receiverName
    geoCoordinates {
      latitude
      longitude
    }
    reference
    neighborhood
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
import { gql } from '@apollo/client'

export const VERIFY_CODE = gql`
  query verifyCode($email: String!, $code: Int!) {
    verifyCode(email: $email, code: $code)
      @context(provider: "kuikpay.my-checkout") {
      message
      data {
        name
        lastname
        id_type
        id_number
        email
        phone_code
        phone_number
        addresses {
          id
          country
          state
          city
          street
          number
          postalCode
          receiverName
          geoCoordinates {
            latitude
            longitude
          }
          neighborhood
          reference
        }
        cards {
          id
          franchise
          number
          gateway
          bin
          paymentSystem
        }
        selectedAddress {
          id
          country
          state
          city
          street
          number
          postalCode
          receiverName
          geoCoordinates {
            latitude
            longitude
          }
          neighborhood
          reference
        }
        selectedPayment {
          paymentMethod
          card {
            id
            franchise
            number
            gateway
            bin
            paymentSystem
          }
        }
        accessToken
      }
    }
  }
`
export const LOGIN = gql`
  query login($email: String!) {
    login(email: $email) @context(provider: "kuikpay.my-checkout") {
      message
    }
  }
`

export const ACCOUNTS = gql`
  query accounts {
    accounts @context(provider: "kuikpay.my-checkout") {
      cvcRequired
      paymentSystem
      buttonMessage
      text
      hasGoogleAnalytics
      PaymentMethod {
        id
        type
        isActive
        paymentMethodName
        accountName
      }
      isConfigured
      visualization {
        type
        key
        secundaryKey
      }
      additionalData {
        key
        value
      }
      styles
      habeasDataInformation {
        url
        version
      }
    }
  }
`

export const GET_CITIES = gql`
  query getCities($city: String) {
    getCities(city: $city) @context(provider: "kuikpay.my-checkout") {
      country
      state
      city
      phone
      postal_code
    }
  }
`

export const VALIDATE_CREDIT = gql`
  query ValidateCredit($email: String, $totals: Int) {
    validateCredit(email: $email, totals: $totals)
      @context(provider: "kuikpay.my-checkout") {
      maxInstallments
      approvedCredit
    }
  }
`

export const GET_USER = gql`
  query getUser($email: String!) {
    getUser(email: $email) @context(provider: "kuikpay.my-checkout") {
      id
      name
      lastname
      id_type
      id_number
      email
      phone_code
      phone_number
      habeasData
      addresses {
        id
        country
        state
        city
        street
        number
        postalCode
        receiverName
        geoCoordinates {
          latitude
          longitude
        }
        neighborhood
        reference
      }
      selectedAddress {
        id
        country
        state
        city
        street
        number
        postalCode
        receiverName
        neighborhood
        reference
        geoCoordinates {
          latitude
          longitude
        }
      }
      selectedPayment {
        paymentMethod
        card {
          id
          franchise
          number
          gateway
          bin
          paymentSystem
          cvv
        }
      }
      cards {
        id
        franchise
        number
        gateway
        bin
        cvv
        paymentSystem
      }
    }
  }
`
export const PAYMENT_PROCESS_STATUS = gql`
  query GetPaymentProcessStatus($orderId: String) {
    getPaymentProcessStatus(orderId: $orderId)
      @context(provider: "kuikpay.my-checkout") {
      status
      message
    }
  }
`

```


[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/graphql/queries/getCountries.graphql from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getCountries {
  getCountries {
    data {
      id
      country
      iso
      phone
      postal_code_regex
      states {
        state
        cities {
          city_id
          city
        }
      }
    }
  }
}

```


[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/graphql/queries/getUser.graphql from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getUser($email: String!) {
  getUser(email: $email) {
    name
    lastname
    id_type
    id_number
    email
    phone_code
    phone_number
  }
}

```


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

[Assistant]
Here's the implementation:

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

import { useSimulation } from './useSimulation'

export const Simulation: FunctionComponent = ({ children }) => {
  useSimulation()

  return <Fragment>{children}</Fragment>
}

```


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

[User] Show me the implementation of mycheckout-sdk/src/containers/Simulation/useSimulation.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

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

import { useActions } from '../../contexts/ActionsProviderV2'
import {
  selectAddressStore,
  setLogisticsInfo,
} from '../../contexts/global-context/reducers/orderFormDataSlice'
import {
  orderFormSimulation,
  selectSimulationStatus,
} from '../../contexts/global-context/reducers/simulationSlice'
import type { AppDispatch } from '../../contexts/global-context/store'
import { useCurrentPaymentMethod } from '../../hooks/usePaymentInfo'
import type {
  LogisticInfo,
  OrderFormMC,
  OrderFormSimulation,
  Payment,
} from '../../interfaces/orderForm'
import type { SlaSimulation } from '../../interfaces/simulation'
import { existUnavailableProducts } from '../../utils/simulation'

export const useSimulation = () => {
  const dispatch = useDispatch<AppDispatch>()

  const { email, selectedAddresses, payments, items, logisticsInfo } =
    useSelector(
      (state: { orderForm: OrderFormMC }): OrderFormSimulation => ({
        email: state.orderForm.profile.email,
        selectedAddresses: state.orderForm.shipping.selectedAddresses,
        payments: state.orderForm.payments.payment,
        items: state.orderForm.items,
        logisticsInfo: state.orderForm.shipping.logisticInfo,
      })
    )

  const currentPaymentMethod = useCurrentPaymentMethod(payments[0])
  const paymentInfo: Payment[] = payments.map((payment) => ({
    ...payment,
    paymentId: payment?.paymentId || currentPaymentMethod?.id,
  }))

  const address = useSelector(selectAddressStore)
  const status = useSelector(selectSimulationStatus)

  const { cartSimulation } = useActions()

  const handleSimulationResponse = async () => {
    if (status !== 'loading') {
      try {
        // Trigger Simulation
        const simulationRes = await dispatch(
          orderFormSimulation({
            orderForm: {
              email,
              selectedAddresses,
              items,
              payments: paymentInfo,
              logisticsInfo,
            },
            cartSimulation: cartSimulation as any,
          })
        ).unwrap()

        const logisticInfoWithoutSelection =
          simulationRes?.logisticsInfo.filter(
            (logistic) => !logistic.selectedSla
          )

        if (
          simulationRes?.logisticsInfo?.length &&
          logisticInfoWithoutSelection?.length &&
          !existUnavailableProducts(simulationRes?.items)
        ) {
          // TODO: Probar un carrito no disponible para validar si no se queda infinitamente en la simulacion
          // if the orderForm have not selected SLA's it select the cheapest by default
          const logistics: LogisticInfo[] = []

          simulationRes.logisticsInfo.forEach((logisticInfo) => {
            let selectedSla = {} as SlaSimulation

            if (address?.addressDeliveryType === 'pickup') {
              // Obtiene el primer sla de compra y recoge
              selectedSla = logisticInfo?.slas?.find(
                (sla) => sla?.deliveryChannel === 'pickup-in-point'
              )
            } else if (
              address?.addressDeliveryType === 'delivery' &&
              address?.selectedSlaId
            ) {
              // Selecciona el index si ya existe una dirección
              selectedSla = logisticInfo?.slas?.find(
                (sla) => sla?.deliveryChannel === 'delivery'
              )
            } else {
              // Obtiene el primer sla de domicilio
              selectedSla = logisticInfo?.slas?.find(
                (sla) => sla?.deliveryChannel === 'delivery'
              )
            }

            selectedSla = selectedSla || logisticInfo.slas[0]

            const addressId =
              (address &&
                address.addressDeliveryType === 'pickup' &&
                selectedSla.deliveryChannel === 'pickup-in-point') ||
              !address
                ? logisticInfo.addressInternalId || selectedAddresses[0].id
                : null

            const logisticInfoSelected = {
              ...(selectedSla.availableDeliveryWindow[0]
                ? {
                    deliveryWindow: {
                      startDateUtc:
                        selectedSla?.availableDeliveryWindow[0].startDateUtc,
                      endDateUtc:
                        selectedSla?.availableDeliveryWindow[0].endDateUtc,
                    },
                  }
                : {}),
              itemIndex: logisticInfo.itemIndex,
              addressId,
              selectedSla: selectedSla.id,
              selectedDeliveryChannel: selectedSla.deliveryChannel,
              selectedShippingEstimate: selectedSla.shippingEstimate,
              storeName:
                selectedSla.deliveryChannel === 'pickup-in-point'
                  ? selectedSla.pickupStoreInfo.friendlyName.concat(
                      ' ',
                      selectedSla.pickupStoreInfo.address.street
                    )
                  : null,
            }

            logistics.push(logisticInfoSelected)
          })
          dispatch(setLogisticsInfo(logistics))
        }
      } catch (err) {
        console.error('Failed simulation: ', err)
      }
    }
  }

  useEffect(() => {
    handleSimulationResponse()
  }, [email, selectedAddresses, payments, items, logisticsInfo])
}

```


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

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

[Assistant]
Here's the implementation:

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

import type { InitialProps } from '../../interfaces'
import { useStoreSetup } from './useStoreSetup'

const StoreSetup: FunctionComponent<InitialProps> = ({
  children,
  ...props
}) => {
  useStoreSetup(props)

  return <Fragment>{children}</Fragment>
}

export default StoreSetup

```


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

[Assistant]
Here's the implementation:

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

import { useInitializeAll } from '../../hooks/useInitializeAll'
import type { InitialProps } from '../../interfaces'
import { Events } from '../../interfaces'
import { ACCOUNTS } from '../../graphql/queries'
import constants from '../../utils/constants'
import {
  selectSettings,
  setIsMobile,
  setSettings,
  setTheme,
} from '../../contexts/global-context/reducers/uiSettingsSlice'
import { validateOrion } from '../../utils/payments'
import { setBlockedShipping } from '../../contexts/global-context/reducers/checkoutFormSlice'
import {
  useActions,
  useActionsDispatch,
} from '../../contexts/ActionsProviderV2'
import { useEcommerce } from '../../hooks/useEcommerce'
import { isMobile as isMobileValidation } from '../../utils'

export const useStoreSetup = ({
  blockedShipping,
  config,
  hideDiscount,
  customData,
  orderForm,
  showPaymentMethods,
  skuSelectorProps,
  storeTermsAndConditionsContent,
  theme,
  addItemOffering,
  addToCart,
  clearData,
  handleGetDocumentsClient,
  handleSelectedItem = null,
  insertCoupon,
  removeItemOffering,
  updateItems,
  updateOrderFormProfile,
  validateItems,
}: InitialProps) => {
  const { isClickAddToCart } = useActions()
  const dispatchActions = useActionsDispatch()
  const { handleEcommerce } = useEcommerce()

  const dispatchGlobal = useDispatch()
  const { isLoaded } = useSelector(selectSettings)

  const { data, loading, error } = useQuery(ACCOUNTS, {
    skip: isLoaded,
  })

  useInitializeAll({
    config,
    customData,
    hideDiscount,
    orderForm,
    showPaymentMethods,
    skuSelectorProps,
    storeTermsAndConditionsContent,
    addItemOffering,
    addToCart,
    clearData,
    handleGetDocumentsClient,
    handleSelectedItem,
    insertCoupon,
    removeItemOffering,
    updateItems,
    updateOrderFormProfile,
    validateItems,
  })

  useEffect(() => {
    const res = isMobileValidation()

    dispatchGlobal(setIsMobile(!!res))
    dispatchGlobal(setTheme(theme))

    if (!blockedShipping) return
    dispatchGlobal(setBlockedShipping(blockedShipping))
  }, [])

  useEffect(() => {
    if (loading) return

    if (error) {
      console.error(constants.serverErrorMessage)

      return
    }

    if (!data?.accounts.isConfigured) {
      console.warn(constants.accountNotConfiguredMessage)
    }

    if (!!data && Object.entries(data).length >= 1) {
      dispatchGlobal(
        setSettings({
          additionalData: data?.accounts.additionalData?.reduce(
            (
              prev: Record<string, string>,
              item: { key: string; value: string }
            ) => {
              return {
                ...prev,
                [item.key]: item.value,
              }
            },
            {}
          ),
          buttonMessage: pathOr('', ['accounts', 'buttonMessage'], data),
          buttonText: pathOr('', ['accounts', 'text'], data),
          cvcRequired: data?.accounts.cvcRequired,
          habeasDataInformation: data?.accounts.habeasDataInformation,
          hasGoogleAnalytics: data?.accounts.hasGoogleAnalytics,
          isConfigured: data?.accounts.isConfigured,
          isLiteVersion: true,
          orion: validateOrion(pathOr([], ['accounts', 'PaymentMethod'], data)),
          paymentMethod: pathOr([], ['accounts', 'PaymentMethod'], data),
          paymentSystem: data?.accounts.paymentSystem,
          styles: pathOr('', ['accounts', 'styles'], data),
          visualization: pathOr([], ['accounts', 'visualization'], data),
        })
      )
    }
  }, [loading])

  // Check this logic
  useEffect(() => {
    const { isClick, data: dataAddToCart } = isClickAddToCart

    // eslint-disable-next-line vtex/prefer-early-return
    if (isClick) {
      const dataProduct = [
        {
          sku: dataAddToCart.id,
          quantity: dataAddToCart.quantity,
          price: dataAddToCart?.price,
          category: dataAddToCart?.category || 'unnkown',
          subcategory: dataAddToCart?.subcategory || 'unnkown',
        },
      ]

      if (dataAddToCart.id) {
        handleEcommerce(Events.add, { products: dataProduct })
      }

      dispatchActions({
        type: 'SET_IS_CLICK_ADD_TO_CART',
        args: {
          isClick: false,
          data: null,
        },
      })
    }
  }, [isClickAddToCart])
}

```


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

[Assistant]
Here's the implementation:

```typescript
import { LOCALES } from '../locales'

export default {
  [LOCALES.SPANISH]: {
    'store/checkoutless.generalMesage.appName': 'Kuikpay',
    'store/checkoutless.generalMesage.loading': 'Cargando...',
    'store/checkoutless.generalError': 'Ha ocurrido un error',
    'store/checkoutless.generalMessage.or': 'o',
    'store/checkoutless.generalMessage.in': 'en',
    'store/checkoutless.register.alt.loading': 'Cargando...',
    'store/checkoutless.register.data': 'Datos',
    'store/checkoutless.register.shipping': 'Entrega',
    'store/checkoutless.register.noOptions': 'No se encontraron resultados',
    'store/checkoutless.register.payment': 'Pago',
    'store/checkoutless.register.email': 'Email*',
    'store/checkoutless.register.emailError':
      'El email debe ser un email válido',
    'store/checkoutless.register.name': 'Nombre*',
    'store/checkoutless.register.nameError':
      'El nombre solo puede contener letras',
    'store/checkoutless.register.lastname': 'Apellido*',
    'store/checkoutless.register.lastnameError':
      'El apellido solo puede contener letras',
    'store/checkoutless.register.neighborhoodError': 'Barrio incorrecto',
    'store/checkoutless.register.prefix': 'Prefijo*',
    'store/checkoutless.register.phone': 'Teléfono*',
    'store/checkoutless.register.phoneError':
      'El teléfono solo puede contener números y el máximo son 10 dígitos',
    'store/checkoutless.register.documentType': 'Documento*',
    'store/checkoutless.register.document': 'Cédula*',
    'store/checkoutless.register.documentError':
      'Formato de documento inválido',
    'store/checkoutless.register.habeasData':
      'He leído y acepto los {terms} del sitio. Acepto también las {privacy} y tratamientos de datos personales',
    'store/checkoutless.register.habeasData.terms': 'Términos y condiciones',
    'store/checkoutless.register.habeasData.privacy': 'políticas de privacidad',
    'store/checkoutless.register.country': 'País*',
    'store/checkoutless.register.state': 'Departamento*',
    'store/checkoutless.register.city': 'Ciudad*',
    'store/checkoutless.register.neighborhood': 'Barrio*',
    'store/checkoutless.register.address': 'Dirección*',
    'store/checkoutless.register.address.alternative':
      'Esta dirección esta actualizada con la tienda',
    'store/checkoutless.register.addressError': 'Dirección incorrecta',
    'store/checkoutless.register.complement': 'Torre, apto, oficina',
    'store/checkoutless.register.postalCode': 'Código postal*',
    'store/checkoutless.register.postalCodeError':
      'El código postal solo puede contener números',
    'store/checkoutless.register.creditCard': 'Tarjeta de crédito',
    'store/checkoutless.register.creditCardName': 'Nombre en la tarjeta',
    'store/checkoutless.register.creditCardNumber': 'Número de tarjeta',
    'store/checkoutless.register.creditCardError':
      'Alguno de los campos no es válido',
    'store/checkoutless.register.payOnReceive': 'Pago Contraentrega',
    'store/checkoutless.register.customerCredit':
      '{store} compra ahora y paga después',
    'store/checkoutless.register.customerCredit.fail':
      'No cuentas con el cupo ORION suficiente para finalizar la compra',
    'store/checkoutless.register.customerCredit.study.title':
      'Estamos estudiando tu perfil',
    'store/checkoutless.register.customerCredit.study.description':
      'Nos encontramos validando tu información',
    'store/checkoutless.register.customerCredit.study.approved.minmessage':
      'Tienes un cupo de {value} para tu compra',
    'store/checkoutless.register.customerCredit.study.initialmessage':
      'Compra ahora y paga en {quantity} de {value}',
    'store/checkoutless.register.customerCredit.study.approved.title':
      '¡Felicitaciones!',
    'store/checkoutless.register.customerCredit.study.approved.description':
      'Hemos aprobado tu cupo ORION por {value}',
    'store/checkoutless.register.customerCredit.study.approved.message':
      'Tu pago ya puede ser aplicado',
    'store/checkoutless.register.customerCredit.study.deny.title':
      'Lo sentimos',
    'store/checkoutless.register.customerCredit.study.deny.description':
      'Después de estudiar tu perfil tu cupo ORION no ha sido aprobado, por favor finaliza tu compra con otro medio de pago',
    'store/checkoutless.register.payOnReceiveMessage':
      'En el momento de la entrega de tu pedido se realizará la recolección del efectivo. Recuerda tener el valor exacto ya que el transportador no tiene cambio.',
    'store/checkoutless.register.checkoutErrorTitle': 'Error en el pago',
    'store/checkoutless.register.checkoutError':
      'Tu pago no ha sido aprobado, por favor intenta nuevamente con otro medio de pago.',
    'store/checkoutless.register.processingPayment': 'Estamos Creando Tu Orden',
    'store/checkoutless.register.pay': 'Pagar {price}',
    'store/checkoutless.register.pay.loading': 'Estamos creando tu pedido',
    'store/checkoutless.register.pay.delivery': 'Entrega a domicilio',
    'store/checkoutless.register.pay.pickup-point': 'Recoge en',
    'store/checkoutless.register.pay.total': 'Total a pagar:',
    'store/checkoutless.register.card.name': 'Nombre *',
    'store/checkoutless.register.card.nameError': 'El nombre es obligatorio',
    'store/checkoutless.register.card.document': 'Número de identificación *',
    'store/checkoutless.register.card.number': 'Número de tarjeta *',
    'store/checkoutless.register.card.numberError':
      'Número de tarjeta inválido',
    'store/checkoutless.register.card.franchiseError':
      'Esta franquicia no está disponible para cerrar esta compra. Intente con otra por favor.',
    'store/checkoutless.register.card.dues': 'Cuotas *',
    'store/checkoutless.register.card.duesError': 'Cuotas incorrectas',
    'store/checkoutless.register.card.expiryDate': 'MM / AA *',
    'store/checkoutless.register.card.expiryDateError': 'Fecha incorrecta',
    'store/checkoutless.register.card.cvv': 'CVC',
    'store/checkoutless.register.card.enterAllFields':
      'Por favor ingresa todos los campos obligatorios para continuar',
    'store/checkoutless.register.notAddress':
      'Algunos productos no están disponibles para recoger en tienda. Podemos enviártelos, por favor ingresa tus datos de entrega.',
    'store/checkoutless.register.step.personalData': 'Continuar Mis Datos',
    'store/checkoutless.register.step.location': 'Continuar Mi Ubicación',
    'store/checkoutless.register.step.logistic': 'Continuar Mi Entrega',
    'store/checkoutless.register.step.payment': 'Continuar Mi Pago',
    'store/checkoutless.button.loading': 'Cargando',
    'store/checkoutless.button.continue': 'Continuar',
    'store/checkoutless.text.select': 'Seleccionar',
    'store/checkoutless.button.save': 'Guardar',
    'store/checkoutless.button.goShopping': 'Ir a comprar',
    'store/checkoutless.accessKey.message':
      'Te hemos enviado un código de seguridad de 6 digitos a tu correo, ingrésalo para continuar.',
    'store/checkoutless.accessKey.messageError':
      'El código que ingresaste no es correcto, por favor ingrésalo nuevamente.',
    'store/checkoutless.accessKey.sessionExpireTitle':
      'El tiempo de tu sesión ha expirado',
    'store/checkoutless.accessKey.sessionExpireText':
      'Por seguridad hemos bloqueado el código por {minutes} minuto, por favor inténtalo de nuevo para terminar tu proceso.',
    'store/checkoutless.accessKey.question': '¿No has recibido el código?',
    'store/checkoutless.accessKey.resendCode': 'Reenviar el código',
    'store/checkoutless.accessKey.newCode': 'solicita un nuevo código',
    'store/checkoutless.accessKey.oneMinute': 'dentro de 1 minuto',
    'store/checkoutless.accessKey.countdownSecondsMessage':
      'Podrás solicitar un nuevo código en',
    'store/checkoutless.accessKey.countdownSeconds': '{seconds} segundos',
    'store/checkoutless.logistics.shipping': 'Envío {selectedSla}',
    'store/checkoutless.logistics.packages': 'Tienes 2 entregas programadas',
    'store/checkoutless.logistics.sameDay': 'hoy',
    'store/checkoutless.logistics.businessDays': 'días hábiles',
    'store/checkoutless.logistics.days': 'días',
    'store/checkoutless.logistics.minutes': 'minutos',
    'store/checkoutless.logistics.date': 'Fecha de entrega',
    'store/checkoutless.logistics.delivery': 'Domicilio',
    'store/checkoutless.logistics.pickUp': 'Recogida',
    'store/checkoutless.logistics.pickUpInStore': 'Recoger en tienda',
    'store/checkoutless.logistics.homeDelivery': 'Entrega a domicilio',
    'store/checkoutless.logistics.endingOrderPackages':
      'Compra {package} de {length}',
    'store/checkoutless.logistics.chooseStore': 'Elegir tienda',
    'store/checkoutless.logistics.chooseShipping': 'Elegir tipo de domicilio',
    'store/checkoutless.logistics.deliveryType':
      'Envío {type} (Recíbelo {in} {days} - {price})',
    'store/checkoutless.logistics.shippingSteps': 'Paquete {step}',
    'store/checkoutless.logistics.packageSteps':
      'Entrega {step} de {totalSteps}',
    'store/checkoutless.logistics.deliveryCost': 'Costo de Entrega',
    'store/checkoutless.logistics.freeDeliveryCost': 'Gratis',
    'store/checkoutless.orderPlaced.thanks': '¡Gracias por tu compra!',
    'store/checkoutless.orderPlaced.pending': 'Pago pendiente de aprobación',
    'store/checkoutless.orderPlaced.pendingMessage':
      'Tu pago está siendo procesado, te notificaremos una vez haya sido aprobado',
    'store/checkoutless.orderPlaced.confirmationMessage':
      'Hemos enviado a tu correo electrónico con una copia de tu factura electrónica',
    'store/checkoutless.summary.showOrder': 'Mi orden',
    'store/checkoutless.summary.myOrder': 'Mi orden',
    'store/checkoutless.summary.MyInfo': 'Mis datos',
    'store/checkoutless.summary.myPersonalData': 'Mis datos personales',
    'store/checkoutless.summary.error': 'No hay productos',
    'store/checkoutless.summary.hide': 'Ocultar orden',
    'store/checkoutless.summary.unit': '{quantity} Und.',
    'store/checkoutless.summary.unavailable':
      'Este producto no se encuentra disponible',
    'store/checkoutless.summary.unavailableLogistic':
      'Este producto no se encuentra disponible para tu dirección',
    'store/checkoutless.summary.subtotal': 'Subtotal',
    'store/checkoutless.summary.total': 'Total',
    'store/checkoutless.summary.shipping': 'Envío',
    'store/checkoutless.summary.taxes': 'Impuestos',
    'store/checkoutless.summary.discounts': 'Descuentos',
    'store/checkoutless.summary.isGift': 'La compra incluye',
    'store/checkoutless.summary.notAddress':
      'Algunos productos no están disponibles para recoger en tienda. Podemos enviártelos, por favor ',
    'store/checkoutless.summary.nonEditableDelivery':
      'Para garantizarte la disponibilidad de tus productos, no puedes cambiar ni tu método de entrega, ni tu dirección seleccionada.',
    'store/checkoutless.summary.notAddressLink':
      'ingresa aquí tus datos de entrega.',
    'store/checkoutless.summary.undefinedTotal': 'Por calcular',
    'store/checkoutless.summary.dividedPackage':
      'Hemos dividido tu paquete en múltiples entregas',
    'store/checkoutless.summary.productsNotAvailable':
      'Algunos de tus productos no se encuentran disponibles para el metodo de entrega seleccionado',
    'store/checkoutless.summary.free': 'Gratis',
    'store/checkoutless.userInfo.unavailableProducts':
      'Hay productos que no están disponibles para entrega en esta dirección. Por favor cambie la dirección o ',
    'store/checkoutless.userInfo.noProducts':
      'No hay productos disponibles para seleccionar datos de entrega',
    'store/checkoutless.userInfo.unavailableLink':
      'elimine los productos del carrito.',
    'store/checkoutless.userInfo.email': '{customText}',
    'store/checkoutless.userInfo.address': '{customText}',
    'store/checkoutless.userInfo.address.alternative':
      'Esta dirección esta actualizada con la tienda',
    'store/checkoutless.userInfo.payment': '{customText}',
    'store/checkoutless.userInfo.addressDeleted':
      'Dirección eliminada correctamente',
    'store/checkoutless.userInfo.addressEdited':
      'Dirección editada correctamente',
    'store/checkoutless.userInfo.paymentDeleted':
      'Método de pago eliminado correctamente',
    'store/checkoutless.userInfo.deleteAddressError':
      'Se presentaron inconvenientes eliminando la dirección, por favor intenta de nuevo más tarde',
    'store/checkoutless.userInfo.deletePaymentError':
      'Se presentaron inconvenientes eliminando el método de pago, por favor intenta de nuevo más tarde',
    'store/checkoutless.userInfo.newAddress': 'Nueva dirección',
    'store/checkoutless.userInfo.paymentMethod': 'Método de pago',
    'store/checkoutless.userInfo.addPaymentMethod': 'Usar otro medio de pago',
    'store/checkoutless.userInfo.otherPaymentMethod': 'Otros medios de pago',
    'store/checkoutless.userInfo.deleteLink': 'Eliminar',
    'store/checkoutless.userInfo.confirmDeleteAddress':
      'Estas apunto de eliminar tu dirección {customText}. ',
    'store/checkoutless.userInfo.confirmDeletePayment':
      'Estas apunto de eliminar tu tarjeta de crédito ******** {customText}. ',
    'store/checkoutless.userInfo.myCards': 'Método de pago - Mis tarjetas',
    'store/checkoutless.card.cardNumberError':
      'Ingresa el número de tu tarjeta',
    'store/checkoutless.card.cardNumber': 'Número de tarjeta *',
    'store/checkoutless.card.cardExpirationMonthError': 'Elige un mes',
    'store/checkoutless.card.cardExpirationYearError': 'Elige un año',
    'store/checkoutless.card.identificationTypeError':
      'Ingresa tu tipo de documento',
    'store/checkoutless.card.identificationNumberError': 'Ingresa tu documento',
    'store/checkoutless.card.issuerError': 'Ingresa tu banco',
    'store/checkoutless.card.cardholderNameError':
      'Ingresa el nombre y apellido',
    'store/checkoutless.card.securityCodeCVV': 'CVV *',
    'store/checkoutless.card.cvv': 'CVV',
    'store/checkoutless.card.securityCodeError':
      'Ingresa el código de seguridad',
    'store/checkoutless.card.invalidCardNumberError':
      'Ingresa un número de tarjeta válido',
    'store/checkoutless.card.invalidSecurityCodeError':
      'Revisa el código de seguridad',
    'store/checkoutless.card.invalidcardholderNameError':
      'Ingresa un nombre válido',
    'store/checkoutless.card.invalidIdentificationTypeError':
      'El tipo de documento es inválido',
    'store/checkoutless.card.invalidIdentificationNumberError':
      'El documento es inválido',
    'store/checkoutless.card.invalidCardExpirationMonthError':
      'El mes es inválido',
    'store/checkoutless.card.invalidCardExpirationYearError':
      'El año es inválido',
    'store/checkoutless.card.defaultError': 'Revisa los datos',
    'store/checkoutless.card.invalidCardExpirationError':
      'La fecha de expiración no es válida',
    'store/checkoutless.location.unAvailable':
      'Los datos de localización no están disponibles, por favor acepta los permisos de ubicación e intenta nuevamente',
    'store/checkoutless.location.notSuported':
      'Geolocalización no soportada en su navegador, por favor actualicelo',
    'store/checkoutless.location.denied':
      'Acceso a la ubicación denegado, para usar esta funcionalidad debe cambiar los permisos del navegador',
    'store/checkoutless.location.generalError':
      'Ocurrió un error obteniendo la ubicación del navegador, por favor intente de nuevo luego',
    'store/checkoutless.location.zeroResults':
      'No se encontraron resultados para tu ubicación actual, por favor ingresa la dirección manualmente',
    'store/checkoutless.location.imgText': 'Estamos actualizando tu ubicación',
    'store/checkoutless.location.userLocation': 'Usar mi ubicación actual',
    'store/checkoutless.location.EnterCity':
      'Ingresa la ciudad donde vas a recibir tu pedido',
    'store/checkoutless.card.securityCode': 'Código de seguridad',
    'store/checkoutless.next': 'Continuar',
    'store/checkoutless.card.cvcInfo':
      'Corresponde a los 3 o 4 dígitos ubicados en la parte posterior de tu tarjeta.',
    'store/checkoutless.validateItems.text':
      'Los siguientes productos no están disponibles para pagar por nuestra plataforma',
    'store/checkoutless.validateItems.description':
      'Para continuar puedes eliminarlos o puedes realizar tu compra desde el checkout',
    'store/checkoutless.validateItems.deleteAndContinue':
      'Eliminar y continuar',
    'store/checkoutless.validateItems.checkout': 'Ir a checkout',
    'store/checkoutless.multiplePackages.text':
      'Tu pedido ha sido dividido en varias entregas',
    'store/checkoutless.multiplePackages.description':
      'Para continuar con tu compra debes dirigirte al checkout',
    'store/checkoutless.coupon': 'Código de descuento',
    'store/checkoutless.coupon.action': 'Aplicar',
    'store/checkoutless.coupon.textInput': 'Tengo un código de descuento',
    'store/checkoutless.coupon.error':
      'Cupón no válido, por favor vuelve a ingresarlo',
    'store/checkoutless.coupon.success': 'Tu cupón se agregó con éxito',
    'store/checkoutless.attachment.add': 'Agregar',
    'store/checkoutless.skuSelector.close': 'Agregar y seguir comprando',
    'store/checkoutless.emptyCart.emptyOrder': 'Tu orden está vacía',
    'store/checkoutless.emptyCart.message':
      'Tu orden está vacía, continúa con tu compra',
    'store/checkoutless.emptyCart.messageDeskopt':
      'Por favor continua en la tienda con tu compra',
    'store/checkoutless.userInfo.close': 'Seguir comprando',
    'store/quota.productdetails.quotainformation':
      'Compra ahora y paga después con {store} en {quotas} mensuales de {value}',
    'store/quota.modal.quotainformation.description':
      'Compra ahora y paga después con {store} en cuotas libres de interés.',
    'store/quota.modal.quotainformation.instruction-1':
      'Antójate y selecciona tu producto favorito.',
    'store/quota.modal.quotainformation.instruction-2':
      'Selecciona comprar ahora y pagar después con ORION.',
    'store/quota.modal.quotainformation.instruction-3':
      'Tu compra se distribuirá en cuotas de igual valor, dependiendo del monto final comprado sin intereses.',
    'store/quota.modal.quotainformation.instruction-4':
      'Tendrás multiples opciones para pagar. Tu primera cuota será cargada el día de despacho del producto y las siguientes en cuotas mensuales.',
    'store/checkoutless.security': 'Compra 100% segura',
    'store/checkoutless.user.sorry': '¡ LO SENTIMOS !',
    'store/checkoutless.user.error':
      'Ha ocurrido un error al cargar la información, por favor vuleve a intentarlo',
    'store/checkoutless.user.error.retry': 'Intentar nuevamente',
    'store/checkoutless.user.userEditedMessageHeader':
      'Editaste tus datos con éxito',
    'store/checkoutless.user.userEditedMessageText':
      'Ahora puedes continuar con tu pago 100% seguro',
    'store/checkoutless.user.addressEditedMessageHeader':
      'Editaste tu dirección de domicilio correctamente',
    'store/checkoutless.user.addressEditedMessageText':
      'Ahora puedes continuar con tu pago 100% seguro',
    'store/checkoutless.alert.selectionOfVariations':
      'Por favor elige las preferencias de tu producto para continuar con tu compra',
    'store/checkoutless.user.addAddresInfo': 'Ingresa tu dirección',
    'store/checkoutless.user.addPaymentInfo': 'Selecciona tipo de pago',
    'store/checkoutless.loading.almostThere':
      'Falta poco para finalizar tu compra',
    'store/checkoutless.textAlertCvv':
      'Por favor ingresa el código CVV para continuar con tu pago',
    'store/checkoutless.descriptionAlertCvv':
      'Termina de completar tus datos de pago y continúa con el pago 100% seguro',
  },
}

```


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

[Assistant]
Here's the implementation:

```typescript
import { LOCALES } from '../locales'

export default {
  [LOCALES.ENGLISH]: {
    'store/checkoutless.generalMesage.appName': 'Kuikpay',
    'store/checkoutless.generalMesage.loading': 'Loading...',
    'store/checkoutless.generalError': 'An error has occurred',
    'store/checkoutless.generalMessage.or': 'or',
    'store/checkoutless.generalMessage.in': 'in',
    'store/checkoutless.register.alt.loading': 'Loading...',
    'store/checkoutless.register.data': 'Data',
    'store/checkoutless.register.shipping': 'Shipping',
    'store/checkoutless.register.noOptions': 'No results found',
    'store/checkoutless.register.payment': 'Payment',
    'store/checkoutless.register.email': 'Email*',
    'store/checkoutless.register.emailError': 'The email must be a valid email',
    'store/checkoutless.register.name': 'Name*',
    'store/checkoutless.register.nameError':
      'The name can only contain letters',
    'store/checkoutless.register.lastname': 'Last name*',
    'store/checkoutless.register.lastnameError':
      'The last name can only contain letters',
    'store/checkoutless.register.neighborhoodError': 'Wrong neighborhood',
    'store/checkoutless.register.prefix': 'Prefix*',
    'store/checkoutless.register.phone': 'Phone*',
    'store/checkoutless.register.phoneError':
      'Phone can only contain numbers and the maximum is 10 digits',
    'store/checkoutless.register.documentType': 'ID*',
    'store/checkoutless.register.document': 'Identification document*',
    'store/checkoutless.register.documentError': 'Invalid format id number',
    'store/checkoutless.register.habeasData':
      'I have read and accept the {terms} of the site. I also accept the {privacy} and personal data processing',
    'store/checkoutless.register.habeasData.terms': 'Terms and Conditions',
    'store/checkoutless.register.habeasData.privacy': 'privacy policies',
    'store/checkoutless.register.country': 'Country*',
    'store/checkoutless.register.state': 'State*',
    'store/checkoutless.register.city': 'City*',
    'store/checkoutless.register.neighborhood': 'Neighborhood*',
    'store/checkoutless.register.address': 'Address*',
    'store/checkoutless.register.addressError': 'Wrong address',
    'store/checkoutless.register.complement': 'Tower, apartment, office',
    'store/checkoutless.register.postalCode': 'Postal Code*',
    'store/checkoutless.register.postalCodeError':
      'Postal code can only contain numbers',
    'store/checkoutless.register.creditCard': 'Credit card',
    'store/checkoutless.register.creditCardName': 'Credit card name',
    'store/checkoutless.register.creditCardNumber': 'Card number',
    'store/checkoutless.register.creditCardError':
      'Some of the fields are not valid',
    'store/checkoutless.register.payOnReceive': 'Pay on receive',
    'store/checkoutless.register.customerCredit':
      '{store} compra ahora y paga después',
    'store/checkoutless.register.customerCredit.study.title':
      'We are studying your profile',
    'store/checkoutless.register.customerCredit.study.description':
      'We are validating your information',
    'store/checkoutless.register.customerCredit.study.initialmessage':
      'Compra ahora y paga en {quantity} de {value}',
    'store/checkoutless.register.customerCredit.study.approved.minmessage':
      'Tienes un cupo de {value} para tu compra',
    'store/checkoutless.register.customerCredit.study.approved.title':
      '¡Congratulations!',
    'store/checkoutless.register.customerCredit.study.approved.description':
      'We have approved your credit for {value}',
    'store/checkoutless.register.customerCredit.study.approved.message':
      'Your payment can now be applied',
    'store/checkoutless.register.customerCredit.study.deny.title':
      "We're sorry",
    'store/checkoutless.register.customerCredit.study.deny.description':
      'Después de estudiar tu perfil tu cupo ORION no ha sido aprobado, por favor finaliza tu compra con otro medio de pago',
    'store/checkoutless.register.payOnReceiveMessage':
      'At the time of delivery of your order, the cash will be collected. Remember to have the exact value since the protractor has no change.',
    'store/checkoutless.register.checkoutErrorTitle': 'Payment error',
    'store/checkoutless.register.checkoutError':
      'Your payment has not been approved, please try again with a different payment method.',
    'store/checkoutless.register.processingPayment':
      'We Are Creating Your Order',
    'store/checkoutless.register.pay': 'Pay {price}',
    'store/checkoutless.register.pay.loading': 'We are creating your order',
    'store/checkoutless.register.pay.delivery': 'Home delivery',
    'store/checkoutless.register.pay.pickup-point': 'Pick up in',
    'store/checkoutless.register.pay.total': 'Total to pay:',
    'store/checkoutless.register.card.name': 'Name *',
    'store/checkoutless.register.card.nameError': 'The name is required',
    'store/checkoutless.register.card.document': 'Identification number *',
    'store/checkoutless.register.card.number': 'Card number *',
    'store/checkoutless.register.card.numberError': 'Invalid card number',
    'store/checkoutless.register.card.franchiseError':
      'This franchise is not available to close this purchase. Please try another one.',
    'store/checkoutless.register.card.dues': 'Dues *',
    'store/checkoutless.register.card.duesError': 'Incorrect odds',
    'store/checkoutless.register.card.expiryDate': 'MM / YY',
    'store/checkoutless.register.card.expiryDateError': 'Incorrect date',
    'store/checkoutless.register.card.cvv': 'CVC',
    'store/checkoutless.register.card.enterAllFields':
      'Please enter all required fields to continue',
    'store/checkoutless.register.notAddress':
      'Some products are not available for store pickup. We can send them to you, please enter your delivery information.',
    'store/checkoutless.register.step.personalData': 'Continue My Data',
    'store/checkoutless.register.step.location': 'Continue My Location',
    'store/checkoutless.register.step.logistic': 'Continue My Delivery',
    'store/checkoutless.register.step.payment': 'Continue My Payment',
    'store/checkoutless.button.loading': 'Loading',
    'store/checkoutless.button.continue': 'Continue',
    'store/checkoutless.text.select': 'Select',
    'store/checkoutless.button.save': 'Save',
    'store/checkoutless.button.goShopping': 'Go shopping',
    'store/checkoutless.accessKey.message':
      'We have sent you a 6-digit security code to your cell phone, enter it to continue.',
    'store/checkoutless.accessKey.messageError':
      'The code you entered is not correct, please enter it again.',
    'store/checkoutless.accessKey.sessionExpireTitle':
      'Your session time has expired',
    'store/checkoutless.accessKey.sessionExpireText':
      'For security we have blocked the code for {minutes} minute, please try again to finish your process.',
    'store/checkoutless.accessKey.question': 'Have not you received the code?',
    'store/checkoutless.accessKey.resendCode': 'Resend the code',
    'store/checkoutless.accessKey.newCode': 'request a new code',
    'store/checkoutless.accessKey.oneMinute': 'within 1 minute',
    'store/checkoutless.accessKey.countdownSecondsMessage':
      'You can request a new code at',
    'store/checkoutless.accessKey.countdownSeconds': '{seconds} seconds',
    'store/checkoutless.logistics.shipping': 'Shipping {selectedSla}',
    'store/checkoutless.logistics.packages': 'You have 2 scheduled deliveries',
    'store/checkoutless.logistics.sameDay': 'Same day',
    'store/checkoutless.logistics.businessDays': 'business days',
    'store/checkoutless.logistics.days': 'days',
    'store/checkoutless.logistics.minutes': 'minutes',
    'store/checkoutless.logistics.date': 'date of delivery',
    'store/checkoutless.logistics.delivery': 'Delivery',
    'store/checkoutless.logistics.pickUp': 'Pick up',
    'store/checkoutless.logistics.pickUpInStore': 'Pickup in store',
    'store/checkoutless.logistics.homeDelivery': 'home delivery',
    'store/checkoutless.logistics.endingOrderPackages':
      'Buy {package} of {length}',
    'store/checkoutless.logistics.chooseStore': 'Choose Store',
    'store/checkoutless.logistics.chooseShipping': 'Choose delivery type',
    'store/checkoutless.logistics.deliveryType':
      'Shipping {type} (receive {in} {days} - {price})',
    'store/checkoutless.logistics.shippingSteps': 'Package {step}',
    'store/checkoutless.logistics.packageSteps':
      'Delivery {step} of {totalSteps}',
    'store/checkoutless.logistics.deliveryCost': 'Delivery cost',
    'store/checkoutless.logistics.freeDeliveryCost': 'Free',
    'store/checkoutless.orderPlaced.thanks': 'Thanks for your purchase!',
    'store/checkoutless.orderPlaced.pending': 'Payment pending approval',
    'store/checkoutless.orderPlaced.pendingMessage':
      'Your payment is being processed, we will notify you once it has been approved',
    'store/checkoutless.orderPlaced.confirmationMessage':
      'We have sent a copy of your electronic invoice to your email',
    'store/checkoutless.summary.showOrder': 'My order',
    'store/checkoutless.summary.myOrder': 'My order',
    'store/checkoutless.summary.MyInfo': 'My data',
    'store/checkoutless.summary.myPersonalData': 'My personal data',
    'store/checkoutless.summary.error': 'There are no products.',
    'store/checkoutless.summary.hide': 'Hide order',
    'store/checkoutless.summary.unit': '{quantity} Unit.',
    'store/checkoutless.summary.unavailable':
      'This product is not currently available',
    'store/checkoutless.summary.unavailableLogistic':
      'This product is not available for your address',
    'store/checkoutless.summary.subtotal': 'Subtotal',
    'store/checkoutless.summary.total': 'Total',
    'store/checkoutless.summary.shipping': 'Shipping',
    'store/checkoutless.summary.taxes': 'Taxes',
    'store/checkoutless.summary.discounts': 'Discounts',
    'store/checkoutless.summary.isGift': 'Purchase includes',
    'store/checkoutless.summary.notAddress':
      'Some products are not available for store pickup. can we send them to you please ',
    'store/checkoutless.summary.nonEditableDelivery':
      'In order to guarantee the availability of your products, you cannot change either your delivery method or your selected address.',
    'store/checkoutless.summary.notAddressLink':
      'enter your delivery information here.',
    'store/checkoutless.summary.undefinedTotal': 'To calculate',
    'store/checkoutless.summary.dividedPackage':
      'We have divided your package into multiple deliveries',
    'store/checkoutless.summary.productsNotAvailable':
      'Some of your products are not available for the selected delivery method',
    'store/checkoutless.summary.free': 'Free',
    'store/checkoutless.userInfo.unavailableProducts':
      'Products are not available for delivery to this address. Please change the address or ',
    'store/checkoutless.userInfo.noProducts':
      'There are no products available to select delivery dates',
    'store/checkoutless.userInfo.unavailableLink':
      'remove the products from the cart.',
    'store/checkoutless.userInfo.email': '{customText}',
    'store/checkoutless.userInfo.address': '{customText}',
    'store/checkoutless.userInfo.payment': '{customText}',
    'store/checkoutless.userInfo.addressDeleted':
      'Address removed successfully',
    'store/checkoutless.userInfo.addressEdited': 'Address edited successfully',
    'store/checkoutless.userInfo.paymentDeleted':
      'Payment method successfully removed',
    'store/checkoutless.userInfo.deleteAddressError':
      'There were problems deleting the address, please try again later',
    'store/checkoutless.userInfo.deletePaymentError':
      'There were problems deleting the payment method, please try again later',
    'store/checkoutless.userInfo.newAddress': 'New address',
    'store/checkoutless.userInfo.paymentMethod': 'Payment method',
    'store/checkoutless.userInfo.addPaymentMethod':
      'Use another payment method',
    'store/checkoutless.userInfo.otherPaymentMethod': 'Other payment methods',
    'store/checkoutless.register.customerCredit.fail':
      'No cuentas con el cupo ORION suficiente para finalizar la compra',
    'store/checkoutless.userInfo.deleteLink': 'Remove',
    'store/checkoutless.userInfo.confirmDeleteAddress':
      'You are about to delete your address {customText}. ',
    'store/checkoutless.userInfo.confirmDeletePayment':
      'You are about to delete your credit card ******** {customText}. ',
    'store/checkoutless.userInfo.myCards': 'Payment method - My cards',
    'store/checkoutless.card.cardNumberError': 'Enter your card number',
    'store/checkoutless.card.cardNumber': 'Card Number *',
    'store/checkoutless.card.cardExpirationMonthError': 'Choose a month',
    'store/checkoutless.card.cardExpirationYearError': 'Choose a year',
    'store/checkoutless.card.identificationTypeError':
      'Enter your document type',
    'store/checkoutless.card.identificationNumberError': 'Enter your document',
    'store/checkoutless.card.issuerError': 'Enter your bank',
    'store/checkoutless.card.cardholderNameError':
      'Enter the first and last name',
    'store/checkoutless.card.securityCodeCVV': 'CVV *',
    'store/checkoutless.card.cvv': 'cvv',
    'store/checkoutless.card.securityCodeError': 'Enter the security code',
    'store/checkoutless.card.invalidCardNumberError':
      'Please enter a valid card number',
    'store/checkoutless.card.invalidSecurityCodeError':
      'Check the security code',
    'store/checkoutless.card.invalidcardholderNameError':
      'Please enter a valid name',
    'store/checkoutless.card.invalidIdentificationTypeError':
      'The document type is invalid',
    'store/checkoutless.card.invalidIdentificationNumberError':
      'The document is invalid',
    'store/checkoutless.card.invalidCardExpirationMonthError':
      'The month is invalid',
    'store/checkoutless.card.invalidCardExpirationYearError':
      'The year is invalid',
    'store/checkoutless.card.defaultError': 'Revisa los datos',
    'store/checkoutless.card.invalidCardExpirationError':
      'The expiration date is not valid',
    'store/checkoutless.location.unAvailable':
      'Location data is not available, please accept location permissions and try again',
    'store/checkoutless.location.notSuported':
      'Geolocation not supported in your browser, please update it',
    'store/checkoutless.location.denied':
      'location access denied, to use it functionality you must change the browser permissions',
    'store/checkoutless.location.generalError':
      'An error occurred getting the browser location, please try again later',
    'store/checkoutless.location.zeroResults':
      'No results found for your current location, please enter the address manually',
    'store/checkoutless.location.imgText': 'We are updating your location',
    'store/checkoutless.location.userLocation': 'Use my current location',
    'store/checkoutless.location.EnterCity':
      'Enter the city where you will receive your order',
    'store/checkoutless.card.securityCode': 'Security code',
    'store/checkoutless.next': 'Continue',
    'store/checkoutless.card.cvcInfo':
      'It corresponds to the 3 or 4 digits located on the back of your card.',
    'store/checkoutless.validateItems.text':
      'The following products are not available to pay for our platform',
    'store/checkoutless.validateItems.description':
      'To continue you can delete them or you can make your purchase from the checkout',
    'store/checkoutless.validateItems.deleteAndContinue': 'Delete and continue',
    'store/checkoutless.validateItems.checkout': 'Go to checkout',
    'store/checkoutless.multiplePackages.text':
      'Your order has been divided into several deliveries',
    'store/checkoutless.multiplePackages.description':
      'To continue with your purchase you must go to the checkout',
    'store/checkoutless.coupon': 'Discount code',
    'store/checkoutless.coupon.action': 'Apply',
    'store/checkoutless.coupon.textInput': 'I have a discount code',
    'store/checkoutless.coupon.error': 'Invalid coupon, please re-enter',
    'store/checkoutless.coupon.success': 'Your coupon was added successfully',
    'store/checkoutless.attachment.add': 'Add',
    'store/checkoutless.skuSelector.close': 'Add and continue shopping',
    'store/checkoutless.emptyCart.emptyOrder': 'Your order is empty',
    'store/checkoutless.emptyCart.message':
      'Your order is empty, continue with your purchase',
    'store/checkoutless.emptyCart.messageDeskopt':
      'Please continue in the store with your purchase',
    'store/checkoutless.userInfo.close': 'Keep buying',
    'store/quota.productdetails.quotainformation':
      'Compra ahora y paga después con {store} en {quotas} mensuales de {value}',
    'store/quota.modal.quotainformation.description':
      'Compra ahora y paga después con {store} en cuotas libres de interés.',
    'store/quota.modal.quotainformation.instruction-1':
      'Antójate y selecciona tu producto favorito.',
    'store/quota.modal.quotainformation.instruction-2':
      'Selecciona comprar ahora y pagar después con ORION.',
    'store/quota.modal.quotainformation.instruction-3':
      'Tu compra se distribuirá en cuotas de igual valor, dependiendo del monto final comprado sin intereses.',
    'store/quota.modal.quotainformation.instruction-4':
      'Tendrás multiples opciones para pagar. Tu primera cuota será cargada el día de despacho del producto y las siguientes en cuotas mensuales.',
    'store/checkoutless.security': 'Compra 100% segura',
    'store/checkoutless.user.sorry': "WE'RE SORRY !",
    'store/checkoutless.user.error':
      'There was an error loading the information, please try again',
    'store/checkoutless.user.error.retry': 'Try again',
    'store/checkoutless.userInfo.address.alternative':
      'Esta dirección esta actualizada con la tienda',
    'store/checkoutless.user.userEditedMessageHeader':
      'You edited your data successfully',
    'store/checkoutless.user.userEditedMessageText':
      'Now you can continue with your 100% secure payment',
    'store/checkoutless.user.addressEditedMessageHeader':
      'You have edited your home address correctly',
    'store/checkoutless.user.addressEditedMessageText':
      'Now you can continue with your 100% secure payment',
    'store/checkoutless.alert.selectionOfVariations':
      'Please choose your product preferences to continue with your purchase',
    'store/checkoutless.user.addAddresInfo': 'Enter your address',
    'store/checkoutless.user.addPaymentInfo': 'Select payment type',
    'store/checkoutless.loading.almostThere':
      'There is little left to complete your purchase',
    'store/checkoutless.textAlertCvv':
      'Please enter the CVV code to continue with your payment',
    'store/checkoutless.descriptionAlertCvv':
      'Complete your payment details and proceed with the 100% secure payment.',
  },
}

```