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

[Assistant]
Here's the implementation:

```json
{
  "io.page-title": "VTEX IO",
  "io.navbar.learn": "Learn",
  "io.navbar.feature-list": "Our Components",
  "io.navbar.keepup": "Keep Up",
  "io.navbar.build": "Build with IO",
  "io.navbar.faq": "FAQ",
  "io.hero.globalbrands": "Build for global brands.",
  "io.hero.resources": "With right resources at hand, you will help expand the possibilities of businesses around the world.",
  "io.hero.cta": "Build stores with IO",
  "io.hero.partners": "Learn about our Partner Program",
  "io.cards.first.title": "Get Started with IO",
  "io.cards.first.text": "Learn the basics and start building apps, extensions and integrations.",
  "io.cards.second.title": "IO Master Class",
  "io.cards.second.text": "Watch videos and take a deep dive into all things IO: tools, tips, and possibilities.",
  "io.cards.third.title": "Explore our Components",
  "io.cards.third.text": "Explore the components we've developed and explore our available and upcoming features.",
  "io.cards.fourth.title": "Frequently Asked Questions",
  "io.cards.fourth.text": "Find the answers you are looking for.",
  "io.product.deliver": "Deliver more, deliver better",
  "io.product.scale": "Tailor-made meets scale.",
  "io.product.cloud": "With a cloud environment and an integrated commerce-drive toolset, it's a lot easier for retailers and developers to scale solutions for specific needs.",
  "io.howitworks.appstore": "App Store",
  "io.howitworks.appstore.scale": "Solutions that scale",
  "io.howitworks.appstore.solutions": "Make your business-driven solutions available to 2.500+ stores in 25 countries through our exclusive distribution channel.",
  "io.howitworks.abtesting": "A/B Testing",
  "io.howitworks.abtesting.decisions": "Informed business decisions",
  "io.howitworks.abtesting.tests": "Perform tests on every aspect of your business to learn what works best. Use the isolated Test Workspaces to iterate faster, increase sales, and raise conversion rates.",
  "io.howitworks.storeframework": "Store Framework",
  "io.howitworks.storeframework.build": "Build faster, grow better",
  "io.howitworks.storeframework.develop": "Reduce loading time, improve usability, and make the best of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
  "io.evolution.focus": "Focus on what matters",
  "io.evolution.evolution": "Seamless evolution.",
  "io.evolution.perspective": "VTEX IO delivers a new paradigm for cloud software development that’s heavily integrated into the environment where your code will actually run. This shift in perspective unlocks new capabilities that were impossible on the traditional, local development model.",
  "io.evolution.vtexio": "VTEX IO",
  "io.evolution.vtexio.description": "It's our serverless development platform, designed to help you create scalable, production-ready web applications – and never have to worry about any infrastructure complexity again.",
  "io.features.title": "Powerful tools to power-up your solutions.",
  "io.features.title.small": "Make the most out of your work",
  "io.features.cloud": "Works on the cloud",
  "io.features.cloud.description": "It's the end of the mismatch between local and production environments. No code runs on your computer: The source gets synced to the cloud, where it is built and deployed in real-time.",
  "io.features.setupless": "Setupless",
  "io.features.setupless.description": "No need to oldfashioned developer environment setup anymore. All you need to start building apps is a lightweight console application and a developer account.",
  "io.features.workspaces": "Workspaces",
  "io.features.workspaces.description": "Instantaneous app deploy and rollback with a single command. Manage different versions of your apps and test new features in isolation, with the peace of mind you need to experiment and evolve to quickly.",
  "io.features.serverless": "Serverless",
  "io.features.serverless.description": "Our infrastructure is designed to scale your code according to traffic. CDN distribution and the SmartCacheⓇ system guarantees high performance and low latency.",
  "io.startbuilding.title": "Start building the future of commerce.",
  "io.startbuilding.text": "Build apps with cutting-edge technology, meet the needs of world-class brands and expand the possibilities of retail.",
  "io.startbuilding.cta": "BECOME A PARTNER",
  "io.footer.vtex": "Accelerating Commerce Transformation.",
  "io.footer.pricing": "Pricing",
  "io.footer.company": "Company",
  "io.footer.company.carrers": "Carrers",
  "io.footer.company.partnersAWS": "Partners AWS",
  "io.footer.company.dmca": "DMCA Policy",
  "io.footer.company.blog": "Blog",
  "io.footer.resources": "Resources",
  "io.footer.resources.devdocs": "Development Docs",
  "io.footer.resources.support": "Support",
  "io.footer.resources.announcements": "Announcements",
  "io.footer.resources.releases": "Releases",
  "io.footer.resources.status": "Status",
  "io.footer.resources.health": "Health Check",
  "io.footer.resources.vtexio": "VTEX IO",
  "io.footer.partners": "Partners",
  "io.footer.partners.vtex": "VTEX Partners",
  "io.footer.partners.find": "Find a partner",
  "io.footer.partners.program": "Partner Program",
  "io.footer.partners.appstore": "VTEX App Store",
  "io.faq.page-title": "FAQ - VTEX IO",
  "io.faq.basic-concepts.vtex-vtexio.summary": "What's the difference between VTEX and VTEX IO?",
  "io.faq.basic-concepts.vtex-vtexio.ans": "",
  "io.faq.migrate.why-v1-no-more.summary": "Why was v1 discontinued?",
  "io.faq.migrate.why-v1-no-more.ans": "",
  "io.faq.migrate.why-migrate.summary": "Why should I upgrade to v2?",
  "io.faq.migrate.why-migrate.ans": "You should upgrade so that you have access to the full power and capabilities of VTEX IO and Store Framework, the latest and greatest VTEX has to offer. Also, stay up to date with every new feature we develop in a seamless way, just as described at https://vtex.io .",
  "io.faq.migrate.advantages-v2.summary": "What are the advantages of using Store v2?",
  "io.faq.migrate.advantages-v2.ans": "",
  "io.faq.migrate.unavailable-features.summary": "Are there functionalities that were available in v1 but not in v2?",
  "io.faq.migrate.unavailable-features.ans": "For a full feature comparison between our new CMS and our old one, you can check out https://vtex.io/store-features .",
  "io.faq.migrate.how-to.summary": "How can I get started with migrating to v2?",
  "io.faq.migrate.how-to.ans": "Currently there is not an automated process to migrate a store from v1 to v2. Basically the front-end needs to be rebuilt using our Store Framework.",
  "io.faq.create-store.components.summary": "What components already exist?",
  "io.faq.create-store.components.ans": "Quite a few! And new ones are coming. You can check out a list at https://vtex.io/store-features#store-component-apps .",
  "io.faq.create-store.components-functionality.summary": "Will I be able to implement functionalities I need using the components already provided by VTEX or should I build my own?",
  "io.faq.create-store.components-functionality.ans": "We strongly recommend everyone to use the components already provided by VTEX, as they already offer a certain degree of customization and are fully supported by the Store Framework team. If you want some new feature that we do not support yet, please check our contributing guidelines so that you can maybe add this feature to our components and make it available to everyone (open-source rules!). ",
  "io.faq.create-store.unsupported.summary": "What is not supported by Store v2?",
  "io.faq.create-store.unsupported.ans": "We don't fully support (for now) exclusive features for: marketplaces, B2B, delivery and grocery. For the time being we will not be making any modification to our components so that they support those specific use cases.",
  "io.faq.create-store.supported.summary": "What is supported by Store v2?",
  "io.faq.create-store.supported.ans": "We support all common features for basic stores that sell items which don't require a great degree of personalization, such as: fashion, home appliances, cosmedics and sporting goods.",
  "io.faq.create-store.to-PR-or-not-to-PR.summary": "How do I know if I should create a new app or send a PR to make an existing app better?",
  "io.faq.create-store.to-PR-or-not-to-PR.ans": "We always encourage everyone to contribute to the development of all components we build, that's why they are all open-source! Check out our contributing guidelines for a better guide on how to send that PR or discuss a new feature you want to implement, they live at: https://github.com/vtex-apps/awesome-io .",
  "io.faq.create-store.component-docs.summary": "Where can I find documentation on which props (or blocks) can be passed to each block?",
  "io.faq.create-store.component-docs.ans": "Each block is exported by a component built by the Store Framework team, and their documentation lives in each one of their GitHub repositories. You can check out our list of available components and the links to each repository at https://vtex.io/store-features#store-component-apps .",
  "io.faq.extend-store-framework.summary": "How can I extend the provided functionalities from Store Framework?",
  "io.faq.extend-store-framework.ans": "Due to a recent change in the way VTEX is handling extensibility with VTEX IO, in order to garantee quality support to every client by VTEX support team, agencies that do not have enterprise accounts will have limited access to extensibility features and can only publish and install apps into their VTEX accounts, but not create apps extending features provided by Store Framework.",
  "io.faq.create-front-end-app.already-exists.summary": "How do I know if an app I want to create already exists?",
  "io.faq.create-front-end-app.already-exists.ans": "",
  "io.faq.create-front-end-app.getting-started.summary": "How can I get started developing front-end apps?",
  "io.faq.create-front-end-app.getting-started.ans": "",
  "io.faq.create-front-end-app.how-to-whitelist.summary": "What is the criteria I need to meet in order to get into the whitelist?",
  "io.faq.create-front-end-app.how-to-whitelist.ans": "",
  "io.faq.create-back-end-app.permission.summary": "Can I develop Node + GraphQL apps?",
  "io.faq.create-back-end-app.permission.ans": "The use of Node and GraphQL will only be allowed to enterprise accounts that want to create new features that support their store development."
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "io.page-title": "VTEX IO",
  "io.navbar.learn": "Learn",
  "io.navbar.feature-list": "Store Features",
  "io.navbar.keepup": "Keep Up",
  "io.navbar.build": "Build with IO",
  "io.navbar.faq": "FAQ",
  "io.hero.globalbrands": "Build for global brands.",
  "io.hero.resources": "With right resources at hand, you will help expand the possibilities of businesses around the world.",
  "io.hero.cta": "Build stores with IO",
  "io.hero.partners": "Learn about our Partner Program",
  "io.cards.first.title": "Get Started with IO",
  "io.cards.first.text": "Learn the basics and start building apps, extensions and integrations.",
  "io.cards.second.title": "IO Master Class",
  "io.cards.second.text": "Watch videos and take a deep dive into all things IO: tools, tips, and possibilities.",
  "io.cards.third.title": "Explore our Components",
  "io.cards.third.text": "Explore the components we've developed and explore our available and upcoming features.",
  "io.cards.fourth.title": "Frequently Asked Questions",
  "io.cards.fourth.text": "Find the answers you are looking for.",
  "io.product.deliver": "Deliver more, deliver better",
  "io.product.scale": "Tailor-made meets scale.",
  "io.product.cloud": "With a cloud environment and an integrated commerce-drive toolset, it's a lot easier for retailers and developers to scale solutions for specific needs.",
  "io.howitworks.appstore": "App Store",
  "io.howitworks.appstore.scale": "Solutions that scale",
  "io.howitworks.appstore.solutions": "Make your business-driven solutions available to 2.500+ stores in 25 countries through our exclusive distribution channel.",
  "io.howitworks.abtesting": "A/B Testing",
  "io.howitworks.abtesting.decisions": "Informed business decisions",
  "io.howitworks.abtesting.tests": "Perform tests on every aspect of your business to learn what works best. Use the isolated Test Workspaces to iterate faster, increase sales, and raise conversion rates.",
  "io.howitworks.storeframework": "Store Framework",
  "io.howitworks.storeframework.build": "Build faster, grow better",
  "io.howitworks.storeframework.develop": "Reduce loading time, improve usability, and make the best of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
  "io.evolution.focus": "Focus on what matters",
  "io.evolution.evolution": "Seamless evolution.",
  "io.evolution.perspective": "VTEX IO delivers a new paradigm for cloud software development that’s heavily integrated into the environment where your code will actually run. This shift in perspective unlocks new capabilities that were impossible on the traditional, local development model.",
  "io.evolution.vtexio": "VTEX IO",
  "io.evolution.vtexio.description": "It's our serverless development platform, designed to help you create scalable, production-ready web applications – and never have to worry about any infrastructure complexity again.",
  "io.features.title": "Powerful tools to power-up your solutions.",
  "io.features.title.small": "Make the most out of your work",
  "io.features.cloud": "Works on the cloud",
  "io.features.cloud.description": "It's the end of the mismatch between local and production environments. No code runs on your computer: The source gets synced to the cloud, where it is built and deployed in real-time.",
  "io.features.setupless": "Setupless",
  "io.features.setupless.description": "No need to oldfashioned developer environment setup anymore. All you need to start building apps is a lightweight console application and a developer account.",
  "io.features.workspaces": "Workspaces",
  "io.features.workspaces.description": "Instantaneous app deploy and rollback with a single command. Manage different versions of your apps and test new features in isolation, with the peace of mind you need to experiment and evolve to quickly.",
  "io.features.serverless": "Serverless",
  "io.features.serverless.description": "Our infrastructure is designed to scale your code according to traffic. CDN distribution and the SmartCacheⓇ system guarantees high performance and low latency.",
  "io.startbuilding.title": "Start building the future of commerce.",
  "io.startbuilding.text": "Build apps with cutting-edge technology, meet the needs of world-class brands and expand the possibilities of retail.",
  "io.startbuilding.cta": "BECOME A PARTNER",
  "io.footer.vtex": "Accelerating Commerce Transformation.",
  "io.footer.pricing": "Pricing",
  "io.footer.company": "Company",
  "io.footer.company.carrers": "Carrers",
  "io.footer.company.partnersAWS": "Partners AWS",
  "io.footer.company.dmca": "DMCA Policy",
  "io.footer.company.blog": "Blog",
  "io.footer.resources": "Resources",
  "io.footer.resources.devdocs": "Development Docs",
  "io.footer.resources.support": "Support",
  "io.footer.resources.announcements": "Announcements",
  "io.footer.resources.releases": "Releases",
  "io.footer.resources.status": "Status",
  "io.footer.resources.health": "Health Check",
  "io.footer.resources.vtexio": "VTEX IO",
  "io.footer.partners": "Partners",
  "io.footer.partners.vtex": "VTEX Partners",
  "io.footer.partners.find": "Find a partner",
  "io.footer.partners.program": "Partner Program",
  "io.footer.partners.appstore": "VTEX App Store",
  "io.faq.page-title": "FAQ - VTEX IO",
  "io.faq.basic-concepts.vtex-vtexio.summary": "What's the difference between VTEX and VTEX IO?",
  "io.faq.basic-concepts.vtex-vtexio.ans": "",
  "io.faq.migrate.why-v1-no-more.summary": "Why was v1 discontinued?",
  "io.faq.migrate.why-v1-no-more.ans": "",
  "io.faq.migrate.why-migrate.summary": "Why should I upgrade to v2?",
  "io.faq.migrate.why-migrate.ans": "You should upgrade so that you have access to the full power and capabilities of VTEX IO and Store Framework, the latest and greatest VTEX has to offer. Also, stay up to date with every new feature we develop in a seamless way, just as described at https://vtex.io .",
  "io.faq.migrate.advantages-v2.summary": "What are the advantages of using Store v2?",
  "io.faq.migrate.advantages-v2.ans": "",
  "io.faq.migrate.unavailable-features.summary": "Are there functionalities that were available in v1 but not in v2?",
  "io.faq.migrate.unavailable-features.ans": "For a full feature comparison between our new CMS and our old one, you can check out https://vtex.io/store-features .",
  "io.faq.migrate.how-to.summary": "How can I get started with migrating to v2?",
  "io.faq.migrate.how-to.ans": "Currently there is not an automated process to migrate a store from v1 to v2. Basically the front-end needs to be rebuilt using our Store Framework.",
  "io.faq.create-store.components.summary": "What components already exist?",
  "io.faq.create-store.components.ans": "Quite a few! And new ones are coming. You can check out a list at https://vtex.io/store-features#store-component-apps .",
  "io.faq.create-store.components-functionality.summary": "Will I be able to implement functionalities I need using the components already provided by VTEX or should I build my own?",
  "io.faq.create-store.components-functionality.ans": "We strongly recommend everyone to use the components already provided by VTEX, as they already offer a certain degree of customization and are fully supported by the Store Framework team. If you want some new feature that we do not support yet, please check our contributing guidelines so that you can maybe add this feature to our components and make it available to everyone (open-source rules!). ",
  "io.faq.create-store.unsupported.summary": "What is not supported by Store v2?",
  "io.faq.create-store.unsupported.ans": "We don't fully support (for now) exclusive features for: marketplaces, B2B, delivery and grocery. For the time being we will not be making any modification to our components so that they support those specific use cases.",
  "io.faq.create-store.supported.summary": "What is supported by Store v2?",
  "io.faq.create-store.supported.ans": "We support all common features for basic stores that sell items which don't require a great degree of personalization, such as: fashion, home appliances, cosmedics and sporting goods.",
  "io.faq.create-store.to-PR-or-not-to-PR.summary": "How do I know if I should create a new app or send a PR to make an existing app better?",
  "io.faq.create-store.to-PR-or-not-to-PR.ans": "We always encourage everyone to contribute to the development of all components we build, that's why they are all open-source! Check out our contributing guidelines for a better guide on how to send that PR or discuss a new feature you want to implement, they live at: https://github.com/vtex-apps/awesome-io .",
  "io.faq.create-store.component-docs.summary": "Where can I find documentation on which props (or blocks) can be passed to each block?",
  "io.faq.create-store.component-docs.ans": "Each block is exported by a component built by the Store Framework team, and their documentation lives in each one of their GitHub repositories. You can check out our list of available components and the links to each repository at https://vtex.io/store-features#store-component-apps .",
  "io.faq.extend-store-framework.summary": "How can I extend the provided functionalities from Store Framework?",
  "io.faq.extend-store-framework.ans": "Due to a recent change in the way VTEX is handling extensibility with VTEX IO, in order to garantee quality support to every client by VTEX support team, agencies that do not have enterprise accounts will have limited access to extensibility features and can only publish and install apps into their VTEX accounts, but not create apps extending features provided by Store Framework.",
  "io.faq.create-front-end-app.already-exists.summary": "How do I know if an app I want to create already exists?",
  "io.faq.create-front-end-app.already-exists.ans": "",
  "io.faq.create-front-end-app.getting-started.summary": "How can I get started developing front-end apps?",
  "io.faq.create-front-end-app.getting-started.ans": "",
  "io.faq.create-front-end-app.how-to-whitelist.summary": "What is the criteria I need to meet in order to get into the whitelist?",
  "io.faq.create-front-end-app.how-to-whitelist.ans": "",
  "io.faq.create-back-end-app.permission.summary": "Can I develop Node + GraphQL apps?",
  "io.faq.create-back-end-app.permission.ans": "The use of Node and GraphQL will only be allowed to enterprise accounts that want to create new features that support their store development."
}

```


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

[Assistant]
Here's the implementation:

```markdown
# VTEX IO

It's our serverless development platform, designed to help you create scalable, production-ready web applications – and never have to worry about any infrastructure complexity again.

This repository is for the source code of the VTEX IO landing on https://www.vtex.io.

```


[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 io-landing/react/Features.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FunctionComponent } from 'react'
import { Helmet } from 'vtex.render-runtime'

import Navbar from './components/Navbar'
import Footer from './components/Footer'
import favicon from './images/favicon.png'

import { storeComponents, storePixel } from './FeaturesData'

const FeaturesDisplay: FunctionComponent = () => {
  return (
    <Fragment>
      <Helmet>
        <title>Store</title>
        <meta name="theme-color" content="#F71963" />
        <link rel="icon" href={favicon} />
      </Helmet>
      <Navbar />
      <main className="w-100 pv10">
        <div className="flex-ns items-baseline w-90 w-80-ns center mb8">
          <h1 className="c-base t-heading-1 pr7">Store Features</h1>
          <nav>
            <ul className="flex-ns list t-heading-5 pl0">
              <li className="pr6 pb4 pb0-ns">
                <a
                  href="/store-features#store-component-apps"
                  className="no-underline c-emphasis dim"
                >
                  Store Component Apps
                </a>
              </li>
              <li>
                <a
                  href="/store-features#store-pixel-apps"
                  className="no-underline c-emphasis dim"
                >
                  Store Pixel Apps
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <section
          id="store-component-apps"
          className="flex flex-column w-90 w-80-ns center pt8"
        >
          <h2 className="c-base t-heading-3 fw3 mb0 mt4">
            Store Component Apps
          </h2>
          <ul className="t-body list pl0 mt0">
            {storeComponents.map(component => (
              <li className="mv7 bb b--muted-2" key={component.name}>
                <p>
                  {component.name}{' '}
                  {component.construction && '[Under Construction] 🚧'}
                </p>
                <p>
                  <a className="link" href={component.docs}>
                    {component.docs}
                  </a>
                </p>
              </li>
            ))}
          </ul>
        </section>
        <section
          id="store-pixel-apps"
          className="flex flex-column w-90 w-80-ns center pt8"
        >
          <h2 className="c-base t-heading-3 fw3 mb0 mt4">Store Pixel Apps</h2>
          <ul className="t-body list pl0 mt0">
            {storePixel.map(app => (
              <li className="mv7 bb b--muted-2" key={app.name}>
                <p>{app.name}</p>
                <p>
                  <a className="link" href={app.docs}>
                    {app.docs}
                  </a>
                </p>
              </li>
            ))}
          </ul>
        </section>
      </main>
      <Footer />
    </Fragment>
  )
}

export default FeaturesDisplay

```


[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 io-landing/react/FeaturesData.ts from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const storeComponents = [
  {
    name: 'Store Components',
    docs: 'https://github.com/vtex-apps/store-components',
  },
  {
    name: 'Store Header',
    docs: 'https://github.com/vtex-apps/store-header',
  },
  {
    name: 'Store Footer',
    docs: 'https://github.com/vtex-apps/store-footer',
  },
  {
    name: 'Shelf',
    docs: 'https://github.com/vtex-apps/shelf',
  },
  {
    name: 'Carousel',
    docs: 'https://github.com/vtex-apps/carousel',
  },
  {
    name: 'Menu',
    docs: 'https://github.com/vtex-apps/menu',
  },
  {
    name: 'Minicart',
    docs: 'https://github.com/vtex-apps/minicart',
  },
  {
    name: 'Telemarketing',
    docs: 'https://github.com/vtex-apps/telemarketing',
  },
  {
    name: 'Login',
    docs: 'https://github.com/vtex-apps/login',
  },
  {
    name: 'Category Menu',
    docs: 'https://github.com/vtex-apps/category-menu',
  },
  {
    name: 'Breadcrumb',
    docs: 'https://github.com/vtex-apps/breadcrumb',
  },
  {
    name: 'Search Result',
    docs: 'https://github.com/vtex-apps/search-result',
  },
  {
    name: 'Product Details',
    docs: 'https://github.com/vtex-apps/product-details',
  },
  {
    name: 'Address Locator (for deliveries)',
    docs: 'https://github.com/vtex-apps/address-locator',
  },
  {
    name: 'Flex Layout',
    docs: 'https://github.com/vtex-apps/flex-layout',
  },
  {
    name: 'My Account',
    docs: 'https://github.com/vtex-apps/my-account',
  },
  {
    name: 'My Account Commons',
    docs: 'https://github.com/vtex-apps/my-account-commons',
  },
  {
    name: 'Product Customizer',
    docs: 'https://github.com/vtex-apps/product-customizer',
  },
  {
    name: 'Product Kit',
    docs: 'https://github.com/vtex-apps/product-kit',
  },
  {
    name: 'Product Summary',
    docs: 'https://github.com/vtex-apps/product-summary',
  },
  {
    name: 'Store Icons',
    docs: 'https://github.com/vtex-apps/store-icons',
  },
  {
    name: 'Rich Text',
    docs: 'https://github.com/vtex-apps/rich-text',
  },
  {
    name: 'Wishlist',
    docs: 'https://github.com/vtex-apps/wishlist',
    construction: true,
  },
  {
    name: 'Order Placed',
    docs: 'https://github.com/vtex-apps/order-placed',
    construction: true,
  },
]

export const storePixel = [
  {
    name: 'Facebook Pixel',
    docs: 'https://github.com/vtex-apps/facebook-pixel',
  },
  {
    name: 'Google Adwords',
    docs: 'https://github.com/vtex-apps/google-adwords',
  },
  {
    name: 'Google Tag Manager',
    docs: 'https://github.com/vtex-apps/google-tag-manager',
  },
]

```


[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 io-landing/react/IO.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FunctionComponent } from 'react'
import { injectIntl, InjectedIntlProps } from 'react-intl'
import { Helmet } from 'vtex.render-runtime'

import Navbar from './components/Navbar'
import Hero from './components/Hero'
import CardGrid from './components/CardGrid'
import ProductDisplay from './components/Product'
import HowItWorks from './components/HowItWorks'
import EvolutionSection from './components/Evolution'
import KeyFeatures from './components/KeyFeatures'
import StartBuilding from './components/StartBuilding'
import Footer from './components/Footer'
import favicon from './images/favicon.png'

const Landing: FunctionComponent<InjectedIntlProps> = ({ intl }) => {
  return (
    <Fragment>
      <Helmet>
        <title>{intl.formatMessage({ id: 'io.page-title' })}</title>
        <meta
          name="description"
          content="A serverless development platform from VTEX."
        />
        <meta name="theme-color" content="#F71963" />
        <link rel="icon" href={favicon} />
      </Helmet>
      <Navbar />
      <main className="w-100 bg-base--inverted">
        <Hero />
        <CardGrid />
        <ProductDisplay />
        <HowItWorks />
        <EvolutionSection />
        <KeyFeatures />
        <StartBuilding />
      </main>
      <Footer />
    </Fragment>
  )
}

export default injectIntl(Landing)

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.io-landing",
  "version": "1.3.1",
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts,tsx .",
    "lint:locales": "intl-equalizer"
  },
  "devDependencies": {
    "@types/graphql": "^0.13.3",
    "@types/node": "^9.4.7",
    "@types/react": "^16.3.16",
    "@types/react-dom": "^16.0.5",
    "@types/react-helmet": "^5.0.5",
    "@types/react-intl": "^2.3.5",
    "@vtex/intl-equalizer": "^2.3.0",
    "eslint": "^5.15.1",
    "eslint-config-vtex": "^10.1.0",
    "eslint-config-vtex-react": "^4.1.0",
    "graphql": "^0.13.0",
    "prettier": "^1.16.1",
    "react": "^16.2.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
    "react-intl": "^2.4.0",
    "typescript": "3.9.7"
  }
}

```


[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 io-landing/react/VTEXOffices.json from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "Offices": [
    {
      "short": "Barcelona",
      "address1": "Carrer de Provença, 339",
      "address2": "08037",
      "city": "Barcelona, Spain"
    },
    {
      "short": "Bogotá",
      "address1": "Carrera 19 # 100-45, Oficina 14w-106",
      "address2": "110121",
      "city": "Bogotá, Colombia"
    },
    {
      "short": "Bucharest",
      "address1": "6, Iuliu Maniu Boulevard",
      "address2": "Campus 6 Building 6.1, floor 1",
      "address3": "011886",
      "city": "Bucharest, Romania"
    },
    {
      "short": "Buenos Aires",
      "address1": "Av. Chiclana, 3578",
      "address2": "4 andar, Distrito Tecnológico",
      "address3": "CABA C1260ACP",
      "city": "Buenos Aires, Argentina"
    },
    {
      "short": "Ciudad de México",
      "address1": "Blvd. Miguel De Cervantes Saavedra 169 Granada",
      "address2": "11520, Miguel Hidalgo",
      "city": "Ciudad de México, Mexico"
    },
    {
      "short": "Curitiba",
      "address1": "R. Prefeito Ângelo Lopes, 1528",
      "address2": "Hugo Lange",
      "address3": "PR 82590-300",
      "city": "Curitiba, Brazil"
    },
    {
      "short": "Fort Lauderdale",
      "address1": "501 East Las Olas Blv",
      "address2": "Suite 300",
      "address3": "FL 33301",
      "city": "Fort Lauderdale, USA"
    },
    {
      "short": "João Pessoa",
      "address1": "R. Antônio Rabelo Júnior, 161",
      "address2": "25 andar, Jardim Rosas",
      "address3": "PB 58032-090",
      "city": "João Pessoa, Brazil"
    },
    {
      "short": "London",
      "address1": "Aviation House, 125 Kingsway",
      "address2": "Holborn",
      "address3": "WC2B 6NH",
      "city": "London, United Kingdom"
    },
    {
      "short": "Medellín",
      "address1": "Edificio Ofi7 La Francia",
      "address2": "Carrera 42 #5 Sur-145, Antioquia",
      "city": "Medellín, Colombia"
    },
    {
      "short": "Milan",
      "address1": "Via Copernico, 28A",
      "city": "Milan, Italy"
    },
    {
      "short": "New York",
      "address1": "12 E 49th St",
      "address2": "Midtown Manhattan",
      "address3": "NY 10017",
      "city": "New York, USA"
    },
    {
      "short": "Rio de Janeiro",
      "address1": "Praia de Botafogo, 300",
      "address2": "2 andar, Botafogo",
      "address3": "RJ 22250-040",
      "city": "Rio de Janeiro, Brazil"
    },
    {
      "short": "Santiago de Chile",
      "address1": "Av. Apoquindo 5950",
      "address2": "Piso 3, Oficina 124, Las Condes",
      "address3": "Región Metropolitana 7560949",
      "city": "Santiago de Chile, Chile"
    },
    {
      "short": "São Paulo",
      "address1": "Av. Brigadeiro Faria Lima, 4440",
      "address2": "10 andar, Itaim Bibi",
      "address3": "SP 04538-132",
      "city": "São Paulo, Brazil"
    },
    {
      "short": "Teresópolis",
      "address1": "R. Antônio Rabelo Júnior, 161",
      "address2": "Sala 604, Várzea",
      "address3": "RJ 25963-081",
      "city": "Teresópolis, Brazil"
    }
  ]
}

```


[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 io-landing/react/Onboarding.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, FunctionComponent, Fragment } from 'react'
import { useRuntime } from 'vtex.render-runtime'
import { urls } from './constants/URLs'

const Onboarding: FunctionComponent = () => {
  const {
    query: { account, code, state },
  } = useRuntime()

  useEffect(() => {
    if (account && code && state) {
      window.location.assign(`${urls.STOREFRONT_ONBOARDING_PAGE(account)}?account=${account}&code=${code}&state=${state}`)
    }
  }, [code, account, state])

  return <Fragment></Fragment>
}

export default Onboarding

```


[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 io-landing/react/FAQ.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

const FAQ: FunctionComponent = () => {
  useEffect(() => {
    window.location.assign('https://vtex.io/docs')
  })

  return <Fragment></Fragment>
}

export default FAQ

```


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

[Assistant]
Here's the implementation:

```json
{
  "io": {
    "blocks": [
      "io.landing"
    ]
  },
  "io.landing": {
    "component": "IO"
  },
  "io.landing-old": {
    "component": "IO"
  },
  "io.faq": {
    "component": "FAQ"
  },
  "io.store-features": {
    "component": "Features"
  },
  "io.storefront-onboarding": {
    "component": "Onboarding"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "io.landing": {
    "path": "/io",
    "cname": "www.vtex.io"
  },
  "io.landing-old": {
    "path": "/io-old",
    "cname": "vtex.io"
  },
  "io.faq": {
    "path": "/faq"
  },
  "io.store-features": {
    "path": "/store-features"
  },
  "io.storefront-onboarding": {
    "path": "/storefront-onboarding"
  }
}

```


[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 io-landing/react/constants/URLs.ts from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const urls = {
  STOREFRONT_ONBOARDING_PAGE: (account: string) =>
    `https://faststore--${account}.myvtex.com/admin/app/storefront/onboarding/create-github-repo`,
}

```


[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 io-landing/react/typings/jpg.d.ts from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.jpg' {
  const path: string
  export default path
}

```


[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 io-landing/react/typings/png.d.ts from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.png' {
  const path: string
  export default path
}

```


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

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ReactElement } from 'react'

  export interface RenderContextProps {
    runtime: {
      account: string
    }
  }

  export const Link: any
  export const NoSSR: any
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: ReactElement
  export const Helmet: any
  export const useRuntime: () => {
    culture: {
      locale: string
    }
    emitter: {
      emit: (eventName: string, eventId: string) => void
    }
    query: {
      app?: string
      filePath?: string
      account?: string
      code?: string
      state?: 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 io-landing/react/typings/svg.d.ts from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.svg' {
  const path: string
  export default path
}

```


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

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Alert
  export const Button
  export const ButtonWithIcon
  export const PageBlock
  export const IconCaretDown
  export const IconCaretUp
  export const IconCaretRight
  export const IconBars
  export const IconCheck
  export const IconDeny
  export const Spinner
  export const EmptyState
}

```


[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 io-landing/react/components/Hero.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'
import { Button } from 'vtex.styleguide'

import Brands from '../images/Brands.svg'
import { Link } from 'vtex.render-runtime'

const Hero: FunctionComponent = () => {
  return (
    <section
      className="mb5 pt6 pb8 bg-base--inverted c-on-base--inverted flex flex-column items-center justify-center"
      style={{ backgroundImage: `url(${Brands})` }}
    >
      <p
        className="tc w-40-ns mb0 mt10 t-heading-1"
        style={{ fontSize: '5rem' }}
      >
        <FormattedMessage id="io.hero.globalbrands" />
      </p>
      <p className="w-40 t-body tc mv6">
        <FormattedMessage id="io.hero.resources" />
      </p>
      <div className="mt5">
        <Link to="/docs/getting-started/build-stores-with-store-framework/1">
          <Button variation="primary">
            <p className="ttu">
              <FormattedMessage id="io.hero.cta" />
            </p>
          </Button>
        </Link>
      </div>
      <a
        className="tc c-on-base--inverted mt5 t-small"
        href="https://www.vtex.com/partner/program/"
      >
        <FormattedMessage id="io.hero.partners" />
      </a>
    </section>
  )
}

export default Hero

```


[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 io-landing/react/components/Navbar.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useState } from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { IconCaretDown, IconCaretUp, IconBars } from 'vtex.styleguide'
import { useRuntime, Link } from 'vtex.render-runtime'

import logoPath from '../images/VTEX_Cold_Gray_RGB.svg'

const supportedLangs = [
  {
    id: 'en-US',
  },
  {
    id: 'pt-BR',
  },
]

const Navbar: FunctionComponent<
  InjectedIntlProps & { enableLocaleSelector?: boolean }
> = ({ intl, enableLocaleSelector }) => {
  const { culture, emitter } = useRuntime()
  const [openLocaleSelector, setOpenLocaleSelector] = useState(false)
  const [openNav, setOpenNav] = useState(false)
  const [selectedLocale, setSelectedLocale] = useState(
    findLocale(culture.locale)
  )

  const handleLocaleClick = ({ target: { id } }: { target: any }) => {
    emitter.emit('localesChanged', id)
    setOpenLocaleSelector(false)
    setSelectedLocale(findLocale(id))
  }

  return (
    <nav className="flex">
      <div
        className="fixed bg-base--inverted c-on-base--inverted w-100 flex flex-column flex-row-l justify-between z-5"
        style={{
          boxShadow: `0px 3px 20px rgba(0, 0, 0, 0.3)`,
        }}
      >
        <div className="flex">
          <button
            className="dn-l bg-base--inverted c-on-base--inverted w-33 w-50-l bn"
            onClick={() => setOpenNav(!openNav)}
          >
            <IconBars />
          </button>
          <div className="w-40 w-50-l">
            <Link
              page="io.landing"
              className="c-on-base--inverted self-center flex items-center link"
            >
              <img src={logoPath} className="h3" alt="VTEX" />
              <p className="dn-s flex-l">|</p>
              <p className="dn-s flex-l ml3">Developer</p>
            </Link>
          </div>
        </div>
        <div className="flex-l" hidden={!openNav}>
          <ul className="flex flex-column flex-row-l justify-center list mt0 items-center mb0 relative">
            <li className="mh5 mv5 mv0-l">
              <Link className="link c-on-base--inverted" to="/docs">
                {intl.formatMessage({ id: 'io.navbar.learn' })}
              </Link>
            </li>
            <li className="mh5 mv5 mv0-l">
              <Link
                className="link c-on-base--inverted"
                to="/docs/components/all"
              >
                {intl.formatMessage({ id: 'io.navbar.feature-list' })}
              </Link>
            </li>
            {enableLocaleSelector && (
              <li className="flex items-center">
                <div className="h-100 relative w3">
                  <button
                    onClick={() => setOpenLocaleSelector(!openLocaleSelector)}
                    className="c-on-base--inverted bg-base--inverted bn flex items-center pointer"
                  >
                    <p className="ttu mr4">{splitLocale(selectedLocale.id)}</p>
                    {openLocaleSelector ? <IconCaretUp /> : <IconCaretDown />}
                  </button>
                  <div
                    hidden={!openLocaleSelector}
                    className="z-4 bg-base--inverted pa3 absolute"
                  >
                    {supportedLangs.map(({ id }) => (
                      <button
                        className="tc ttu c-on-base--inverted pointer bn bg-base--inverted"
                        onClick={handleLocaleClick}
                        id={id}
                        key={id}
                      >
                        {splitLocale(id)}
                      </button>
                    ))}
                  </div>
                </div>
              </li>
            )}
          </ul>
        </div>
      </div>
    </nav>
  )
}

function splitLocale(locale: string) {
  return locale.split('-')[0]
}

function findLocale(locale: any) {
  const localeObj = supportedLangs.find(
    ({ id }) => splitLocale(id) === splitLocale(locale)
  )
  return localeObj || supportedLangs[0]
}

export default injectIntl(Navbar)

```


[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 io-landing/react/components/Product.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'

import productImagePath from '../images/Product.svg'

const ProductDisplay: FunctionComponent = () => {
  return (
    <section className="w-100 flex flex-column flex-row-l justify-between pv10 bg-base--inverted">
      <div className="c-on-base--inverted flex flex-column justify-center w-33-l pl9-l mh0-l">
        <p className="t-small w-90 center left-l">
          <FormattedMessage id="io.product.deliver" />
        </p>
        <p className="f1 mt1 mb1 w-90 center left-l">
          <FormattedMessage id="io.product.scale" />
        </p>
        <p className="t-body w-90 center left-l">
          <FormattedMessage id="io.product.cloud" />
        </p>
      </div>
      <img src={productImagePath} alt="Store Framework sample" />
    </section>
  )
}

export default ProductDisplay

```


[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 io-landing/react/components/Card.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, ReactNode } from 'react'
import { FormattedMessage } from 'react-intl'

interface Props {
  icon: ReactNode
  title: string
  text: string
  index: number
  link: string
  soon?: boolean
}

const Card: FunctionComponent<Props> = ({
  icon,
  title,
  text,
  index,
  link,
  soon,
}) => {
  return (
    <article
      className={`bg-base mv3 ${
        index % 2 === 0 ? 'mr3-l' : 'ml3-l'
      } ph6 pv5 w-40-l w-90 br3`}
    >
      <a href={link} className="flex items-center link">
        <div className="mr7">{icon}</div>
        <div>
          <p className="t-heading-4 c-muted-1">
            <FormattedMessage id={title} />
            {soon && <span className="c-muted-2"> [SOON]</span>}
          </p>
          <p className="t-body c-muted-1">
            <FormattedMessage id={text} />
          </p>
        </div>
      </a>
    </article>
  )
}

export default Card

```


[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 io-landing/react/components/Evolution.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import CodeSampleImage from '../images/Asset_Code.png'
import BackgroundEffects from '../images/BackgroundEffects.svg'

const EvolutionSection = () => (
  <section className="flex flex-column flex-row-l items-center vh-100-l">
    <div
      className="c-on-base--inverted w-50-l w-100 h-75 bg-base-inverted flex justify-center items-center order-1 order-0-l"
      style={{ backgroundImage: `url(${BackgroundEffects})` }}
    >
      <img src={CodeSampleImage} className="z-4" alt="code-sample" />
    </div>
    <div className="w-90-s center w-50-l w-100-s pl10-l flex flex-column justify-center">
      <div className="order-0 order-1-l w-90 center mh7">
        <p className="c-on-base--inverted t-small w-90">
          <FormattedMessage id="io.evolution.focus" />
        </p>
        <p className="c-on-base--inverted f1 mt1 mb1 w-75">
          <FormattedMessage id="io.evolution.evolution" />
        </p>
        <p className="c-on-base--inverted t-body w-90 lh-copy mb7">
          <FormattedMessage id="io.evolution.perspective" />
        </p>
      </div>
      <div className="order-2-s w-90 center mh7">
        <p className="c-on-base--inverted t-body w-90 mt7 mb2">
          <FormattedMessage id="io.evolution.vtexio" />
        </p>
        <p className="c-on-base--inverted t-body w-90 lh-copy">
          <FormattedMessage id="io.evolution.vtexio.description" />
        </p>
      </div>
    </div>
  </section>
)

export default EvolutionSection

```


[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 io-landing/react/components/HowItWorks.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { injectIntl, InjectedIntlProps } from 'react-intl'

import Stack from './icons/Stack'
import Branches from './icons/Branches'
import AppStore from './icons/AppStore'

const HowItWorks: FunctionComponent<InjectedIntlProps> = ({ intl }) => {
  return (
    <section className="flex flex-column flex-row-l items-center justify-between w-90 vh-75-l center c-on-base--inverted mv7">
      <article className="mh7-l mv5 mv0-l">
        <Stack />
        <p className="t-body mb3">
          {intl.formatMessage({ id: 'io.howitworks.appstore.scale' })}
        </p>
        <p className="f2 mt0">
          {intl.formatMessage({ id: 'io.howitworks.appstore' })}
        </p>
        <p className="t-body lh-copy">
          {intl.formatMessage({ id: 'io.howitworks.appstore.solutions' })}
        </p>
      </article>
      <article className="mh7-l mv5 mv0-l">
        <Branches />
        <p className="t-body mb3">
          {intl.formatMessage({ id: 'io.howitworks.abtesting.decisions' })}
        </p>
        <p className="f2 mt0">
          {intl.formatMessage({ id: 'io.howitworks.abtesting' })}
        </p>
        <p className="t-body lh-copy">
          {intl.formatMessage({ id: 'io.howitworks.abtesting.tests' })}
        </p>
      </article>
      <article className="mh7-l mv5 mv0-l">
        <AppStore />
        <p className="t-body mb3">
          {intl.formatMessage({ id: 'io.howitworks.storeframework.build' })}
        </p>
        <p className="f2 mt0">
          {intl.formatMessage({ id: 'io.howitworks.storeframework' })}
        </p>
        <p className="t-body lh-copy">
          {intl.formatMessage({ id: 'io.howitworks.storeframework.develop' })}
        </p>
      </article>
    </section>
  )
}

export default injectIntl(HowItWorks)

```


[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 io-landing/react/components/CardGrid.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import Card from './Card'
import FlowerGround from './icons/FlowerGround'
import Video from './icons/Video'
import DesignDev from './icons/DesignDev'
import RunningShoes from './icons/RunnigShoes'

const CardGrid: FunctionComponent = () => {
  const cardsConfig = [
    {
      icon: <FlowerGround />,
      titleId: 'io.cards.first.title',
      textId: 'io.cards.first.text',
      link: '/docs/getting-started/what-is-vtex-io/1',
    },
    {
      icon: <Video />,
      titleId: 'io.cards.second.title',
      textId: 'io.cards.second.text',
      link: '#',
      soon: true,
    },
    {
      icon: <DesignDev />,
      titleId: 'io.cards.third.title',
      textId: 'io.cards.third.text',
      link: '/docs/components/all',
    },
    {
      icon: <RunningShoes />,
      titleId: 'io.cards.fourth.title',
      textId: 'io.cards.fourth.text',
      link: '/faq',
    },
  ]

  return (
    <section className="w-90 center flex justify-center flex-wrap mv7">
      {cardsConfig.map((card, index) => (
        <Card
          icon={card.icon}
          title={card.titleId}
          text={card.textId}
          index={index}
          key={card.titleId}
          link={card.link}
          soon={card.soon}
        />
      ))}
    </section>
  )
}

export default CardGrid

```


[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 io-landing/react/components/Footer.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'

import Logo from '../images/VTEX_footer.svg'
import VTEXOffices from '../VTEXOffices.json'

const footerLinks = [
  {
    id: 'pricing',
    options: [],
  },
  {
    id: 'company',
    options: ['carrers', 'partnersAWS', 'dmca', 'blog'],
  },
  {
    id: 'resources',
    options: [
      'devdocs',
      'support',
      'announcements',
      'releases',
      'status',
      'health',
      'vtexio',
    ],
  },
  {
    id: 'partners',
    options: ['vtex', 'find', 'program', 'appstore'],
  },
]

const Footer: FunctionComponent = () => (
  <footer className="bg-base--inverted pa10-l pv7 c-on-base--inverted">
    <div className="flex flex-wrap justify-between">
      <div className="w-33-l ph4 ph0-l">
        <img src={Logo} alt="VTEX" />
        <p className="flex">
          <FormattedMessage id="io.footer.vtex" />
        </p>
      </div>
      <div className="flex-l flex-wrap dn-s">
        {footerLinks.map(category => {
          const baseMessageId = `io.footer.${category.id}`
          return (
            <ul key={category.id}>
              <p className="fw7">
                <FormattedMessage id={baseMessageId} />
              </p>
              {category.options.map(option => (
                <li className="list" key={option}>
                  <p>
                    <FormattedMessage id={`${baseMessageId}.${option}`} />
                  </p>
                </li>
              ))}
            </ul>
          )
        })}
      </div>
    </div>
    <div className="flex flex-wrap center mv7">
      {VTEXOffices.Offices.map(office => (
        <div key={office.short} className="ph4 w-20-ns w-50-s mb0">
          <p className="t-heading-3">{office.short}</p>
          <p className="mt0 mb3">{office.address1}</p>
          <p className="mt0 mb3">{office.address2}</p>
          {office.address3 && <p className="mt0 mb3">{office.address3}</p>}
          <p className="mt0">{office.city}</p>
        </div>
      ))}
    </div>
  </footer>
)

export default Footer

```


[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 io-landing/react/components/KeyFeatures.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import Lightbulb from './icons/Lightbulb'
import Workspaces from './icons/Workspaces'
import Serverless from './icons/Serverless'
import Sync from './icons/Sync'

const KeyFeatures = () => (
  <section className="mv9 mt5-l vh-75-l bg-base--inverted c-on-base--inverted center w-90">
    <p className="mb0">
      <FormattedMessage id="io.features.title.small" />
    </p>
    <p className="t-heading-1 w-50-ns mt3">
      <FormattedMessage id="io.features.title" />
    </p>
    <div className="flex flex-column flex-row-l items-center justify-between">
      <article className="mh7-l mv5 mv0-l">
        <Sync />
        <p className="f4">
          <FormattedMessage id="io.features.cloud" />
        </p>
        <p className="t-body lh-copy">
          <FormattedMessage id="io.features.cloud.description" />
        </p>
      </article>
      <article className="mh7-l mv5 mv0-l">
        <Lightbulb />
        <p className="f4">
          <FormattedMessage id="io.features.setupless" />
        </p>
        <p className="t-body lh-copy">
          <FormattedMessage id="io.features.setupless.description" />
        </p>
      </article>
      <article className="mh7-l mv5 mv0-l">
        <Workspaces />
        <p className="f4">
          <FormattedMessage id="io.features.workspaces" />
        </p>
        <p className="t-body lh-copy">
          <FormattedMessage id="io.features.workspaces.description" />
        </p>
      </article>
      <article className="mh7-l mv5 mv0-l">
        <Serverless />
        <p className="f4">
          <FormattedMessage id="io.features.serverless" />
        </p>
        <p className="t-body lh-copy">
          <FormattedMessage id="io.features.serverless.description" />
        </p>
      </article>
    </div>
  </section>
)

export default KeyFeatures

```


[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 io-landing/react/components/StartBuilding.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { Button } from 'vtex.styleguide'

import IllustrationImage from '../images/Illutration_02_blue.png'

const StartBuilding = () => (
  <section className="flex flex-row-m flex-column vh-100-l c-on-base bg-base">
    <div className="w-50-l flex-l dn-s">
      <img src={IllustrationImage} alt="" className="h-100 w-100" />
    </div>
    <div className="w-50-l h-100 flex flex-column justify-around items-center">
      <p className="w-90 center t-heading-1 w-50-l">
        <FormattedMessage id="io.startbuilding.title" />
      </p>
      <div className="w-50-ns w-90-s flex flex-column justify-center pb4">
        <p className="t-body mb7 w-100-s">
          <FormattedMessage id="io.startbuilding.text" />
        </p>
        <div className="w-75 mb5">
          <a href="https://www.vtex.com/partner/">
            <Button variation="primary">
              <p className="action-secondary">
                <FormattedMessage id="io.startbuilding.cta" />
              </p>
            </Button>
          </a>
        </div>
      </div>
    </div>
  </section>
)

export default StartBuilding

```


[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 io-landing/react/components/icons/Workspaces.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Workspaces: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('workspaces')} ${colorToken ? colorToken : ''}`}
    width="35"
    height="34"
    viewBox="0 0 35 34"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24.4667 9.5332H1V32.9999H24.4667V9.5332Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M5.26611 6.86709V5.26709H28.7328V28.7338H27.1328"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M9.53625 2.6V1H33.0029V24.4667H31.4029"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Workspaces

```


[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 io-landing/react/components/icons/AppStore.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const AppStore: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('app-store')} ${colorToken ? colorToken : ''}`}
    width="64"
    height="64"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M26 5H5V26H26V5Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M61.2826 15.4999L48.4995 2.7168L35.7164 15.4999L48.4995 28.283L61.2826 15.4999Z"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M59 38H38V59H59V38Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M26 38H5V59H26V38Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default AppStore

```


[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 io-landing/react/components/icons/DesignDev.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const DesignDev: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('design')} ${colorToken ? colorToken : ''}`}
    width="62"
    height="62"
    viewBox="0 0 62 62"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M25 45H1V1H37V17"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M15 19L11 23L15 27"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M61 17H25V61H61V17Z"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M53 25H33V31H53V25Z"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M39 53H33V31"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M53 31V53H39V31"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default DesignDev

```


[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 io-landing/react/components/icons/RunnigShoes.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const RunningShoes: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('runningshoes')} ${
      colorToken ? colorToken : ''
    }`}
    width="62"
    height="50"
    viewBox="0 0 62 50"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M1 49H22"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M1 39H9"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M42.6009 21.238L36.0469 23.347"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M44.8012 28.123L38.4082 30.181"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M38.7064 9.06098L46.9994 35H54.9994C56.5907 35 58.1168 35.6321 59.2421 36.7573C60.3673 37.8826 60.9994 39.4087 60.9994 41V45C60.9994 46.0609 60.578 47.0783 59.8278 47.8284C59.0777 48.5786 58.0603 49 56.9994 49H38.9994L2.67041 25.106C1.80975 24.4874 1.22885 23.5533 1.0546 22.5078C0.880354 21.4623 1.12691 20.3903 1.74041 19.526L14.2094 2.06598C14.6017 1.51674 15.1961 1.14582 15.8618 1.0348C16.5276 0.923778 17.2101 1.08176 17.7594 1.47398L17.7764 1.48598C18.1143 1.73198 18.3877 2.0561 18.5731 2.43067C18.7586 2.80524 18.8506 3.21912 18.8414 3.63698C18.8174 5.75698 19.1234 12.278 23.9924 15.193C25.6032 16.1365 27.402 16.7141 29.261 16.8847C31.12 17.0552 32.9938 16.8147 34.7494 16.18"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default RunningShoes

```


[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 io-landing/react/components/icons/Stack.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Stack: FunctionComponent<{ colorToken?: string }> = ({ colorToken }) => (
  <svg
    className={`${baseClassname('stack')} ${colorToken ? colorToken : ''}`}
    width="64"
    height="64"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M54.749 28.999L60 32L32 48L4 32L9.25 29"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M54.745 41.9971L60 45.0001L32 61.0001L4 45.0001L9.25 42.0001"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M4 19L32 3L60 19L32 35L4 19Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Stack

```


[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 io-landing/react/components/icons/Video.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Video: FunctionComponent<{ colorToken?: string }> = ({ colorToken }) => (
  <svg
    className={`${baseClassname('video')} ${colorToken ? colorToken : ''}`}
    width="60"
    height="62"
    viewBox="0 0 60 62"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 34.0001L40 44.0001L24 54.0001V34.0001Z"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M59 26.0001H3V61.0001H59V26.0001Z"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M51.0425 12.0741L43.6465 2.99512"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M39.1653 13.786L31.7773 4.71802"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M27.2882 15.498L19.9102 6.44104"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M15.4121 17.211L7.99414 8.17004"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M2.99927 19.0001L57.1783 11.1891L55.6163 1.25806L1.57227 9.10206L2.99927 19.0001Z"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Video

```


[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 io-landing/react/components/icons/Sync.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Sync: FunctionComponent<{ colorToken?: string }> = ({ colorToken }) => (
  <svg
    className={`${baseClassname('sync')} ${colorToken ? colorToken : ''}`}
    width="34"
    height="36"
    viewBox="0 0 34 36"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M1 17.9999C1 9.1634 8.1634 2 16.9999 2C23.4485 2 29.0736 5.98399 31.6062 11.48"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M32.8768 2L31.6065 11.48L22.1271 10.2097"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M32.9973 18C32.9973 26.8365 25.8339 33.9999 16.9973 33.9999C10.5488 33.9999 4.92368 30.016 2.39111 24.52"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M1.12305 34L2.39333 24.52L11.8727 25.7903"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Sync

```


[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 io-landing/react/components/icons/Serverless.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Serverless: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('serverless')} ${colorToken ? colorToken : ''}`}
    width="34"
    height="32"
    viewBox="0 0 34 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M10.0667 1H1V30.8667H10.0667V1Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      opacity="0.8"
      d="M20.739 1H14.339V30.8667H20.739V1Z"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      opacity="0.6"
      d="M28.7333 1H25V30.8667H28.7333V1Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      opacity="0.4"
      d="M33 1V30.8667"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Serverless

```


[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 io-landing/react/components/icons/Lightbulb.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Lightbulb: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('lightbulb')} ${colorToken ? colorToken : ''}`}
    width="34"
    height="34"
    viewBox="0 0 34 34"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M1 17H4.2"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M5.68549 5.68652L7.94789 7.94893"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M17 1V4.2"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M28.3148 5.68652L26.0524 7.94893"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M33.0004 17H29.8004"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M13.2661 33H20.7328"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M26.0668 16.9998C26.0668 11.9923 22.0076 7.93311 17.0001 7.93311C11.9927 7.93311 7.93347 11.9923 7.93347 16.9998C7.93347 20.675 10.1239 23.8318 13.2668 25.2558V29.7998H20.7335V25.2558C23.8764 23.8318 26.0668 20.675 26.0668 16.9998Z"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Lightbulb

```


[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 io-landing/react/components/icons/FlowerGround.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const FlowerGround: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('flower')} ${colorToken ? colorToken : ''}`}
    width="62"
    height="57"
    viewBox="0 0 62 57"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M43 21H41C35.4771 21 31 25.4771 31 31V35H33C38.5229 35 43 30.5229 43 25V21Z"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M19 11H21C26.5229 11 31 15.4771 31 21V25H29C23.4771 25 19 20.5229 19 15V11Z"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M31 48.25V0.258789"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path
      d="M1 56H19C19 53.7908 20.7909 52 23 52C23.9974 52 24.8983 52.3782 25.5989 52.9821C26.791 50.0618 29.6509 48 33 48C37.4183 48 41 51.5817 41 56H61"
      stroke="#142032"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default FlowerGround

```


[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 io-landing/react/components/icons/utils.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const calcIconSize = (
  iconBase: { height: number; width: number },
  newSize: number
) => {
  const isHorizontal = iconBase.width >= iconBase.height

  const width = isHorizontal
    ? newSize
    : (newSize * iconBase.width) / iconBase.height

  const height = !isHorizontal
    ? newSize
    : (newSize * iconBase.height) / iconBase.width

  return { width, height }
}

export const baseClassname = (name: string, variation?: string) =>
  `vtex__icon-${name} ${variation ? `vtex__icon-${name}--${variation}` : ''}`

```


[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 io-landing/react/components/icons/Branches.tsx from the io-landing VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Branches: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('branches')} ${colorToken ? colorToken : ''}`}
    width="64"
    height="64"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M61 46H34L22 32L34 18H61"
      stroke="#F71963"
      strokeWidth="2"
      strokeMiterlimit="10"
    />
    <path d="M22 32H2" stroke="#F71963" strokeWidth="2" strokeMiterlimit="10" />
    <path
      d="M53 10L61 18L53 26"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M53 38L61 46L53 54"
      stroke="#fff"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default Branches

```


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

[User] Show me the implementation of order-manager/docs/README.md from the order-manager VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Order Manager

> Centralizes the requests queue to the Checkout API and manages order form data.

## Warning 🚨

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

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

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

## Usage

```tsx
import { OrderQueueProvider, useOrderQueue, useQueueStatus } from 'vtex.order-manager/OrderQueue'
import { OrderFormProvider, useOrderForm } from 'vtex.order-manager/OrderForm'

const MainComponent: FunctionComponent = () => (
  <OrderQueueProvider>
    <OrderFormProvider>
      <MyComponent />
    </OrderFormProvider>
  </OrderQueueProvider>
)

const MyComponent: FunctionComponent = () => {
  const { enqueue, listen } = useOrderQueue()
  const { orderForm, setOrderForm } = useOrderForm()
  const queueStatusRef = useQueueStatus(listen)

  //...
}
```

## `OrderQueue` API

### `useOrderQueue(): OrderQueueContext`

Exposes the API to interact with the order queue. See the items below for more details.

### `enqueue(task: () => Promise, id?: string): CancellablePromise`

> Returned by `useOrderQueue()`

Add a task to the queue of requests to the Checkout API. `task` will be called when it's the first in the queue.

The optional param `id` can be used to duplicate requests. Example:

```ts
const taskA = () => console.log("Task A ran");
enqueue(taskA, "coupon");

// Task A did not run yet and another task with id `coupon` is added to the queue
const taskB = () => console.log("Task B ran");
enqueue(taskB, "coupon");

// Log: 'Task B ran'
// Order Manager will only run taskB and discard taskA.
```

The point of this feature is to avoid making requests that are stale.

Returns a promise that resolves when the task is completed. This promise has a method `.cancel()`. If this function is called, the queue will ignore this task if it hasn't started yet and the promise will immediately reject, returning an object with a property `code` with value `'TASK_CANCELLED'`.

#### Use cases

1. If the user submits a coupon code, the task is scheduled, then changes and type another coupon code, we can avoid making the first request since the second will superseed it.

### `listen(event: QueueStatus, callback: Function): UnsubcribeFunction`

> Returned by `useOrderQueue()`

Once this function is called, the `callback` function will be called whenever the specified `event` is emitted until the returned function is called.

An event is emitted whenever the queue changes its status (see [QueueStatus](#QueueStatus)). For instance, if the queue changes from `QueueStatus.FULFILLED` to `QueueStatus.PENDING`, a `QueueStatus.PENDING` event is emitted.

Returns a function to unsubscribe the callback from the specified event.

#### Use cases

1. Makes it possible to add loaders or disable the Checkout button when there are tasks to resolve.

### `isWaiting(id: string): boolean`

> Returned by `useOrderQueue()`

Returns `true` if there is a task in the queue with the specified `id` that hasn't been run yet, or `false` otherwise.

#### Use cases

1. If you want to enqueue a task but a similar one is already in the queue, you can use this function to determine whether the older one has already been run. In case it hasn't, you can cancel it, merge both tasks and enqueue the merged task.

### `QueueStatus`

An enum that represents the queue states. The possible values are:

- `QueueStatus.PENDING`: There is a task running and there might be other tasks enqueued.
- `QueueStatus.FULFILLED`: The queue is empty and no task is being run.

### `useQueueStatus(listen: ListenFunction): React.MutableRefObject<QueueEvent>`

A helper hook that takes the `listen` function returned by `useOrderQueue` and returns a `ref` object whose `.current` property is a string equal to `Pending` or `Fulfilled` indicating the current queue status.

#### Use cases

1. Makes it possible to perform actions conditioned on the queue status.

#### Example

```ts
const { QueueStatus, useOrderQueue, useQueueStatus } from 'vtex.order-manager/OrderQueue'

const Component: FunctionComponent = () => {
  const { listen } = useOrderQueue()
  const queueStatusRef = useQueueStatus(listen)

  const handleClick = () => {
    if (queueStatusRef.current === QueueStatus.PENDING) {
      console.log('An action was performed while the queue was busy.')
    }
  }

  // ...
}
```

#### Notes

- Keep in mind that mutating the `ref` object does not trigger a re-render of the React component. If you want to display content depending on the queue status, consider using states controlled by queue events instead.

## `OrderForm` API

### `useOrderForm(): OrderFormContext`

Exposes the API to interact with the order form. See the items below for more details.

### `loading: boolean`

> Returned by `useOrderForm()`

This flag is set to `true` only when `OrderManager` is loading the order form during render. In order to know whether a task is ongoing, use `listen` instead.

#### Use cases

1. Make it possible to render a loading state when loading a page.

### `orderForm: OrderForm`

> Returned by `useOrderForm()`

Contains data from the order form. Do not modify this directly, use `setOrderForm` instead. In case the order form query fails, an empty order form is returned instead (see [`error`](#error-apolloerror--undefined)).

### `setOrderForm: (newOrderForm: Partial<OrderForm>) => void`

> Returned by `useOrderForm()`

Updates the order form stored in `OrderManager`. This should be called after each mutation to ensure that client data does not get out of sync with server data and that other `OrderManager` consumers can react to this update.

### `error: ApolloError | undefined`

> Returned by `useOrderForm()`

A reference to the `error` object returned by the GraphQL query for the order form.

```


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

[User] Show me the implementation of order-manager/react/OrderForm.tsx from the order-manager VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useContext, useMemo, useCallback, useRef, useEffect } from 'react'
import { useQuery, useMutation } from 'react-apollo'
import OrderFormQuery from 'vtex.checkout-resources/QueryOrderForm'
import { MutationClearOrderFormMessages } from 'vtex.checkout-resources'
import type { OrderForm, QueryOrderFormArgs } from 'vtex.checkout-graphql'
import { useRuntime } from 'vtex.render-runtime'
import { ToastContext } from 'vtex.styleguide'
import {
  createOrderFormProvider,
  DEFAULT_ORDER_FORM,
  useOrderForm,
} from '@vtex/order-manager'
import type { OrderFormUpdate } from '@vtex/order-manager/types/typings'
import { useSplunk } from 'vtex.checkout-splunk'

import { useOrderQueue, useQueueStatus, QueueStatus } from './OrderQueue'

function useLogger() {
  const { logSplunk } = useSplunk()

  const log = useCallback(
    ({ type, level, event, workflowType, workflowInstance }) => {
      logSplunk({ type, level, event, workflowType, workflowInstance })
    },
    [logSplunk]
  )

  return { log }
}

const CHECKOUT = 'checkout'

function useClearOrderFormMessages() {
  const [mutate] = useMutation<{
    clearOrderFormMessages: OrderForm
  }>(MutationClearOrderFormMessages)

  return useCallback(
    async (input) => {
      const { data } = await mutate({ variables: input })

      return { data: data?.clearOrderFormMessages }
    },
    [mutate]
  )
}

const useGetOrderForm = ({
  setOrderForm,
}: {
  setOrderForm: (update: OrderFormUpdate<OrderForm>) => void
}) => {
  const { page, query } = useRuntime()

  const shouldRefreshOutdatedData = page.includes(CHECKOUT)

  const variablesRef = useRef({
    refreshOutdatedData: shouldRefreshOutdatedData,
    orderFormId: query?.['orderFormId']
  })

  const { data, loading, error, refetch } = useQuery<
    {
      orderForm: OrderForm
    },
    QueryOrderFormArgs
  >(OrderFormQuery, {
    ssr: false,
    fetchPolicy: 'no-cache',
    variables: variablesRef.current,
  })

  const { enqueue } = useOrderQueue()
  const queueStatusRef = useQueueStatus()

  useEffect(() => {
    if (shouldRefreshOutdatedData) {
      enqueue(() =>
        refetch({ refreshOutdatedData: true }).then(
          ({ data: refreshedData }) => refreshedData.orderForm
        )
      ).then((updatedOrderForm) => {
        if (queueStatusRef.current === QueueStatus.FULFILLED) {
          setOrderForm(updatedOrderForm)
        }
      })
    }
  }, [
    enqueue,
    refetch,
    shouldRefreshOutdatedData,
    setOrderForm,
    queueStatusRef,
  ])

  const value = useMemo(
    () => ({
      data,
      loading,
      error,
    }),
    [data, loading, error]
  )

  return value
}

const useToast = () => {
  return useContext(ToastContext)
}

const { OrderFormProvider } = createOrderFormProvider<OrderForm>({
  defaultOrderForm: DEFAULT_ORDER_FORM,
  useGetOrderForm,
  useClearOrderFormMessages,
  useToast,
  useLogger,
})

export { OrderFormProvider, useOrderForm }
export default { OrderFormProvider, useOrderForm }

```


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

[User] Show me the implementation of order-manager/react/setupTests.ts from the order-manager VTEX app.

[Assistant]
Here's the implementation:

```typescript
// @ts-expect-error: We don't want to mock everything on __RUNTIME__
window.__RUNTIME__ = {
  account: 'checkoutio',
  workspace: 'master',
  settings: {
    'vtex.store': { enableOrderFormOptimization: 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 order-manager/react/package.json from the order-manager VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "@vtex/order-manager": "^0.5.3",
    "classnames": "^2.2.6",
    "react": "^16.8.3",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.8.3",
    "react-intl": "3.9.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/react": "^17.0.3",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^3.0.1",
    "apollo-client": "^2.5.1",
    "typescript": "3.9.7",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.60.0/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.46.0/public/@types/vtex.checkout-resources",
    "vtex.checkout-splunk": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-splunk@0.1.0/public/@types/vtex.checkout-splunk",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.128.2/public/@types/vtex.render-runtime",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.138.2/public/@types/vtex.styleguide"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "./setupTests.ts"
    ]
  },
  "resolutions": {
    "@types/testing-library__dom": "6.12.1",
    "@types/express": "4.16.0",
    "@types/express-serve-static-core": "4.16.0"
  },
  "version": "0.12.1"
}

```


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

[User] Show me the implementation of order-manager/react/constants.ts from the order-manager VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { OrderForm } from 'vtex.checkout-graphql'

export enum QueueStatus {
  PENDING = 'Pending',
  FULFILLED = 'Fulfilled',
}

export const TASK_CANCELLED_CODE = 'TASK_CANCELLED'

// keep default value as -1 to indicate this order form
// is the initial value (not yet synchonized with server).
export const UNSYNC_ORDER_FORM_VALUE = -1

export const DEFAULT_ORDER_FORM: OrderForm = {
  id: 'default-order-form',
  items: [],
  value: UNSYNC_ORDER_FORM_VALUE,
  totalizers: [],
  marketingData: {},
  canEditData: false,
  loggedIn: false,
  paymentData: {
    isValid: false,
    installmentOptions: [],
    paymentSystems: [],
    payments: [],
    availableAccounts: [],
  },
  messages: {
    couponMessages: [],
    generalMessages: [],
  },
  shipping: {
    isValid: false,
    deliveryOptions: [],
    pickupOptions: [],
  },
}

export default {
  QueueStatus,
  TASK_CANCELLED_CODE,
}

```


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

[User] Show me the implementation of order-manager/react/OrderQueue.tsx from the order-manager VTEX app.

[Assistant]
Here's the implementation:

```tsx
import {
  OrderQueueProvider,
  useQueueStatus,
  useOrderQueue,
} from '@vtex/order-manager'

import { QueueStatus } from './constants'

export { OrderQueueProvider, useOrderQueue, useQueueStatus, QueueStatus }
export default {
  OrderQueueProvider,
  useOrderQueue,
  useQueueStatus,
  QueueStatus,
}

```