[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 shopper-location-theme/store/blocks/pdp/product.jsonc from the shopper-location-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "condition-layout.product#availability",
      "flex-layout.row#description",
      "flex-layout.row#specifications-title",
      "product-specification-group#table",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#specifications-title": {
    "children": ["rich-text#specifications"]
  },
  "rich-text#specifications": {
    "props": {
      "text": "##### Product Specifications"
    }
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#description": {
    "props": {
      "marginBottom": 7
    },
    "children": ["product-description"]
  },
  "condition-layout.product#availability": {
    "props": {
      "conditions": [
        {
          "subject": "isProductAvailable"
        }
      ],
      "Then": "flex-layout.row#product-main",
      "Else": "flex-layout.row#product-availability"
    }
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "props": {
      "blockClass": "product"
    },
    "children": [
      "flex-layout.row#product-image",
      "product-bookmark",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "60%",
      "rowGap": 0
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "aspectRatio": {
        "desktop": "auto",
        "phone": "16:9"
      },
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "flex-layout.row#product-name",
      "product-rating-summary",
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-installments",
      "product-separator",
      "product-identifier.product",
      "sku-selector",
      "product-quantity",
      "product-assembly-options",
      "product-gifts",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },

  "flex-layout.row#product-name": {
    "props": {
      "marginBottom": 3
    },
    "children": ["vtex.store-components:product-name"]
  },

  "sku-selector": {
    "props": {
      "variationsSpacing": 3,
      "showValueNameForImageVariation": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["add-to-cart-button"]
  },

  "flex-layout.row#product-availability": {
    "props": {
      "colGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7
    },
    "children": [
      "flex-layout.col#stack",
      "flex-layout.col#right-col-availability"
    ]
  },
  "flex-layout.col#right-col-availability": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0,
      "blockClass": "info-availability"
    },
    "children": [
      "flex-layout.row#product-name",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#availability"
    ]
  },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
    },
    "children": ["availability-subscriber"]
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

```


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

[User] Show me the implementation of shopper-location-theme/store/blocks/pdp/product-specifications-table.jsonc from the shopper-location-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#table": {
    "children": [
      "flex-layout.row#spec-group"
    ]
  },
  "flex-layout.row#spec-group": {
    "props": {
      "blockClass": "productSpecificationGroup"
    },
    "children": [
      "flex-layout.col#spec-group"
    ]
  },
  "flex-layout.col#spec-group": {
    "children": [
      "flex-layout.row#spec-group-name",
      "product-specification"
    ]
  },
  "flex-layout.row#spec-group-name": {
    "props": {
      "blockClass": "productSpecificationGroupName"
    },
    "children": [
      "product-specification-text#group"
    ]
  },
  "product-specification": {
    "children": [
      "flex-layout.row#spec-item"
    ]
  },
  "flex-layout.row#spec-item": {
    "props": {
      "blockClass": "productSpecification"
    },
    "children": [
      "flex-layout.col#spec-name",
      "flex-layout.col#spec-value"
    ]
  },
  "flex-layout.col#spec-name": {
    "props": {
      "blockClass": "productSpecificationName",
      "width": {
        "mobile": "50%",
        "desktop": "25%"
      }
    },
    "children": [
      "product-specification-text#specification"
    ]
  },
  "flex-layout.col#spec-value": {
    "props": {
      "blockClass": "productSpecificationValue"
    },
    "children": [
      "product-specification-values"
    ]
  },
  "product-specification-values": {
    "children": [
      "product-specification-text#value"
    ]
  },
  "product-specification-text#group": {
    "props": {
      "message": "{groupName}"
    }
  },
  "product-specification-text#specification": {
    "props": {
      "message": "{specificationName}"
    }
  },
  "product-specification-text#value": {
    "props": {
      "message": "{specificationValue}"
    }
  }
}

```


[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 shopper-location-theme/store/blocks/header/category-menu.json from the shopper-location-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "props": {
      "experimentalOptimizeRendering": true
    },
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ]
  },
  "menu-item#category-apparel": {
    "props": {
      "id": "menu-item-category-apparel",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/",
        "noFollow": false,
        "tagTitle": "Apparel & Accessories",
        "text": "Apparel & Accessories"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#category-apparel"
    ]
  },
  "vtex.menu@2.x:submenu#category-apparel": {
    "props": {
      "width": "auto"
    },
    "children": [
      "vtex.menu@2.x:menu#category-apparel"
    ]
  },
  "vtex.menu@2.x:menu#category-apparel": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-apparel-clothing",
      "menu-item#category-apparel-accessories",
      "menu-item#category-apparel-eyeglasses"
    ]
  },
  "menu-item#category-apparel-clothing": {
    "props": {
      "id": "menu-item-category-apparel-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/clothing/",
        "noFollow": false,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },
  "menu-item#category-apparel-accessories": {
    "props": {
      "id": "menu-item-category-apparel-accessories",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/accessories/",
        "noFollow": false,
        "tagTitle": "Accessories",
        "text": "Accessories"
      }
    }
  },
  "menu-item#category-apparel-eyeglasses": {
    "props": {
      "id": "menu-item-category-apparel-eyeglasses",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/eyeglasses/",
        "noFollow": false,
        "tagTitle": "Eyeglasses",
        "text": "Eyeglasses"
      }
    }
  },
  "menu-item#category-home": {
    "props": {
      "id": "menu-item-category-home",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/home---decor/",
        "noFollow": false,
        "tagTitle": "Home & Decor",
        "text": "Home & Decor"
      }
    }
  },
  "menu-item#more": {
    "props": {
      "id": "menu-item-custom-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "More",
        "text": "More"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#more"
    ]
  },
  "vtex.menu@2.x:submenu#more": {
    "props": {
      "width": "100%"
    },
    "children": [
      "flex-layout.row#menu-more"
    ]
  },
  "flex-layout.row#menu-more": {
    "children": [
      "flex-layout.col#menu-more-1",
      "flex-layout.col#menu-more-2"
    ]
  },
  "flex-layout.col#menu-more-1": {
    "children": [
      "vtex.menu@2.x:menu#more"
    ]
  },
  "flex-layout.col#menu-more-2": {
    "children": [
      "info-card#home"
    ]
  },
  "vtex.menu@2.x:menu#more": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#about-us",
      "menu-item#faq"
    ]
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": true,
        "tagTitle": "About us",
        "text": "About us"
      }
    }
  },
  "menu-item#faq": {
    "props": {
      "id": "menu-item-faq",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/faq",
        "noFollow": true,
        "tagTitle": "FAQ",
        "text": "FAQ"
      }
    }
  },
  "menu-item#contact-us": {
    "props": {
      "id": "menu-item-contact-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/contact-us",
        "noFollow": true,
        "tagTitle": "Contact Us",
        "text": "Contact Us"
      }
    }
  }
}

```


[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 shopper-location-theme/store/blocks/header/header.jsonc from the shopper-location-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header.full": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header-layout.desktop": {
    "children": [
      "flex-layout.row#1-desktop",
      "flex-layout.row#3-desktop",
      "sticky-layout#4-desktop"
    ]
  },

  "flex-layout.row#1-desktop": {
    "children": ["telemarketing"],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.row#3-desktop": {
    "props": {
      "blockClass": "menu-link",
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "vtex.menu@2.x:menu#websites",
      "flex-layout.col#spacer",
      "vtex.menu@2.x:menu#institutional"
    ]
  },
  "flex-layout.col#spacer": {
    "props": {
      "width": "grow"
    }
  },
  "sticky-layout#4-desktop": {
    "props": {
      "blockClass": "sticky-header"
    },
    "children": ["flex-layout.row#4-desktop"]
  },
  "flex-layout.row#4-desktop": {
    "props": {
      "blockClass": "main-header",
      "horizontalAlign": "center",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "flex-layout.col#logo-desktop",
      "flex-layout.col#category-menu",
      "flex-layout.col#spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart.v2"
    ]
  },
  "flex-layout.col#logo-desktop": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["logo#desktop"]
  },
  "flex-layout.col#category-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["vtex.menu@2.x:menu#category-menu"]
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
      "width": "180",
      "height": "12"
    }
  },
  "header-layout.mobile": {
    "children": ["sticky-layout#1-mobile"]
  },
  "sticky-layout#1-mobile": {
    "children": ["flex-layout.row#1-mobile"]
  },
  "flex-layout.row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "flex-layout.col#spacer",
      "login",
      "minicart.v2"
    ],
    "props": {
      "blockClass": "main-header-mobile",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "drawer": {
    "children": ["menu#drawer"]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
      "width": "77.5",
      "height": "27.5"
    }
  }
}

```


[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 shopper-location-theme/store/blocks/header/top-menu.json from the shopper-location-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#websites": {
    "children": [
      "menu-item#shop",
      "menu-item#about-us",
      "flex-layout.row#header-desktop"
    ]
  },
  "flex-layout.row#header-desktop": {
    "props": {
      "blockClass": "main-header",
      "horizontalAlign": "center",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": ["shopper-location"]
  },
  "menu-item#shop": {
    "props": {
      "id": "menu-item-shop",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Shop",
        "text": "Shop"
      }
    }
  },
  "vtex.menu@2.x:menu#institutional": {
    "children": ["menu-item#vtex-website"]
  },
  "menu-item#vtex-website": {
    "props": {
      "id": "menu-item-vtex-website",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "external",
        "href": "http://vtex.com",
        "noFollow": false,
        "tagTitle": "visit vtex.com",
        "text": "visit vtex.com"
      }
    }
  }
}

```


[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 carrier-hubs-examples/carrier-tracking-example/manifest.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "carrier-tracking-example",
  "vendor": "vtex",
  "version": "0.1.0",
  "title": "Tracking Example",
  "description": "Example that use vtex.carrier-tracking as a builder",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "vtex.carrier-tracking": "0.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "billingOptions": {
    "free": true
  },
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "www.google.com",
        "path": "/"
      }
    }
  ],
  "settingsSchema": {
    "title": "Carrier Authentication",
    "type": "object",
    "properties": {
      "user": {
        "title": "User",
        "type": "string"
      },
      "token": {
        "title": "Token",
        "type": "string"
      }
    }
  },
  "$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 carrier-hubs-examples/carrier-notifier-example/manifest.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "carrier-notifier-example",
  "vendor": "vtex",
  "version": "0.1.0",
  "title": "Notifier Example",
  "description": "Example that use vtex.carrier-notifier as a builder",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "vtex.carrier-notifier": "0.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "billingOptions": {
    "free": true
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "www.google.com",
        "path": "/"
      }
    }
  ],
  "settingsSchema": {
    "title": "Carrier Authentication",
    "type": "object",
    "properties": {
      "user": {
        "title": "User",
        "type": "string"
      },
      "token": {
        "title": "Token",
        "type": "string"
      }
    }
  },
  "$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 carrier-hubs-examples/carrier-tracking-example/docs/README.md from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Tracking App

## Before you start

VTEX Log connects carriers and store owners to deliver better freight costs, and a simpler and smarter logistics operation. Our VTEX Log UI uses the following steps during a package's tracking process:
- **Notification:** our OMS notifies the carrier that a package is being dispatched.
- **Label:** tracking label is issued.
- **Tracking:** tracking of the package begins, and is repeated in cycles, until its final delivery.

For *carriers* to integrate with VTEX Log's Hub, our main system, it is necessary to develop apps in VTEX IO. The carrier's apps integrate with the hub, that in turn are connected to other VTEX systems, fulfilling the steps cited above.

For the integration, carriers should develop VTEX IO apps only for the `Notification` and `Tracking` steps. The `Label` app will be developed internally by the VTEX Log team, our partners. Apps should be developed by following the model files included in this repository:
- [Notification app model](https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-notifier-example)
- [Tracking app model](https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-tracking-example)

The app's developement is associated to **API routes** that should also be developed by the carrier for the app to function fully. Check out our [API Reference](https://developers.vtex.com/vtex-developer-docs/reference/vtex-log-tracking-app#vtex-log-tracking-events-with-app) for more details about all API calls.

## Tracking App Model

This is an example app that implements the builder for carrier tracking apps. It also exports the API that integrates with the VTEX Log's tracking hub. The Tracking Apps can be called every X minutes, with the request to update the events of a list of tracking codes, for packages that are still pending delivery.

Requirements for an IO app for tracking:
- Use the *Node* or *Dotnet* and *vtex.carrier-notifier* builders.
- Export the API that is called by the *vtex.carrier-notifier* app.

Follow the instructions below, to model your carrier app according to this example.

### vtex.carrier-tracking builder
Along with the *Node* or *Dotnet* builder, the use of the `vtex.carrier-tracking` builder is what makes the app as a tracking type, and thus be detected by our hub. The steps to use the builder are the following:

1. Add builder `vtex.carrier-tracking: 0.x` to the list of builders, in the file `manifest.json`.
Ex:
```
"builders": {
    "node": "6.x",
    "vtex.carrier-tracking": "0.x"
}
```
2. Create the `vtex.carrier-tracking` folder at the *root* of the project.
 Whithin it, create the `configuration.json` file.
 This file must contain the name of the carrier that will do the tracking, which will be displayed to the customer or user.  File format:
```
{
  "trackingOptions": [
    {
      "carrierName": "vtexcorreios"
    }
  ]
}
```

### API routes

#### Tracking Events: /tracking

> Check out the [API Reference](https://developers.vtex.com/vtex-developer-docs/reference/vtex-log-tracking-app#vtex-log-tracking-events-with-app) for full details.

This endpoint is called by the hub to  obtain the tracking events of a series of tracking numbers. The expected response is an object contaning the tracking information and the package's notification ID for every `packageID`.

**1. Input sent by the hub**:
```
[
  {
    "trackingNumber": string
  }
]
```
**2. Expected output:** a map whose keys are the package ids, and the value is an object containing the tracking information and the package's `notificationId`.
```
{
  <trackingNumber>: {
    "deliveredDate": Date,
    "events": [
      {
        "city": string,
        "date": Date,
        "description": string,
        "state": string
      }
    ],
    "hasReturnedToSender": bool,
    "isDelivered": bool
  }
}
```
**3. Example route definition in the `service.json` file of a Node or Dotnet app**:
```
"GetTrackingEvents": {
      "path": "/tracking",
      "public": false,
      "access": "authorized",
      "policies": [
        {
          "effect": "allow",
          "actions": [
            "post"
          ],
          "principals": [
            "vrn:apps:*:{{account}}:{{workspace}}:app/vtex.carrier-tracking@*"
          ]
        }
      ]
    }
```

```


[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 carrier-hubs-examples/carrier-tracking-example/vtex.carrier-tracking/configuration.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "trackingOptions": [
    {
      "carrierName": "Tracking Example"
    }
  ]
}

```


[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 carrier-hubs-examples/carrier-tracking-example/node/service.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "stack": "node",
  "memory": 256,
  "runtimeArgs": [],
  "routes": {
    "getTrackingEvents": {
      "path": "/tracking",
      "public": false,
      "access": "authorized",
      "policies": [
        {
          "effect": "allow",
          "actions": [
            "post"
          ],
          "principals": [
            "vrn:apps:*:{{account}}:{{workspace}}:app/vtex.carrier-tracking@*",
            "vrn:vtex.vtex-id:*:{{account}}:*:user/*@vtex.com.br"
          ]
        }
      ]
    }
  }
}

```


[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 carrier-hubs-examples/carrier-tracking-example/node/package.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.41.0",
    "@vtex/test-tools": "^1.0.0",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "0.2.0"
}

```


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

[User] Show me the implementation of carrier-hubs-examples/carrier-tracking-example/node/index.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  ClientsConfig,
  method,
  Service,
} from '@vtex/api'
import { trackingEvents } from './middlewares/trackingEvents'
import { Clients } from './clients'

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: {
      retries: 2,
      timeout: 2000,
    },
  },
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  routes: {
    // `status` is the route ID from service.json. It maps to an array of middlewares (or a single handler).
    getTrackingEvents: method({
      POST: [trackingEvents],
    }),
  },
})

```


[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 carrier-hubs-examples/carrier-tracking-example/node/clients/google.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

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

export default class GoogleClient extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super("http://www.google.com", context, options)
  }

  public async Get(): Promise<any> {
    return this.http.get("/")
  }
}

```


[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 carrier-hubs-examples/carrier-tracking-example/node/clients/index.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

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

export class Clients extends IOClients {
  public get google() {
    return this.getOrSet('google', GoogleClient)
  }
}

```


[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 carrier-hubs-examples/carrier-tracking-example/node/typings/typings.d.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

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

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

  export interface TrackingRequest {
    trackingNumber: string;
  }

  export interface Event {
    city: string;
    date: Date;
    description: string;
    state: string;
  }

  export interface TrackingResponse {
    deliveredDate: Date;
    events: Event[];
    hasReturnedToSender: boolean;
    isDelivered: boolean;
  }
}

```


[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 carrier-hubs-examples/carrier-tracking-example/node/middlewares/trackingEvents.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { json } from 'co-body'

export async function trackingEvents(ctx: Context, next: () => Promise<any>) {
  const { clients: { google } } = ctx

  const content = await json(ctx.req) as TrackingRequest[]
  console.log(content.length)

  //access a external service (remember to add the policy on manifest.json)
  const googleResponse = await google.Get()
  console.log(googleResponse != null)

  //access settings by account
  const appSettings = await ctx.clients.apps.getAppSettings(
    '' + process.env.VTEX_APP_ID
  )
  console.log(appSettings)

  ctx.status = 200
  ctx.body = {
    "OL589419015BR": {
      "deliveredDate": "2020-09-28T16:15:00.0000000-03:00",
      "events": [
        {
          "city": "BRASILIA",
          "date": "2020-09-28T16:15:00.0000000-03:00",
          "description": "Objeto entregue ao destinatário",
          "state": "DF"
        },
        {
          "city": "BRASILIA",
          "date": "2020-09-28T11:20:00.0000000-03:00",
          "description": "Objeto saiu para entrega ao destinatário",
          "state": "DF"
        },
        {
          "city": "BRASILIA",
          "date": "2020-09-03T15:41:00.0000000-03:00",
          "description": "Objeto ainda não chegou à unidade",
          "state": "DF"
        },
        {
          "city": "BRASILIA",
          "date": "2020-08-22T04:55:00.0000000-03:00",
          "description": "Objeto em trânsito - por favor aguarde",
          "state": "DF"
        },
        {
          "city": "CAJAMAR",
          "date": "2020-08-19T02:59:00.0000000-03:00",
          "description": "Objeto em trânsito - por favor aguarde",
          "state": "SP"
        },
        {
          "city": "SAO PAULO",
          "date": "2020-08-18T10:50:00.0000000-03:00",
          "description": "Objeto em trânsito - por favor aguarde",
          "state": "SP"
        },
        {
          "city": "SAO PAULO",
          "date": "2020-08-17T11:43:00.0000000-03:00",
          "description": "Objeto postado",
          "state": "SP"
        }
      ],
      "hasReturnedToSender": false,
      "isDelivered": true
    }
  }

  await next()
}

```


[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 carrier-hubs-examples/carrier-tracking-example/node/__tests__/simple.test.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```typescript
// You can import your files here for testing them
//
// More info: https://github.com/sapegin/jest-cheat-sheet

describe('simpleTest', () => {
  it('one test case', async () => {
    expect(0.2 + 0.1).not.toBe(0.3)
  })
})

```


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

[User] Show me the implementation of carrier-hubs-examples/carrier-notifier-example/vtex.carrier-notifier/configuration.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "notificationOptions": [
    {
      "carrierName": "Carrier Example"
    }
  ]
}

```


[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 carrier-hubs-examples/carrier-notifier-example/docs/README.md from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Notifier App

## Before you start

VTEX Log connects carriers and store owners to deliver better freight costs, and a simpler and smarter logistics operation. Our VTEX Log UI uses the following steps during a package's tracking process:
- **Notification:** our OMS notifies the carrier that a package is being dispatched.
- **Label:** tracking label is issued.
- **Tracking:** tracking of the package begins, and is repeated in cycles, until its final delivery.

For *carriers* to integrate with VTEX Log's Hub, our main system, it is necessary to develop apps in VTEX IO. The carrier's apps integrate with the hub, that in turn are connected to other VTEX systems, fulfilling the steps cited above.

For the integration, carriers should develop VTEX IO apps only for the `Notification` and `Tracking` steps. The `Label` app will be developed internally by the VTEX Log team, our partners. Apps should be developed by following the model files included in this repository:
- [Notification app model](https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-notifier-example)
- [Tracking app model](https://github.com/vtex-apps/carrier-hubs-examples/tree/main/carrier-tracking-example)

The app's developement is associated to **API routes** that should also be developed by the carrier for the app to function fully. Check out our [API Reference](https://developers.vtex.com/vtex-developer-docs/reference/vtex-log-notification-app#vtex-log-notify-carrier-with-app) for more details about all API calls.

## Notifier App Model

This is a reference app that implements the builder for carrier notifying apps. It also exports the API that integrates with the VTEX notification hub.

Requirements for an IO app that notifies carriers:
- Use the *Node* or *Dotnet* and *vtex.carrier-notifier* builders.
- Export the API that is called by the *vtex.carrier-notifier* app.

Follow the instructions below, to model your notifier app according to this example.

### vtex.carrier-notifier builder
Along with the Node or Dotnet builder, the use of the vtex.carrier-notifier builder is what makes the app as a notifier type, and thus be detected by our hub. The steps to use the builder:

1. Add builder `vtex.carrier-notifier: 0.x` to the list of builders, in the file `manifest.json`. Ex:
```
"builders": {
    "node": "6.x",
    "vtex.carrier-notifier": "0.x"
}
```
2. Create the `vtex.carrier-notifier` folder at the *root* of the project.
 Within it, create the `configuration.json` file.
 This file must contain the name of the notified carrier, which will be displayed to the customer or user.  File format:
```
{
  "notificationOptions": [
    {
      "carrierName": string
    }
  ]
}
```

## API routes

### Notify Carrier: /notify

> Check out the [API Reference](https://developers.vtex.com/vtex-developer-docs/reference/vtex-log-notification-app#vtex-log-notify-carrier-with-app) for full details.

This endpoint notifies the carrier about a dispatch order by calling the `vtex.carrier-notifier` app. When the call is made, the following data is sent:
- Dispatched packages information
- Fiscal information about the carrier notified
- Carrier's contact email.
The call's response includes all tracking data and each package's ID generated by the notification made to the carrier.

**1. Input sent by the hub**: ([typing details](https://github.com/vtex-apps/carrier-hubs-examples/blob/main/carrier-notifier-example/node/typings/typings.d.ts#L187))
```
{
	"dispatchOrder": DispatchOrder,
	"email": string
}
```
**2. Expected output**: a map whose keys are the `packageIds`, and the value is an object containing the tracking information and the package's `notificationId`.
```
{
	<packageId> : {
		"tracking": {
			"number": string,
			"url": string
		},
		"notification": {
			"id": string
		}
	}
}
```
**3. Example route definition in the `service.json` file of a Node or Dotnet app**:
```
"notify": {
      "path": "/notify",
      "public": false,
      "access": "authorized",
      "policies": [
        {
          "effect": "allow",
          "actions": [
            "post"
          ],
          "principals": [
            "vrn:apps:*:{{account}}:{{workspace}}:app/vtex.carrier-notifier@*"
          ]
        }
      ]
    }
```

```


[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 carrier-hubs-examples/carrier-notifier-example/node/service.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "stack": "dotnet",
  "memory": 256,
  "runtimeArgs": [
  ],
  "routes": {
    "notify": {
      "path": "/notify",
      "public": false,
      "access": "authorized",
      "policies": [
        {
          "effect": "allow",
          "actions": [
            "post"
          ],
          "principals": [
            "vrn:apps:*:{{account}}:{{workspace}}:app/vtex.carrier-notifier@*",
            "vrn:vtex.vtex-id:*:{{account}}:*:user/*@vtex.com.br"
          ]
        }
      ]
    }
  }
}

```


[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 carrier-hubs-examples/carrier-notifier-example/node/package.json from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.41.0",
    "@vtex/test-tools": "^1.0.0",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "0.2.0"
}

```


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

[User] Show me the implementation of carrier-hubs-examples/carrier-notifier-example/node/index.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  ClientsConfig,
  method,
  Service,
} from '@vtex/api'
import { Clients } from './clients'
import { notify } from './middlewares/notifier'

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: {
      retries: 2,
      timeout: 2000,
    },
  },
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  routes: {
    // `status` is the route ID from service.json. It maps to an array of middlewares (or a single handler).
    notify: method({
      POST: [notify],
    })
  },
})

```


[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 carrier-hubs-examples/carrier-notifier-example/node/clients/google.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

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

export default class GoogleClient extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super("http://www.google.com", context, options)
  }

  public async Get(): Promise<any> {
    return this.http.get("/")
  }
}

```


[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 carrier-hubs-examples/carrier-notifier-example/node/clients/index.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

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

export class Clients extends IOClients {
  public get google() {
    return this.getOrSet('google', GoogleClient)
  }
}

```


[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 carrier-hubs-examples/carrier-notifier-example/node/typings/typings.d.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

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

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

  export interface Item {
    id: string;
    name: string;
    quantity: number;
  }

  export interface Dimension {
    height: number;
    length: number;
    width: number;
    weight: number;
  }

  export interface Country {
    code: string;
    name: string;
  }

  export interface Subregion {
    code: string;
    name: string;
  }

  export interface Location {
    lat: number;
    lng: number;
  }

  export interface Address {
    postalCode: string;
    country: Country;
    subregion1: Subregion;
    subregion2: Subregion;
    subregion3: Subregion;
    street: string;
    number: string;
    complement?: any;
    location: Location;
  }

  export interface Recipient {
    cpf: string;
    id?: any;
    name: string;
    address: Address;
    email?: any;
    phone: string;
  }

  export interface InvoiceData {
    number: string;
    value: number;
    url: string;
    date: Date;
    invoiceAccessKeys: string[];
    hasIcms: boolean;
    hasInsurance: boolean;
  }

  export interface TrackingData {
    number: string;
    log: any[];
    finished: boolean;
    finishedDate?: any;
  }

  export interface ShippingData {
    shippingPolicyName: string;
    shippingPolicyId: string;
    carrierName: string;
    selectedSla: string;
    deliveryWindow: DeliveryWindow;
  }

  export interface DeliveryWindow {
    startDateUtc: Date;
    endDateUtc: Date;
    price: number;
  }

  export interface Package {
    id: string;
    orderId: string;
    items: Item[];
    dimension: Dimension;
    recipientPostalCode: string;
    recipient: Recipient;
    invoiceData: InvoiceData;
    trackingData: TrackingData;
    origin: string;
    status: string;
    orderCreationDate: Date;
    carrierNotifiedDate: Date;
    labelIssuedDate?: any;
    shippingEstimate: string;
    shippingEstimateDate: Date;
    shippingData: ShippingData;
  }

  export interface JuridicPerson {
    cnpj: string;
    name: string;
    fantasyName: string;
    stateRegistration: string;
    email: string;
    phone: string;
    address: Address;
  }

  export interface DispatchOrder
  {
    id: string,
    packages: Package[],
    sender: JuridicPerson,
    carrier: JuridicPerson
  }

  export interface NotificationRequest {
    dispatchOrder: DispatchOrder;
    email: string;
  }

  export interface NotificationFileRequest {
    dispatchOrder: DispatchOrder
  }

  export interface NotificationResponse {
    tracking: Tracking,
    notification: Notification;
  }

  export interface Tracking {
    number: string,
    url: string
  }

  export interface Notification {
    id: 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 carrier-hubs-examples/carrier-notifier-example/node/middlewares/notifier.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { json } from 'co-body'

export async function notify(ctx: Context, next: () => Promise<any>) {
  const { clients: { google } } = ctx

  const content = await json(ctx.req) as NotificationRequest
  console.log(content)

  const googleResponse = await google.Get()
  console.log(googleResponse != null)

  //access settings by account
  const appSettings = await ctx.clients.apps.getAppSettings(
    '' + process.env.VTEX_APP_ID
  )
  console.log(appSettings)

  ctx.status = 200
  ctx.body = {
    "AL123456789PB": {
      "tracking": {
        "number": "AL123456789PB",
        "url": "url"
      },
      "notification": {
        "id": "id"
      }
    }
  }

  await next()
}

```


[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 carrier-hubs-examples/carrier-notifier-example/node/__tests__/simple.test.ts from the carrier-hubs-examples VTEX app.

[Assistant]
Here's the implementation:

```typescript
// You can import your files here for testing them
//
// More info: https://github.com/sapegin/jest-cheat-sheet

describe('simpleTest', () => {
  it('one test case', async () => {
    expect(0.2 + 0.1).not.toBe(0.3)
  })
})

```


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

[User] Show me the implementation of b2b-suite/admin/routes.json from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.b2b-organizations": {
    "path": "/admin/app/b2b-organizations/*",
    "around": ["orgLayout"]
  },
  "admin.app.b2b-organizations.organization-requests": {
    "component": "OrganizationRequestsTable",
    "path": "/admin/app/b2b-organizations/requests"
  },
  "admin.app.b2b-organizations.organization-request-details": {
    "component": "OrganizationRequestDetails",
    "path": "/admin/app/b2b-organizations/requests/:id"
  },
  "admin.app.b2b-organizations.organizations": {
    "component": "OrganizationsTable",
    "path": "/admin/app/b2b-organizations/organizations"
  },
  "admin.app.b2b-organizations.organization-details": {
    "component": "OrganizationDetails",
    "path": "/admin/app/b2b-organizations/organizations/:id"
  },
  "admin.app.b2b-organizations.costCenter-details": {
    "component": "CostCenterDetails",
    "path": "/admin/app/b2b-organizations/cost-centers/:id"
  },
  "orgLayout": {
    "component": "B2BAdminLayout"
  },
  "admin.app.storefront-permissions": {
    "around": ["permissionsLayout"],
    "path": "/admin/app/storefront-permissions/*"
  },
  "admin.app.storefront-permissions.users-list": {
    "component": "userList",
    "path": "/admin/app/storefront-permissions/user/list"
  },
  "admin.app.storefront-permissions.users-new": {
    "component": "userNew",
    "path": "/admin/app/storefront-permissions/user/new"
  },
  "admin.app.storefront-permissions.users-edit": {
    "component": "userEdit",
    "path": "/admin/app/storefront-permissions/user/*id"
  },
  "admin.app.storefront-permissions.roles-list": {
    "component": "rolesList",
    "path": "/admin/app/storefront-permissions/roles/list"
  },
  "admin.app.storefront-permissions.roles-new": {
    "component": "roleNew",
    "path": "/admin/app/storefront-permissions/role/new"
  },
  "admin.app.storefront-permissions.roles-edit": {
    "component": "roleEdit",
    "path": "/admin/app/storefront-permissions/role/*id"
  },
  "permissionsLayout": {
    "component": "PermissionsLayout"
  },
  "admin.app.b2b-checkout-settings": {
    "component": "B2BCheckoutAdmin",
    "path": "/admin/app/b2b-checkout-settings"
  },
  "admin.app.profile-system": {
    "component": "Customers",
    "path": "/admin/app/customers"
  },
  "admin.app.b2b-quotes": {
    "path": "/admin/app/b2b-quotes/*",
    "around": ["quotesLayout"]
  },
  "admin.app.b2b-quotes.settings": {
    "component": "B2BQuotesAdmin",
    "path": "/admin/app/b2b-quotes/settings"
  },
  "quotesLayout": {
    "component": "B2BQuotesAdminLayout"
  }
}

```


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

[Assistant]
Here's the implementation:

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

# B2B Suite

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

**B2B Suite** is a collection of VTEX IO apps that allow stores to manage organizations, storefront roles and permissions, and checkout settings for B2B commerce relationships.

These features are particularly useful for B2B stores: in commerce relations between businesses, it is essential to simplify the purchase flow, reduce costs, and provide a personalized buying experience.

B2B customers frequently have distinct roles within their organization, such as professional buyers, managers, or supervisors. Each role is associated with a different set of storefront permissions, depending on the actions the user needs to perform.

Grouping different users from the same company under an organization and defining custom payment methods, product selections, and prices for each customer are also everyday needs in B2B.

In addition, it is often necessary to provide customized options for B2B customers during checkout, such as a specific selection of payment methods per organization or cost center, pre-filled addresses, purchase order numbers, and order quotes.

By installing the **B2B Suite**, you have access to seven apps with the following features for B2B:

| **App name** | **Description** |
| - | - |
| [Storefront Permissions](https://developers.vtex.com/docs/apps/vtex.storefront-permissions) | Stores a predefined set of roles and permissions related to what B2B users can access and do in the storefront, which other integrated apps can check. This is useful for stores that want to set specific permissions for users with different organizational roles. |
| [Storefront Permissions UI](https://developers.vtex.com/docs/apps/vtex.storefront-permissions-ui) | Provides an interface for the [Storefront Permissions](https://developers.vtex.com/docs/apps/vtex.storefront-permissions) app, communicates with its stored roles and permissions, and provides the following features for this scenario. <ul><li><b>Role management:</b> Allows VTEX Admin users to manage B2B roles and associated app permissions through an interface.</li>  <li><b>Theme block configuration:</b> Enables conditional theme blocks so only users with the required permissions can access specific content in your storefront.</li></ul> |
| [B2B Organizations](https://developers.vtex.com/docs/apps/vtex.b2b-organizations) | Enables you to group B2B users into organizations to which you can assign specific payment methods, price tables, and product collections. This allows all organization users to share the same commercial conditions. Each organization is further segmented into one or more cost centers, with its own shipping addresses, which will be available for cost center users at checkout. |
| [B2B Quotes](https://developers.vtex.com/docs/apps/vtex.b2b-quotes) | Enables B2B users to create quotes and saved carts, which are then shared with the other members of their organization. Users with the appropriate storefront permissions can modify quotes to apply discounts or change the amount of items, so the resulting quote can then be used to place an order. |
| [B2B Checkout Settings](https://developers.vtex.com/docs/apps/vtex.b2b-checkout-settings) | Extends the checkout experience for users who are members of B2B organizations. With this app, you can allow specific payment methods for the user's organization, provide prefilled addresses based on the cost center of each user, add a purchase order number to the order, and allow customers to create an order quote before placing the order. |
| [B2B Orders History](https://developers.vtex.com/docs/apps/vtex.b2b-orders-history) | Provides a new **Orders** page under **My Account** so that B2B users can view all previous orders placed by users in their organization or cost center, depending on their role. |
| [B2B Admin Customers](https://developers.vtex.com/docs/apps/vtex.b2b-admin-customers) | Provides additional customer information management capabilities on the VTEX Admin, allowing store administrators to create, edit, and search for customers.  |

Make sure to read the documentation for each app to learn more about their features and settings.

> ⚠ After installing **B2B Suite**, make sure to hide the default **Order History** link within **My Account** by configuring `vtex.my-account`. Otherwise, **B2B Orders History** will not work as expected. You can do this at `https://{{accountName}}.myvtex.com/admin/apps/vtex.my-account@1.x/setup/`, by unselecting the **Visible** option in the **Orders** section.

For additional features, you can also install the [Quick Order](https://developers.vtex.com/docs/apps/vtex.quickorder) app, which creates a custom page in your store aimed at bulk purchases, offering tools such as uploading a spreadsheet to make bulk orders more agile.

## Frequently Asked Questions

### How do I fix the schema issue?

For more details on how to resolve schema-related issues, please refer to the article [I can't fix the schema error in B2B apps](https://help.vtex.com/en/tutorial/i-cant-fix-the-schema-error-in-b2b-apps--WkjJZSnGXCiqmLhg4b0OR).

<!-- 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 b2b-suite/react/OrganizationDetails.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { OrganizationDetails } from 'vtex.b2b-organizations'

export default OrganizationDetails

```


[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 b2b-suite/react/B2BQuotesAdminLayout.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { B2BQuotesAdminLayout } from 'vtex.b2b-quotes'

export default B2BQuotesAdminLayout

```


[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 b2b-suite/react/PermissionsLayout.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { index } from 'vtex.storefront-permissions-ui'

export default 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 b2b-suite/react/userEdit.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { userEdit } from 'vtex.storefront-permissions-ui'

export default userEdit

```


[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 b2b-suite/react/rolesList.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { rolesList } from 'vtex.storefront-permissions-ui'

export default rolesList

```


[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 b2b-suite/react/roleEdit.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { roleEdit } from 'vtex.storefront-permissions-ui'

export default roleEdit

```


[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 b2b-suite/react/RequestOrganizationForm.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { RequestOrganizationForm } from 'vtex.b2b-organizations'

export default RequestOrganizationForm

```


[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 b2b-suite/react/OrganizationRequestsTable.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { OrganizationRequestsTable } from 'vtex.b2b-organizations'

export default OrganizationRequestsTable

```


[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 b2b-suite/react/CostCenterDetails.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { CostCenterDetails } from 'vtex.b2b-organizations'

export default CostCenterDetails

```


[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 b2b-suite/react/QuotesTable.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { QuotesTable } from 'vtex.b2b-quotes'

export default QuotesTable

```


[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 b2b-suite/react/B2BQuotesAdmin.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { AppSettings as B2BQuotesAdmin } from 'vtex.b2b-quotes'

export default B2BQuotesAdmin

```


[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 b2b-suite/react/roleNew.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { roleNew } from 'vtex.storefront-permissions-ui'

export default roleNew

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.b2b-suite",
  "version": "2.0.0",
  "license": "UNLICENSED",
  "devDependencies": {
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/tsconfig": "^0.6.0",
    "typescript": "3.9.7",
    "vtex.b2b-admin-customers": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-admin-customers@0.0.2/public/@types/vtex.b2b-admin-customers",
    "vtex.b2b-checkout-settings": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-checkout-settings@1.2.0/public/@types/vtex.b2b-checkout-settings",
    "vtex.b2b-orders-history": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-orders-history@0.0.3/public/@types/vtex.b2b-orders-history",
    "vtex.b2b-organizations": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations@1.3.0/public/@types/vtex.b2b-organizations",
    "vtex.b2b-quotes": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-quotes@1.0.0/public/@types/vtex.b2b-quotes",
    "vtex.b2b-suite": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-suite@0.0.4/public/@types/vtex.b2b-suite",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
    "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.123.1/public/@types/vtex.store",
    "vtex.storefront-permissions-ui": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions-ui@1.0.0/public/@types/vtex.storefront-permissions-ui"
  }
}

```


[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 b2b-suite/react/OrganizationsTable.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { OrganizationsTable } from 'vtex.b2b-organizations'

export default OrganizationsTable

```


[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 b2b-suite/react/B2BAdminLayout.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { B2BAdminLayout } from 'vtex.b2b-organizations'

export default B2BAdminLayout

```


[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 b2b-suite/react/OrganizationRequestDetails.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { OrganizationRequestDetails } from 'vtex.b2b-organizations'

export default OrganizationRequestDetails

```


[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 b2b-suite/react/QuoteDetails.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { QuoteDetails } from 'vtex.b2b-quotes'

export default QuoteDetails

```


[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 b2b-suite/react/userNew.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { userNew } from 'vtex.storefront-permissions-ui'

export default userNew

```


[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 b2b-suite/react/B2BCheckoutAdmin.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { B2BCheckoutAdmin } from 'vtex.b2b-checkout-settings'

export default B2BCheckoutAdmin

```


[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 b2b-suite/react/userList.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { userList } from 'vtex.storefront-permissions-ui'

export default userList

```


[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 b2b-suite/react/Customers.tsx from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { index } from 'vtex.b2b-admin-customers'

export default 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 b2b-suite/store/blocks.json from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.organization-request": {
    "blocks": ["request-organization"]
  },
  "store.b2b-quotes": {
    "blocks": ["quotes-table"]
  },
  "store.create-b2b-quote": {
    "blocks": ["quote-details"]
  },
  "store.b2b-quote-details": {
    "blocks": ["quote-details"]
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store.organization-request": {
    "required": ["request-organization"]
  },
  "request-organization": {
    "component": "RequestOrganizationForm"
  },
  "store.b2b-quotes": {
    "required": ["quotes-table"]
  },
  "quotes-table": {
    "component": "QuotesTable"
  },
  "store.create-b2b-quote": {
    "required": ["quote-details"]
  },
  "store.b2b-quote-details": {
    "required": ["quote-details"]
  },
  "quote-details": {
    "component": "QuoteDetails"
  }
}

```


[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 b2b-suite/store/routes.json from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.organization-request": {
    "title": "Organization Signup",
    "path": "/organization-request"
  },
  "store.b2b-quotes": {
    "title": "My Quotes and Carts",
    "path": "/b2b-quotes"
  },
  "store.create-b2b-quote": {
    "title": "Create Quote",
    "path": "/b2b-quotes/create"
  },
  "store.b2b-quote-details": {
    "title": "Quote Details",
    "path": "/b2b-quotes/:id"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "B2B Suite",
  "headline": "Conjunto de aplicaciones para añadir diversas funcionalidades B2B esenciales a tu tienda VTEX",
  "overview": "B2B Suite es una colección de aplicaciones que añaden varias funcionalidades B2B a tu tienda VTEX IO. Al instalar esta aplicación, se instalan automáticamente las siguientes aplicaciones dependientes: B2B Organizations, Storefront Permissions, B2B Checkout Settings, B2B Orders History y B2B Quotes",
  "features": [
    "Cada usuario del storefront puede ahora formar parte de una organización, lo que permite que varios usuarios compartan el mismo historial de pedidos, condiciones de pago, cotizaciones, carritos guardados, listas de precios negociadas y catálogo segmentado.",
    "Cada organización está dividida en uno o más centros de costo, cada uno con direcciones de envío que los usuarios del centro de costo comparten en el checkout.",
    "A los usuarios se les puede conceder uno de varios roles B2B con niveles de permisos variables y configurables.",
    "Los usuarios con el rol de Administrador de la organización pueden gestionar los centros de costo de su organización y los usuarios a través de la página Mi Cuenta en el storefront.",
    "Se proporciona un formulario de solicitud y una cola de aprobación para los usuarios del storefront que deseen solicitar la creación de nuevas organizaciones.",
    "Los usuarios de la organización pueden guardar carritos para compras futuras. Además, también pueden negociar precios calculados con los representantes de ventas."
  ],
  "websiteURL": "https://vtex.com/ar-es/",
  "support": {
    "url": "https://help-tickets.vtex.com/en/support?app=vtex.b2b-suite"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "B2B Suite",
  "headline": "Conjunto de aplicativos para adicionar várias funcionalidades B2B essenciais à sua loja VTEX",
  "overview": "O B2B Suite é uma coleção de aplicativos que adicionam várias funcionalidades B2B à sua loja VTEX IO. Ao instalá-lo, os seguintes aplicativos são instalados automaticamente: B2B Organizations, Storefront Permissions, B2B Checkout Settings, B2B Orders History e B2B Quotes",
  "features": [
    "Cada usuário do storefront pode fazer parte de uma organização, permitindo que vários usuários compartilhem o mesmo histórico de pedidos, condições de pagamento, cotações, carrinhos salvos, listas de preços negociados e catálogo segmentado.",
    "Cada organização é dividida em um ou mais centros de custo - cada um com os endereços de envio que os usuários do centro de custo compartilham no checkout.",
    "É possível atribuir aos usuários um dos vários perfis de acesso B2B com níveis de permissão diferentes (e configuráveis).",
    "Os usuários com a função de Admin da Organização podem gerenciar os Centros de Custo e os usuários de sua Organização na página Minha Conta, no storefront.",
    "Um formulário de solicitação e uma fila de aprovação são fornecidos para os usuários do storefront que desejam solicitar a criação de novas Organizações.",
    "Os usuários da organização podem salvar carrinhos para compras futuras, bem como negociar os preços calculados com os vendedores."
  ],
  "websiteURL": "https://vtex.com/br-pt",
  "support": {
    "url": "https://help-tickets.vtex.com/en/support?app=vtex.b2b-suite"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "B2B Suite",
  "headline": "Suite of apps to add various essential B2B functionalities to your VTEX store",
  "overview": "The B2B Suite is a collection of apps that add various B2B functionalities to your VTEX IO store. By installing this app, the following dependency apps are automatically installed: B2B Organizations, Storefront Permissions, B2B Checkout Settings, B2B Orders History and B2B Quotes",
  "features": [
    "Each storefront user can now be part of an organization, allowing multiple users to share the same order history, payment terms, quotes, saved carts, negotiated price lists, and segmented catalog",
    "Each organization is divided into one or more cost centers - each with shipping addresses that the cost center's users share in checkout.",
    "Users can be granted one of several B2B roles with varying (and configurable) levels of permissions",
    "Users with the Organization Admin role can manage their Organization's Cost Centers and users through the My Account page in the storefront",
    "A request form and approval queue is provided for storefront users who wish to request the creation of new Organizations",
    "Organization users may save carts for future purchases as well as request and negotiate quotes with sales representatives"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://help-tickets.vtex.com/en/support?app=vtex.b2b-suite"
  }
}

```


[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 adobe-launch-pixel/docs/README.md from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

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

# Adobe Launch

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

---

The VTEX Adobe Launch app is a first party integration to the [Adobe Experience Platform Launch](https://launch.adobe.com/).

![Getting Started](AL1.png)

## Installation and configuration

### Step 1 - Installing Adobe Launch app
Install `vtexasia.adobe-launch-pixel` in your account.

    vtex install vtexasia.adobe-launch-pixel@0.x

>ℹ **Info**
>
> Access the [Adobe Experience Platform Launch](https://launch.adobe.com/)</a> and login to you account in order to find out what is your account **Adobe Launch ID**. The number your should use is the one provided by the `Environments` section. Select the environment you prefer, click the box icon, and a pop-up with web installation instructions will appear. Use the script there to set up the app.

>⚠ **Warning**
>
> Make sure you set up a library under your selected environment, since later all the configurations will be added to that library.

![Getting Started](env.png)

Follow the instructions provided by the Adobe Launch App in the `Admin` > `Account Seetings` > `Apps` > `My Apps` > `adobe launch pixel`

![Getting Started](config.png)

### Step 2 - Setup Adobe Launch
To set up Adobe Launch in your store, you must create and set up all necessary tags, rules and data elements.

#### Install Extension, creating Rules and Data elements

1. Log in to your [Adobe Launch account](https://launch.adobe.com/) and click on the tags you want to work with.

2. On the tags page, click on **Extensions**, make sure you have installed the Adobe Analytics, Adobe Client Data Layer, Core and Experience Cloud ID Service.

![Getting Started](AL1.png)

Configure the Adobe Client Data Layer in the following way: the Data Layer Name is `adobeDataLayer`, and Inject Adobe Client Data Layer (ACDL) library if not present.

![Getting Started](ACDL.png)

3. In the **Rules** section, create a new rule.

![Getting Started](rule1.png)

Follow the event configuraion below.

![Getting Started](rule2.png)

Follow the action configuration below.

![Getting Started](rule3.png)

![Getting Started](rule4.png)

>ℹ **Info**
>
> The Variables you set here will be later used as the data elements.

![Getting Started](rule5.png)

Click `Save to Library` after finished the above steps.

4. Go to the **Data Element** section and create a new data element using the variables created in the previous step.

![Getting Started](da.png)

Click `Save to Library` after finished the above steps.

5. Click `Build` to save all changes into the Library.

#### Checking received data

Now, let's check the received data from your website.

1. Go to the **Chrome Web Store**.
2. Install the [**Adobe Experience Platform Debugger**](https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob?hl=en-GB) extension.

![Getting Started](debugger1.png)

3. Open the Adobe Experience Platform Debugger, and you should able to see the data sent from your website under `Analytics` section.

![Getting Started](debugger2.png)

>ℹ **Info**
>
> If you are not able to see any data, go to your Chrome's Developer Tools, under `Application` section, go to `Service Workers` and select `Bypass for network`. Refresh the page and check the debugger again. If it is still not working, check your setup for Adobe Launch.
>
>
> ![Getting Started](sw.png)

## Native VTEX events

The app listens to VTEX storefront native events (excluding interim steps in the checkout page) and transforms them into payloads and pushes into adobeDataLayer, so that Adobe Launch can consume it natively.

List of events:

| Events | Triggers |
| --- | --- |
| addToCart | Triggered when a product is added to the cart |
| cartChanged | Triggered when there is a change in cart |
| cartId | Triggered on every loaded page view |
| homePageInfo | Triggered on every loaded home page view |
| orderPlaced | Triggered when an order is placed |
| pageView | Triggered on every loaded page view |
| productClick | Triggered on every product click |
| productImpression | Triggered when product data is visible on the page currently being accessed by users |
| productView | Triggered on every product view |
| promoClick | Triggered on every promotion click |
| promoView | Triggered on every promotion view |
| removeFromCart | Triggered when a product is removed from the cart |
| searchPageInfo |  Triggered on every loaded search page view |
| userData | Triggered on every loaded page view |

## App functionality
Our app is built with Adobe Client Data Layer (ACDL), It introduces a standard method to collect and store data about a website user's experience and then make it easy to access this data.

The app push the native VTEX events into the ACDL, so that they can be shown from Adobe Experience Platform Debugger.

```tsx
        window.adobeDataLayer.push({
          homePageInfo: {
            eventType: "homeView"
          }
        })
```

You can check how ACDL works from [here](https://experienceleague.adobe.com/docs/experience-manager-learn/sites/integrations/adobe-client-data-layer/data-layer-overview.html?lang=en#adobe-client-data-layer).

```


[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 adobe-launch-pixel/react/index.tsx from the adobe-launch-pixel 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': {
      window.adobeDataLayer.push({
        event: 'pageView', pageView: {
          eventName: 'vtex:pageView',
          pageTitle: e.data.pageTitle,
          pageUrl: e.data.pageUrl,
          referrer: e.data.referrer,
          accountName: e.data.accountName,
          routeId: e.data.routeId,

          page: e.data.pageUrl.replace(e.origin, ''),

          ...(e.data.pageTitle && {
            title: e.data.pageTitle,
          }),
        },
      })
      return
    }

    case "vtex:pageInfo": {
      if (e.data.eventType === 'homeView') {
        window.adobeDataLayer.push({
          homePageInfo: {
            eventType: "homeView"
          }
        })
      }
      if (e.data.eventType === "internalSiteSearchView") {
        window.adobeDataLayer.push({
          searchPageInfo: {
            eventType: "internalSiteSearchView",
            department: e.data.department,
            category: e.data.search?.category,
            search: e.data.search,
          }
        })
      }
      return
    }

    case 'vtex:productView': {
      window.adobeDataLayer.push({
        event: 'productView', productView: {
          eventName: 'vtex:productView', product: {
            brand: e.data.product.brand,
            brandId: e.data.product.brandId,
            categories: e.data.product?.categories,
            categoryId: e.data.product.categoryId,
            categoryTree: {
              id: e.data.product.categoryTree[0].id,
              name: e.data.product.categoryTree[0].name
            },
            detailUrl: e.data.product.detailUrl,
            items: e.data.product.items,
            linkText: e.data.product.linkText,
            productId: e.data.product.productId,
            productName: e.data.product.productName,
            productReference: e.data.product.productReference,
            selectedSku: e.data.product.selectedSku,
          }
        }
      })
      return
    }
    case 'vtex:productClick': {
      window.adobeDataLayer.push({
        event: "productClick", productClick: {
          eventName: "vtex:productClick",
          list: e.data.list,
          position: e.data.position,
          product: e.data.product
        },
      })
      return
    }

    case 'vtex:userData': {
      window.adobeDataLayer.push({
        userData: {
          eventType: 'userData',
          isAuthenticated: e.data.isAuthenticated,
          userId: e.data?.id,
          userEmail: e.data?.email,
          firstName: e.data?.firstName,
          lastName: e.data?.lastName,
          phone: e.data?.phone
        }
      })
      return
    }

    case 'vtex:cartId': {
      window.adobeDataLayer.push({
        cartId: {
          eventType: 'cartId',
          cartId: e.data.cartId
        }
      })
      return
    }
    case 'vtex:productImpression': {
      window.adobeDataLayer.push({
        event: 'productImpression', productImpression: {
          eventName: 'vtex:productImpression',
          list: e.data.list,
          impressions: e.data.impressions,
        },
      })
      return
    }

    case 'vtex:addToCart': {
      window.adobeDataLayer.push({
        event: "addToCart",
        addToCart: {
          eventName: "vtex:addToCart",
          currency: e.data.currency,
          id: e.data.id,
          items: e.data.items
        }, cartChanged: {
          eventName: "vtex:cartChanged",
          items: e.data.items
        },
      })
      return
    }
    case 'vtex:removeFromCart': {
      window.adobeDataLayer.push({
        event: 'removeFromCart',
         removeFromCart: {
          eventName: 'vtex:removeFromCart',
          currency: e.data.currency,
          items: e.data.items
        }, cartChanged: {
          eventName: 'vtex:cartChanged',
          items: e.data.items,
        },
      })
      return
    }
    case 'vtex:orderPlaced': {
      window.adobeDataLayer.push({
        event: 'orderPlaced', orderPlaced: {
          eventName: 'vtex:orderPlaced'
        }
      })
      return
    }
    case 'vtex:promoView': {
      window.adobeDataLayer.push({
        event: 'promoView', promoView: {
          eventName: "vtex:promoView",
          promotions: e.data.promotions
        }
      })
      return
    }

    case 'vtex:promotionClick': {
      window.adobeDataLayer.push({
        event: 'promotionClick', promoClick: {
          eventName: "vtex:promoClick",
          promotions: e.data.promotions
        }
      })
      return
    }

    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 adobe-launch-pixel/react/package.json from the adobe-launch-pixel 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 adobe-launch-pixel/store/interfaces.json from the adobe-launch-pixel 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 adobe-launch-pixel/public/metadata/messages/es-AR.json from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Adobe Launch",
  "headline": "Integre su tienda con el sistema de gestión de etiquetas de última generación de Adobe.",
  "overview": "Adobe Launch es un servicio para monitorear las acciones de los visitantes de su comercio electrónico y se puede usar para crear audiencias de marketing dirigidas, analizar el rendimiento de sus anuncios y comprender cómo se usa su tienda.\\n\\n Con esta aplicación, puede realizar un seguimiento de los eventos de navegación y conversión de acuerdo con las prácticas recomendadas y los estándares de análisis de Adobe mediante la implementación de la etiqueta Adobe Launch en el código de la página. En la página de configuración de la aplicación, deberá ingresar su ID de cuenta de Adobe Launch.",
  "features": [
    "Configurar Adobe Experience Platform Launch usando el panel de administración de VTEX",
    "Enviar eventos de Comercio nativo VTEX"
  ],
  "additionalInformation": "La administración de etiquetas, eventos y activadores se realiza directamente a través del lanzamiento de Adobe Experience Platform (https://launch.adobe.com/) después de instalar y configurar la aplicación. Los eventos disponibles de forma predeterminada con la aplicación La implementación se puede consultar en nuestra documentación.",
  "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 adobe-launch-pixel/public/metadata/messages/pt-BR.json from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Adobe Launch",
  "headline": "Integre sua loja com o sistema de gerenciamento de tags de última geração da Adobe.",
  "overview": "O Adobe Launch é um serviço para monitorar as ações de seus visitantes de comércio eletrônico e pode ser usado para criar públicos de marketing direcionados, analisar o desempenho de seus anúncios e entender como sua loja está sendo usada.\\n\\n Com este aplicativo, você pode rastrear eventos de navegação e conversão de acordo com as práticas recomendadas e padrões de análise da Adobe implementando a tag Adobe Launch no código da página. Na página de configuração do aplicativo, você precisará inserir o ID da conta do Adobe Launch.",
  "features": [
    "Configurar o Adobe Experience Platform Launch usando o painel de administração VTEX",
    "Enviar eventos de comércio nativo da VTEX"
  ],
  "additionalInformation": "O gerenciamento de tags, eventos e acionadores é feito diretamente pelo Adobe Experience Platform Launch (https://launch.adobe.com/) após a instalação e configuração do aplicativo. Os eventos disponíveis por padrão com o implementação pode ser consultada em nossa documentação.",
  "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 adobe-launch-pixel/public/metadata/messages/en-US.json from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Adobe Launch",
  "headline": "Integrate your store with Adobe's next-generation tag management system.",
  "overview": "Adobe Launch is a service for monitoring the actions of your eCommerce visitors and can be used to create targeted marketing audiences, analyze the performance of your ads, and gain understanding of how your store is being used.\\n\\n Using this app, you can track navigation and conversion events in accordance with Adobe's best practices and analytics standards by implementing the Adobe Launch tag in the page's code. On the app's setup page, you will need to enter your Adobe Launch account ID.",
  "features": [
    "Configure Adobe Experience Platform Launch using the VTEX admin panel",
    "Send VTEX native Commerce events"
  ],
  "additionalInformation": "The management of tags, events, and triggers is done directly through the Adobe Experience Platform Launch (https://launch.adobe.com/) after installing and configuring the app. The events available by default with the app's implementation can be consulted in our documentation.",
  "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 adobe-launch-pixel/react/typings/events.d.ts from the adobe-launch-pixel 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
  id: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
  accountName:string
  routeId:string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  id: string
  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
  position?:number
}

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 {
  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 adobe-launch-pixel/react/typings/global.d.ts from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window  {

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  adobeDataLayer : any[],
  adobeVTEX: any
}

```