[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/example/package.json from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "kuikpay-sdk-example",
  "homepage": ".",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start-mac": "sudo PORT=80 node ../node_modules/react-scripts/bin/react-scripts.js start",
    "start": "set PORT=80 && node ../node_modules/react-scripts/bin/react-scripts.js start",
    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
  },
  "dependencies": {
    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
    "@testing-library/react": "file:../node_modules/@testing-library/react",
    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
    "@types/jest": "file:../node_modules/@types/jest",
    "@types/node": "file:../node_modules/@types/node",
    "@types/react": "file:../node_modules/@types/react",
    "@types/react-dom": "file:../node_modules/@types/react-dom",
    "kuikpay-sdk": "file:..",
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-gtm-module": "^2.0.11",
    "react-scripts": "file:../node_modules/react-scripts"
  },
  "devDependencies": {
    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
    "@types/react-gtm-module": "^2.0.1"
  },
  "eslintConfig": {
    "extends": "vtex"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
export { Kuikpay } from './KuikpayButtonV2'
export { KuikpayQuotaInformative } from './KuikpayQuotaInformative'
export { KuikpayWrapper } from './KuikpayWrapper'
export { KuikpayButtonPreview } from './components/Preview/KuikpayButtonPreview/KuikpayButtonPreview'
export { KuikpayModalPreview } from './components/Preview/KuikpayModalPreview/KuikpayModalPreview'

```


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

[Assistant]
Here's the implementation:

```typescript
/**
 * Default CSS definition for typescript,
 * will be overridden with file-specific definitions by rollup
 */
declare module '*.css' {
  const content: { [className: string]: string }
  export default content
}

type SvgrComponent = React.StatelessComponent<React.SVGAttributes<SVGElement>>

declare module '*.svg' {
  const svgUrl: string
  const svgComponent: SvgrComponent
  export default svgUrl
  export { svgComponent as ReactComponent }
}

declare module '*.graphql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

declare const $: any
declare const Payment: any
declare const PaymentezLoad: any
declare const PaymentForm: any
// eslint-disable-next-line @typescript-eslint/naming-convention
declare const __RUNTIME__: any
declare const MercadoPago: any
declare const SecureFields: any
declare const SecureFieldsLoad: any
declare const SecureFieldsCVCLoad: any

```


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

[Assistant]
Here's the implementation:

```css
/* add css module styles here (optional) */
/* @font-face {
  font-family: 'VTEXRegular';
  src: url('https://io.vtex.com.br/fonts/vtex-trust/VTEXTrust-Regular.woff');
} */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  :global(.payment-form input:focus),
  :global(.payment-form select:focus),
  :global(.payment-form input.name:focus),
  :global(.payment-form input.card-number:focus),
  :global(.payment-form input.expiry:focus),
  :global(.payment-form input.cvc:focus) {
    font-size: 16px;
    touch-action: pan-x pan-y;
  }

  .Checkoutless p,
  .Checkoutless a,
  .Checkoutless div {
    font-size: 16px;
    touch-action: pan-x pan-y;
  }
}

.Checkoutless {
  display: flex;
  align-items: center;
  position: relative;
}

.Checkoutless .CheckoutlessButton {
  width: 100%;
}

.Checkoutless p,
.Checkoutless a,
.Checkoutless div {
  font-size: 14px;
  font-family: 'Calibri', sans-serif;
  color: #434343;
  font-weight: 400;
}

.liteCheckoutless p,
.liteCheckoutless a,
.liteCheckoutless div {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  color: #011d1a;
  font-weight: 300;
}

.Checkoutless ul,
.Checkoutless li,
.Checkoutless h1,
.Checkoutless h2,
.Checkoutless h3,
.Checkoutless p,
.Checkoutless button {
  margin: 0;
  padding: 0;
}

.Checkoutless ul {
  list-style: none;
}

.Checkoutless button {
  background: transparent;
  border: 0;
  outline: 0;
}

.Checkoutless input:focus {
  outline: 0;
}

.Checkoutless select {
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+)
    no-repeat 95% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.Checkoutless select:disabled {
  background-color: #fafafa;
}

.cvcInput {
  display: table-cell;
  width: 38px !important;
  font-size: 13px !important;
  padding: 0 5px;
}
.cvcInput label {
  color: #919191
}
/* Paymentez Classes */

:global(.payment-form input),
:global(.payment-form select),
:global(.payment-form input.name),
:global(.payment-form input.card-number),
:global(.payment-form input.expiry),
:global(.payment-form input.cvc) {
  font-family: 'Calibri', sans-serif;
  font-size: 14px;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  margin: 0px;
  margin-bottom: 10px;
  border: 1px solid #c4c5ca;
  padding: 0 18px;
}

/* :global(.payment-form select) {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  margin: 8px 0;
} */

:global(.payment-form .name-wrapper .icon),
:global(.payment-form .card-number-wrapper .icon) {
  top: 16px;
}

:global(.payment-form .card-number-wrapper .card-type-icon) {
  top: 21px;
}

:global(.payment-form .expiry-wrapper .icon),
:global(.payment-form .cvc-wrapper .icon) {
  top: 16px;
}

:global(.payment-form .name-wrapper),
:global(.payment-form .card-number-wrapper),
:global(.payment-form .expiry-wrapper),
:global(.payment-form .cvc-wrapper) {
  margin-bottom: 0px;
}

/* end Paymentez Classes */

.button.button {
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  border: 1px solid #434343;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}

.buttonDisabled.buttonDisabled {
  width: 100%;
  height: 48px;
  background-color: #f2f4f5;
  border: 1px solid #9798a5;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.modalPadding {
  padding: 12px;
}

.liteModalPadding {
  padding: 0px 12px 11px 12px;
}

.Checkoutless .textSm {
  font-size: 12px;
}

.Checkoutless .textBase {
  font-size: 14px;
}

.Checkoutless .textLg {
  font-size: 16px;
}

.Checkoutless .textXl {
  font-size: 18px;
}

.Checkoutless .textXXl {
  font-size: 20px;
}

.Checkoutless .regular {
  font-weight: 400;
}

.Checkoutless .medium {
  font-weight: 500;
}

.Checkoutless .semiBold {
  font-weight: 600;
}

.Checkoutless .bold {
  font-weight: 700;
}

.Checkoutless .darkPrimary {
  color: #323845;
}

.Checkoutless .red {
  color: #cb4242;
}

.Checkoutless .enphasis {
  color: #222326;
}

.Checkoutless .blue {
  color: #2953b2;
}

.Checkoutless .liteBlue {
  color: #0096c7;
}

.Checkoutless .green {
  color: #1b998b;
}

.Checkoutless .disabled {
  color: #9798a5;
}

.Checkoutless .gray {
  color: #919191;
}

.Checkoutless .underline {
  text-decoration: underline;
}

.Checkoutless .labelError {
  color: #cb4242;
}

.Checkoutless .fontFamily {
  font-family: 'Calibri', sans-serif;
}

.liteCheckoutless .fontFamily {
  font-family: 'Lato', sans-serif;
}

.Checkoutless .iconPrimary {
  fill: #222326;
}

.Checkoutless .iconSecondary {
  fill: #284859;
}

.Checkoutless .iconTerciary {
  fill: #919191;
}

.Checkoutless .iconAlternative {
  fill: #272525;
}

.Checkoutless .iconAlternativeStroke {
  stroke: #272525;
}

.Checkoutless .iconAlternativeStrokeSecondary {
  stroke: #0096c7;
}

.Checkoutless .iconAlternativeSecondary {
  fill: #0096c7;
}

.Checkoutless .iconBackground {
  fill: transparent;
}

.Checkoutless .iconBackgroundSecondary {
  fill: #fff;
}

.Checkoutless .arrowDownIcon {
  fill: #404040;
}

.Checkoutless .arrowUpIcon {
  fill: #2953b2;
}

.Checkoutless .fillerCheckIcon {
  fill: #368369;
}

.Checkoutless .fillCheckIcon {
  fill: #ffffff;
}

.Checkoutless .fillCheckIconAlternative {
  fill: #009e4f;
}

.Checkoutless .disabledIcon {
  fill: #9798a5;
}

.Checkoutless .strokeCheckiconAlternativeStroke {
  stroke: #009e4f;
}

.Checkoutless .borderBottom {
  border-bottom: 1px solid #e0e2e7;
}

.Checkoutless hr {
  background-color: #222326;
  color: #222326;
}

.Checkoutless :global(.Collapsible) {
  border-bottom: 1px solid #e0e2e7;
}

.Checkoutless .cart {
  fill: #323845;
}

.Checkoutless .backgroundCart {
  fill: #c4c5ca;
}

.Checkoutless .containerError {
  background: #fff0f2;
  box-shadow: 0px 0px 11px 1px #00000029;
}

.modalContainer {
  position: fixed;
  box-shadow: 2px -2px 6px #00000029;
  z-index: 1000000000000;
  background-color: white;
  justify-content: center;
  padding-top: 0;
  overflow-y: auto;
  max-height: 100%;
}

.liteModalContainer {
  max-height: 40%;
}

.modalDesktop {
  width: 30%;
  top: 0;
  right: 0;
  height: 100% !important;
}

.modalMobile {
  width: 100%;
  bottom: 0;
  left: 0;
}

.full {
  height: 100%;
}

.auto {
  height: auto;
}

.Checkoutless .modal {
  display: block;
}

.Checkoutless .modal-hidden {
  display: none;
}

.logo {
}

.headerModal {
}

.securityPayment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 5px;
  position: absolute;
  left: 10px;
  top: 15px;
}

.securityPaymentTooltip {
  box-shadow: 0px 3px 6px #00000029;
  font-size: 14px !important;
  color: #284859 !important;
  position: absolute;
  border-radius: 6px;
  left: 100%;
  min-width: 174px;
  padding: 9px 13px;
  background: #ffffff;
  z-index: 1000;
}

.cursorPointer {
  cursor: pointer;
}

@media (min-width: 992px) {
  .bodyWrapper {
    margin: 25px 15px 0 15px;
    padding-top: 30px;
    border-top: 1px solid #e0e2e7;
  }

  .headerContainer {
    padding: 0 12px;
  }

  .logoContainer {
    top: 30px;
    position: relative;
  }

  .modalPadding {
    padding: 0px;
  }

  .Checkoutless .textXXl {
    font-size: 30px !important;
  }

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

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

@media only screen and (max-width: 768px) {
  .buttonFixed {
    bottom: 0;
    position: fixed;
    width: 100% !important;
    right: 0;
    left: 0;
    background-color: #fff;
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 6%);
    z-index: 100;
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Provider } from 'react-redux'
import { ApolloProvider } from '@apollo/client'

import { useHandleVisualization } from './hooks/useHandleVisualization'
import { MyCheckoutButtonContainer } from './components/MyCheckoutButton/MyCheckoutButtonContainer'
import type { ItemToAdd, Product, ProductItem, Runtime } from './interfaces'
import store from './contexts/global-context/store'
import client from './services/ApolloClientConfig'
import ButtonMessageContainer from './components/ButtonMessage/ButtonMessageContainer'
import styles from './myCheckout-styles.module.css'

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
  handleSelectedItem?: (item: ProductItem) => void
  forceOpenModal?: boolean
  styles?: any
  sandbox?: boolean
  runtime: Runtime
  isPreview?: boolean
  text?: string
}

const Component = (props: Props) => {
  const { isPreview, isVisible, product } = props
  const { hidde, initialStyle } = useHandleVisualization(product)

  if (!styles || hidde) return null

  return (
    <div className={styles.Checkoutless} style={isPreview ? {} : initialStyle}>
      <MyCheckoutButtonContainer {...props} />
      <ButtonMessageContainer isVisible={isVisible} />
    </div>
  )
}

export const Kuikpay = (props: Props) => {
  return (
    <Provider store={store}>
      <ApolloProvider client={client(props.sandbox, props.runtime)}>
        <Component {...props} />
      </ApolloProvider>
    </Provider>
  )
}

```


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

[User] Show me the implementation of mycheckout-sdk/src/kuikpay-styles.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
/* add css module styles here (optional) */
/* @font-face {
  font-family: 'VTEXRegular';
  src: url('https://io.vtex.com.br/fonts/vtex-trust/VTEXTrust-Regular.woff');
} */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  :global(.payment-form input:focus),
  :global(.payment-form select:focus),
  :global(.payment-form input.name:focus),
  :global(.payment-form input.card-number:focus),
  :global(.payment-form input.expiry:focus),
  :global(.payment-form input.cvc:focus) {
    font-size: 16px;
    touch-action: pan-x pan-y;
  }
}

.Checkoutless .CheckoutlessButton {
  width: 100%;
}

/* Paymentez Classes */

:global(.payment-form input),
:global(.payment-form select),
:global(.payment-form input.name),
:global(.payment-form input.card-number),
:global(.payment-form input.expiry),
:global(.payment-form input.cvc) {
  font-family: 'Calibri', sans-serif;
  font-size: 14px;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  margin: 0px;
  margin-bottom: 10px;
  border: 1px solid #c4c5ca;
  padding: 0 18px;
}

/* :global(.payment-form select) {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  margin: 8px 0;
} */

:global(.payment-form .name-wrapper .icon),
:global(.payment-form .card-number-wrapper .icon) {
  top: 16px;
}

:global(.payment-form .card-number-wrapper .card-type-icon) {
  top: 21px;
}

:global(.payment-form .expiry-wrapper .icon),
:global(.payment-form .cvc-wrapper .icon) {
  top: 16px;
}

:global(.payment-form .name-wrapper),
:global(.payment-form .card-number-wrapper),
:global(.payment-form .expiry-wrapper),
:global(.payment-form .cvc-wrapper) {
  margin-bottom: 0px;
}

/* end Paymentez Classes */

.button.button {
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  border: 1px solid #1b998b;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}

.buttonDisabled.buttonDisabled {
  width: 100%;
  height: 48px;
  background-color: #f2f4f5;
  border: 1px solid #9798a5;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.modalPadding {
  padding: 12px;
}

.liteModalPadding {
  padding: 0px 12px 11px 12px;
}

.Checkoutless .textSm {
  font-size: 12px;
}

.Checkoutless .textBase {
  font-size: 14px;
}

.Checkoutless .textLg {
  font-size: 16px;
}

.Checkoutless .textXl {
  font-size: 18px;
}

.Checkoutless .textXXl {
  font-size: 20px;
}

.Checkoutless .regular {
  font-weight: 400;
}

.Checkoutless .medium {
  font-weight: 500;
}

.Checkoutless .semiBold {
  font-weight: 600;
}

.Checkoutless .bold {
  font-weight: 700;
}

.Checkoutless .darkPrimary {
  color: #323845;
}

.Checkoutless .red {
  color: #cb4242;
}

.Checkoutless .enphasis {
  color: #1b998b;
}

.Checkoutless .blue {
  color: #2953b2;
}

.Checkoutless .liteBlue {
  color: #0096c7;
}

.Checkoutless .green {
  color: #a1c10c;
}

.Checkoutless .disabled {
  color: #9798a5;
}

.Checkoutless .gray {
  color: #919191;
}

.Checkoutless .underline {
  text-decoration: underline;
}

.Checkoutless .labelError {
  color: #cb4242;
}

.Checkoutless .fontFamily {
  font-family: 'Calibri', sans-serif;
}

.liteCheckoutless .fontFamily {
  font-family: 'Lato', sans-serif;
}

.Checkoutless .iconPrimary {
  fill: #1b998b;
}

.Checkoutless .iconSecondary {
  fill: #284859;
}

.Checkoutless .iconTerciary {
  fill: #919191;
}

.Checkoutless .iconAlternative {
  fill: #272525;
}

.Checkoutless .iconAlternativeStroke {
  stroke: #272525;
}

.Checkoutless .iconAlternativeStrokeSecondary {
  stroke: #0096c7;
}

.Checkoutless .iconAlternativeSecondary {
  fill: #0096c7;
}

.Checkoutless .iconBackground {
  fill: transparent;
}

.Checkoutless .iconBackgroundSecondary {
  fill: #fff;
}

.Checkoutless .arrowDownIcon {
  fill: #404040;
}

.Checkoutless .arrowUpIcon {
  fill: #2953b2;
}

.Checkoutless .fillerCheckIcon {
  fill: #a1c10c;
}

.Checkoutless .fillCheckIcon {
  fill: #284859;
}

.Checkoutless .fillCheckIconAlternative {
  fill: #009e4f;
}

.Checkoutless .disabledIcon {
  fill: #9798a5;
}

.Checkoutless .strokeCheckiconAlternativeStroke {
  stroke: #009e4f;
}

.Checkoutless .borderBottom {
  border-bottom: 1px solid #e0e2e7;
}

.Checkoutless hr {
  background-color: #c5d86d;
  color: #c5d86d;
}

.Checkoutless :global(.Collapsible) {
  border-bottom: 1px solid #e0e2e7;
}

.Checkoutless .cart {
  fill: #eb5b2b;
}

.Checkoutless .backgroundCart {
  fill: #cee9e6;
}

.Checkoutless .containerError {
  background: #fff0f2;
  box-shadow: 0px 0px 11px 1px #00000029;
}

.modalContainer {
  position: fixed;
  box-shadow: 2px -2px 6px #00000029;
  z-index: 1000000000000;
  background-color: white;
  justify-content: center;
  padding-top: 0;
  overflow-y: auto;
  max-height: 100%;
}

.liteModalContainer {
  max-height: 40%;
}

.modalDesktop {
  width: 30%;
  top: 0;
  right: 0;
  height: 100% !important;
}

.modalMobile {
  width: 100%;
  bottom: 0;
  left: 0;
}

.full {
  height: 100%;
}

.auto {
  height: auto;
}

.Checkoutless .modal {
  display: block;
}

.Checkoutless .modal-hidden {
  display: none;
}

.logo {
}

.headerModal {
}
.securityPayment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 5px;
  position: absolute;
  left: 10px;
  top: 15px;
}

.securityPaymentTooltip {
  box-shadow: 0px 3px 6px #00000029;
  font-size: 14px !important;
  color: #284859 !important;
  position: absolute;
  border-radius: 6px;
  left: 100%;
  min-width: 174px;
  padding: 9px 13px;
  background: #ffffff;
  z-index: 1000;
}

.cursorPointer {
  cursor: pointer;
}

@media (min-width: 992px) {
  .bodyWrapper {
    margin: 25px 15px 0 15px;
    padding-top: 30px;
    border-top: 1px solid #e0e2e7;
  }

  .headerContainer {
    padding: 0 12px;
  }

  .logoContainer {
    top: 30px;
    position: relative;
  }

  .modalPadding {
    padding: 0px;
  }

  .Checkoutless .textXXl {
    font-size: 30px !important;
  }

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

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

@media only screen and (max-width: 768px) {
  .buttonFixed {
    bottom: 0;
    position: fixed;
    width: 100% !important;
    right: 0;
    left: 0;
    background-color: #fff;
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 6%);
    z-index: 100;
  }
}

```


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

[Assistant]
Here's the implementation:

```css
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root {
  --primary-color-button: #ff572d;
  --primary-text-color: #011d1a;
  --primary-color-focus: #0096c7;
  --hover-button-color: #f30;
  --success-color: #009e4e;
  --valid-color: #a1c10c;
  --error-color: #d7263d;
  --tooltip-color: #fb8500;
  --alert-color: #ffb703;
  --gray-color: #777777;
  --dark-gray-color: #919191;
  --light-grey-color: #cacaca;
  --white-color: #ffffff;
  --text-regular: 400;
  --text-medium: 500;
  --text-semi-bold: 600;
  --text-light: lighter;
  --text-bold: bold;
}

.Checkoutless {
  display: flex;
  align-items: center;
  position: relative;
}

.Checkoutless p,
.Checkoutless a,
.Checkoutless div,
.Checkoutless input,
.Checkoutless select {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  font-weight: var(--text-regular);
}

.Checkoutless p,
.Checkoutless a,
.Checkoutless div,
.Checkoutless input[type='email'],
.Checkoutless input[type='text'],
.Checkoutless input[type='password'],
.Checkoutless select {
  color: var(--primary-text-color);
}

.Checkoutless p,
.Checkoutless a,
.Checkoutless div {
  touch-action: pan-x pan-y;
}

.Checkoutless ul,
.Checkoutless li,
.Checkoutless h1,
.Checkoutless h2,
.Checkoutless h3,
.Checkoutless p,
.Checkoutless button {
  margin: 0;
  padding: 0;
}

.Checkoutless ul {
  list-style: none;
}

.Checkoutless button {
  background: transparent;
  border: 0;
  outline: 0;
}

.Checkoutless input:focus {
  outline: 0;
}

.Checkoutless select {
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+) no-repeat 95% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.Checkoutless select:disabled {
  background-color: #fafafa;
}

.Checkoutless .textXl {
  font-size: 18px;
}

.Checkoutless .w100 {
  width: 100%;
}

.Checkoutless .cursorPointer {
  cursor: pointer;
}

.Checkoutless .borderBottom {
  border-bottom: 1px solid #c4c5ca;
}

.Checkoutless .summary {
  margin-bottom: 22%;
}

.Checkoutless .containerError {
  background: #fff0f2;
  box-shadow: 0px 0px 11px 1px #00000029;
}

.Checkoutless .underline {
  text-decoration: underline;
}

.Checkoutless .lineThrough {
  text-decoration: line-through;
}

.Checkoutless .inMobileFlex {
  display: flex !important;
}

.Checkoutless .inMobile {
  display: revert !important;
}

.Checkoutless .inDesktop {
  display: none !important;
}

.Checkoutless .displayNone {
  display: none;
}

.Checkoutless .marginBottom {
  margin-bottom: 8px;
}

.Checkoutless .bigMarginBottom {
  margin-bottom: 18px;
}

/* Styles font */

.Checkoutless .textSm {
  font-size: 12px;
}

.Checkoutless .textBase {
  font-size: 14px;
}

.Checkoutless .textLg {
  font-size: 16px;
}

.Checkoutless .regular {
  font-weight: 400;
}

.Checkoutless .medium {
  font-weight: 500;
}

.Checkoutless .semiBold {
  font-weight: 600;
}

.Checkoutless .bold {
  font-weight: 700;
}

/* Styles color */
.Checkoutless .red {
  color: #cb4242;
}

.Checkoutless .disabled {
  color: #9798a5;
}

.Checkoutless .enphasis {
  color: #0096c7;
}

/* Styles icon */
.Checkoutless .iconAlternative {
  fill: var(--primary-text-color);
}

.Checkoutless .fillerCheckIcon {
  fill: #a1c10c;
}

.Checkoutless .iconPrimary {
  fill: var(--primary-color-focus);
}

.Checkoutless .iconSecondary {
  fill: var(--success-color);
}

.Checkoutless .iconDisable {
  fill: var(--gray-color)
}

.Checkoutless .arrowDownIcon {
  fill: #404040;
}

.Checkoutless .arrowUpIcon {
  fill: #2953b2;
}

.Checkoutless .iconBackground {
  fill: transparent;
}

.Checkoutless .iconBackgroundSecondary {
  fill: #fff;
}

.Checkoutless .strokeCheckicon {
  fill: var(--primary-color-focus);
}

.Checkoutless .strokeCheckiconAlternative {
  stroke: var(--primary-text-color);
}

.Checkoutless .fillCheckIcon {
  fill: #284859;
}

.Checkoutless .fillCheckIconAlternative {
  fill: #009e4f;
}

.Checkoutless .iconTerciary {
  fill: #919191;
}

.Checkoutless .iconAlternativeStroke {
  stroke: #272525;
}

.Checkoutless .iconAlternativeStrokeSecondary {
  stroke: #0096c7;
}

.Checkoutless .iconAlternativeSecondary {
  fill: #0096c7;
}

.Checkoutless .cart {
  fill: #eb5b2b;
}

.Checkoutless .backgroundCart {
  fill: #cee9e6;
}

.Checkoutless .loadingContainer {
  display: flex;
  justify-content: center;
  align-content: center;
}

.Checkoutless .loading::before {
  content: url('https://kuikpay.vteximg.com.br/arquivos/ids/155430');
}

.Checkoutless .blueColor,
.Checkoutless .blueColor p {
  color: #0096c7 !important;
}

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

.Checkoutless .titleContainer {
  display: flex;
  align-items: center;
  justify-content: left;
}

.Checkoutless .flexContainer {
  display: flex;
  align-items: center;
}

input[type='radio'] {
  width: 20px;
  height: 20px;
  margin: 5px;
}

/* Style for forms */

.gridFormTwoCols {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 18px;
  padding: 12px 0 6px 0px;
}

.gridFormTwoCols[data-more-left='true'] {
  grid-template-columns: 1.5fr 1fr;
}

.gridFormTwoCols[data-more-right='true'] {
  grid-template-columns: 1fr 1.5fr;
}

.gridFormTwoCols div[data-col='two-col'] {
  grid-column: 1 / 3;
}

@media screen and (min-width: 992px) {

  .Checkoutless p,
  .Checkoutless a,
  .Checkoutless div,
  .Checkoutless input,
  .Checkoutless select {
    font-weight: var(--text-medium);
  }

  .Checkoutless p,
  .Checkoutless a,
  .Checkoutless div,
  .Checkoutless input[type='email'],
  .Checkoutless input[type='text'],
  .Checkoutless input[type='password'],
  .Checkoutless select {
    color: var(--primary-text-color);
  }

  .Checkoutless .inMobileFlex {
    display: none !important;
  }

  .Checkoutless .inMobile {
    display: none !important;
  }

  .Checkoutless .inDesktop {
    display: revert !important;
  }

  .gridFormTwoCols {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 18px;
  }

  .gridFormTwoCols div {
    grid-column: 1 / 3;
  }

  .Checkoutless .blueColor {
    color: #0096c7;
  }

  .Checkoutless .buyButtonContainer,
  .Checkoutless .actionButtonContainer {
    margin-top: 14px;
    right: 0;
    background: #ffffff 0% 0% no-repeat padding-box;
    z-index: 100;
  }

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

  .Checkoutless .marginBottom {
    margin-bottom: 16px;
  }

  .Checkoutless .floatAlert {
    position: inherit;
    bottom: inherit;
    width: inherit;
  }

}

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

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

@media screen and (min-width: 1300px) {
  .Checkoutless .buyButtonContainerFixed {
    width: 33%;
  }
}

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


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

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

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect } from 'react'
import { ApolloProvider } from '@apollo/client'
import { Provider } from 'react-redux'

import store from './contexts/global-context/store'
import client from './services/ApolloClientConfig'
import { UserDataProvider } from './contexts/UserDataProvider'
import { ActionsProvider } from './contexts/ActionsProviderV2'
import Modal from './components/Modal/ModalContainer'
import { I18nProvider } from './i18n'
import type { InitialProps } from './interfaces'
import { useScript } from './hooks/useScript'
import constants from './utils/constants'
import { Params } from './components/Params/Params'
import useCustomCss from './hooks/useCustomCss'
import StoreSetup from './containers/StoreSetup'
import { Simulation } from './containers/Simulation'

export const KuikpayWrapper = (props: InitialProps) => {
  useCustomCss(props.runtime.account, props.sandbox)
  useEffect(() => {
    useScript(constants.MYCHECKOUT_CSS[0], constants.MYCHECKOUT_CSS[1])
  }, [])

  return (
    <Provider store={store}>
      <ActionsProvider {...props}>
        <UserDataProvider>
          <ApolloProvider client={client(props.sandbox, props.runtime)}>
            <StoreSetup {...props}>
              <Simulation>
                <Params />
                <I18nProvider locale={props.language}>
                  <Modal {...props} />
                </I18nProvider>
              </Simulation>
            </StoreSetup>
          </ApolloProvider>
        </UserDataProvider>
      </ActionsProvider>
    </Provider>
  )
}

```


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

[User] Show me the implementation of mycheckout-sdk/src/grid.module.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
/* Style for forms */

.gridFormTwoCols {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 18px;
  padding: 12px 0 6px 0px;
}

.gridFormTwoCols[data-more-left='true'] {
  grid-template-columns: 1.5fr 1fr;
}
.gridFormTwoCols[data-more-right='true'] {
  grid-template-columns: 1fr 1.5fr;
}

.gridFormTwoCols div[data-col='two-col'] {
  grid-column: 1 / 3;
}

/* Principal grid */

.grid {
  display: grid;
  column-gap: 10px;
  row-gap: 18px;
  padding: 12px 0 6px 0px;
}

/* #region grid templates by columns */

.grid[data-grid-cols="1"] {
  grid-template-columns: 1fr;
}

.grid[data-grid-cols="2"] {
  grid-template-columns: 1fr 1fr;
}

.grid[data-grid-cols="3"] {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid[data-grid-cols="4"] {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid[data-grid-cols="5"] {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* #endregion grid templates by columns */

/* #region grid templates by rows */

.grid[data-grid-rows="1"] {
  grid-template-rows: 1fr;
}

.grid[data-grid-rows="2"] {
  grid-template-rows: 1fr 1fr;
}

.grid[data-grid-rows="3"] {
  grid-template-rows: 1fr 1fr 1fr;
}

.grid[data-grid-rows="4"] {
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.grid[data-grid-rows="5"] {
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

/* #endregion grid templates by rows */

/* #region column width */

.grid [data-col-width="1"] {
  grid-column: 1 / 2;
}

.grid [data-col-width="2"] {
  grid-column: 1 / 3;
}

.grid [data-col-width="3"] {
  grid-column: 1 / 4;
}

.grid [data-col-width="4"] {
  grid-column: 1 / 5;
}

.grid [data-col-width="5"] {
  grid-column: 1 / 6;
}

/* #endregion column width */

.grid[data-grid-cols="1"] [data-col="full"] {
  grid-column: 1 ;
}

.grid[data-grid-cols="2"] [data-col="full"] {
  grid-column: 1 / 3;
}

.grid[data-grid-cols="3"] [data-col="full"] {
  grid-column: 1 / 4;
}

.grid[data-grid-cols="4"] [data-col="full"] {
  grid-column: 1 / 5;
}

.grid[data-grid-cols="5"] [data-col="full"] {
  grid-column: 1 / 6;
}

@media screen and (min-width: 992px) {
  .gridFormTwoCols {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 18px;
  }

  .gridFormTwoCols div {
    grid-column: 1 / 3;
  }
}

```


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

[Assistant]
Here's the implementation:

```css
/* add css module styles here (optional) */
/*@font-face {
  font-family: 'VTEXRegular';
  src: url('https://io.vtex.com.br/fonts/vtex-trust/VTEXTrust-Regular.woff');
} */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  :global(.payment-form input:focus),
  :global(.payment-form select:focus),
  :global(.payment-form input.name:focus),
  :global(.payment-form input.card-number:focus),
  :global(.payment-form input.expiry:focus),
  :global(.payment-form input.cvc:focus) {
    font-size: 16px;
    touch-action: pan-x pan-y;
  }

  .Checkoutless p,
  .Checkoutless a,
  .Checkoutless div {
    font-size: 16px;
    touch-action: pan-x pan-y;
  }
}

.Checkoutless {
  display: flex;
  align-items: center;
  position: relative;
}

.Checkoutless .CheckoutlessButton {
  width: 100%;
}

.Checkoutless p,
.Checkoutless a,
.Checkoutless div {
  font-size: 14px;
  font-family: 'Calibri', sans-serif;
  color: #707685;
  font-weight: 400;
}

.liteCheckoutless p,
.liteCheckoutless a,
.liteCheckoutless div {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  color: #011d1a;
  font-weight: 300;
}

.Checkoutless ul,
.Checkoutless li,
.Checkoutless h1,
.Checkoutless h2,
.Checkoutless h3,
.Checkoutless p,
.Checkoutless button {
  margin: 0;
  padding: 0;
}

.Checkoutless ul {
  list-style: none;
}

.Checkoutless button {
  background: transparent;
  border: 0;
  outline: 0;
}

.Checkoutless input:focus {
  outline: 0;
}

.Checkoutless select {
  background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+)
    no-repeat 95% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.Checkoutless select:disabled {
  background-color: #fafafa;
}

/* Paymentez Classes */

:global(.payment-form input),
:global(.payment-form select),
:global(.payment-form input.name),
:global(.payment-form input.card-number),
:global(.payment-form input.expiry),
:global(.payment-form input.cvc) {
  font-family: 'Calibri', sans-serif;
  font-size: 14px;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  margin: 0px;
  margin-bottom: 10px;
  border: 1px solid #c4c5ca;
  padding: 0 18px;
}

/* :global(.payment-form select) {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  margin: 8px 0;
} */

:global(.payment-form .name-wrapper .icon),
:global(.payment-form .card-number-wrapper .icon) {
  top: 16px;
}

:global(.payment-form .card-number-wrapper .card-type-icon) {
  top: 21px;
}

:global(.payment-form .expiry-wrapper .icon),
:global(.payment-form .cvc-wrapper .icon) {
  top: 16px;
}

:global(.payment-form .name-wrapper),
:global(.payment-form .card-number-wrapper),
:global(.payment-form .expiry-wrapper),
:global(.payment-form .cvc-wrapper) {
  margin-bottom: 0px;
}

/* end Paymentez Classes */

.button.button {
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  border: 1px solid #f71963;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}

.buttonDisabled.buttonDisabled {
  width: 100%;
  height: 48px;
  background-color: #f2f4f5;
  border: 1px solid #9798a5;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.modalPadding {
  padding: 12px;
}

.liteModalPadding {
  padding: 0px 12px 11px 12px;
}

.Checkoutless .textSm {
  font-size: 12px;
}

.Checkoutless .textBase {
  font-size: 14px;
}

.Checkoutless .textLg {
  font-size: 16px;
}

.Checkoutless .textXl {
  font-size: 18px;
}

.Checkoutless .textXXl {
  font-size: 20px;
}

.Checkoutless .regular {
  font-weight: 400;
}

.Checkoutless .medium {
  font-weight: 500;
}

.Checkoutless .semiBold {
  font-weight: 600;
}

.Checkoutless .bold {
  font-weight: 700;
}

.Checkoutless .darkPrimary {
  color: #323845;
}

.Checkoutless .red {
  color: #cb4242;
}

.Checkoutless .enphasis {
  color: #f71963;
}

.Checkoutless .blue {
  color: #2953b2;
}

.Checkoutless .liteBlue {
  color: #0096c7;
}

.Checkoutless .green {
  color: #368369;
}

.Checkoutless .disabled {
  color: #9798a5;
}

.Checkoutless .gray {
  color: #919191;
}

.Checkoutless .underline {
  text-decoration: underline;
}

.Checkoutless .labelError {
  color: #cb4242;
}

.Checkoutless .fontFamily {
  font-family: 'Calibri', sans-serif;
}

.liteCheckoutless .fontFamily {
  font-family: 'Lato', sans-serif;
}

.Checkoutless .iconPrimary {
  fill: #f71963;
}

.Checkoutless .iconSecondary {
  fill: #707070;
}

.Checkoutless .iconTerciary {
  fill: #919191;
}

.Checkoutless .iconAlternative {
  fill: #272525;
}

.Checkoutless .iconAlternativeStroke {
  stroke: #272525;
}

.Checkoutless .iconAlternativeStrokeSecondary {
  stroke: #0096c7;
}

.Checkoutless .iconAlternativeSecondary {
  fill: #0096c7;
}

.Checkoutless .iconBackground {
  fill: transparent;
}

.Checkoutless .iconBackgroundSecondary {
  fill: #fff;
}

.Checkoutless .arrowDownIcon {
  fill: #404040;
}

.Checkoutless .arrowUpIcon {
  fill: #2953b2;
}

.Checkoutless .fillerCheckIcon {
  fill: #368369;
}

.Checkoutless .fillCheckIcon {
  fill: #ffffff;
}

.Checkoutless .fillCheckIconAlternative {
  fill: #009e4f;
}

.Checkoutless .disabledIcon {
  fill: #9798a5;
}

.Checkoutless .strokeCheckiconAlternativeStroke {
  stroke: #009e4f;
}

.Checkoutless .borderBottom {
  border-bottom: 1px solid #00000029;
}

.Checkoutless hr {
  background-color: #f71963;
  color: #f71963;
}

.Checkoutless :global(.Collapsible) {
  border-bottom: 1px solid #e0e2e7;
}

.Checkoutless .cart {
  fill: #f71963;
}

.Checkoutless .backgroundCart {
  fill: #c4c5ca;
}

.Checkoutless .containerError {
  background: #fff0f2;
  box-shadow: 0px 0px 11px 1px #00000029;
}

.modalContainer {
  position: fixed;
  box-shadow: 2px -2px 6px #00000029;
  z-index: 1000000000000;
  background-color: white;
  justify-content: center;
  padding-top: 0;
  overflow-y: auto;
  max-height: 100%;
}

.liteModalContainer {
  max-height: 40%;
}

.modalDesktop {
  width: 30%;
  top: 0;
  right: 0;
  height: 100% !important;
}

.modalMobile {
  width: 100%;
  bottom: 0;
  left: 0;
}

.full {
  height: 100%;
}

.auto {
  height: auto;
}

.Checkoutless .modal {
  display: block;
}

.Checkoutless .modal-hidden {
  display: none;
}

.logo {
}

.headerModal {
}
.securityPayment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 5px;
  position: absolute;
  left: 10px;
  top: 15px;
}

.securityPaymentTooltip {
  box-shadow: 0px 3px 6px #00000029;
  font-size: 14px !important;
  color: #284859 !important;
  position: absolute;
  border-radius: 6px;
  left: 100%;
  min-width: 174px;
  padding: 9px 13px;
  background: #ffffff;
  z-index: 1000;
}

.cursorPointer {
  cursor: pointer;
}

@media (min-width: 992px) {
  .bodyWrapper {
    margin: 25px 15px 0 15px;
    padding-top: 30px;
    border-top: 1px solid #e0e2e7;
  }

  .headerContainer {
    padding: 0 12px;
  }

  .logoContainer {
    top: 30px;
    position: relative;
  }

  .modalPadding {
    padding: 0px;
  }

  .Checkoutless .textXXl {
    font-size: 30px !important;
  }

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

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

@media only screen and (max-width: 768px) {
  .buttonFixed {
    bottom: 0;
    position: fixed;
    width: 100% !important;
    right: 0;
    left: 0;
    background-color: #fff;
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 6%);
    z-index: 100;
  }
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { ApolloProvider } from '@apollo/client'
import { Provider } from 'react-redux'

import type { Product, ProductItem, Runtime } from './interfaces'
import store from './contexts/global-context/store'
import client from './services/ApolloClientConfig'
import QuotaInformativeComponentContainer from './components/QuotaInformativeComponent/QuotaInformativeComponentContainer'

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

export const KuikpayQuotaInformative = (props: Props) => {
  return (
    <Provider store={store}>
      <ApolloProvider client={client(props.sandbox, props.runtime)}>
        <QuotaInformativeComponentContainer {...props} />
      </ApolloProvider>
    </Provider>
  )
}

```


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

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

[Assistant]
Here's the implementation:

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

import { Info } from './components/Icons'
import { ToolTip } from './components/shared'
import { selectSettings } from './contexts/global-context/reducers/uiSettingsSlice'

export const KuikpayButtonMessage = ({ styles, isVisible }: any) => {
  const settings = useSelector(selectSettings)
  const buttonMessage = useMemo(
    () => pathOr('', ['buttonMessage'], settings),
    [settings]
  )

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

  const [message, setMessage] = useState<string>()

  useEffect(() => {
    if (buttonMessage) {
      setMessage(
        buttonMessage.replaceAll(/\*[aA-zZÀ-ú | ]+\*/g, (e) => {
          const element = e.replace(/\*/g, '')

          return `<span>${element}</span>`
        })
      )
    }
  }, [buttonMessage])

  return useMemo(() => {
    if (!isVisible || !isConfigured) return <Fragment />
    if (!message) return <Fragment />

    return (
      <div className={styles.CheckoutlessInfo}>
        <ToolTip
          tooltip={
            <div className={styles.CheckoutlessInfoMessage}>
              <div dangerouslySetInnerHTML={{ __html: message }}></div>
            </div>
          }
        >
          <Info />
        </ToolTip>
      </div>
    )
  }, [buttonMessage, message, isVisible, isConfigured])
}

```


[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/example/public/manifest.json from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "short_name": "kuikpay-sdk",
  "name": "kuikpay-sdk",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

```


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

[Assistant]
Here's the implementation:

```tsx
import './index.css'

import React from 'react'
import ReactDOM from 'react-dom'
import TagManager from 'react-gtm-module'

import App from './App'

const tagManagerArgs = {
  gtmId: process.env.REACT_APP_GOOGLE_TAG_MANAGER || 'GTM-WZGDLLN',
}

TagManager.initialize(tagManagerArgs)

ReactDOM.render(<App />, document.getElementById('root'))

```


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

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable import/order */
import React, { useState, useEffect } from 'react'
import { Kuikpay, KuikpayQuotaInformative, KuikpayWrapper } from 'kuikpay-sdk'

import { getOrderForm, cartSimulation, ORDER_FORM_ID } from './services'
import 'kuikpay-sdk/dist/index.css'

import { product, selectedItem } from './mocks'

// const orderItems = [
//   {
//     id: '7',
//     quantity: 1,
//     seller: '1',
//   },
// ]

const App = () => {
  const [orderForm, setOrderForm] = useState<any>({})
  const [order, setOrder] = useState<any>({})

  useEffect(() => {
    getOrderForm()
      .then((res) => res.json())
      .then((data) => {
        setOrderForm(data)
      })
  }, [])

  // useEffect(() => {
  //   if (orderForm.orderFormId) {
  //     addItem(orderForm.orderFormId, orderItems)
  //       .then((res) => res.json())
  //       .then((data) => {
  //         console.log(`data`, data)
  //         setOrderForm(data)
  //       })
  //   }
  // }, [orderForm])

  useEffect(() => {
    if (Object.keys(orderForm).length) {
      // const itemsFormatted = orderForm.items.map((item: any) => {
      //   return {
      //     uniqueId: item.uniqueId,
      //     id: item.id,
      //     name: item.name,
      //     quantity: item.quantity,
      //     sellingPrice: item.sellingPrice,
      //     imageUrl: item.imageUrls.at1x,
      //     availability: item.availability,
      //   }
      // })

      const formattedOrderForm = {
        // clientProfileData: {
        //   email: orderForm.clientProfileData?.email,
        //   document: orderForm.clientProfileData?.document,
        // },
        // shippingData: {
        //   selectedAddress: {
        //     addressId: '1',
        //     addressType: 'residential',
        //     city: 'Medellín',
        //     complement: 'Pimer piso',
        //     country: 'Colombia',
        //     geoCoordinates: [1, 2],
        //     isDisposable: false,
        //     neighborhood: 'Aranjuez',
        //     number: '1',
        //     postalCode: '05001',
        //     receiverName: 'Brian Carmona',
        //     reference: 'Near',
        //     state: 'Antioquia',
        //     street: 'Calle 56 N 45 - 45',
        //     completed: false,
        //   },
        // },
        // shippingData: {
        //   addressAlternative: {
        //     addressId: '4d33c3aac14842c3ac48ccb97bde035e',
        //     addressType: 'search',
        //     city: 'Medellín',
        //     complement: 'Exito Bello',
        //     country: 'COL',
        //     geoCoordinates: {
        //       latitude: '6.3398571',
        //       longitude: '-75.5444748',
        //     },
        //     isDisposable: true,
        //     neighborhood: '',
        //     number: '0',
        //     postalCode: '05001',
        //     receiverName: '',
        //     reference: '',
        //     state: 'Antioquia',
        //     street: 'Diagonal 51l # 35 - 120',
        //     completed: false,
        //   },
        // },
        items: orderForm?.items.map((item: any) => ({
          ...item,
          sellingPrice: item.sellingPrice / 100,
          price: item?.price / 100,
          listPrice: item?.listPrice / 100,
        })),
        totalizers: orderForm.totalizers,
        value: orderForm.value / 100,
        paymentData: {
          availablePaymentMethods:
            orderForm.paymentData?.availableAccounts?.map((card: any) => ({
              franchise: card.paymentSystemName,
              id: card.accountId,
              number: card.cardNumber.substring(12),
              paymentMethod: 'tc',
              bin: '411111',
              origin: 'store',
            })),
          installmentOptions: orderForm?.paymentData?.installmentOptions || [],
        },
        messages: [
          // {
          //   code: 'couponNotFound',
          // },
        ],
        marketingData: {
          coupon: orderForm?.marketingData?.coupon,
        },
      }

      setOrder(formattedOrderForm)
    }
  }, [orderForm])

  const validateItems = () => {
    // const items = orderForm?.items || []
    return []
  }

  const insertCoupon = async (text: string) => {
    const headers = new Headers()

    headers.append('Accept', 'application/json')
    headers.append('Content-Type', 'application/json')

    const body = JSON.stringify({
      text,
    })

    const requestOptions: any = {
      method: 'POST',
      headers,
      body,
      redirect: 'follow',
    }

    const response = await fetch(
      // 'api/checkout/pub/orderForm/{orderFormId}/coupons',
      `http://localhost:4001/api/checkout/pub/orderForm/${ORDER_FORM_ID}/coupons`,
      requestOptions
    )

    const data = await response.json()

    setOrderForm(data)
  }

  const updateItems = async (
    items: Array<{ quantity?: number; uniqueId?: string; index?: number }>
  ) => {
    const myHeaders = new Headers()

    myHeaders.append('Accept', 'application/json')
    myHeaders.append('Content-Type', 'application/json')

    const raw = JSON.stringify({
      orderItems: items,
    })

    const requestOptions: any = {
      method: 'PATCH',
      headers: myHeaders,
      body: raw,
      redirect: 'follow',
    }

    const response = await fetch(
      `http://localhost:4001/api/checkout/pub/orderForm/${ORDER_FORM_ID}/items`,
      requestOptions
    )

    const data = await response.json()

    setOrderForm(data)
  }

  /* Config bag */
  const config = {
    mainSellerId: '1',
    salesChannel: '1',
    customItems: [
      {
        sku: '123456790',
        customClassName: 'custm-bag',
        name: 'Impuesto de bolsa',
        description: 'Ley 1819 de 2016',
        sendToFinish: true,
        hiddenUnits: true,
        hiddenRemove: true,
        showTotalMount: true,
      },
    ],
    customSubTotalItems: [
      {
        name: 'Impuesto de bolsas plásticas',
        value: 200,
      },
    ],
  }

  const storeTermsAndConditionsContent = [
    {
      id: 'termsAndConditions',
      content:
        "<p>Acepto <a href='https://www.exito.com/terminos-condiciones' target='_blank'>términos y condiciones</a>, <a href='https://www.exito.com/terminos-de-marketplace' target='_blank'>términos y condiciones marketplace</a>.</p>",
    },
    {
      id: 'dataTreatment',
      content:
        "<p>Autorizo el <a href='https://www.exito.com/tratamiento-de-datos-personales' target='_blank'>tratamiento de mis datos personales con las siguientes condiciones</a>.</p>",
    },
  ]

  const runtime = {
    account: 'amalia',
    workspace: 'qakuikpay',
    platform: 'vtex-io',
  }

  const showPaymentMethods = [
    {
      id: '201',
      show: false,
    },
  ]

  return (
    <>
      <KuikpayWrapper
        updateSelectedAddress={() => {}}
        cartSimulation={cartSimulation}
        language={'es'}
        theme={'kuikpay'}
        runtime={runtime}
        sandbox={true}
        addToCart={() => {}}
        updateItems={updateItems}
        orderForm={order}
        clearData={() => {}}
        validateItems={validateItems}
        insertCoupon={insertCoupon}
        addItemOffering={() => {}}
        removeItemOffering={() => {}}
        updateOrderFormProfile={() => {}}
        clearOrderFormProfile={() => {}}
        skuSelectorProps={{
          useImageInColor: true,
        }}
        config={config}
        storeTermsAndConditionsContent={storeTermsAndConditionsContent}
        showPaymentMethods={showPaymentMethods}
      />
      <KuikpayQuotaInformative
        theme={'kuikpay'}
        language={'es'}
        selectedItem={selectedItem}
        runtime={runtime}
        sandbox={true}
      />
      <Kuikpay
        addToCart={() => {}}
        isVisible={true}
        multipleAvailableSKUs={false}
        onClickBehavior="ensure-sku-selection"
        product={product}
        selectedItem={selectedItem}
        runtime={runtime}
        sandbox={true}
      />
    </>
  )
}

export default App

```


[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/example/src/App.test.tsx from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<App />, div)
  ReactDOM.unmountComponentAtNode(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/example/src/index.css from the mycheckout-sdk VTEX app.

[Assistant]
Here's the implementation:

```css
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

```


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

[Assistant]
Here's the implementation:

```typescript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

```


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

[Assistant]
Here's the implementation:

```typescript
export const product = {
  items: [
    {
      itemId: '330',
      name: 'Talla S - Color Blanca',
      nameComplete: 'Blusa Indonesia Blanca Talla S - Color Blanca',
      complementName: '',
      ean: '',
      variations: [
        {
          name: 'Color',
          values: ['Blanca'],
        },
        {
          name: 'Talla',
          values: ['S'],
        },
      ],
      referenceId: [
        {
          Key: 'RefId',
          Value: '330',
        },
      ],
      measurementUnit: 'un',
      unitMultiplier: 1,
      images: [
        {
          cacheId: '158947',
          imageId: '158947',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158947-#width#-#height#/98-Indonesia-Blanca-1.jpg?v=637463442999900000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-1" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158947/98-Indonesia-Blanca-1.jpg?v=637463442999900000',
          imageText: '98-Indonesia-Blanca-1',
        },
        {
          cacheId: '158948',
          imageId: '158948',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158948-#width#-#height#/98-Indonesia-Blanca-2.jpg?v=637463443002370000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-2" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158948/98-Indonesia-Blanca-2.jpg?v=637463443002370000',
          imageText: '98-Indonesia-Blanca-2',
        },
      ],
      videos: [],
      sellers: [
        {
          sellerId: '1',
          sellerName: 'Amalia',
          sellerDefault: true,
          addToCartLink:
            'https://portal.vtexcommercestable.com.br/checkout/cart/add?sku=330&qty=1&seller=1&sc=1&price=7100000&cv=DD87111CCFF8E38FCD35D58EB6FEA4BE_&sc=1',
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 71000,
            ListPrice: 71000,
            Tax: 0,
            taxPercentage: 0,
            spotPrice: 71000,
            PriceWithoutDiscount: 71000,
            RewardValue: 0,
            PriceValidUntil: '2022-10-28T15:54:34Z',
            AvailableQuantity: 0,
            CacheVersionUsedToCallCheckout: 'DD87111CCFF8E38FCD35D58EB6FEA4BE_',
            Installments: [],
          },
        },
      ],
      kitItems: [],
      attachments: [],
      estimatedDateArrival: null,
    },
    {
      itemId: '331',
      name: 'Talla M - Color Blanca',
      nameComplete: 'Blusa Indonesia Blanca Talla M - Color Blanca',
      complementName: '',
      ean: '',
      variations: [
        {
          name: 'Color',
          values: ['Blanca'],
        },
        {
          name: 'Talla',
          values: ['M'],
        },
      ],
      referenceId: [
        {
          Key: 'RefId',
          Value: '331',
        },
      ],
      measurementUnit: 'un',
      unitMultiplier: 1,
      images: [
        {
          cacheId: '158943',
          imageId: '158943',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158943-#width#-#height#/98-Indonesia-Blanca-1.jpg?v=637463442989070000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-1" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158943/98-Indonesia-Blanca-1.jpg?v=637463442989070000',
          imageText: '98-Indonesia-Blanca-1',
        },
        {
          cacheId: '158944',
          imageId: '158944',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158944-#width#-#height#/98-Indonesia-Blanca-2.jpg?v=637463442992970000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-2" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158944/98-Indonesia-Blanca-2.jpg?v=637463442992970000',
          imageText: '98-Indonesia-Blanca-2',
        },
      ],

      videos: [],
      sellers: [
        {
          sellerId: '1',
          sellerName: 'Amalia',
          sellerDefault: true,

          addToCartLink:
            'https://portal.vtexcommercestable.com.br/checkout/cart/add?sku=331&qty=1&seller=1&sc=1&price=7100000&cv=DD87111CCFF8E38FCD35D58EB6FEA4BE_&sc=1',
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 71000,
            ListPrice: 71000,
            Tax: 0,
            taxPercentage: 0,
            spotPrice: 71000,
            PriceWithoutDiscount: 71000,
            RewardValue: 0,
            PriceValidUntil: '2022-10-28T15:54:34Z',
            AvailableQuantity: 5,

            CacheVersionUsedToCallCheckout: 'DD87111CCFF8E38FCD35D58EB6FEA4BE_',
            Installments: [],
          },
        },
      ],
      kitItems: [],
      attachments: [],
      estimatedDateArrival: null,
    },
    {
      itemId: '332',
      name: 'Talla L - Color Blanca',
      nameComplete: 'Blusa Indonesia Blanca Talla L - Color Blanca',
      complementName: '',
      ean: '',
      variations: [
        {
          name: 'Color',
          values: ['Blanca'],
        },
        {
          name: 'Talla',
          values: ['L'],
        },
      ],
      referenceId: [
        {
          Key: 'RefId',
          Value: '332',
        },
      ],
      measurementUnit: 'un',
      unitMultiplier: 1,
      images: [
        {
          cacheId: '158945',
          imageId: '158945',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158945-#width#-#height#/98-Indonesia-Blanca-1.jpg?v=637463442995500000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-1" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158945/98-Indonesia-Blanca-1.jpg?v=637463442995500000',
          imageText: '98-Indonesia-Blanca-1',
        },
        {
          cacheId: '158946',
          imageId: '158946',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158946-#width#-#height#/98-Indonesia-Blanca-2.jpg?v=637463442997670000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-2" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158946/98-Indonesia-Blanca-2.jpg?v=637463442997670000',
          imageText: '98-Indonesia-Blanca-2',
        },
      ],

      videos: [],
      sellers: [
        {
          sellerId: '1',
          sellerName: 'Amalia',
          sellerDefault: true,

          addToCartLink:
            'https://portal.vtexcommercestable.com.br/checkout/cart/add?sku=332&qty=1&seller=1&sc=1&price=7100000&cv=DD87111CCFF8E38FCD35D58EB6FEA4BE_&sc=1',
          commertialOffer: {
            discountHighlights: [],
            teasers: [
              {
                name: 'Kuikpay tarjeta de crédito',
                conditions: {
                  minimumQuantity: 0,
                  parameters: [
                    {
                      name: 'RestrictionsBins',
                      value: '544151,411111',
                    },
                  ],
                },
                effects: {
                  parameters: [
                    {
                      name: 'PercentualDiscount',
                      value: '40.0',
                    },
                  ],
                },
              },
            ],
            Price: 71000,
            ListPrice: 71000,
            Tax: 0,
            taxPercentage: 0,
            spotPrice: 71000,
            PriceWithoutDiscount: 71000,
            RewardValue: 0,
            PriceValidUntil: '2022-10-28T15:54:34Z',
            AvailableQuantity: 3,

            CacheVersionUsedToCallCheckout: 'DD87111CCFF8E38FCD35D58EB6FEA4BE_',
            Installments: [
              {
                Value: 71000,
                InterestRate: 0,
                TotalValuePlusInterestRate: 71000,
                NumberOfInstallments: 1,
                Name: 'Pago contra entrega à vista',
                PaymentSystemName: 'Pago contra entrega',
              },
              {
                Value: 71000,
                InterestRate: 0,
                TotalValuePlusInterestRate: 71000,
                NumberOfInstallments: 1,
                Name: 'Kuikpay à vista',
                PaymentSystemName: 'Kuikpay',
              },
            ],
          },
        },
      ],
      kitItems: [],
      attachments: [],
      estimatedDateArrival: null,
    },
    {
      itemId: '333',
      name: 'Talla S - Color Azul',
      nameComplete: 'Blusa Indonesia Azul Talla S - Color Azul',
      complementName: '',
      ean: '',
      variations: [
        {
          name: 'Color',
          values: ['Azul'],
        },
        {
          name: 'Talla',
          values: ['S'],
        },
      ],
      referenceId: [
        {
          Key: 'RefId',
          Value: '332',
        },
      ],
      measurementUnit: 'un',
      unitMultiplier: 1,
      images: [
        {
          cacheId: '158945',
          imageId: '158945',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158945-#width#-#height#/98-Indonesia-Blanca-1.jpg?v=637463442995500000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-1" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158945/98-Indonesia-Blanca-1.jpg?v=637463442995500000',
          imageText: '98-Indonesia-Blanca-1',
        },
        {
          cacheId: '158946',
          imageId: '158946',
          imageLabel: '',
          imageTag:
            '<img src="~/arquivos/ids/158946-#width#-#height#/98-Indonesia-Blanca-2.jpg?v=637463442997670000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-2" id="" />',
          imageUrl:
            'https://amalia.vtexassets.com/arquivos/ids/158946/98-Indonesia-Blanca-2.jpg?v=637463442997670000',
          imageText: '98-Indonesia-Blanca-2',
        },
      ],

      videos: [],
      sellers: [
        {
          sellerId: '1',
          sellerName: 'Amalia',
          sellerDefault: true,

          addToCartLink:
            'https://portal.vtexcommercestable.com.br/checkout/cart/add?sku=332&qty=1&seller=1&sc=1&price=7100000&cv=DD87111CCFF8E38FCD35D58EB6FEA4BE_&sc=1',
          commertialOffer: {
            discountHighlights: [],
            teasers: [
              {
                name: 'Kuikpay tarjeta de crédito',
                conditions: {
                  minimumQuantity: 0,
                  parameters: [
                    {
                      name: 'RestrictionsBins',
                      value: '544151,411111',
                    },
                  ],
                },
                effects: {
                  parameters: [
                    {
                      name: 'PercentualDiscount',
                      value: '40.0',
                    },
                  ],
                },
              },
            ],
            Price: 71000,
            ListPrice: 71000,
            Tax: 0,
            taxPercentage: 0,
            spotPrice: 71000,
            PriceWithoutDiscount: 71000,
            RewardValue: 0,
            PriceValidUntil: '2022-10-28T15:54:34Z',
            AvailableQuantity: 3,

            CacheVersionUsedToCallCheckout: 'DD87111CCFF8E38FCD35D58EB6FEA4BE_',
            Installments: [
              {
                Value: 71000,
                InterestRate: 0,
                TotalValuePlusInterestRate: 71000,
                NumberOfInstallments: 1,
                Name: 'Pago contra entrega à vista',
                PaymentSystemName: 'Pago contra entrega',
              },
              {
                Value: 71000,
                InterestRate: 0,
                TotalValuePlusInterestRate: 71000,
                NumberOfInstallments: 1,
                Name: 'Kuikpay à vista',
                PaymentSystemName: 'Kuikpay',
              },
            ],
          },
        },
      ],
      kitItems: [],
      attachments: [],
      estimatedDateArrival: null,
    },
  ],
  skuSpecifications: [
    {
      field: {
        name: 'Color',
        originalName: 'Color',
      },
      values: [
        {
          name: 'Blanca',
          originalName: 'Blanca',
        },
      ],
    },
    {
      field: {
        name: 'Talla',
        originalName: 'Talla',
      },
      values: [
        {
          name: 'S',
          originalName: 'S',
        },
        {
          name: 'M',
          originalName: 'M',
        },
        {
          name: 'L',
          originalName: 'L',
        },
      ],
    },
  ],
  categoryId: '2',
  categories: ['/Moda/Blusas/', '/Moda/'],
}

export const selectedItem = {
  itemId: '330',
  name: 'Talla S - Color Blanca',
  nameComplete: 'Blusa Indonesia Blanca Talla S - Color Blanca',
  complementName: '',
  ean: '',
  variations: [
    {
      name: 'Color',
      values: ['Blanca'],
    },
    {
      name: 'Talla',
      values: ['S'],
    },
  ],
  referenceId: [
    {
      Key: 'RefId',
      Value: '330',
    },
  ],
  measurementUnit: 'un',
  unitMultiplier: 1,
  images: [
    {
      cacheId: '158947',
      imageId: '158947',
      imageLabel: '',
      imageTag:
        '<img src="~/arquivos/ids/158947-#width#-#height#/98-Indonesia-Blanca-1.jpg?v=637463442999900000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-1" id="" />',
      imageUrl:
        'https://amalia.vtexassets.com/arquivos/ids/158947/98-Indonesia-Blanca-1.jpg?v=637463442999900000',
      imageText: '98-Indonesia-Blanca-1',
    },
    {
      cacheId: '158948',
      imageId: '158948',
      imageLabel: '',
      imageTag:
        '<img src="~/arquivos/ids/158948-#width#-#height#/98-Indonesia-Blanca-2.jpg?v=637463443002370000" width="#width#" height="#height#" alt="98-Indonesia-Blanca-2" id="" />',
      imageUrl:
        'https://amalia.vtexassets.com/arquivos/ids/158948/98-Indonesia-Blanca-2.jpg?v=637463443002370000',
      imageText: '98-Indonesia-Blanca-2',
    },
  ],
  videos: [],
  sellers: [
    {
      sellerId: '1',
      sellerName: 'Amalia',
      sellerDefault: true,
      addToCartLink:
        'https://portal.vtexcommercestable.com.br/checkout/cart/add?sku=330&qty=1&seller=1&sc=1&price=7100000&cv=DD87111CCFF8E38FCD35D58EB6FEA4BE_&sc=1',
      commertialOffer: {
        discountHighlights: [],
        teasers: [],
        Price: 71000,
        ListPrice: 71000,
        Tax: 0,
        taxPercentage: 0,
        spotPrice: 71000,
        PriceWithoutDiscount: 71000,
        RewardValue: 0,
        PriceValidUntil: '2022-10-28T15:54:34Z',
        AvailableQuantity: 0,
        CacheVersionUsedToCallCheckout: 'DD87111CCFF8E38FCD35D58EB6FEA4BE_',
        Installments: [],
      },
    },
  ],
  kitItems: [],
  attachments: [],
  estimatedDateArrival: null,
}

```