[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 search-listener/docs/README.md from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/CHANGEME) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# APP NAME

<!-- DOCS-IGNORE:start -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- DOCS-IGNORE:end -->

Under the app's name, you should explain the topic, giving a **brief description** of the **app's functionality** (what is it for?) in a store.

Next, you can **add media** (either an image of a GIF) if possible, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

## Configuration

It is possible to install in your store either by using App Store or the VTEX IO Toolbelt.

### Using VTEX App Store

1. Access the **Apps** section in your account's admin page and look for the Icommkt box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your **NAME OF A SETTINGS FIELD** in the `NAME OF THE APP` field.
4. Click on **Save**.

### Using VTEX IO Toolbelt

1. [Install](https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.icommkt@0.x` app. You can confirm that the app has now been installed by running `vtex ls` again.
2. Access the **Apps** section in your account's admin page and look for the NAME OF THE APP box. Once you find it, click on the box.
3. Fill in the `NAME OF THE APP` field with your **NAME OF THE SETTINGS FIELD**.
4. Click on **Save**.

<!-- Remember to also **showcase any necessary disclaimer** related to the app in this section, such as the different behavior it may display during its configuration. -->

## Modus Operandi *(not mandatory)*

There are scenarios in which an app can behave differently in a store, according to its configuration. It's crucial then to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store.

If you feel compelled to give further details, such as the app's **relationship with others**, don't hesitate to use this section.

<!-- DOCS-IGNORE:start -->
## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- 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 are 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 search-listener/react/index.tsx from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'

import type { PixelMessage } from './typings/events'

export function handleEvents(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:pageView': {
      break
    }

    default: {
      break
    }
  }
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


[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 search-listener/react/package.json from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^25.1.5",
    "@types/node": "^13.11.0",
    "@types/react": "^16.9.31",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.1.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "graphql": "^14.5.4",
    "react-intl": "^3.11.0",
    "typescript": "3.9.7",
    "vtex.pixel-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.124.3/public/@types/vtex.render-runtime"
  }
}

```


[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 search-listener/store/interfaces.json from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.APPNAME": {
    "component": "index"
  }
}
```


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

[User] Show me the implementation of search-listener/public/metadata/messages/es-AR.json from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "",
  "headline": "",
  "overview": "",
  "features": [],
  "additionalInformation": "",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 search-listener/public/metadata/messages/pt-BR.json from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "",
  "headline": "",
  "overview": "",
  "features": [],
  "additionalInformation": "",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 search-listener/public/metadata/messages/en-US.json from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "",
  "headline": "",
  "overview": "",
  "features": [],
  "additionalInformation": "",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 search-listener/react/typings/events.d.ts from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
    | PromoViewData
    | PromotionClickData
    | NewsletterSubscriptionData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

export interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

export interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

export interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

export interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

export interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface OrderPlacedTrackedData extends Order, EventData {
  event: 'orderPlacedTracked'
  eventName: 'vtex:orderPlacedTracked'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: Product
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: ProductSummary
  list?: string
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: ProductSummary // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

export interface CartData extends EventData {
  event: 'cart'
  eventName: 'vtex:cart'
  orderForm: OrderForm
}

export interface PromoViewData extends EventData {
  event: 'promoView'
  eventName: 'vtex:promoView'
  promotions: Promotion[]
}

export interface PromotionClickData extends EventData {
  event: 'promotionClick'
  eventName: 'vtex:promotionClick'
  promotions: Promotion[]
}

export interface NewsletterSubscriptionData extends EventData {
  event: 'newsletterSubscription'
  eventName: 'vtex:newsletterSubscription'
  name: string
  email: string
  phone: string
}

interface Promotion {
  id?: string
  name?: string
  creative?: string
  position?: string
}

interface CartItem {
  [x: string]: {};
  brand: string
  ean: string
  category: string
  detailUrl: string
  imageUrl: string
  name: string
  price: number
  productId: string
  productRefId: string
  quantity: number
  seller: string
  sellerName: string
  skuId: string
  variant: string
}

export interface OrderForm {
  id: string
  items: CartItem[]
}

export interface Order {
  accountName: string
  corporateName: string
  coupon: string
  currency: string
  openTextField: string
  orderGroup: string
  salesChannel: string
  visitorAddressCity: string
  visitorAddressComplement: string
  visitorAddressCountry: string
  visitorAddressNeighborhood: string
  visitorAddressNumber: string
  visitorAddressPostalCode: string
  visitorAddressState: string
  visitorAddressStreet: string
  visitorContactInfo: string[]
  visitorContactPhone: string
  visitorType: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionLatestShippingEstimate: Date
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: ProductSummary
  position: number
}

export interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

export interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

export interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

export interface Product {
  brand: string
  brandId: string
  categories: string[]
  categoryId: string
  categoryTree: Array<{ id: string; name: string }>
  detailUrl: string
  items: Item[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  selectedSku: Item
}

export interface Item {
  itemId: string
  name: string
  ean: string
  referenceId: { Key: string; Value: string }
  imageUrl: string
  sellers: Seller[]
}

export interface ProductSummary {
  brand: string
  brandId: string
  categories: string[]
  items: ItemSummary[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  sku: ItemSummary
}

interface ItemSummary {
  itemId: string
  ean: string
  name: string
  referenceId: { Key: string; Value: string }
  seller: Seller
  sellers: Seller[]
}

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  sellerName: string
}

export interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: number
}

```


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

[User] Show me the implementation of search-listener/react/typings/global.d.ts from the search-listener VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  dataLayer: 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 order-profile/docs/README.md from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Order Profile

Centralizes all profile related requests to the Checkout API

```


[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 order-profile/react/package.json from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "order-profile",
  "version": "0.3.1",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "react": "^16.13.0",
    "react-apollo": "^3.1.3"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@babel/compat-data": "^7.9.0",
    "@testing-library/react-hooks": "^7.0.2",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@vtex/checkout-types": "^0.1.2",
    "@vtex/order-manager": "^0.5.4-beta.0",
    "@vtex/test-tools": "3.0.3",
    "react-intl": "^5.23.0",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.55.1/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.41.0/public/@types/vtex.checkout-resources",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.5/public/@types/vtex.render-runtime"
  }
}

```


[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 order-profile/react/OrderProfile.tsx from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useCallback } from 'react'
import { useMutation } from 'react-apollo'
import MutationUpdateOrderFormProfile from 'vtex.checkout-resources/MutationUpdateOrderFormProfile'
import MutationUpdateClientPreferencesData from 'vtex.checkout-resources/MutationUpdateClientPreferencesData'
import { useOrderForm } from 'vtex.order-manager/OrderForm'
import { useQueueStatus, useOrderQueue } from 'vtex.order-manager/OrderQueue'
import {
  UserProfileInput,
  ClientPreferencesDataInput,
  OrderForm as CheckoutOrderForm,
} from '@vtex/checkout-types'

import { useLogger } from './utils/logger'
import {
  createOrderProfileProvider,
  useOrderProfile,
} from './components/createOrderProfileProvider'

interface UpdateOrderFormProfileMutation {
  updateOrderFormProfile: CheckoutOrderForm
}

interface UpdateOrderFormProfileMutationVariables {
  profile: UserProfileInput
}

interface UpdateClientPreferencesDataMutation {
  updateClientPreferencesData: CheckoutOrderForm
}

interface UpdateClientPreferencesDataMutationVariables {
  clientPreferences: ClientPreferencesDataInput
}

function useUpdateOrderFormProfile() {
  const [updateOrderFormProfile] = useMutation<
    UpdateOrderFormProfileMutation,
    UpdateOrderFormProfileMutationVariables
  >(MutationUpdateOrderFormProfile)

  return {
    updateOrderFormProfile: useCallback(
      async (profile: UserProfileInput) => {
        const { data } = await updateOrderFormProfile({
          variables: { profile },
        })

        const newOrderForm = data!.updateOrderFormProfile

        return newOrderForm
      },
      [updateOrderFormProfile]
    ),
  }
}

function useUpdateClientPreferencesData() {
  const [updateClientPreferencesData] = useMutation<
    UpdateClientPreferencesDataMutation,
    UpdateClientPreferencesDataMutationVariables
  >(MutationUpdateClientPreferencesData)

  return {
    updateClientPreferencesData: useCallback(
      async (clientPreferences: ClientPreferencesDataInput) => {
        const { data } = await updateClientPreferencesData({
          variables: { clientPreferences },
        })

        const newOrderForm = data!.updateClientPreferencesData

        return newOrderForm
      },
      [updateClientPreferencesData]
    ),
  }
}

const { OrderProfileProvider } = createOrderProfileProvider({
  useOrderQueue,
  useOrderForm,
  useQueueStatus,
  useLogger,
  useUpdateOrderFormProfile,
  useUpdateClientPreferencesData,
})

export { OrderProfileProvider, useOrderProfile }
export default { OrderProfileProvider, useOrderProfile }

```


[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 order-profile/react/__fixtures__/OrderFormProvider.tsx from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createOrderFormProvider } from '@vtex/order-manager'

import { mockOrderForm } from './orderForm'

function useToast() {
  return {
    showToast: () => {},
    toastState: {
      isToastVisible: false,
    },
  }
}

function useClearOrderFormMessages() {
  return () =>
    new Promise(resolve => {
      resolve(true)
    })
}

function useGetOrderForm(args: any): any {
  return new Promise(resolve => {
    resolve({
      ...args,
    })
  })
}

const { OrderFormProvider } = createOrderFormProvider({
  useToast,
  useClearOrderFormMessages,
  useGetOrderForm,
  defaultOrderForm: mockOrderForm,
})

export { OrderFormProvider }

```


[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 order-profile/react/__fixtures__/orderform.ts from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const mockOrderForm = {
  id: '123',
  loggedIn: false,
  paymentData: {
    installmentOptions: [
      {
        value: 100,
        paymentSystem: '1',
        installments: [],
      },
    ],
    isValid: true,
    payments: [],
    paymentSystems: [],
    availableAccounts: [],
  },
  items: [
    {
      additionalInfo: {
        brandName: 'Test Brand 0',
      },
      id: '1',
      uniqueId: '1',
      detailUrl: '/work-shirt/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
      },
      listPrice: 2800000,
      measurementUnit: 'un',
      name: 'قميص العمل الأعلى',
      price: 2400000,
      productId: '1',
      quantity: 3,
      sellingPrice: 2400000,
      skuName: 'Test SKU 0',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],

      attachments: [],
      offerings: [],
      priceTags: [],
    },
    {
      additionalInfo: {
        brandName: 'Test Brand 1',
      },
      id: '30',
      uniqueId: '30',
      detailUrl: '/long-sleeve-shirt/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
      },
      listPrice: 945000,
      measurementUnit: 'un',
      name: '上品なサングラス',
      price: 945000,
      productId: '2000005',
      quantity: 1,
      sellingPrice: 945000,
      skuName: 'Test SKU 1',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],
      isGift: false,
      attachments: [],
      offerings: [],
      priceTags: [],
    },
    {
      additionalInfo: {
        brandName: 'Test Brand 2',
      },
      id: '2000535',
      uniqueId: '2000535',
      detailUrl: '/classy--sunglasses/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
      },
      listPrice: 400000,
      measurementUnit: 'un',
      name: 'กางเกงขาสั้น St Tropez',
      price: 360000,
      productId: '13',
      quantity: 4,
      sellingPrice: 360000,
      skuName: 'Test SKU 2',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],
      isGift: false,
      attachments: [],
      offerings: [],
      priceTags: [],
    },
  ],
  marketingData: {},
  totalizers: [
    {
      id: 'Items',
      name: 'Items Total',
      value: 9585000,
    },
  ],
  shipping: { isValid: true, pickupOptions: [], deliveryOptions: [] },
  messages: {
    couponMessages: [],
    generalMessages: [],
  },
  clientProfileData: {
    email: 'fulanodetal@vtex.com',
    firstName: 'Fulano',
    lastName: 'Di Tal',
    isValid: true,
  },
  canEditData: false,
  value: 9585000,
}

```


[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 order-profile/react/typings/vtex.checkout-resources.d.ts from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable import/export */

declare module 'vtex.checkout-resources/MutationUpdateOrderFormProfile' {
  export { default } from 'vtex.checkout-resources/react/MutationUpdateOrderFormProfile'
}

declare module 'vtex.checkout-resources/MutationUpdateClientPreferencesData' {
  export { default } from 'vtex.checkout-resources/react/MutationUpdateClientPreferencesData'
}

```


[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 order-profile/react/typings/vtex.order-manager.d.ts from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable import/export */

declare module 'vtex.order-manager/OrderQueue' {
  export * from 'vtex.order-manager/react/OrderQueue'
  export { default } from 'vtex.order-manager/react/OrderQueue'

  export const QueueStatus = {
    PENDING: 'Pending',
    FULFILLED: 'Fulfilled',
  } as const
}

declare module 'vtex.order-manager/OrderForm' {
  export * from 'vtex.order-manager/react/OrderForm'
  export { default } from 'vtex.order-manager/react/OrderForm'
}

declare module 'vtex.order-manager/constants' {
  export * from 'vtex.order-manager/react/constants'
}

```


[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 order-profile/react/utils/logger.ts from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface LogParams {
  type: 'Error'
  level: 'Critical'
  event: unknown
  workflowType?: 'OrderProfile'
  workflowInstance: string
}

export type LogFn = (params: LogParams) => void

export type UseLogger = () => { log: LogFn }

const log = ({
  type,
  level,
  event,
  workflowType,
  workflowInstance,
}: LogParams) => {
  // eslint-disable-next-line no-console
  console.log({
    type,
    level,
    event,
    workflowInstance,
    workflowType: workflowType || 'OrderProfile',
  })
}

export function useLogger() {
  return { log }
}

```


[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 order-profile/react/components/createOrderProfileProvider.tsx from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useMemo, useContext, useCallback } from 'react'
import { OrderQueueContext } from '@vtex/order-manager'
import {
  UserProfileInput,
  ClientPreferencesDataInput,
  OrderForm as CheckoutOrderForm,
} from '@vtex/checkout-types'

import { UseLogger } from '../utils/logger'

export const QueueStatus = {
  PENDING: 'Pending',
  FULFILLED: 'Fulfilled',
} as const

interface ProfileContext {
  setOrderProfile: (profile: UserProfileInput) => Promise<{ success: boolean }>
  setClientPreferencesData: (
    clientPreferences: ClientPreferencesDataInput
  ) => Promise<{ success: boolean }>
  clientProfileData: CheckoutOrderForm['clientProfileData']
}

const OrderProfileContext = React.createContext<ProfileContext | undefined>(
  undefined
)

type UseUpdateOrderFormProfile = () => {
  updateOrderFormProfile: (
    profile: UserProfileInput,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

type UseUpdateClientPreferencesData = () => {
  updateClientPreferencesData: (
    clientPreferences: ClientPreferencesDataInput,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

type ListenFunction = (event: any, callback: () => void) => () => void
interface QueueContext {
  enqueue: (task: () => Promise<CheckoutOrderForm>, id?: string) => any
  listen: ListenFunction
  isWaiting: (id: string) => boolean
}
declare type OrderFormUpdate<O> =
  | Partial<O>
  | ((prevOrderForm: O) => Partial<O>)

interface OrderContext<O extends CheckoutOrderForm> {
  loading: boolean
  setOrderForm: (nextValue: OrderFormUpdate<O>) => void
  error: any | undefined
  orderForm: O
}

interface CreateOrderProfileProvider<O extends CheckoutOrderForm> {
  useLogger: UseLogger
  useOrderQueue: () => QueueContext
  useOrderForm: () => OrderContext<O>
  useUpdateClientPreferencesData: UseUpdateClientPreferencesData
  useUpdateOrderFormProfile: UseUpdateOrderFormProfile
  useQueueStatus: (listen: OrderQueueContext<O>['listen']) => any
}

const SET_PROFILE_TASK = 'SetProfileTask'
const SET_CLIENT_PREFERENCES_TASK = 'SetClientPreferencesTask'

export function createOrderProfileProvider({
  useLogger,
  useOrderQueue,
  useUpdateClientPreferencesData,
  useUpdateOrderFormProfile,
  useOrderForm,
  useQueueStatus,
}: CreateOrderProfileProvider<CheckoutOrderForm>): {
  OrderProfileProvider: FC
} {
  const OrderProfileProvider: FC = ({ children }) => {
    const { enqueue, listen } = useOrderQueue()
    const { setOrderForm, orderForm } = useOrderForm()
    const { updateOrderFormProfile } = useUpdateOrderFormProfile()
    const { updateClientPreferencesData } = useUpdateClientPreferencesData()
    const { log } = useLogger()

    const queueStatusRef = useQueueStatus(listen)
    const { id, clientProfileData } = orderForm

    const setOrderProfile = useCallback(
      async (profile: UserProfileInput) => {
        try {
          const task = async () => {
            const updatedOrderForm = await updateOrderFormProfile(profile, id)

            return updatedOrderForm
          }

          const newOrderForm = await enqueue(task, SET_PROFILE_TASK)

          if (queueStatusRef.current === QueueStatus.FULFILLED) {
            setOrderForm(newOrderForm)
          }

          return { success: true }
        } catch (err) {
          log({
            type: 'Error',
            level: 'Critical',
            event: {
              error: err,
              orderFormId: id,
            },
            workflowInstance: 'client-profile-not-updated',
          })

          if (!err || err.code !== 'TASK_CANCELLED') {
            throw err
          }

          return { success: false }
        }
      },
      [enqueue, queueStatusRef, updateOrderFormProfile, id, setOrderForm, log]
    )

    const setClientPreferencesData = useCallback(
      async (clientPreferences: ClientPreferencesDataInput) => {
        const task = async () => {
          const updatedOrderForm = await updateClientPreferencesData(
            clientPreferences,
            id
          )

          return updatedOrderForm
        }

        try {
          const newOrderForm = await enqueue(task, SET_CLIENT_PREFERENCES_TASK)

          if (queueStatusRef.current === QueueStatus.FULFILLED) {
            setOrderForm(newOrderForm)
          }

          return { success: true }
        } catch (err) {
          log({
            type: 'Error',
            level: 'Critical',
            event: {
              error: err,
              orderFormId: id,
            },
            workflowInstance: 'client-preferences-data-not-updated',
          })

          return { success: false }
        }
      },
      [
        updateClientPreferencesData,
        id,
        enqueue,
        queueStatusRef,
        setOrderForm,
        log,
      ]
    )

    const value = useMemo(
      () => ({ setOrderProfile, setClientPreferencesData, clientProfileData }),
      [setOrderProfile, setClientPreferencesData, clientProfileData]
    )

    return (
      <OrderProfileContext.Provider value={value}>
        {children}
      </OrderProfileContext.Provider>
    )
  }

  return { OrderProfileProvider }
}

export const useOrderProfile = () => {
  const context = useContext(OrderProfileContext)

  if (context === undefined) {
    throw new Error('useOrderProfile must be used within an <OrderProfile />')
  }

  return context
}

export default { createOrderProfileProvider, useOrderProfile }

```


[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 order-profile/react/__tests__/createOrderProfileProvider.test.tsx from the order-profile VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { renderHook, act } from '@testing-library/react-hooks'
import {
  useOrderForm,
  useOrderQueue,
  useQueueStatus,
  OrderQueueProvider,
} from '@vtex/order-manager'

import { mockOrderForm } from '../__fixtures__/orderForm'
import { OrderFormProvider } from '../__fixtures__/OrderFormProvider'
import {
  createOrderProfileProvider,
  useOrderProfile,
} from '../components/createOrderProfileProvider'
import { LogParams } from '../utils/logger'

const mockProfileData = {
  firstName: 'Sicrano ',
  lastName: 'DiTal',
  phone: '+55(12) 3 1231-223',
  documentType: 'cpf',
  document: '123.456.789-09',
  email: 'fulano@detal.com',
}

const mockLog = jest.fn()

function useLogger() {
  const log = ({
    type,
    level,
    event,
    workflowType,
    workflowInstance,
  }: LogParams) => {
    mockLog({
      type,
      level,
      event,
      workflowType: workflowType ?? 'OrderProfileTest',
      workflowInstance,
    })
  }

  return { log }
}

const mockUpdateOrderFormProfile = jest.fn().mockResolvedValue(true)
const mockUpdateClientPreferencesData = jest.fn().mockResolvedValue(true)

const createWrapperOrderProviders = () => {
  const useUpdateOrderFormProfile = () => ({
    updateOrderFormProfile: mockUpdateOrderFormProfile,
  })

  const useUpdateClientPreferencesData = () => ({
    updateClientPreferencesData: mockUpdateClientPreferencesData,
  })

  const { OrderProfileProvider } = createOrderProfileProvider({
    useLogger,
    useOrderQueue,
    useOrderForm,
    useUpdateOrderFormProfile,
    useUpdateClientPreferencesData,
    useQueueStatus,
  })

  const Wrapper: FC = ({ children }) => {
    return (
      <OrderQueueProvider>
        <OrderFormProvider>
          <OrderProfileProvider>{children}</OrderProfileProvider>
        </OrderFormProvider>
      </OrderQueueProvider>
    )
  }

  return { Wrapper }
}

describe('OrderProfile', () => {
  afterEach(() => {
    mockUpdateOrderFormProfile.mockReset()
    mockUpdateClientPreferencesData.mockReset()
    mockLog.mockReset()
  })

  it('should throw an error if theres no OrderPaymentProvider on the tree', () => {
    const {
      result: { error },
    } = renderHook(() => useOrderProfile())

    expect(error).not.toBeNull()
    expect(error?.message).toEqual(
      'useOrderProfile must be used within an <OrderProfile />'
    )
    expect(mockUpdateOrderFormProfile).not.toHaveBeenCalled()
  })

  it('should get right client data from orderform context', () => {
    const { Wrapper } = createWrapperOrderProviders()
    const {
      result: { error, current },
    } = renderHook(() => useOrderProfile(), { wrapper: Wrapper })

    expect(error).toBeUndefined()
    expect(current.clientProfileData).toEqual(mockOrderForm.clientProfileData)
  })

  it('should call updateOrderFormProfile if setOrderProfile is executed', async () => {
    const { Wrapper } = createWrapperOrderProviders()
    const {
      result: {
        error,
        current: { setOrderProfile, clientProfileData },
      },
    } = renderHook(() => useOrderProfile(), { wrapper: Wrapper })

    mockUpdateOrderFormProfile.mockReturnValue({
      ...mockOrderForm,
      clientProfileData: {
        email: mockProfileData.email,
        firstName: mockProfileData.firstName,
        lastName: mockProfileData.lastName,
        isValid: true,
      },
    })

    expect(mockUpdateOrderFormProfile).not.toHaveBeenCalled()
    expect(error).toBeUndefined()
    expect(clientProfileData).toEqual(mockOrderForm.clientProfileData)
    await act(async () => {
      const { success } = await setOrderProfile(mockProfileData)

      expect(success).toBeTruthy()
    })
    expect(mockUpdateOrderFormProfile).toHaveBeenCalledWith(
      mockProfileData,
      mockOrderForm.id
    )
    expect(mockLog).not.toHaveBeenCalled()
  })

  it('should dispatch a log if something broken during the setOrderProfile execution', async () => {
    const { Wrapper } = createWrapperOrderProviders()
    const {
      result: {
        error,
        current: { setOrderProfile },
      },
    } = renderHook(() => useOrderProfile(), { wrapper: Wrapper })

    expect(mockUpdateOrderFormProfile).not.toHaveBeenCalled()
    mockUpdateOrderFormProfile.mockRejectedValue({ code: 'TASK_CANCELLED' })
    expect(error).toBeUndefined()
    await act(async () => {
      const { success } = await setOrderProfile(mockProfileData)

      expect(success).toBeFalsy()
    })
    expect(mockLog).toHaveBeenCalledWith({
      type: 'Error',
      level: 'Critical',
      event: {
        error: { code: 'TASK_CANCELLED' },
        orderFormId: mockOrderForm.id,
      },
      workflowInstance: 'client-profile-not-updated',
      workflowType: 'OrderProfileTest',
    })
  })

  it('should call updateClientPreferencesData when setClientPreferencesData is executed', async () => {
    const { Wrapper } = createWrapperOrderProviders()
    const {
      result: {
        error,
        current: { setClientPreferencesData, clientProfileData },
      },
    } = renderHook(() => useOrderProfile(), { wrapper: Wrapper })

    const mockPreferencesData = {
      optInNewsletter: false,
      locale: 'pt-br',
    }

    expect(mockUpdateClientPreferencesData).not.toHaveBeenCalled()
    expect(error).toBeUndefined()
    expect(clientProfileData).toEqual(mockOrderForm.clientProfileData)
    await act(async () => {
      const { success } = await setClientPreferencesData(mockPreferencesData)

      expect(success).toBeTruthy()
    })
    expect(mockUpdateClientPreferencesData).toHaveBeenCalledWith(
      mockPreferencesData,
      mockOrderForm.id
    )
    expect(mockLog).not.toHaveBeenCalled()
  })

  it('should dispatch a log if something broken during the setClientPreferencesData execution', async () => {
    const { Wrapper } = createWrapperOrderProviders()
    const {
      result: {
        error,
        current: { setClientPreferencesData, clientProfileData },
      },
    } = renderHook(() => useOrderProfile(), { wrapper: Wrapper })

    const mockPreferencesData = {
      optInNewsletter: false,
      locale: 'pt-br',
    }

    mockUpdateClientPreferencesData.mockRejectedValue({
      code: 'TASK_CANCELLED',
    })
    expect(mockUpdateClientPreferencesData).not.toHaveBeenCalled()
    expect(error).toBeUndefined()
    expect(clientProfileData).toEqual(mockOrderForm.clientProfileData)
    await act(async () => {
      const { success } = await setClientPreferencesData(mockPreferencesData)

      expect(success).toBeFalsy()
    })
    expect(mockUpdateClientPreferencesData).toHaveBeenCalledWith(
      mockPreferencesData,
      mockOrderForm.id
    )
    expect(mockLog).toHaveBeenCalledWith({
      type: 'Error',
      level: 'Critical',
      event: {
        error: {
          code: 'TASK_CANCELLED',
        },
        orderFormId: mockOrderForm.id,
      },
      workflowInstance: 'client-preferences-data-not-updated',
      workflowType: 'OrderProfileTest',
    })
  })
})

```


[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 product-teaser-interfaces/example/README.md from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Product Teaser app example

This is an example of how a product teaser app would integrate with the store framework.

## How to add to your theme

Add the `product-teaser.product.example-teaser` block to your product page layout in your `blocks.json`. Example:

```diff
 // In the product page layout block
 // ...
   "children": [
     "product-name",
     "product-rating-summary",
     "product-price#product-details",
+    "product-teaser.product.example-teaser",
     "product-separator",
     "product-quantity",
```

You can also use it in the shelf or search results block of the product. Make sure you are using the block `product-summary.shelf`. This will not work if it uses the `product-summary`. Example:

```diff
 "product-summary.shelf": {
   "children": [
     // ...other blocks
+    "product-teaser.summary.example-teaser",
     // ...other blocks
   ]
 }
```

```


[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 product-teaser-interfaces/example/manifest.json from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "teaser-app-example",
  "version": "0.0.1",
  "title": "Teaser App Example",
  "description": "Example app of a product teaser app in the platform.",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.product-teaser-interfaces": "1.x",
    "vtex.product-summary-context": "0.x",
    "vtex.product-context": "0.x",
    "vtex.store": "2.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


[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 product-teaser-interfaces/docs/README.md from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Product Teaser Interfaces
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

> Interfaces for a product teaser app.

This app provides extensible interfaces that can be used by the `vtex.store` and a theme app. A product teaser app would depend on this app and extend the interfaces provided to become available in the store.

You can see an [example of a product teaser app here](/example).

## Use cases

1. Display promotional data related to a product.
2. Promote special conditions of payments.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- 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!
```


[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 product-teaser-interfaces/react/package.json from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts ."
  },
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/react": "^16.8.10",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex": "^10.1.0",
    "prettier": "^1.16.4",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  }
}

```


[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 product-teaser-interfaces/react/Noop.tsx from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

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

const Noop: FunctionComponent = () => <></>

export default Noop

```


[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 product-teaser-interfaces/store/interfaces.json from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-teaser": {
    "component": "*",
    "extensible": "public"
  },
  "product-teaser.summary": {
    "component": "*",
    "extensible": "public"
  },
  "product-teaser.product": {
    "component": "*",
    "extensible": "public"
  }
}

```


[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 product-teaser-interfaces/example/graphql/schema.graphql from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  appSettings: Settings @cacheControl(scope: PUBLIC, maxAge: MEDIUM)
}

type Settings {
  storeId: String
  productBinding: 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 product-teaser-interfaces/example/node/package.json from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/node": "8.x",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "3.8.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex": "^10.1.0",
    "prettier": "^1.18.2",
    "typescript": "3.5.2"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.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 product-teaser-interfaces/example/node/index.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ClientsConfig, LRUCache, Service, IOClients, ServiceContext } from '@vtex/api'
import { Clients } from './clients'

import settingsResolver from './resolvers/settings'

const TIMEOUT_MS = 800

// Create a LRU memory cache for the Product Review client.
// The @vtex/api HttpClient respects Cache-Control headers and uses the provided cache.
const memoryCache = new LRUCache<string, any>({max: 5000})
metrics.trackCache('productReview', memoryCache)

// This is the configuration for clients available in `ctx.clients`.
const clients: ClientsConfig<Clients> = {
  // We pass our custom implementation of the clients bag, containing the Status client.
  implementation: Clients,
  options: {
    // All IO Clients will be initialized with these options, unless otherwise specified.
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    // This key will be merged with the default options and add this cache to our Status client.
    status: {
      memoryCache,
    },
  },
}

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

// Export a service that defines route handlers and client options.
export default new Service<IOClients>({
  clients,
  graphql: {
    resolvers: {
      Query: {
        appSettings: settingsResolver,
      }
    },
  },
})
```


[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 product-teaser-interfaces/example/react/TeaserProduct.tsx from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'
import useProduct from 'vtex.product-context/useProduct'

const TeaserProduct: FunctionComponent = () => {
  const { product } = useProduct()

  if (!product) {
    return null
  }

  return (
    <div>
      <FormattedMessage
        id="teaser"
        values={{
          name: product.productName,
        }}
      />
    </div>
  )
}

export default TeaserProduct

```


[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 product-teaser-interfaces/example/react/TeaserSummary.tsx from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'
import { useProductSummary } from 'vtex.product-summary-context/ProductSummaryContext'

const RatingInline: FunctionComponent = () => {
  const { product } = useProductSummary()

  return (
    <div>
      <FormattedMessage
        id="teaser"
        values={{
          name: product.productName,
        }}
      />
    </div>
  )
}

export default RatingInline

```


[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 product-teaser-interfaces/example/react/package.json from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx . --fix"
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-apollo": "^2.5.8",
    "react-dom": "^16.8.3",
    "react-intl": "^2.7.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^0.2.0",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "typescript": "3.5.2"
  }
}

```


[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 product-teaser-interfaces/example/store/interfaces.json from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-teaser.summary.example-teaser": {
    "component": "TeaserSummary"
  },
  "product-teaser.product.example-teaser": {
    "component": "TeaserProduct"
  }
}

```


[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 product-teaser-interfaces/example/node/clients/productReview.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ExternalClient, InstanceOptions, IOContext, IOResponse } from '@vtex/api'

export default class ProductReview extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super('http://httpstat.us', context, options)
  }

  public async getStatus (status: number): Promise<string> {
    return this.http.get(status.toString(), {
      metric: 'status-get',
    })
  }

  public async getStatusWithHeaders (status: number): Promise<IOResponse<string>> {
    return this.http.getRaw(status.toString(), {
      metric: 'status-get-raw',
    })
  }
}
```


[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 product-teaser-interfaces/example/node/clients/index.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from '@vtex/api'

import ProductReview from './productReview'

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {
  public get status() {
    return this.getOrSet('productReview', ProductReview)
  }
}
```


[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 product-teaser-interfaces/example/node/resolvers/settings.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ServiceContext } from "@vtex/api";

declare var process : {
  env: {
    VTEX_APP_ID: string
  }
}

const appId = process.env.VTEX_APP_ID

export default async function settings(_root: any, _args: {}, ctx: ServiceContext) {
  const settings = await ctx.clients.apps.getAppSettings(appId)

  return settings
}
```


[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 product-teaser-interfaces/example/react/typings/storefront.d.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent, ReactElement } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    schema: object
  }
}

```


[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 product-teaser-interfaces/example/react/typings/vtex.product-context.d.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.product-context/useProduct' {
  import { Context } from 'react'

  interface ProductContext {
    product: any
  }

  export default function useProduct(): ProductContext
}

```


[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 product-teaser-interfaces/example/react/typings/css.d.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[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 product-teaser-interfaces/example/react/typings/vtex.product-summary-context.d.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.product-summary-context/ProductSummaryContext' {
  import { Context } from 'react'

  interface ProductSummaryContext {
    product: any
  }

  export function useProductSummary(): ProductSummaryContext
}
```


[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 product-teaser-interfaces/example/react/typings/graphql.d.ts from the product-teaser-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


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

[User] Show me the implementation of formatted-price/messages/pt.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "GRÁTIS",
  "store/price.TBD": "A calcular"
}

```


[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 formatted-price/messages/en.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "FREE",
  "store/price.TBD": "TBD"
}

```


[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 formatted-price/messages/fr.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "GRATUIT",
  "store/price.TBD": "À déterminer"
}

```


[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 formatted-price/messages/ro.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "GRATUIT",
  "store/price.TBD": "TBD"
}

```


[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 formatted-price/messages/context.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "FREE",
  "store/price.TBD": "TBD"
}

```


[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 formatted-price/messages/id.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "GRATIS",
  "store/price.TBD": "TBD"
}

```


[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 formatted-price/messages/es.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "GRATIS",
  "store/price.TBD": "Por calcular"
}

```


[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 formatted-price/messages/ar.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/price.Free": "مجانًا",
  "store/price.TBD": "يُحدَّد فيما بعد"
}

```


[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 formatted-price/docs/README.md from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Price

> Formatting utilities for displaying prices.

<table>
<tbody>
<tr>
<td>
  <img width="60" alt="free label" src="https://user-images.githubusercontent.com/10223856/78281020-698c5900-74f0-11ea-96ae-c63d460e5f1c.png">
</td>
<td>
  <code><FormattedPrice value={0} /></code>
</td>
</tr>
<tr>
<td>
  <img width="60" alt="tbd label" src="https://user-images.githubusercontent.com/10223856/78281021-6a24ef80-74f0-11ea-9ba4-aa0003c48ae4.png">
</td>
<td>
  <code><FormattedPrice value={null} /></code>
</td>
</tr>
<tr>
<td>
  <img width="94" alt="10 BRL label" src="https://user-images.githubusercontent.com/10223856/78281024-6abd8600-74f0-11ea-92ff-ebe95f548016.png">
</td>
<td>
  <code><FormattedPrice value={10} /></code>
</td>
</tr>
</tbody>
</table>

## Usage

To use this app, you first need to add it in your `manifest.json` file, like so

```json
{
  "dependencies": {
    "vtex.formatted-price": "0.x"
  }
}
```

> If you are using TypeScript, you may also want to run `vtex setup` after the step above

Now you can import the component and use it

```jsx
import React from 'react'
import { FormattedPrice } from 'vtex.formatted-price'

const ProductSummary = ({ productPrice }) => {
  return (

My Awesome Product

      <FormattedPrice value={productPrice} />

  )
}
```

## Components

### FormattedPrice

Responsible for rendering and styling the value prop as a price
with the current store currency settings.

#### Props

| Prop name | Type | Required |
| --- | --- | --- |
| [`value`](#formattedprice-value) | `number` | `false` |

##### FormattedPrice value

`number | null | undefined`

Value used in the formatting.

### useFormattedPrice

`(value: number | null | undefined) => string`

Utility hook that formats the value parameter into a price string, using the
current store currency settings.

## CSS Customization

In order to apply CSS customizations in this and other blocks, follow the instructions
given in [this recipe](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization)
regarding using CSS classes for store customization.

| CSS Handle | Component |
| --- | --- |
| `price` | `FormattedPrice` |

```


[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 formatted-price/react/package.json from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "^4.3.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.10",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@vtex/test-tools": "^3.1.0",
    "typescript": "3.8.3",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.2/public/@types/vtex.css-handles",
    "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.format-currency@0.1.3/public/@types/vtex.format-currency",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.98.1/public/@types/vtex.render-runtime",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.112.27/public/@types/vtex.styleguide"
  },
  "version": "0.8.1"
}

```


[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 formatted-price/react/FormattedPrice.tsx from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classnames from 'classnames'
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

import useFormattedPrice from './useFormattedPrice'

const CSS_HANDLES = ['price'] as const

interface FormattedPriceProps {
  value?: number | null
}

const FormattedPrice: FC<FormattedPriceProps> = ({ value }) => {
  const handles = useCssHandles(CSS_HANDLES)

  const price = useFormattedPrice(value)

  return (
    <div className={classnames(handles.price, { 'c-success': value === 0 })}>
      {price}
    </div>
  )
}

export default FormattedPrice

```


[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 formatted-price/react/useFormattedPrice.ts from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMemo } from 'react'
import { useIntl, defineMessages } from 'react-intl'
import { formatCurrency } from 'vtex.format-currency'
import { useRuntime } from 'vtex.render-runtime'

const messages = defineMessages({
  free: {
    id: 'store/price.Free',
  },
  tbd: {
    id: 'store/price.TBD',
  },
})

const useFormattedPrice = (value?: number | null) => {
  const { culture } = useRuntime()
  const intl = useIntl()

  const formattedPrice = useMemo(() => {
    if (value == null) {
      return intl.formatMessage(messages.tbd)
    }
    if (value === 0) {
      return intl.formatMessage(messages.free)
    }
    return formatCurrency({ intl, value, culture })
  }, [culture, intl, value])

  return formattedPrice
}

export default useFormattedPrice

```


[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 formatted-price/react/typings/storefront.d.ts from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


[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 formatted-price/react/typings/vtex.render-runtime.d.ts from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { RenderContext } from 'vtex.render-runtime'

declare module 'vtex.render-runtime' {
  export const useRuntime: () => RenderContext
}

```


[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 formatted-price/react/typings/css.d.ts from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[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 formatted-price/react/typings/graphql.d.ts from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


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

[User] Show me the implementation of formatted-price/react/typings/vtex.styleguide.d.ts from the formatted-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: 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 smartlook/docs/README.md from the smartlook VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Smartlook

Open the VTEX APP Store and install the app on your store.

or

Run the following command:

```sh
vtex install vtex.smartlook@0.x
```

Next, open the app settings on your admin and fill the form with Site ID.

### Setup in Cart and Checkout page

Open your admin in the Checkout section in the `checkout6-custom.js`:

https://ACCOUNT.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js

Add the following snippet in the file and replace `"YOURSITEID"` with your Site ID:

```js
// Smartlook
window.smartlook||(function(d) {
    var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
    var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
    c.charset='utf-8';c.src='https://rec.smartlook.com/recorder.js';h.appendChild(c);
    })(document);
    smartlook('init', 'YOURSITEID');
```

Click Save.

```


[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 cookie-script/docs/README.md from the cookie-script VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/cookie-script) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Cookie Script

<!-- DOCS-IGNORE:start -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- DOCS-IGNORE:end -->

[Cookie Script](https://cookie-script.com/) app brings the [solution](https://apps.vtex.com/vtex-cookie-script/p) to make your website cookies comply with GDPR and CCPA.

![image](https://user-images.githubusercontent.com/284515/86488877-d35b0f80-bd38-11ea-95f9-7610985e19d5.png)

Learn how to install and configure the app on the following sections.

## Installing Cookie Script app

It is possible to install the Cookie Script in your store either by using [App Store](https://apps.vtex.com/vtex-cookie-script/p) or the [VTEX IO CLI](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference).

  ### Using VTEX App Store

1. Access the **Apps** section in your account's admin page and look for the Cookie Script box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your **Cookie Script ID**.
4. Click on **Save**.

### Using VTEX IO Toolbelt

1. In your terminal, [install](https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.cookie-script@0.x` app.
3. To confirm that the app has now been installed, run in your terminal `vtex ls` and check the installed apps' list.
4. Access the **Apps** section in your account's admin page and look for the Cookie Script box. Once you find it, click on it.
5. Fill in the **Cookie Script ID** field.
6. Click on **Save**.

After installing the app, you must create an account in [Cookie Script](https://cookie-script.com/create-an-account.html) to make the app work on your store. Follow the steps on the [Cookie Script Configuration](#cookie-script-configuration) section to create an account and configure the app.

## Cookie Script Configuration
Once you have installed the app, you need to create an account in [Cookie Script](https://cookie-script.com/create-an-account.html) to be able to configure the app.

>⚠ *You must follow the steps described in this section to guarantee the cookies will work. Otherwise, they will break the purchases flow from your store.*

1. Go to the [Cookie Script](https://cookie-script.com/create-an-account.html) page and create your account.
2. After creating your account, go to the **Dashboard** tab and click on `Add website`.

![app-dashboard](https://user-images.githubusercontent.com/67270558/133613562-3248fadc-e6a0-4859-8b05-5167085e4242.gif)

3. Once you have added your website, go to the **Cookie scanner** tab and run a scan.
2. After the scan is complete, go to **Cookies** tab and make sure the following cookies are categorized as **Stricly Necessary**: `ASPXAUTH`, `checkout.vtex.com`, `CookieConsent`, `device`, `vtex_segment`, `vtex_session`, `VtexFingerPrint`, `VtexRCMacIdv7`, `VtexRCRequestCounter`, `VtexRCSessionIdv7` and `VtexWorkspace`.

<!-- 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 are 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 cookie-script/public/metadata/messages/es-AR.json from the cookie-script VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Cookie Script",
  "headline": "Haga que las cookies de su sitio web cumplan con GDPR y CCPA.",
  "overview": "Esta aplicación permite una fácil integración con los servicios ofrecidos por Cookie Script.\r\nCookie Script lo ayuda a cumplir con GDPR y CCPA. Cree su propia ventana emergente de información de cookies sin la necesidad de habilidades de programación. Puedes usar el servicio gratis.",
  "features": [
    "Cookie Script comprueba, categoriza y agrega automáticamente la descripción de todas las cookies que se encuentran en su sitio web",
    "Analizamos su sitio web y generamos informes detallados sobre todos los tipos de cookies utilizados",
    "Registramos y almacenamos todos los consentimientos de los visitantes para que pueda descargarlos según lo requiera el RGPD",
    "Siga las reglas de GPDR y permita que sus usuarios suspendan el consentimiento de las cookies en cualquier momento en cualquier página",
    "Cookie Script puede eliminar todas las cookies hasta que el visitante acepte la Política de cookies. Esto es opcional, por lo que puede cumplir con GDPR y CCPA. También puede bloquear las cookies de terceros",
    "Seleccione qué cookies son estrictamente necesarias (funcionales) para que su sitio web funcione correctamente"
  ],
  "additionalInformation": " Algunas funciones solo están disponibles para suscripciones específicas.",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 cookie-script/public/metadata/messages/pt-BR.json from the cookie-script VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Cookie Script",
  "headline": "Faça com que os cookies do seu site estejam em conformidade com o GDPR e o CCPA.",
  "overview": "Este aplicativo permite uma fácil integração com os serviços oferecidos por Cookie Script.\r\nCookie Script ajuda você a cumprir o GDPR e o CCPA. Crie seu próprio pop-up de informações sobre cookies sem a necessidade de habilidades de programação. Você pode usar o serviço gratuitamente.",
  "features": [
    "Cookie Script verifica automaticamente, categoriza e adiciona descrição a todos os cookies encontrados no seu site",
    "Analisamos seu site e geramos relatórios detalhados sobre todos os tipos de cookies utilizados",
    "Registramos e armazenamos todos os consentimentos dos visitantes para que você possa baixá-los conforme exigido pelo GDPR",
    "Siga as regras do GPDR e permita que seus usuários suspendam o consentimento de cookies a qualquer momento em qualquer página",
    "Cookie Script pode excluir todos os cookies até o visitante concordar com a Política de Cookies. Isso é opcional, para que você possa cumprir o GDPR e o CCPA. Você também pode bloquear cookies de terceiros",
    "Selecione quais cookies são estritamente necessários (funcionais) para o seu site funcionar corretamente"
  ],
  "additionalInformation": "Alguns recursos estão disponíveis apenas para assinaturas específicas.",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 cookie-script/public/metadata/messages/en-US.json from the cookie-script VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Cookie Script",
  "headline": "Make your website cookies comply with GDPR and CCPA.",
  "overview": "This app allows easy integration with the services offered by Cookie Script.\r\nCookie Script helps you to comply GDPR and CCPA. Make your own cookie information popup, no programming skills required. You can even use it for free.",
  "features": [
    "Cookie-Script automatically scans, categorizes and adds description to all cookies found on your website",
    "We scan your website and generate detailed report about all types of cookies used",
    "We record and store all visitor consents so you could download them as required by GDPR",
    "Follow GPDR rules and allow your users to withdraw cookie consent at any time on any page",
    "Cookie-Script can delete all cookies until visitor agrees to Cookie Policy. This is optional, so you can comply with both GDPR and CCPA. You can also block third-party cookies",
    "Select which cookies are strictly necessary (functional) for your website to work properly"
  ],
  "additionalInformation": "Some features are only available to specific subscriptions.",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


[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 hello-support/docs/README.md from the hello-support VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Hello Support #

A quick setup for a support app in VTEX.

### Installation ###
```
$ git clone https://github.com/vtex/hello-support support-app
$ cd support-app
$ vtex link
```

Be sure to have [VTEX's toolbelt](https://github.com/vtex/toolbelt)
installed.

### FAQ ###

#### What is a support app? ####

A support app is one of the simplest examples of apps
that run in VTEX IO.

Its purpose is to declare groups of users in the VTEX
platform, and which roles they have access to.

If someone decides to install this app in a workspace,
they will be giving these groups of users the declared
accesses.

This enables app developers to support users having
trouble with the app functionality.
Say you're an app developer (which, by reading this,
you probably are) and a customer is having trouble with
some feature your apps have. By publishing a support app
with the adequate policies, you can ask your customer
to install it and help them hand-in-hand on their own
workspace!

#### How does it work? ####

By adding the `support` builder into the `builders`
object in `manifest.json`, the app declares that
it contains a `support.json`.

The `support.json` file must be like the example given:

```json
[
  {
    "role": "app-developer",
    "policies": [
      {
        "name": "read-write-workspace"
      },
      {
        "name": "read-workspace-info"
      },
      {
        "name": "link-apps",
        "attrs": {
          "appName": "vendor.appName"
        },
        "reason": "Insert reason here."
      },
      {
        "name": "read-workspace-apps"
      },
    ]
  },
  {
    "role": "support-agent",
    "policies": [
      {
        "name": "read-workspace-info"
      },
      {
        "name": "read-workspace-apps"
      }
    ]
  }
]
```

where `groupName` is the name of the group of people
that will have access to such policies,
and `policies` is an array of object of policies, which can
have
```ts
{
  name: string,
  reason: string,
  attrs: object,
}
```

This allows VTEX IO infrastructure to get this apps' support
policies and add to someone assuming a support role **with the
same vendor as the support app**. That is, having a support
app with vendor A linked to your workspace doesn't mean
a Support Agent from vendor B will have access to those policies.

```


[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 hello-support/support/support.json from the hello-support VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
    "role": "app-developer",
    "policies": [
      {
        "name": "read-write-workspace"
      },
      {
        "name": "read-workspace-info"
      },
      {
        "name": "read-workspace-apps"
      },
      {
        "name": "link-apps",
        "attrs": {
          "appName": "vendor.appName"
        },
        "reason": "Insert reason here."
      }
    ]
  },
  {
    "role": "support-agent",
    "policies": [
      {
        "name": "read-workspace-info"
      },
      {
        "name": "read-workspace-apps"
      }
    ]
  }
]

```


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

[Assistant]
Here's the implementation:

```markdown
# Checkout GraphQL

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

## Warning 🚨

This repository contains **experimental** code for VTEX Checkout and should **not** be used in production.

This code is "experimental" for various reasons:
- Some are not tested as rigorously as the main code.
- Some are tested but not maintained.
- It can suffer from significant changes (breaking changes) without further notice.

**Use it at your own risk!** ☠

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://carafizi.com/"><img src="https://avatars3.githubusercontent.com/u/51974587?v=4" width="100px;" alt=""/><br /><sub><b>Gabriel Carafizi</b></sub></a><br /><a href="https://github.com/vtex-apps/checkout-graphql/commits?author=carafizi1" title="Code">💻</a></td>
  </tr>
</table>

<!-- 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!

```


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

[Assistant]
Here's the implementation:

```graphql
type Query {
  getCardSessionId: String @withAuthMetrics
  orderForm(orderFormId: ID, refreshOutdatedData: Boolean): OrderForm!
    @noCache
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @withSegment
  checkoutProfile(email: String!): CheckoutProfile @withAuthMetrics @noCache
  shippingSLA(
    items: [ShippingItem]
    postalCode: String
    country: String
  ): Shipping
    @cacheControl(scope: SEGMENT, maxAge: MEDIUM)
    @withAuthMetrics
    @withSegment
    @withOrderFormId
    @withOwnerId
}

type Mutation {
  addToCart(
    orderFormId: ID
    items: [ItemInput]
    marketingData: MarketingDataInput
    salesChannel: String
    allowedOutdatedData: [String!]
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @withSegment @noCache

  updateItems(
    orderFormId: ID
    orderItems: [ItemInput]
    splitItem: Boolean = true
    allowedOutdatedData: [String!]
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  addItemOffering(orderFormId: ID, offeringInput: OfferingInput): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache
  removeItemOffering(orderFormId: ID, offeringInput: OfferingInput): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  addBundleItemAttachment(
    orderFormId: ID
    bundleItemAttachmentInput: BundleItemAttachmentInput
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache
  removeBundleItemAttachment(
    orderFormId: ID
    bundleItemAttachmentInput: BundleItemAttachmentInput
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  insertCoupon(orderFormId: ID, text: String): OrderForm!
    @withOrderFormId
    @withOwnerId
    @noCache

  estimateShipping(orderFormId: ID, address: AddressInput): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  selectDeliveryOption(orderFormId: ID, deliveryOptionId: String): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  selectPickupOption(
    orderFormId: ID
    pickupOptionId: String
    itemId: String
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  """
  Changes the currently selected address in the shipping data
  of the OrderForm
  """
  updateSelectedAddress(orderFormId: ID, input: AddressInput!): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  savePaymentToken(
    orderFormId: ID
    paymentTokens: [PaymentToken]
  ): SavePaymentTokenPayload @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  updateOrderFormProfile(orderFormId: ID, input: UserProfileInput!): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  updateClientPreferencesData(
    orderFormId: ID
    input: ClientPreferencesDataInput!
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  updateOrderFormPayment(orderFormId: ID, input: PaymentDataInput!): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  setManualPrice(orderFormId: ID, input: ManualPriceInput!): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  updateItemsOrdination(
    orderFormId: ID
    ascending: Boolean!
    criteria: ItemsOrdinationCriteria!
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  clearOrderFormMessages(orderFormId: ID): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache

  updateOrderFormOpenTextField(
    orderFormId: ID
    input: OrderFormOpenTextInput!
  ): OrderForm! @withAuthMetrics @withOrderFormId @withOwnerId @noCache

  updateOrderFormMarketingData(input: MarketingDataInput!): OrderForm!
    @withAuthMetrics
    @withOrderFormId
    @withOwnerId
    @noCache
}

```


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

[Assistant]
Here's the implementation:

```graphql
directive @withSegment on FIELD_DEFINITION

directive @withOrderFormId on FIELD_DEFINITION

directive @withOwnerId on FIELD_DEFINITION

directive @noCache on FIELD_DEFINITION

directive @withAuthMetrics on FIELD_DEFINITION

```


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

[Assistant]
Here's the implementation:

```json
{
  "stack": "nodejs",
  "memory": 258,
  "ttl": 43200,
  "timeout": 30,
  "minReplicas": 2,
  "maxReplicas": 120,
  "workers": 4,
  "cpu": 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 checkout-graphql/node/typings.d.ts from the checkout-graphql VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOContext as ioContext } from '@vtex/api'
import { Context as KoaContext } from 'koa'

import CheckoutDataSource from './dataSources/checkout'

declare global {
  interface IOContext extends ioContext {
    params: {
      [param: string]: string
    }
    route: {
      id: string
      declarer: string
      params: {
        [param: string]: string
      }
    }
  }

  interface ServiceContext extends KoaContext {
    vtex: IOContext
    dataSources: SearchGraphQLDataSources
    originalPath: string
  }

  interface SearchGraphQLDataSources {
    checkout: CheckoutDataSource
  }

  type Resolver<TArgs = any, TRoot = any> = (
    root: TRoot,
    args: TArgs,
    context: ServiceContext
  ) => Promise<any>
}

export {}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.checkout-graphql",
  "version": "0.67.1",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "atob": "^2.1.2",
    "dataloader": "^2.0.0",
    "graphql": "^14.0.0",
    "graphql-tools": "^4.0.0",
    "lodash": "^4.17.15",
    "ramda": "^0.26.1",
    "set-cookie-parser": "^2.5.1"
  },
  "devDependencies": {
    "@types/atob": "^2.1.2",
    "@types/cookie": "^0.3.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.18",
    "@types/lodash": "^4.14.138",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@types/set-cookie-parser": "^2.4.2",
    "@vtex/api": "6.46.1",
    "@vtex/test-tools": "^3.1.0",
    "@vtex/tsconfig": "^0.2.0",
    "typescript": "3.9.7",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.60.0/public/@types/vtex.checkout-graphql",
    "vtex.country-data-settings": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.country-data-settings@0.4.0/public/@types/vtex.country-data-settings",
    "vtex.graphql-server": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.graphql-server@1.66.4/public/_types/react",
    "vtex.messages": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.messages@1.64.0/public/@types/vtex.messages"
  }
}

```


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

[Assistant]
Here's the implementation:

```typescript
import { LRUCache, Service, RecorderState } from '@vtex/api'

import { Clients } from './clients'
import { schemaDirectives } from './directives'
import { resolvers } from './resolvers'

const THREE_SECONDS_MS = 3 * 1000
const TEN_SECONDS_MS = 10 * 1000

// Segments are small and immutable.
const MAX_SEGMENT_CACHE = 10000
const segmentCache = new LRUCache<string, any>({ max: MAX_SEGMENT_CACHE })
metrics.trackCache('segment', segmentCache)

const searchGraphQLCache = new LRUCache<string, any>({ max: 5000 })
metrics.trackCache('searchGraphQL', searchGraphQLCache)

export default new Service<Clients, RecorderState, CustomContext>({
  clients: {
    implementation: Clients,
    options: {
      checkout: {
        timeout: TEN_SECONDS_MS,
      },
      default: {
        retries: 2,
        timeout: THREE_SECONDS_MS,
      },
      searchGraphQL: {
        memoryCache: searchGraphQLCache,
        timeout: THREE_SECONDS_MS,
      },
      segment: {
        memoryCache: segmentCache,
        timeout: THREE_SECONDS_MS,
      },
      countryDataSettings: {
        timeout: THREE_SECONDS_MS,
      },
    },
  },
  graphql: {
    resolvers,
    schemaDirectives,
  },
})

```


[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-graphql/graphql/types/Profile.graphql from the checkout-graphql VTEX app.

[Assistant]
Here's the implementation:

```graphql
input UserProfileInput {
  email: String
  firstName: String
  lastName: String
  document: String
  phone: String
  documentType: String
  isCorporate: Boolean
  corporateName: String
  tradeName: String
  corporateDocument: String
  stateInscription: String
}

type UserProfile {
  email: String!
  firstName: String!
  lastName: String!
  document: String
  documentType: String
  phone: String
  corporateName: String
  tradeName: String
  corporateDocument: String
  stateInscription: String
  corporatePhone: String
  isCorporate: Boolean!
  profileCompleteOnLoading: String
  profileErrorOnLoading: String
  customerClass: String
}

type CheckoutProfile {
  userProfileId: String
  profileProvider: String
  availableAccounts: [AvailableAccount!]!
  availableAddresses: [Address!]!
  userProfile: UserProfile
}

```


[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-graphql/graphql/types/OrderForm.graphql from the checkout-graphql VTEX app.

[Assistant]
Here's the implementation:

```graphql
type OrderForm {
  id: ID!
  items: [Item!]!
  canEditData: Boolean!
  loggedIn: Boolean!
  userProfileId: String
  userType: UserType
  shipping: Shipping!
  marketingData: MarketingData!
  totalizers: [Totalizer!]!
  value: Float!
  messages: OrderFormMessages!
  paymentData: PaymentData!
  clientProfileData: ClientData
  clientPreferencesData: ClientPreferencesData
  allowManualPrice: Boolean
  openTextField: OpenTextField
  storePreferencesData: StorePreferencesData
  customData: CustomData
}

type CustomData {
  customApps: [CustomApp!]!
}

scalar CustomFieldsObject

type CustomApp {
  id: ID!
  major: Int!
  fields: CustomFieldsObject!
}

type StorePreferencesData {
  countryCode: String
  currencyCode: String
  timeZone: String
  currencyFormatInfo: CurrencyFormatInfo
  currencySymbol: String
}

type CurrencyFormatInfo {
  currencyDecimalDigits: Int
  currencyDecimalSeparator: String
  currencyGroupSeparator: String
  startsWithCurrencySymbol: Boolean
}

type OpenTextField {
  value: String
}

enum UserType {
  CALL_CENTER_OPERATOR
  STORE_USER
}

type MarketingData {
  utmCampaign: String
  utmMedium: String
  utmSource: String
  utmiCampaign: String
  utmiPart: String
  utmiPage: String
  coupon: String
  marketingTags: [String!]
}

input MarketingDataInput {
  utmCampaign: String
  utmMedium: String
  utmSource: String
  utmiCampaign: String
  utmiPart: String
  utmiPage: String
  coupon: String
  marketingTags: [String!]
}

type Totalizer {
  id: String!
  name: String @translatableV2
  value: Float!
}

type OrderFormMessages {
  couponMessages: [Message!]!
  generalMessages: [Message!]!
}

type Message {
  code: String
  status: String
  text: String @translatableV2
}

type ClientPreferencesData {
  locale: String
  optInNewsletter: Boolean
}

input ClientPreferencesDataInput {
  optInNewsletter: Boolean
  locale: String
}

enum ItemsOrdinationCriteria {
  name
  add_time
}

input OrderFormOpenTextInput {
  value: String
}

```