[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 checkout-ui-custom/messages/es.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/checkout-ui.title": "Interfaz personalizada del checkout",
  "admin/checkout-ui.update-warning": "Esta aplicación ha sido actualizada. Por favor, haz clic en PUBLICAR para aplicar las últimas correcciones a tu checkout.",
  "admin/checkout-ui.permission-warning":"No tienes permiso para publicar",
  "admin/checkout-ui.permission-tooltip":"Permiso necesario: 'SaveOrderFormConfiguration'",
  "admin/checkout-ui.navigation.title": "Interfaz personalizada del checkout",
  "admin/checkout-ui.tab.layout": "Layout",
  "admin/checkout-ui.tab.colors": "Colores",
  "admin/checkout-ui.tab.javascript": "JavaScript",
  "admin/checkout-ui.tab.javascript.label": "JavaScript personalizado",
  "admin/checkout-ui.tab.javascript.helper": "// Las modificaciones que realices aquí pueden impactar tus ventas",
  "admin/checkout-ui.tab.css": "CSS",
  "admin/checkout-ui.tab.css.label": "CSS personalizado",
  "admin/checkout-ui.tab.css.helper": "/* Las modificaciones que realices aquí pueden impactar tus ventas */",
  "admin/checkout-ui.tab.history": "Historial",
  "admin/checkout-ui.button.publish": "Publicar",
  "admin/checkout-ui.message.publishing": "Publicando en",
  "admin/checkout-ui.message.published": "Publicado en",
  "admin/checkout-ui.publish.warning": "Estás publicando en un workspace de PRODUCCIÓN. Ten en cuenta que las modificaciones aquí realizadas pueden impactar tus ventas.",
  "admin/checkout-ui.publish.confirm": "Continuar",
  "admin/checkout-ui.publish.cancel": "Cancelar",
  "admin/checkout-ui.toggle.active": "Activo",
  "admin/checkout-ui.history.label.email": "Email",
  "admin/checkout-ui.history.label.workspace": "Workspace",
  "admin/checkout-ui.history.label.version": "Versión",
  "admin/checkout-ui.history.label.date": "Fecha de creación",
  "admin/checkout-ui.history.button.load": "Cargar",
  "admin/checkout-ui.history.help.appversion": "Versión actual de la app:",
  "admin/checkout-ui.color.base": "Base",
  "admin/checkout-ui.color.baseInverted": "Base invertida",
  "admin/checkout-ui.color.actionPrimary": "Acción primaria",
  "admin/checkout-ui.color.actionPrimaryDarken": "Acción primaria oscura",
  "admin/checkout-ui.color.actionSecondary": "Acción secundaria",
  "admin/checkout-ui.color.emphasis": "Énfasis",
  "admin/checkout-ui.color.disabled": "Desactivado",
  "admin/checkout-ui.color.success": "Éxito",
  "admin/checkout-ui.color.successDarken": "Éxito oscuro",
  "admin/checkout-ui.color.successFaded": "Éxito atenuado",
  "admin/checkout-ui.color.danger": "Peligro",
  "admin/checkout-ui.color.dangerFaded": "Peligro atenuado",
  "admin/checkout-ui.color.warning": "Atención",
  "admin/checkout-ui.color.warningFaded": "Atención atenuada",
  "admin/checkout-ui.color.muted1": "Apagado 1",
  "admin/checkout-ui.color.muted2": "Apagado 2",
  "admin/checkout-ui.color.muted3": "Apagado 3",
  "admin/checkout-ui.color.muted4": "Apagado 4",
  "admin/checkout-ui.color.muted5": "Apagado 5",
  "admin/checkout-ui.color.muted6": "Apagado 6",
  "admin/checkout-ui.layout.preview.title": "Vista previa",
  "admin/checkout-ui.layout.preview.sample": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus malesuada nisi, sit amet egestas magna vestibulum eget. Maecenas tempus sollicitudin enim quis semper",
  "admin/checkout-ui.layout.preview.button": "Botón",
  "admin/checkout-ui.layout.accordionPayments.label": "Mostrar medios de pago en formato acordeón",
  "admin/checkout-ui.layout.accordionPayments.help": "Muestra medios de pago como secciones que se pueden expandir. Si está desactivado, los medios de pago se mostrarán como pestañas.",
  "admin/checkout-ui.layout.deliveryDateFormat.label": "Mostrar fecha de envío simplificada",
  "admin/checkout-ui.layout.deliveryDateFormat.help": "Muestra el día y la fecha de entrega estimada. Si está desactivado, se mostrará el plazo estimado de entrega como \"En hasta X días laborables\".",
  "admin/checkout-ui.layout.showCartQuantityPrice.label": "Mostrar valor total del ítem",
  "admin/checkout-ui.layout.showCartQuantityPrice.help": "Muestra el valor total del ítem resumido (precio unitario x cantidad) junto al selector de cantidad. Si está desactivado, solo se muestra el precio unitario.",
  "admin/checkout-ui.layout.showNoteField.label": "Mostrar campo de comentarios",
  "admin/checkout-ui.layout.hideEmailStep.label": "Ocultar el paso de email",
  "admin/checkout-ui.layout.customAddressForm.label": "Formulario de dirección de Google",
  "admin/checkout-ui.layout.fontSize.label": "Tamaño del texto: ",
  "admin/checkout-ui.layout.borderRadius.label": "Radio del borde: ",
  "admin/checkout-ui.layout.btnBorderRadius.label": "Radio del borde del botón: ",
  "admin/checkout-ui.layout.inputHeight.label": "Altura del campo de texto:",
  "admin/checkout-ui.layout.maxWrapper.label": "Anchura máxima del contenedor",
  "admin/checkout-ui.layout.bordersContainers.label": "Borde del contenedor",
  "admin/checkout-ui.layout.fontFamily.label": "Familia de fuentes"
}

```


[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 checkout-ui-custom/messages/ar.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/checkout-ui.title": "واجهة المستخدم المخصصة للدفع",
  "admin/checkout-ui.update-warning": "تم تحديث هذا التطبيق. الرجاء النقر فوق \"نشر\" لتطبيق أحدث الإصلاحات على عملية الدفع الخاصة بك.",
  "admin/checkout-ui.permission-warning":"ليس لديك إذن للنشر",
  "admin/checkout-ui.permission-tooltip":"الدور المطلوب: 'SaveOrderFormConfiguration'",
  "admin/checkout-ui.navigation.title": "واجهة المستخدم المخصصة للدفع",
  "admin/checkout-ui.tab.layout": "التصميم",
  "admin/checkout-ui.tab.colors": "الألوان",
  "admin/checkout-ui.tab.javascript": "JavaScript",
  "admin/checkout-ui.tab.javascript.label": "Javascript مخصص",
  "admin/checkout-ui.tab.javascript.helper": "// التغييرات هنا قد تؤثر على مبيعاتك",
  "admin/checkout-ui.tab.css": "CSS",
  "admin/checkout-ui.tab.css.label": "CSS مخصص",
  "admin/checkout-ui.tab.css.helper": "/* التغييرات هنا قد تؤثر على مبيعاتك */",
  "admin/checkout-ui.tab.history": "السجل",
  "admin/checkout-ui.button.publish": "نشر",
  "admin/checkout-ui.message.publishing": "النشر إلى",
  "admin/checkout-ui.message.published": "تم النشر إلى",
  "admin/checkout-ui.publish.warning": "أنت تنشر في مساحة عمل الإنتاج، كن على علمٍ بأن التغييرات هنا قد تؤثر على مبيعاتك",
  "admin/checkout-ui.publish.confirm": "أكمل",
  "admin/checkout-ui.publish.cancel": "إلغاء",
  "admin/checkout-ui.toggle.active": "نشطة",
  "admin/checkout-ui.history.label.email": "البريد الإلكتروني",
  "admin/checkout-ui.history.label.workspace": "مساحة العمل",
  "admin/checkout-ui.history.label.version": "إصدار التطبيق",
  "admin/checkout-ui.history.label.date": "تاريخ الإنشاء",
  "admin/checkout-ui.history.button.load": "تحميل",
  "admin/checkout-ui.history.help.appversion": "الإصدار الحالي للتطبيق:",
  "admin/checkout-ui.color.base": "الأساس",
  "admin/checkout-ui.color.baseInverted": "قاعدة معكوسة",
  "admin/checkout-ui.color.actionPrimary": "الإجراء الأساسي",
  "admin/checkout-ui.color.actionPrimaryDarken": "الإجراء الأساسي الأغمق",
  "admin/checkout-ui.color.actionSecondary": "الإجراء الثانوي",
  "admin/checkout-ui.color.emphasis": "التشديد",
  "admin/checkout-ui.color.disabled": "غير مفعّل",
  "admin/checkout-ui.color.success": "ناجح",
  "admin/checkout-ui.color.successDarken": "تغميق ناجح",
  "admin/checkout-ui.color.successFaded": "تخفيف ناجح",
  "admin/checkout-ui.color.danger": "خطر",
  "admin/checkout-ui.color.dangerFaded": "تخفيف الخطر",
  "admin/checkout-ui.color.warning": "تحذير",
  "admin/checkout-ui.color.warningFaded": "تخفيف التحذير",
  "admin/checkout-ui.color.muted1": "صامت 1",
  "admin/checkout-ui.color.muted2": "صامت 2",
  "admin/checkout-ui.color.muted3": "صامت 3",
  "admin/checkout-ui.color.muted4": "صامت 4",
  "admin/checkout-ui.color.muted5": "صامت 5",
  "admin/checkout-ui.color.muted6": "صامت 6",
  "admin/checkout-ui.layout.preview.title": "معاينة",
  "admin/checkout-ui.layout.preview.sample": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus malesuada nisi, sit amet egestas magna vestibulum eget. Maecenas tempus sollicitudin enim quis semper",
  "admin/checkout-ui.layout.preview.button": "الزر",
  "admin/checkout-ui.layout.accordionPayments.label": "إظهار طرق الدفع كأكورديون",
  "admin/checkout-ui.layout.accordionPayments.help": "عرض طرق الدفع كأقسام قابلة للتوسع. إذا تم تعطيلها، يتم عرض طرق الدفع كعلامات تبويب.",
  "admin/checkout-ui.layout.deliveryDateFormat.label": "إظهار تاريخ الشحن المبسط",
  "admin/checkout-ui.layout.deliveryDateFormat.help": "عرض يوم التسليم والتاريخ المقدرين. إذا تم تعطيله، يتم عرض الإطار الزمني المقدر للتسليم كـ \"حتى X يوم عمل\".",
  "admin/checkout-ui.layout.showCartQuantityPrice.label": "إظهار مجموع سطر العنصر",
  "admin/checkout-ui.layout.showCartQuantityPrice.help": "عرض إجمالي الخط (سعر الوحدة x الكمية) بجانب محدد الكمية. إذا تم تعطيله، يتم عرض سعر الوحدة فقط.",
  "admin/checkout-ui.layout.showNoteField.label": "إظهار حقل الملاحظات",
  "admin/checkout-ui.layout.hideEmailStep.label": "إخفاء خطوة البريد الإلكتروني",
  "admin/checkout-ui.layout.customAddressForm.label": "تنسيق نموذج عناوين Google",
  "admin/checkout-ui.layout.fontSize.label": "حجم النص: ",
  "admin/checkout-ui.layout.borderRadius.label": "حد نصف القطر: ",
  "admin/checkout-ui.layout.btnBorderRadius.label": "زر حد نصف القطر: ",
  "admin/checkout-ui.layout.inputHeight.label": "ارتفاع حقول النص:",
  "admin/checkout-ui.layout.maxWrapper.label": "أقصى عرض للغلاف",
  "admin/checkout-ui.layout.bordersContainers.label": "حدود الحاوية",
  "admin/checkout-ui.layout.fontFamily.label": "عائلة الخط"
}

```


[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 checkout-ui-custom/checkout-ui-custom/checkout5-custom.css from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```css
/* /files/checkout5-custom.css */

/* Displays the option to enter a foreign document */
.document-box { display: block; }

/* Displays the option to enter an international phone */
.phone-box { display: block; }

```


[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 checkout-ui-custom/checkout-ui-custom/package.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "us-checkout-builder",
  "version": "1.0.4",
  "description": "Variations of Checkout Vertical or Horizontal",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "watch": "webpack --watch",
    "app": "cross-env NODE_ENV=production webpack --config webpack.prod.js"
  },
  "author": "Lucas Vyskubenko <lucas.vysk@vtex.com> (https://github.com/lucvysk)",
  "license": "VTEX",
  "dependencies": {
    "git": "^0.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/runtime-corejs2": "^7.0.0",
    "@vtex/address-form": "^3.35.2",
    "babel-loader": "^8.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "eslint": "^8.40.0",
    "extract-loader": "^2.0.1",
    "file-loader": "^2.0.0",
    "postcss-cli": "^6.0.0",
    "postcss-loader": "^3.0.0",
    "sass": "^1.69.5",
    "sass-loader": "^7.1.0",
    "webpack": "^5.97.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^5.2.0"
  }
}

```


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

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/webpack.prod.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
const path = require('path')

const config = {
  // TODO: Add common Configuration
  module: {},
}

const defaultConfig = {
  ...config,
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: ['./src/checkout6-custom.js', './src/checkout6-custom.scss'],
  output: {
    filename: 'checkout6-custom.js',
    path: path.resolve(__dirname, './'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].css',
            },
          },
          {
            loader: 'extract-loader',
          },
          {
            loader: 'css-loader?-url',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
}

const appConfig = {
  ...config,
  mode: 'production',
  entry: ['./src/app.checkout6-custom.js', './src/app.checkout6-custom.scss'],
  output: {
    filename: 'checkout6-custom.js',
    path: path.resolve(__dirname, '../node/templates'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'checkout6-custom.css',
            },
          },
          {
            loader: 'extract-loader',
          },
          {
            loader: 'css-loader?-url',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
}

// Return Array of Configurations
module.exports = [defaultConfig, appConfig]

```


[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 checkout-ui-custom/checkout-ui-custom/checkout5-custom.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
// WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE. THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.

```


[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 checkout-ui-custom/checkout-ui-custom/postcss.config.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
module.exports = {
  plugins: {
    autoprefixer: {},
  },
}

```


[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 checkout-ui-custom/admin/navigation.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
    "section": "storeSetup",
    "titleId": "admin/checkout-ui.navigation.title",
    "path": "/admin/vtex-checkout-ui-custom/",
    "LMProductId": "27"
  },
  {
    "section": "storeSettings",
    "subSection": "storeFront",
    "adminVersion": 4,
    "LMProductId": "27",
    "subSectionItems": [
      {
        "labelId": "admin/checkout-ui.navigation.title",
        "path": "/admin/vtex-checkout-ui-custom/"
      }
    ]
  }
]

```


[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 checkout-ui-custom/admin/routes.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.checkout-ui": {
    "component": "Admin",
    "path": "/admin/app/vtex-checkout-ui-custom"
  }
}

```


[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 checkout-ui-custom/docs/README.md from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Checkout UI Custom

##  ⚠ Maintenance ⚠
*Starting June 1st 2023, this application will no longer be maintained by VTEX.*

---

The Checkout UI Custom app is responsible for customizing your store's Checkout UI through the admin's interface.

![checkout-ui-custom](https://user-images.githubusercontent.com/52087100/91737149-11cc4980-eb85-11ea-9b74-a54721de67bc.png)

## Configuration

1. Using your terminal and the [VTEX IO Toolbelt](https://vtex.io/docs/recipes/development/vtex-io-cli-installment-and-command-reference), log into the desired VTEX account.
2. Run `vtex install vtex.checkout-ui-custom` on the account you're working on.
3. Access your VTEX account's admin.
4. Access **Store Setup** and then **Checkout UI Custom**.
5. Make the desired changes using the interface and click on `Publish`.

ℹ \_Once the app is installed in your account, the `checkout6-custom.js` and `checkout6-custom.css` files will be replaced by the ones generated by this app.*

## Modus Operandi

If you access your VTEX account's admin using a [Development workspace](https://vtex.io/docs/concepts/workspace/) and publish your changes, the configurations performed using the app will only be applied into the workspace you are working in and not in your store Checkout.

However, notice the following: **you should not perform any changes in your account's Master workspace to make your Checkout UI configurations publicly available**. Instead, you should use a Development workspace and the **History** tab displayed on the admin app.

The `History` tab enables you to load app change history and, therefore, helps your checkout UI coding by reusing configurations performed in previous workspaces.

Let's assume you were working in a [Development workspace](https://vtex.io/docs/recipes/development/creating-a-development-workspace) called `testredcolor`, and now want your changes to be public. According to how workspaces work in the platform, your changes first need to be applied in a [Production workspace](https://vtex.io/docs/recipes/development/creating-a-production-workspace) that, in turn, will be [promoted to Master](https://vtex.io/docs/recipes/development/promoting-a-workspace-to-master) later.

For this purpose, you can access the `History` tab using the desired Production workspace, load your last changes from `testredcolor` and then click on `Publish`, copying your configurations to the Production workspace you are currently working in.

⚠ _The Header and Footer HTMLs are still configured using the admin's Portal (`/admin/portal/#/sites`). In order to properly use the Checkout UI Custom app, it is strongly recommended to use the HTMLs stated below:_

- **Header HTML:**

```html

      Continue shopping
      Back to Cart

    {logo.image}

```

If you want to insert other contents, make sure of include the class `.v-custom-mhide` to hide it on mobile resolutions. For example:

```html
 ...

 ...

```

- **Footer HTML:**

```html

```

<details>
  <summary>If you are yet using the classic CMS</summary>
  You can create a workspace and install the app by there. While using the app, you will need apply your changes and copy/paste the content of the files to your portal.
</details>

## For VTEX Developers

When developing a new version of Checkout UI Custom, take care to compile the checkout files prior to opening a PR and/or publishing a new version of the app. This can be done by running `yarn app` in your CLI, inside the app's `/checkout-ui-custom/` subfolder.

During implementation, you will need to run `vtex link` on the root folder and also watch assets by running `yarn watch` in the `/checkout-ui-custom/` subfolder

❗Note that during implementation, avoid publishing changes to the workspace. As this will permanently add the changes to the workspace and any changes to the app will not be shown.

#

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

<!-- DOCS-IGNORE:end -->

```


[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 checkout-ui-custom/graphql/schema.graphql from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  getSetupConfig: GetSetupConfigResponse @cacheControl(scope: PRIVATE)
  getHistory: [GetHistoryResponse] @cacheControl(scope: PRIVATE)
  getLast(workspace: String): GetLastResponse @cacheControl(scope: PRIVATE)
  getById(id: String): ConfigResponse @cacheControl(scope: PRIVATE)
  getPermissions: GetPermissionsResponse @cacheControl(scope: PRIVATE)
}

type Mutation {
  saveChanges(
    email: String
    workspace: String
    layout: CustomFields
    javascript: String
    css: String
    javascriptActive: Boolean
    cssActive: Boolean
    colors: CustomFields
  ): String @cacheControl(scope: PRIVATE)
}

scalar CustomFields
type ConfigResponse {
  layout: CustomFields
  colors: CustomFields
  javascript: String
  css: String
  javascriptActive: Boolean
  cssActive: Boolean
}
type GetLastResponse {
  id: String
  email: String
  workspace: String
  creationDate: String
  appVersion: String
  layout: CustomFields
  colors: CustomFields
  javascript: String
  css: String
  javascriptActive: Boolean
  cssActive: Boolean
}

type GetHistoryResponse {
  id: String
  email: String
  workspace: String
  creationDate: String
  appVersion: String
}

type GetPermissionsResponse {
  access: Boolean
}
type GetSetupConfigResponse {
  adminSetup: AdminSetupResponse
}
type AdminSetupResponse {
  hasSchema: Boolean
  schemaVersion: String
  appVersion: String
}

```


[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 checkout-ui-custom/node/service.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "stack": "nodejs",
  "memory": 1224,
  "timeout": 40,
  "minReplicas": 10,
  "maxReplicas": 100,
  "routes": {
    "apiGetCountryRules": {
      "path": "/rules/:countryCode",
      "public": true
    },
    "getHolidays": {
      "path": "/_v/holidays",
      "public": true
    }
  }
}

```


[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 checkout-ui-custom/node/package.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.checkout-ui-custom",
  "version": "0.20.1",
  "dependencies": {
    "@vtex/address-form": "^3.35.2",
    "@vtex/api": "6.48.0",
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/bluebird": "^3.5.25",
    "@types/co-body": "0.0.3",
    "@types/jest": "^27.0.2",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.48.0",
    "@vtex/prettier-config": "^0.3.1",
    "@vtex/tsconfig": "^0.6.0",
    "tslint": "^5.12.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.9.7",
    "vtex.checkout-ui-custom": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-ui-custom@0.18.1/public/@types/vtex.checkout-ui-custom",
    "vtex.checkout-ui-settings-server": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-ui-settings-server@0.5.1/public/_types/react",
    "vtex.email-checkout-conflict": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.email-checkout-conflict@0.3.0/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime",
    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
  },
  "scripts": {
    "lint": "tsc --noEmit && tslint -c tslint.json './**/*.ts'"
  }
}

```


[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 checkout-ui-custom/node/index.ts from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Cached, ServiceContext, ClientsConfig } from '@vtex/api'
import { Service, LRUCache } from '@vtex/api'

import { Clients } from './clients'
import { resolvers } from './graphql'

const TIMEOUT_MS = 4000
const defaultClientOptions = {
  retries: 1,
  timeout: TIMEOUT_MS,
}

const memoryCache = new LRUCache<string, Cached>({ max: 1000 })

declare global {
  // We declare a global Context type just to avoid re-writing ServiceContext<Clients, State> in every handler and resolver
  type Context = ServiceContext<Clients>

  // The shape of our State object found in `ctx.state`. This is used as state bag to communicate between middlewares.
  interface State {
    code: number
  }
}

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: defaultClientOptions,
    settings: {
      memoryCache,
    },
  },
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  graphql: {
    resolvers: {
      Query: resolvers.Query,
      Mutation: resolvers.Mutation,
    },
  },
  routes: resolvers.Routes,
})

```


[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 checkout-ui-custom/react/package.json from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "checkout-ui-custom-app",
  "version": "0.20.1",
  "devDependencies": {
    "@types/jest": "^26.0.4",
    "@types/node": "^14.0.14",
    "@types/prop-types": "^15.7.0",
    "@types/react": "^16.9.41",
    "@vtex/test-tools": "^3.1.0",
    "vtex.checkout-ui-custom": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-ui-custom@0.18.1/public/@types/vtex.checkout-ui-custom",
    "vtex.checkout-ui-settings-server": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-ui-settings-server@0.5.1/public/_types/react",
    "vtex.email-checkout-conflict": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.email-checkout-conflict@0.3.0/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime",
    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "graphql": "^15.3.0",
    "prop-types": "^15.7.2",
    "react-intl": "^5.0.2",
    "@monaco-editor/react": "4.2.1",
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "vtex-test-tools test react-scripts test --env=jsdom"
  },
  "transformIgnorePatterns": [
    "/node_modules/(?!(monaco-editor)).+\\.js$"
  ],
  "moduleNameMapper": {
    "^monaco-editor$": "<rootDir>/node_modules/@monaco-editor/react"
  }
}

```


[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 checkout-ui-custom/react/Admin.tsx from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { FC } from 'react'
import React, { useState } from 'react'
import type { WrappedComponentProps } from 'react-intl'
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'
import { compose, graphql, useMutation, useQuery } from 'react-apollo'
import {
  Alert,
  Tabs,
  Tab,
  Layout,
  PageBlock,
  PageHeader,
  Button,
  Spinner,
  Modal,
  IconCheck,
  IconDeny,
  ModalDialog,
  Progress,
  Tooltip,
  Tag,
  IconWarning
} from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import sessionQuery from 'vtex.store-resources/QuerySession'

import Colors from './components/Colors'
import LayoutSettings from './components/Layout'
import Javascript from './components/Javascript'
import Css from './components/Css'
import History from './components/History'
import saveMutation from './mutations/saveConfiguration.gql'
import GET_LAST from './queries/getLast.gql'
import GET_CONFIG from './queries/getConfig.gql'
import getUserPermissions from './queries/getPermissions.gql'

const messages = defineMessages({
  title: {
    id: 'admin/checkout-ui.title',
    defaultMessage: 'Checkout custom interface',
  },
})

const defaultConfiguration = {
  colors: {
    base: '#f4f2f2',
    baseInverted: '#21364f',
    actionPrimary: '#1a73e8',
    actionPrimaryDarken: '#1d63be',
    actionSecondary: '#f1f7ff',
    emphasis: '#000000',
    disabled: '#999999',
    success: '#2fba2d',
    successDarken: '#269e24',
    successFaded: '#beffa5',
    danger: '#ff4c4c',
    dangerFaded: '#ffe6e6',
    warning: '#ffb100',
    warningFaded: '#fff6e0',
    muted1: '#323232',
    muted2: '#676767',
    muted3: '#999999',
    muted4: '#cbcbcb',
    muted5: '#eeeeee',
    muted6: '#f3f3f3',
  },
  layout: {
    type: 'vertical',
    accordionPayments: false,
    deliveryDateFormat: false,
    showCartQuantityPrice: false,
    showNoteField: false,
    hideEmailStep: true,
    customAddressForm: false,
    fontSize: '12px',
    borderRadius: '4px',
    btnBorderRadius: '30px',
    maxWrapper: '980px',
    inputHeight: '40px',
    bordersContainers: 'none',
    fontFamily: '"Roboto", sans-serif',
  },
  css: '',
  javascript: '',
  javascriptActive: false,
  cssActive: false,
}

let email = window.localStorage.getItem('adminEmail') ?? null
let initialLoad = false

const Admin: FC<any & WrappedComponentProps> = ({
  intl,
  session,
  config,
}: any) => {
  const { workspace, production } = useRuntime()

  const { data : permission } = useQuery(getUserPermissions)

  const [state, setState] = useState<any>({
    ...defaultConfiguration,
    currentTab: 0,
    isModalOpen: false,
    isDialogOpen: false,
    showCloseIcon: false,
    workspace,
    appVersion: null,
    publishedVersion: null,
  })

  const [
    saveConfig,
    { loading: loadingSave, called: calledSave, error: errorSave },
  ] = useMutation(saveMutation, {
    onCompleted: () => {
      setTimeout(() => {
        setState({
          ...state,
          isModalOpen: false,
        })
      }, 3000)
    },
  })

  const { loading: loadingLast } = useQuery(GET_LAST, {
    variables: {
      workspace,
    },
    skip: initialLoad,
    onCompleted: (res: any) => {
      initialLoad = true
      setState({
        ...state,
        ...res.getLast,
        publishedVersion: res.getLast.appVersion,
        appVersion: config?.getSetupConfig?.adminSetup?.appVersion || '',
        currentTab: 1,
        colors: {
          ...state.colors,
          ...res.getLast.colors,
        },
        layout: {
          ...state.layout,
          ...res.getLast.layout,
        },
      })
    },
  })

  if (session?.getSession?.adminUserEmail) {
    window.localStorage.setItem('adminEmail', session.getSession.adminUserEmail)
    email = session.getSession.adminUserEmail
  }

  if (
    config?.getSetupConfig?.adminSetup?.appVersion &&
    state.appVersion === null
  ) {
    setState({
      ...state,
      appVersion: config.getSetupConfig.adminSetup.appVersion,
    })
  }

  const handleLayoutChange = (layout: any) => {
    setState({
      ...state,
      layout,
    })
  }

  const handleColorsChange = (colors: any) => {
    setState({
      ...state,
      colors,
    })
  }

  const handleCssChange = ({ value: css, active: cssActive }: any) => {
    setState({
      ...state,
      css,
      cssActive,
    })
  }

  const handleJSChange = ({
    value: javascript,
    active: javascriptActive,
  }: any) => {
    setState({
      ...state,
      javascript,
      javascriptActive,
    })
  }

  const handleLoad = ({
    javascript,
    css,
    layout,
    colors,
    javascriptActive,
    cssActive,
  }: any) => {
    setState({
      ...state,
      currentTab: 1,
      layout,
      colors,
      css,
      javascript,
      javascriptActive,
      cssActive,
    })
  }

  const publish = () => {
    setState({
      ...state,
      isModalOpen: true,
      isDialogOpen: false,
    })

    if (email) {
      saveConfig({
        variables: {
          email,
          workspace: state.workspace,
          layout: state.layout,
          colors: state.colors,
          css: state.css,
          javascript: state.javascript,
          javascriptActive: state.javascriptActive || false,
          cssActive: state.cssActive || false,
        },
      })
    }
  }

  const handlePublish = () => {
    if (production) {
      setState({
        ...state,
        isDialogOpen: true,
      })
    } else {
      publish()
    }
  }

  const handleModalClose = () => {
    setState({
      ...state,
      isModalOpen: false,
    })
  }

  const handlePublishDialog = () => {
    publish()
  }

  const handleCancelDialog = () => {
    setState({
      ...state,
      isDialogOpen: false,
    })
  }

  const handleDialogClose = () => {
    handleCancelDialog()
  }

  const changeTabTo = (currentTab: number) => {
    setState({
      ...state,
      currentTab,
    })
  }

  return (
    <Layout
      fullWidth
      pageHeader={
        <PageHeader title={intl.formatMessage(messages.title)}>
          <span className="mr4">
            <div className="flex items-center">
              <div className="ma3">
                <Button
                  variation="primary"
                  disabled={
                    permission?.getPermissions?.access ? loadingLast : true
                  }
                  onClick={() => {
                    handlePublish()
                  }}
                >
                  <FormattedMessage id="admin/checkout-ui.button.publish" />
                </Button>
              </div>
            </div>

            {permission && !permission?.getPermissions?.access && (

              <div className="cb ma3">
              <Tag type="warning" variation="low">
                <FormattedMessage id="admin/checkout-ui.permission-warning" />
                <Tooltip label={<FormattedMessage id="admin/checkout-ui.permission-tooltip" />}>
                  <span className="ml3 pointer">
                    <IconWarning />
                  </span>
                </Tooltip>
              </Tag>
              </div>

            )}

          </span>
        </PageHeader>
      }
    >
      <PageBlock>
        {loadingLast && <Progress type="steps" steps={['inProgress']} />}
        {!loadingLast && (
          <>
            {state.appVersion &&
              state.publishedVersion &&
              state.appVersion !== state.publishedVersion && (
                <Alert type="warning">
                  <FormattedMessage id="admin/checkout-ui.update-warning" />
                </Alert>
              )}
            <Tabs fullWidth>
              <Tab
                label={intl.formatMessage({
                  id: 'admin/checkout-ui.tab.layout',
                })}
                active={state.currentTab === 1}
                onClick={() => {
                  changeTabTo(1)
                }}
              >
                <LayoutSettings
                  onChange={handleLayoutChange}
                  initialState={state.layout}
                />
              </Tab>
              <Tab
                label={intl.formatMessage({
                  id: 'admin/checkout-ui.tab.colors',
                })}
                active={state.currentTab === 2}
                onClick={() => {
                  changeTabTo(2)
                }}
              >
                <Colors
                  onChange={handleColorsChange}
                  initialState={state.colors}
                />
              </Tab>
              <Tab
                label={intl.formatMessage({
                  id: 'admin/checkout-ui.tab.javascript',
                })}
                active={state.currentTab === 3}
                onClick={() => {
                  changeTabTo(3)
                }}
              >
                <Javascript
                  onChange={handleJSChange}
                  initialState={{
                    value: state.javascript,
                    active: state.javascriptActive,
                  }}
                />
              </Tab>
              <Tab
                label={intl.formatMessage({
                  id: 'admin/checkout-ui.tab.css',
                })}
                active={state.currentTab === 4}
                onClick={() => {
                  changeTabTo(4)
                }}
              >
                <Css
                  onChange={handleCssChange}
                  initialState={{
                    value: state.css,
                    active: state.cssActive,
                  }}
                />
              </Tab>
              <Tab
                label={intl.formatMessage({
                  id: 'admin/checkout-ui.tab.history',
                })}
                active={state.currentTab === 5}
                onClick={() => {
                  changeTabTo(5)
                }}
              >
                <History
                  onChange={handleLoad}
                  initialState={state.appVersion}
                />
              </Tab>
            </Tabs>
          </>
        )}
        <Modal
          centered
          isOpen={state.isModalOpen}
          showCloseIcon={state.showCloseIcon}
          onClose={() => {
            handleModalClose()
          }}
        >
          <div className="dark-gray">
            <ul className="list pl0">
              <li>
                <span className="w-100 mw1 dib">
                  {loadingSave === true && <Spinner size={12} />}
                  {loadingSave === false &&
                    calledSave === true &&
                    !errorSave && <IconCheck size={12} />}
                  {errorSave && <IconDeny size={12} />}
                  {calledSave === false && !errorSave && <span>-</span>}
                </span>{' '}
                {loadingSave === false && calledSave === true && !errorSave && (
                  <FormattedMessage id="admin/checkout-ui.message.published" />
                )}
                {loadingSave === true && (
                  <FormattedMessage id="admin/checkout-ui.message.publishing" />
                )}{' '}
                <strong>{state.workspace}</strong>
              </li>
            </ul>
          </div>
        </Modal>
      </PageBlock>
      <ModalDialog
        centered
        confirmation={{
          onClick: handlePublishDialog,
          label: intl.formatMessage({
            id: 'admin/checkout-ui.publish.confirm',
          }),
        }}
        cancelation={{
          onClick: handleCancelDialog,
          label: intl.formatMessage({
            id: 'admin/checkout-ui.publish.cancel',
          }),
        }}
        isOpen={state.isDialogOpen}
        onClose={handleDialogClose}
      >
        <p>
          <FormattedMessage id="admin/checkout-ui.publish.warning" />
        </p>
      </ModalDialog>
    </Layout>
  )
}

const optionsSession = {
  name: 'session',
  skip: email !== null,
  options: () => ({
    ssr: false,
  }),
}

const optionsConfig = {
  name: 'config',
  options: () => ({
    ssr: false,
  }),
}

export default injectIntl(
  compose(
    graphql(sessionQuery, optionsSession),
    graphql(GET_CONFIG, optionsConfig)
  )(Admin)
)

```


[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 checkout-ui-custom/cypress/plugins/index.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
// / <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
module.exports = (_on, _config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}

```


[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 checkout-ui-custom/cypress/integration/wipe.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  ENTITIES,
  FAIL_ON_STATUS_CODE,
  VTEX_AUTH_HEADER,
} from '../support/common/constants.js'
import { testSetup } from '../support/common/support.js'

const config = Cypress.env()

// Constants
const { name } = config.workspace

describe('Wipe', () => {
  testSetup()

  it('Deleting checkout history', () => {
    cy.getVtexItems().then(vtex => {
      cy.request({
        url: `https://productusqa.vtexcommercestable.com.br/api/dataentities/checkoutcustom/search`,
        qs: {
          _fields: 'workspace,email,id',
          _schema: 'v0.1.3',
          workspace: name,
        },
        headers: {
          ...VTEX_AUTH_HEADER(vtex.apiKey, vtex.apiToken),
          'REST-Range': 'resources=0-50',
        },
        ...FAIL_ON_STATUS_CODE,
      }).then(response => {
        expect(response.status).to.equal(200)
        for (const { id } of response.body) {
          cy.deleteDocumentInMasterData(ENTITIES.CHECKOUTCUSTOM, id)
        }
      })
    })
  })
  it('Getting user & then deleting addresses associated with that user', () => {
    cy.getVtexItems().then(vtex => {
      cy.searchInMasterData(ENTITIES.CLIENTS, vtex.robotMail).then(clients => {
        cy.searchInMasterData(ENTITIES.ADDRESSES, clients[0].id).then(
          addresses => {
            for (const { id } of addresses) {
              cy.deleteDocumentInMasterData(ENTITIES.ADDRESSES, id)
            }
          }
        )
      })
    })
  })
})

```


[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 checkout-ui-custom/cypress/integration/2.7-disable_display_settings.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { verifySettings } from '../support/testcase.js'
import { loginViaCookies, preserveCookie } from '../support/common/support.js'
import { updateLayoutSettings } from '../support/grapqhl_testcase.js'

describe('Testing by disabling all settings in layout', () => {
  loginViaCookies()

  const decision = 'Disable'

  updateLayoutSettings(decision)
  verifySettings(decision)
  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/integration/2.4-lineitems_optional.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  loginViaCookies,
  updateRetry,
  preserveCookie,
} from '../support/common/support.js'
import selectors from '../support/common/selectors.js'
import { fillLineItems } from '../support/testcase.js'
import { checkoutUiCustomConstants } from '../support/constants.js'
import lineitemProducts from '../support/lineitem-products.js'
import checkoutUiCustomSelectors from '../support/selectors.js'

const prefix = `Line items required scenario`
const product = lineitemProducts.acer.name

describe(`Testing line items(optional) with this product - ${product}`, () => {
  loginViaCookies()

  it(`${prefix} - Open Product ${product}`, updateRetry(3), () => {
    // Search the product
    cy.searchProduct(lineitemProducts.acer.name)
    // Add product to cart
    cy.addProduct(lineitemProducts.acer.name, {
      proceedtoCheckout: true,
      productDetailPage: true,
    })
  })

  it(`${prefix} - Verify line items not displaying`, updateRetry(2), () => {
    cy.get(checkoutUiCustomSelectors.LineItemAssemble).should('not.exist')
    cy.removeProduct(lineitemProducts.acer.id)
    cy.get(checkoutUiCustomSelectors.ChooseProducts)
      .should('be.visible')
      .click()
  })

  it(`${prefix} - Add line items for ${product}`, updateRetry(2), () => {
    cy.openProduct(lineitemProducts.acer.name, true)
    cy.contains(checkoutUiCustomConstants.addLineItemText).click()
    fillLineItems(
      checkoutUiCustomConstants.lineItems,
      checkoutUiCustomConstants.maxCharecters.max25
    )
    cy.get(selectors.PostalCode).clear().type('33180').type('{enter}')
    cy.get(selectors.ProductsQAShipping).click()
    cy.get(selectors.AddtoCart).click()
  })

  it(`${prefix} - Verify line items displaying`, () => {
    cy.checkoutProduct()
    cy.get(checkoutUiCustomSelectors.LineItemAssemble).should('exist')
  })

  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/integration/2.6-enable_display_settings.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { verifySettings } from '../support/testcase.js'
import { loginViaCookies, preserveCookie } from '../support/common/support'
import { updateLayoutSettings } from '../support/grapqhl_testcase.js'

describe('Testing by enabling all settings in layout', () => {
  const decision = 'Enable'

  loginViaCookies()
  updateLayoutSettings(decision)
  verifySettings(decision)
  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/integration/2.2-pickup.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  loginViaCookies,
  updateRetry,
  preserveCookie,
} from '../support/common/support.js'
import { pickupTestCase } from '../support/outputvalidation.js'

const { productName, postalCode, prefix } = pickupTestCase

describe(`${prefix} Scenario`, () => {
  loginViaCookies()

  it(`${prefix} - Adding Product to Cart`, updateRetry(1), () => {
    // Search the product
    cy.searchProduct(productName)
    // Add product to cart
    cy.addProduct(productName, {
      proceedtoCheckout: true,
    })
  })

  it(`In ${prefix} Updating product quantity to 2`, updateRetry(3), () => {
    // Update Product quantity to 2
    cy.updateProductQuantity(pickupTestCase, {
      quantity: '2',
    })
  })

  it(
    `${prefix} - Updating Shipping Information for pick up in store`,
    updateRetry(3),
    () => {
      // Update Shipping Section
      cy.updateShippingInformation({
        postalCode,
        pickup: true,
        timeout: 15000,
        checkoutcustom: true,
      })
    }
  )

  it(`${prefix} - Order the product`, () => {
    cy.orderProduct()
  })
  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/integration/2.5-checkout_scenarios.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  loginViaCookies,
  preserveCookie,
  updateRetry,
} from '../support/common/support.js'
import { discountProduct } from '../support/outputvalidation.js'
import selectors from '../support/common/selectors.js'
import checkoutUiCustomSelectors from '../support/selectors.js'

function discountValidation(quantity = 1) {
  const productPrice = 10 * quantity

  // Discounts should be shown
  cy.get(selectors.Discounts).should('be.exist')
  cy.get(checkoutUiCustomSelectors.DiscountAmount)
    .first()
    .should('have.text', `$ -${productPrice}.00`)
}

describe('Testing Checkout with different scenarios', () => {
  // Load test setup
  loginViaCookies()

  const { prefix, productName, productPrice } = discountProduct

  it(`In ${prefix} - Adding product,remove product and add product again`, () => {
    // Search the product
    cy.searchProduct(productName)
    // Add product to cart
    cy.addProduct(productName)
    discountValidation()
    // Remove the product
    cy.removeProduct('880270')
    // Search the product
    cy.searchProduct(productName)
    // Add product to cart
    cy.addProduct(productName)
  })

  it(`In ${prefix} Updating product quantity to 2`, updateRetry(3), () => {
    // Update Product quantity to 2
    cy.updateProductQuantity(discountProduct, {
      quantity: '2',
    })
    discountValidation(2)
  })

  it(`In ${prefix} - Updating Shipping Information`, updateRetry(3), () => {
    // Update Shipping Section
    cy.updateShippingInformation({ ...discountProduct, checkoutcustom: true })
  })

  it(`In ${prefix} Updating product quantity to 1`, updateRetry(2), () => {
    // Update Product quantity to 1
    cy.updateProductQuantity(discountProduct, {
      quantity: '1',
      verifySubTotal: false,
    })
    discountValidation()
    cy.get(selectors.SubTotal, { timeout: 10000 }).contains(productPrice)
    cy.get(selectors.ProceedtoPaymentBtn).should('be.visible').click()
  })

  it(
    `${prefix} - vat number should be visible & test input field`,
    updateRetry(3),
    () => {
      // VAT number field should be visibel to the user
      cy.get(selectors.VatInput).should('be.visible')
      // Providing VAT number
      cy.get(selectors.VatInput).type('FR40303265045')
      cy.get(selectors.SubmitVat).click()
      // Tax should not exist
      cy.get(checkoutUiCustomSelectors.VatRemoveButton)
        .should('be.visible')
        .click()
      cy.get(selectors.VatInput).should('be.empty')
    }
  )
  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/integration/2.3-lineitems_required.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  loginViaCookies,
  updateRetry,
  preserveCookie,
} from '../support/common/support.js'
import selectors from '../support/common/selectors.js'
import { fillLineItems } from '../support/testcase.js'
import { checkoutUiCustomConstants } from '../support/constants.js'
import lineitemProducts from '../support/lineitem-products.js'
import checkoutUiCustomSelectors from '../support/selectors.js'

const prefix = `Line items required scenario`
const product = lineitemProducts.jumper.name

describe(`Testing line items(required) with this product - ${product}`, () => {
  loginViaCookies()

  it(`${prefix} - Open Product ${product}`, updateRetry(3), () => {
    // Search the product
    cy.searchProduct(lineitemProducts.jumper.name)
    // Add product to cart
    cy.addProduct(lineitemProducts.jumper.name, {
      proceedtoCheckout: true,
      productDetailPage: true,
    })
  })

  it(
    `${prefix} - Verify line items displayed in checkout ui`,
    updateRetry(3),
    () => {
      cy.get(checkoutUiCustomSelectors.LineItemAssemble).should('exist')
      cy.removeProduct(lineitemProducts.jumper.id)
      cy.get(checkoutUiCustomSelectors.ChooseProducts)
        .should('be.visible')
        .click()
    }
  )

  it(
    `${prefix} - Add line items for ${product} and verify in checkout`,
    updateRetry(3),
    () => {
      cy.openProduct(lineitemProducts.jumper.name, true)
      fillLineItems(
        checkoutUiCustomConstants.lineItems,
        checkoutUiCustomConstants.maxCharecters.max10
      )
      cy.get(selectors.AddtoCart).should('be.visible').click()
      cy.checkoutProduct()
      cy.get(checkoutUiCustomSelectors.LineItemAssemble).should('exist')
    }
  )

  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/integration/2.1-graphql.spec.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  loginViaCookies,
  updateRetry,
  preserveCookie,
} from '../support/common/support.js'
import {
  getById,
  getHistory,
  getLast,
  getSetupConfig,
  saveChanges,
  ValidategetByIdResponse,
  validateGetHistoryResponse,
  validateGetSetUpConfigResponse,
  validateGetVersionResponse,
  version,
} from '../support/grapqhl_testcase.js'
import { graphql } from '../support/common/graphql_utils'
import { ENVS } from '../support/constants.js'
import getConfiguration from '../support/common/checkout_ui_custom.js'

describe('Testing GraphQL queries & mutation', () => {
  const workspace = Cypress.env('workspace').name
  const { CONFIG_SETTINGS } = ENVS
  const ID = 'id'
  const APP = 'vtex.checkout-ui-custom@*.x'

  loginViaCookies()
  it('Verifying getHistory query', updateRetry(2), () => {
    graphql(APP, getHistory(), validateGetHistoryResponse)
  })

  it('Verifying version query', updateRetry(2), () => {
    graphql(APP, version(), validateGetVersionResponse)
  })

  it('Verifying getSetupConfig query', updateRetry(2), () => {
    cy.setCheckOutItem(CONFIG_SETTINGS, getConfiguration(workspace))
    graphql(APP, getSetupConfig(), validateGetSetUpConfigResponse)
  })

  it('Verifying saveChanges mutation', updateRetry(5), () => {
    cy.addDelayBetweenRetries(5000)
    cy.getCheckOutItems().then(items => {
      graphql(APP, saveChanges(items[CONFIG_SETTINGS]), response => {
        expect(response.body.data.saveChanges).to.include('DocumentId')
      })
    })
  })

  it(
    `Verifying getLast query with workspace ${workspace}`,
    updateRetry(2),
    () => {
      graphql(APP, getLast(workspace), response => {
        expect(response.body.data.getLast.workspace).to.equal(workspace)
        expect(response.body.data.getLast.id).to.not.equal(null)
        cy.setCheckOutItem(ID, response.body.data.getLast.id)
      })
    }
  )

  it('Verifying getId query', updateRetry(2), () => {
    cy.getCheckOutItems().then(items => {
      graphql(APP, getById(items[ID]), ValidategetByIdResponse)
    })
  })
  preserveCookie()
})

```


[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 checkout-ui-custom/cypress/support/constants.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
export const checkoutUiCustomConstants = {
  maxCharecters: {
    max25: '25',
    max10: '10',
  },
  lineItems: {
    lineItem1: 'Line Item 1',
    lineItem2: 'Line Item 2',
    lineItem3: 'Line Item 3',
  },
  addLineItemText: 'Add Text Engraving 3 Lines',
  vatText: 'FR40303265045',
}

export const ENVS = {
  CONFIG_SETTINGS: 'config',
}

```


[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 checkout-ui-custom/cypress/support/selectors.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
export default {
  // *************Checkout UI Custome Constants start here************ //
  QuantityUnitPrice: 'div[class*=v-custom-quantity-price__list--selling]',
  HideEmailHeader: 'h3[class*=client-pre-email-h]',
  ShippingTimeInfo: 'td[class*=v-changeShippingTimeInfo-active]',
  PaymentAccordion: 'div[class*=v-custom-payment-item-wrap]',
  SummaryNote: 'div[class*=summary-note]',
  ProductLineItem: 'div[class*=textInputValue] > label > div > input',
  CartLink: 'span[class*=checkout-steps_item_cart]',
  LineItemAssemble: 'div[class*=v-custom-assemblies]',
  VatRemoveButton: 'button[class*=vat-number__button--remove]',
  ChooseProducts: '#cart-choose-products',
  DiscountAmount: 'tr.Discounts td.monetary',
  ChangeShipping: 'a[class*=link-change-shipping]',
  EditAddressButton: 'button[class*=buttonEditAddress]',
  CustomShipAddress: '#v-custom-ship-street',
}

```


[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 checkout-ui-custom/cypress/support/index.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
// Import commands.js using ES2015 syntax:
import './common/commands'
import './common/api_commands'
import './commands'

// Configure it to preserve cookies
Cypress.Cookies.defaults({
  preserve: /VtexIdclientAutCookie/,
})

```


[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 checkout-ui-custom/cypress/support/testcase.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import selectors from './common/selectors.js'
import { updateRetry } from './common/support.js'
import checkoutUiCustomSelectors from './selectors.js'
import { layoutScenario } from './outputvalidation.js'

function proceedToPayment() {
  cy.get('body').then($body => {
    const btn = selectors.ProceedtoPaymentBtn

    if ($body.find(btn).length) {
      cy.get(btn).then($el => {
        if (Cypress.dom.isVisible($el)) {
          cy.get(selectors.ProceedtoPaymentBtn).click()
        }
      })
    }
  })
}

export function verifySettings(type) {
  const enable = /Enable/.test(type)

  const { productName } = layoutScenario
  const prefix = `${type} Layout Setting`

  it(`${prefix} - Adding Product to Cart`, () => {
    // Search the product
    cy.searchProduct(productName)
    // Add product to cart
    cy.addProduct(productName, {
      proceedtoCheckout: true,
    })
  })

  it(`${prefix} - Updating product quantity to 2`, updateRetry(3), () => {
    // Update Product quantity to 2
    cy.updateProductQuantity(layoutScenario, {
      quantity: '2',
    })
  })

  it(`${prefix} - Updating Shipping Information`, updateRetry(3), () => {
    // Update Shipping Section
    cy.updateShippingInformation({
      ...layoutScenario,
      checkoutcustom: true,
      timeout: 15000,
    })
  })

  it(`${prefix} - Display items unit price option`, updateRetry(2), () => {
    cy.get(checkoutUiCustomSelectors.CartLink).click()
    if (enable) {
      cy.get(checkoutUiCustomSelectors.QuantityUnitPrice).should('exist')
    } else {
      cy.get(checkoutUiCustomSelectors.QuantityUnitPrice).should('not.exist')
    }

    proceedToPayment()
  })

  it(
    `${prefix} - Display google address form format option`,
    updateRetry(2),
    () => {
      it(`display google address form format`, updateRetry(2), () => {
        cy.get(checkoutUiCustomSelectors.ChangeShipping).click()
        cy.get(checkoutUiCustomSelectors.EditAddressButton)
          .should('be.visible')
          .click()
        if (enable) {
          cy.get(checkoutUiCustomSelectors.CustomShipAddress).should(
            'be.visible'
          )
          cy.get(checkoutUiCustomSelectors.CustomShipAddress)
            .clear()
            .type('19501 Biscayne Blvd {downarrow}{enter}')
        } else {
          cy.get(selectors.ShipCountry, { timeout: 5000 })
            .should('not.be.disabled')
            .select('USA')
        }

        cy.get(selectors.GotoPaymentBtn).click()
        proceedToPayment()
      })
    }
  )

  it(`${prefix} - Testing Hide email step, Simplified shipping date, payment options as accordian & notes field`, () => {
    proceedToPayment()
    if (enable) {
      cy.get(checkoutUiCustomSelectors.HideEmailHeader).should('not.be.visible')
      cy.get(checkoutUiCustomSelectors.ShippingTimeInfo).should('exist')
      cy.get(checkoutUiCustomSelectors.PaymentAccordion).should('exist')
      cy.get(checkoutUiCustomSelectors.SummaryNote).should('be.visible')
    } else {
      cy.get(checkoutUiCustomSelectors.HideEmailHeader).should('be.visible')
      cy.get(checkoutUiCustomSelectors.ShippingTimeInfo).should('not.exist')
      cy.get(checkoutUiCustomSelectors.PaymentAccordion).should('not.exist')
      cy.get(checkoutUiCustomSelectors.SummaryNote).should('not.be.visible')
    }
  })
}

export function fillLineItems(items, maxChar) {
  cy.get(checkoutUiCustomSelectors.ProductLineItem)
    .first()
    .type(items.lineItem1)
    .should('have.attr', 'maxlength')
    .then(maxlength => {
      cy.log(maxlength)
      expect(maxlength).to.equal(maxChar)
    })
  cy.get(checkoutUiCustomSelectors.ProductLineItem).eq(1).type(items.lineItem2)
  cy.get(checkoutUiCustomSelectors.ProductLineItem).eq(2).type(items.lineItem3)
}

```


[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 checkout-ui-custom/cypress/support/grapqhl_testcase.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { ENVS } from './constants.js'
import { updateRetry } from './common/support.js'
import { graphql } from './common/graphql_utils'

const APP = 'vtex.checkout-ui-custom@*.x'

export function getLast(workspace) {
  const query =
    'query' +
    '($workspace: String!)' +
    '{getLast(workspace: $workspace){id email workspace layout javascript css javascriptActive cssActive colors}}'

  return {
    query,
    queryVariables: { workspace },
  }
}

export function validateGetLastResponse(response) {
  expect(response.body.data).to.not.equal(null)
}

export function saveChanges(configuration) {
  const query =
    'mutation' +
    '($email: String, $workspace: String, $layout: CustomFields, $javascript: String, $css: String, $javascriptActive: Boolean, $cssActive: Boolean, $colors: CustomFields)' +
    '{saveChanges(email: $email, workspace: $workspace, layout: $layout, javascript: $javascript, css: $css, javascriptActive: $javascriptActive, cssActive: $cssActive, colors: $colors) @context(provider: "vtex.checkout-ui-custom@*.x")}'

  return {
    query,
    queryVariables: configuration,
  }
}

export function validateSaveChangesResponse(response) {
  expect(response.body.data).to.not.equal(null)
}

export function getHistory() {
  return {
    query:
      'query' + '{getHistory {id,email,workspace,creationDate,appVersion}}',
    queryVariables: {},
  }
}

export function validateGetHistoryResponse(response) {
  expect(response.body.data.getHistory)
    .to.be.an('array')
    .and.to.have.lengthOf.above(0)
}

export function version() {
  return {
    query: 'query' + '{version}',
    queryVariables: {},
  }
}

export function validateGetVersionResponse(response) {
  expect(response.body.data.version).to.not.equal(null)
}

export function getSetupConfig() {
  return {
    query:
      'query' +
      '{getSetupConfig{adminSetup{hasSchema,schemaVersion,appVersion}}}',
  }
}

export function validateGetSetUpConfigResponse(response) {
  expect(response.body.data).to.not.equal(null)
  expect(response.body.data.getSetupConfig.adminSetup.appVersion).to.not.equal(
    null
  )
  expect(response.body.data.getSetupConfig.adminSetup.hasSchema).to.be.true
  expect(
    response.body.data.getSetupConfig.adminSetup.schemaVersion
  ).to.not.equal(null)
}

export function getById(id) {
  return {
    query:
      'query' +
      '($id:String)' +
      '{getById(id:$id){layout,colors,javascript,css,javascriptActive,cssActive}}',
    queryVariables: { id },
  }
}

export function ValidategetByIdResponse(response) {
  expect(response.body.data.getById.javascriptActive).to.be.true
  expect(response.body.data.getById.cssActive).to.be.true
  expect(response.body.data.getById.layout).to.have.property('borderRadius')
}

export function updateLayoutSettings(option) {
  it(`${option} Layout Settings via Graphql`, updateRetry(3), () => {
    cy.getCheckOutItems().then(items => {
      cy.log(items)
      const configurations = items[ENVS.CONFIG_SETTINGS]

      const bool = /Enable/.test(option)

      configurations.layout.accordionPayments = bool
      configurations.layout.deliveryDateFormat = bool
      configurations.layout.showCartQuantityPrice = bool
      configurations.layout.showNoteField = bool
      configurations.layout.hideEmailStep = bool
      configurations.layout.customAddressForm = bool

      graphql(APP, saveChanges(configurations), response => {
        expect(response.body.data.saveChanges).to.include('DocumentId')
      })
    })
  })
}

```


[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 checkout-ui-custom/cypress/support/outputvalidation.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { PRODUCTS } from './common/utils.js'

function generatePayload(prefix) {
  return {
    prefix,
    postalCode: '33180',
    totalAmount: '$ 1,160.95',
    productPrice: '540.00',
    subTotal: '$ 1,080.00',
    productName: PRODUCTS.coconut,
  }
}

export default {
  pickupTestCase: generatePayload('Pickup'),
  discountProduct: {
    // custom JS and CSS + Add/remove product + Update product quantity 1
    prefix: 'discountProduct',
    postalCode: '33180',
    productPrice: '100.00',
    totalAmount: '$ 101.65',
    subTotal: '$ 200.00',
    productName: PRODUCTS.cauliflower,
  },
  layoutScenario: generatePayload('layoutScenario'),
  testCustomJSAndCSS: generatePayload('Custom JS And CSS Scenario'),
}

```


[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 checkout-ui-custom/cypress/support/commands.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
import selectors from './common/selectors'
import { generateAddtoCartCardSelector } from './common/utils'

const checkOutJson = '.checkout.json'

// Set checkout items
Cypress.Commands.add('setCheckOutItem', (checkItem, checkvalue) => {
  cy.readFile(checkOutJson).then(items => {
    items[checkItem] = checkvalue
    cy.writeFile(checkOutJson, items)
  })
})

// Get checkout items
Cypress.Commands.add('getCheckOutItems', () => {
  cy.readFile(checkOutJson).then(items => {
    return items
  })
})

Cypress.Commands.add('openStoreFront', (login = false) => {
  cy.intercept('**/rc.vtex.com.br/api/events').as('events')
  cy.visit('/')
  cy.wait('@events')
  if (login === true) {
    cy.get(selectors.ProfileLabel, { timeout: 20000 })
      .should('be.visible')
      .should('have.contain', `Hello,`)
  }
})

Cypress.Commands.add('gotoProductDetailPage', () => {
  cy.get(selectors.ProductAnchorElement)
    .should('have.attr', 'href')
    .then(href => {
      cy.get(generateAddtoCartCardSelector(href)).first().click()
    })
})

Cypress.Commands.add('openProduct', (product, detailPage = false) => {
  // Search product in search bar
  cy.get(selectors.Search).should('be.not.disabled').should('be.visible')

  cy.get(selectors.Search).type(`${product}{enter}`)
  // Page should load successfully now Filter should be visible
  cy.get(selectors.searchResult).should('have.text', product.toLowerCase())
  cy.get(selectors.FilterHeading, { timeout: 30000 }).should('be.visible')

  if (detailPage) {
    cy.gotoProductDetailPage()
  } else {
    cy.log('Visiting detail page is disabled')
  }
})

Cypress.Commands.add('removeProduct', product => {
  cy.get(selectors.CartTimeline, { timeout: 30000 }).should('be.visible')
  cy.get(`a[id=item-remove-${product}]`).should('be.visible').click()
  cy.contains('Your cart is empty')
})

Cypress.Commands.add('checkoutProduct', () => {
  cy.get(selectors.TotalPrice).should('be.visible')
  cy.get('#items-price div[class*=price]').should('have.contain', '$')
  cy.get(selectors.ProceedtoCheckout).should('be.visible').click()
  cy.get(selectors.CartTimeline, { timeout: 30000 })
    .should('be.visible')
    .click({ force: true })
})

```


[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 checkout-ui-custom/cypress/support/lineitem-products.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
export default {
  acer: {
    name: 'acer aspire 5',
    id: '880190',
  },
  jumper: {
    name: 'jumper',
    id: '880200',
  },
}

```


[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 checkout-ui-custom/checkout-ui-custom/src/checkout6-custom.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
const Debug = require('./_js/_debug.js')
const CheckoutCustom = require('./_js/_v.custom.checkout.ui.js')

window.vcustom = {
  checkout: new CheckoutCustom({
    type: 'vertical', // ["vertical" , "horizontal"]
    accordionPayments: true,
    deliveryDateFormat: false,
    quantityPriceCart: false,
    showNoteField: false,
    customAddressForm: true,
    hideEmailStep: true,
  }),
  debug: new Debug({
    dbg: false,
    logo: '',
  }),
}

window.vcustom.checkout.start()

// vcustom.debug.start();

```


[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 checkout-ui-custom/checkout-ui-custom/src/app.checkout6-custom.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
@import '_scss/_components/_fns.scss';
@import '_scss/_configs/_style.app.scss';
@import '_scss/_components/_input.scss';
@import '_scss/_components/_buttons.scss';
@import '_scss/_components/_titles.scss';

@import '_scss/_components/_overwriting.scss';
@import '_scss/_components/_modals.scss';
@import '_scss/_components/_vtexId.scss';

@import '_scss/_components/_global.scss';
@import '_scss/_components/_steps.scss';
@import '_scss/_components/_header.scss';
@import '_scss/_components/_footer.scss';

@import '_scss/_components/_cart.scss';
@import '_scss/_components/_pre-email.scss';
@import '_scss/_components/_payment.scss';

@import '_scss/_components/_jsInteractions.scss';
@import '_scss/_components/_customAddressForm.scss';
@import '_scss/_components/_hide-email-step.scss';
@import '_scss/_components/_RTL.scss';

@import '_scss/_custom.scss';

@import '_scss/_components/_debug.scss';

```


[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 checkout-ui-custom/checkout-ui-custom/src/app.checkout6-custom.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
const Debug = require('./_js/_debug.js')
const CheckoutCustom = require('./_js/_v.custom.checkout.ui.js')

window.vcustom = {
  checkout: new CheckoutCustom({
    type: '"{{type}}"', // ["vertical" , "horizontal"]
    accordionPayments: '{{accordionPayments}}',
    deliveryDateFormat: '{{deliveryDateFormat}}',
    quantityPriceCart: '{{showCartQuantityPrice}}',
    showNoteField: '{{showNoteField}}',
    customAddressForm: '{{customAddressForm}}',
    hideEmailStep: '{{hideEmailStep}}',
  }),
  debug: new Debug({
    dbg: false,
    logo: '',
  }),
}

window.vcustom.checkout.start()

```


[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 checkout-ui-custom/checkout-ui-custom/src/checkout6-custom.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
@import '_scss/_components/_fns.scss';
@import '_scss/_configs/_style.scss';
@import '_scss/_components/_input.scss';
@import '_scss/_components/_buttons.scss';
@import '_scss/_components/_titles.scss';

@import '_scss/_components/_overwriting.scss';
@import '_scss/_components/_modals.scss';
@import '_scss/_components/_vtexId.scss';

@import '_scss/_components/_global.scss';
@import '_scss/_components/_steps.scss';
@import '_scss/_components/_header.scss';
@import '_scss/_components/_footer.scss';

@import '_scss/_components/_cart.scss';
@import '_scss/_components/_pre-email.scss';
@import '_scss/_components/_payment.scss';

@import '_scss/_components/_jsInteractions.scss';
@import '_scss/_components/_customAddressForm.scss';
@import '_scss/_components/_hide-email-step.scss';
@import '_scss/_components/_RTL.scss';

@import '_scss/_custom.scss';

@import '_scss/_components/_debug.scss';

```