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

[Assistant]
Here's the implementation:

```markdown
# VTEX Code Cup

VTEX Code Cup is a programming contest for Brazilian students where each student's algorithms and data structures skills are challenged while trying to solve as many problems as possible in the smallest amount of time.

```


[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 code-cup/react/CodeCupRules.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

import favicon from './images/favicon.png'
import Logo from './images/logo_codecup_02@2x.png'
import Footer from './components/Footer'

const CodeCupRules = () => (
  <Fragment>
    <Helmet>
      <title>VTEX Code Cup - Regras</title>
      <meta name="description" content="Coding competition from VTEX" />
      <meta name="theme-color" content="#F71963" />
      <link rel="icon" href={favicon} />
    </Helmet>
    <main className="w-100 bg-white">
      <article className="w-90 w-75-l center pa9 lh-copy">
        <img src={Logo} className="h4-l" alt="VTEX Code Cup" />
        <h1 className="t-heading-1 c-emphasis">Regras</h1>
        <p>
          O VTEX Code Cup consiste em dois (2) rounds: <strong>Round 1</strong>{' '}
          e <strong>Round Final</strong>. O Round 1 será conduzido online. O
          Round Final será presencial no escritório da VTEX no Rio de Janeiro,
          Brasil.
        </p>
        <p>
          <strong>Round 1</strong>. O Round 1 do VTEX Code Cup Round será
          conduzido online. Você irá avançar para o Round Final se estiver
          entre os 10 primeiros colocados no ranking do contest do Round 1.
        </p>
        <p>
          <strong>Round Final</strong>. O Round Final do VTEX Code Cup
          acontecerá em um Sábado no dia 08 de Junho de 2019 no escritório da
          VTEX no Rio de Janeiro, Brasil.
        </p>
        <p>
          Durante o Round Final, você irá resolver problemas usando somente
          equipamento provisionado pela VTEX e outros materiais. Você poderá
          escolher usar o seu próprio teclado ou material com a permissão da
          VTEX.
        </p>
        <p>
          <strong>Notificações:</strong> Os critérios de qualificação e o
          ranking de cada Round estará disponível no site oficial do VTEX Code
          Cup. Após o scoreboard estiver finalizado, você irá receber um alerta
          no seu email caso esteja qualificado para competir no próximo Round.
        </p>
        <h2 className="t-heading-2 c-emphasis">Prêmios</h2>
        <p>
          VTEX Code Cup T-Shirt. Você estará eleito a receber (1) t-shirt se
          pertencer aos <strong>20%</strong> dos melhores colocados do ranking
          no Round 1.
        </p>
        <p>
          1) O primeiro colocado no ranking geral será o vencedor do VTEX Code
          Cup e como prêmio ganhará uma{' '}
          <strong>
            viagem à Rússia com passagem e hospedagem paga sem acompanhantes
            por 5 dias para acompanhar a final mundial ACM-ICPC em 2020.
          </strong>
        </p>
        <p>
          Caso a organização do ACM não autorize acompanhar a final da ICPC ou
          o vencedor já esteja classificado para a final do ICPC em 2020,
          poderá solicitar a troca do prêmio por uma participação no{' '}
          <strong>Moscow Pre-Finals Workshop ICPC 2020</strong>.
        </p>
        <p>
          2) O segundo colocado no ranking geral receberá um Fone De Ouvido
          <strong>Bose Quietcomfort 35 Ii Wls 789564-0010</strong> Preto.
        </p>
        <p>
          3) O terceiro colocado no ranking geral receberá um
          <strong>Kindle Paperwhite</strong>.
        </p>
        <h2 className="t-heading-2 c-emphasis">Residência no Brasil</h2>
        <p>
          O evento é destinado somente a <strong>residentes brasileiros</strong>
          . Não serão aceitos brasileiros residindo fora do país ou que estejam
          em viagem internacional durante o Round Final.
        </p>
        <h2 className="t-heading-2 c-emphasis">Idade Mínima</h2>
        <p>
          Você entende e concorda que precisa ter a Idade Mínima para competir
          presencialmente o Round Final. Se a sua idade não se enquadrar na
          Idade Mínima, você apenas será elegível para ganhar a camiseta da
          competição. Como {'Idade Mínima'} se entende por{' '}
          <strong>18 anos de idade</strong> no seu país de residência.
        </p>
        <h2 className="t-heading-2 c-emphasis">Inscrições</h2>
        <p>
          Inscrições vão do período de{' '}
          <strong>
            03 de maio de 2019 a 10 de maio de 2019, até as 21h00 GMT-3
          </strong>
          , para participar da primeira fase (online) da VTEX Code Cup.
        </p>
        <p>
          O Round 1 irá acontecer no dia{' '}
          <strong>11 de maio de 2019, às 13h00 GMT-3</strong> e terá duração
          máxima de 3h30min.
        </p>
        <p>
          O Round Final irá acontecer na tarde do dia{' '}
          <strong>08 de junho de 2019</strong>. Os detalhes desse Round serão
          divulgados em breve.
        </p>
        <h2 className="t-heading-2 c-emphasis">Desqualificação</h2>
        <p>
          <strong>Round 1.</strong> Você será desqualificado no Round 1 se:
        </p>
        <p>
          (A) Usar ou compartilhar informação sobre os problemas com outras
          pessoas (competidores ou não) durante o contest do Round 1.
        </p>
        <p>
          (B) Compartilhar o seu código com outra pessoa (competidores ou não)
          durante o contest do Round 1.
        </p>
        <p>(C) Outra pessoa solucionar o problema para você.</p>
        <p>
          <strong>Round Final.</strong> Caso você seja desqualificado no Round
          Final do VTEX Code Cup, a VTEX irá selecionar o próximo competidor com
          a pontuação mais alta no ranking após você.
        </p>
        <p>
          Você será considerado desqualificado no Round Final se preencher as
          condições abaixo:
        </p>
        <p>
          (A) Você não foi capaz de reservar o seu vôo com a VTEX ou agente de
          viagem designado com 4 semanas de antecedência após receber o e-mail
          para participar do Round Final.
        </p>
        <p>
          (B) Você não foi capaz de responder os emails de confirmação do vôo
          com 48 horas de antecedência com a VTEX ou agente de viagem designado
          que enviou o email.
        </p>
        <p>
          (C) Você falou em prover toda a documentação e informação relacionada
          ao seu vôo requisitado pela VTEX com quatro (4) semana antes do Round
          final, ou
        </p>
        <p>
          (D) Você não foi capaz de completar o Round Final ou ficou
          impossibilitado de concluir (exemplo: chegou atrasado).
        </p>
        <h2 className="t-heading-2 c-emphasis">Participação no Round Final</h2>
        <p>
          1. Você deve chegar na localização do Round Final com{' '}
          <strong>pelo menos (1) dia de antecedência</strong> para evitar
          atrasos ou possibilidades de desqualificação.
        </p>
        <p>2. Prêmios devem ser recebidos.</p>
        <p>
          3. Todos os eventos relacionados ao Round Final são apenas para
          competidores, se você não registrar convidados com antecedência eles
          não poderão assistir ao evento. A VTEX não se responsabilizará por
          qualquer custos que envolvam convidados ou terceiros.
        </p>
        <h2 className="t-heading-2 c-emphasis">
          Reembolso de despesas de viagem
        </h2>
        <p>
          Como finalista, a VTEX vai custear as despesas da sua viagem de ida e
          volta ao Rio de Janeiro relacionadas ao Round Final do VTEX Code Cuo.
          Você é responsável por todas as outras despesas.
        </p>
        <p>
          <strong>Vôo:</strong> Como finalista, você receberá transporte aéreo
          de ida e volta em classe econômica no aeroporto mais próximo de sua
          residência em um vôo selecionado pela VTEX ou seu agente designado.
        </p>
        <p>
          <strong>Acomodações:</strong> Como finalista, você receberá
          acomodações de hotel para uma (1) pessoa em um hotel da VTEX ou a
          escolha de seu agente designado para a duração da sua estadia.
        </p>
        <p>
          <strong>Alimentação:</strong> Como finalista, a VTEX reembolsará você
          pelo custo de suas refeições até R$100,00 por dia durante a sua
          estadia, conforme aprovado pela VTEX, e seus dias de viagem de e para
          a localização do Round Final.
        </p>
      </article>
    </main>
    <Footer />
  </Fragment>
)

export default CodeCupRules

```


[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 code-cup/react/CodeCup.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

import favicon from './images/favicon.png'
import Header from './components/Header'
import About from './components/About'
import Rio from './components/Rio'
import Subscribe from './components/Subscribe'
import VTEX from './components/VTEX'
import FAQ from './components/FAQ'
import Footer from './components/Footer'
import Results from './components/Results'

import HomeImage from './images/imagem_home.jpg'

function initializeReactGA() {
  ReactGA.initialize('UA-139462697-1')
  ReactGA.pageview('/')
}
class Landing extends Component {
  public componentDidMount() {
    initializeReactGA()
  }

  public render() {
    return (
      <Fragment>
        <Helmet>
          <title>VTEX Code Cup</title>
          <meta name="title" content="VTEX Code Cup" />
          <meta name="description" content="The coding competition from VTEX" />
          <meta name="theme-color" content="#F71963" />
          <meta
            name="google-site-verification"
            content="w74PwlErxsMKe0Hp083-KEET2vwM2XcjzjiS4dZcThU"
          />
          {/* <!-- Open Graph / Facebook --> */}
          <meta property="og:type" content="website" />
          <meta property="og:url" content="https://codecup.vtex.com/" />
          <meta property="og:title" content="VTEX Code Cup" />
          <meta
            property="og:description"
            content="The coding competition from VTEX"
          />
          <meta property="og:image" content={HomeImage} />
          {/* <!-- Twitter --> */}
          <meta property="twitter:card" content="summary_large_image" />
          <meta property="twitter:url" content="https://codecup.vtex.com/" />
          <meta property="twitter:title" content="VTEX Code Cup" />
          <meta
            property="twitter:description"
            content="The coding competition from VTEX"
          />
          <meta property="twitter:image" content={HomeImage} />
          <link rel="icon" href={favicon} />
        </Helmet>
        <main className="w-100 bg-white">
          <Header />
          <Results />
          <About />
          <Rio />
          <Subscribe />
          <VTEX />
          <FAQ />
        </main>
        <Footer />
      </Fragment>
    )
  }
}

export default 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 code-cup/react/package.json from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.code-cup",
  "version": "0.0.0",
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts,tsx .",
    "lint:locales": "intl-equalizer"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-brands-svg-icons": "^5.8.1",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "nuka-carousel": "^4.5.4",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-ga": "^2.5.7"
  },
  "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.5.2"
  }
}

```


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

[User] Show me the implementation of code-cup/store/interfaces.json from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "codecup": {
    "blocks": [
      "codecup.landing"
    ]
  },
  "codecup.landing": {
    "component": "CodeCup"
  },
  "codecup.rules": {
    "component": "CodeCupRules"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "codecup.landing": {
    "path": "/codecup"
  },
  "codecup.rules": {
    "path": "/rules"
  }
}

```


[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 code-cup/react/typings/jpg.d.ts from the code-cup 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 code-cup/react/typings/png.d.ts from the code-cup 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 code-cup/react/typings/vtex.render-runtime.d.ts from the code-cup 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
    }
  }
}

```


[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 code-cup/react/typings/svg.d.ts from the code-cup 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 code-cup/react/typings/graphql.d.ts from the code-cup 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 code-cup/react/typings/vtex.styleguide.d.ts from the code-cup 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 code-cup/react/components/Results.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import First from '../images/CodeCupResults1.jpg'
import Third from '../images/CodeCupResults2.jpg'
import Second from '../images/CodeCupResults3.jpg'

const Results = () => (
  <section id="about" className="w-90 w-75-l center pv9">
    <h1 className="c-emphasis t-heading-1">Resultados VTEX Code Cup 2019</h1>
    <div className="flex flex-column">
      <article className="mv3 ph6 pv5 w-90 br3">
        <div className="items-center link flex">
          <div className="mr7">
            <img src={First} className="vw-50 br2" />
          </div>
          <div className="flex flex-column items-center">
            <p className="t-heading-4 c-emphasis fw7">1º Lugar</p>
            <p className="t-body c-muted-2">Arthur Nascimento</p>
          </div>
        </div>
      </article>
      <article className="mv3 ph6 pv5 w-90 br3">
        <div className="items-center link flex">
          <div className="mr7">
            <img src={Second} className="vw-50 br2" />
          </div>
          <div className="flex flex-column items-center">
            <p className="t-heading-4 c-emphasis fw7">2º Lugar</p>
            <p className="t-body c-muted-2">Tiago Gonçalves</p>
          </div>
        </div>
      </article>
      <article className="mv3 ph6 pv5 w-90 br3">
        <div className="items-center link flex">
          <div className="mr7">
            <img src={Third} className="vw-50 br2" />
          </div>
          <div className="flex flex-column items-center">
            <p className="t-heading-4 c-emphasis center fw7">3º Lugar</p>
            <p className="t-body c-muted-2 center">Arthur Pratti Dadalto</p>
          </div>
        </div>
      </article>
    </div>
    <h1 className="c-emphasis t-heading-2 center tc mv7">
      Até a próxima edição!
    </h1>
    <section className="pv7 flex justify-center items-center">
      <iframe
        className="w-70-l w-90 vh-75"
        src="https://www.youtube.com/embed/CWA0cWdkMOo"
        frameBorder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </section>
  </section>
)

export default Results

```


[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 code-cup/react/components/Rio.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import Carousel from 'nuka-carousel'

import CarouselImage1 from '../images/06_foto_time.jpg'
import CarouselImage2 from '../images/05_foto_time.jpg'
import CarouselImage3 from '../images/04_foto_time.jpg'
import CarouselImage4 from '../images/03_foto_time.jpg'
import CarouselImage5 from '../images/02_foto_rio.jpg'

const Rio: FunctionComponent = () => (
  <section>
    <Carousel autoplay wrapAround heightMode="first">
      <img src={CarouselImage1} alt="" />
      <img src={CarouselImage2} alt="" />
      <img src={CarouselImage3} alt="" />
      <img src={CarouselImage4} alt="" />
      <img src={CarouselImage5} alt="" />
    </Carousel>
  </section>
)

export default Rio

```


[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 code-cup/react/components/Subscribe.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

import Go from '../images/imagem_go_@2x.png'

const Subscribe: FunctionComponent = () => (
  <section className="flex flex-column pa6 w-90 ml-auto-l mr0-l center">
    <div className="flex flex-row-l flex-column justify-around-l items-center">
      <div className="w-40-l">
        <p className="t-heading-1">como funciona?</p>
        <p className="lh-copy">
          Inscreva-se, no período de{' '}
          <strong>03 de maio de 2019 a 10 de maio de 2019</strong>, até as 21h
          (horário de brasília), para participar da primeira fase (online) da
          VTEX Code Cup. Essa etapa vai acontecer no dia{' '}
          <strong>11 de maio de 2019, as 13h (horário de Brasília)</strong> e
          terá duração de <strong>3h30min</strong>.
        </p>
        <p className="lh-copy">
          Os primeiros 10 colocados no ranking geral da primeira fase, serão
          convidados para a segunda fase (presencial) que acontecerá no dia{' '}
          <strong>08 de junho de 2019</strong>, na sede da VTEX, no Rio de
          Janeiro. Nessa etapa, os competidores serão submetidos a um novo
          contest.
        </p>
        <p className="lh-copy">
          O primeiro colocado no ranking geral será o vencedor do VTEX Code Cup
          e como prêmio receberá uma viagem à Rússia para acompanhar a final
          mundial ACM-ICPC em 2020.
        </p>
      </div>
      <div className="flex flex-column items-center w-50-l">
        <img src={Go} className="mv4" alt="" />
        <a className="link" href="https://vtexcc19.kattis.com/">
          <button className="c-on-base--inverted br-pill mt6 mb3 bg-emphasis ph9 b--none pointer">
            <p className="t-heading-4">Participar</p>
          </button>
        </a>
      </div>
    </div>
  </section>
)

export default Subscribe

```


[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 code-cup/react/components/QuestionCard.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, FunctionComponent } from 'react'
import { IconCaretDown, IconCaretRight } from 'vtex.styleguide'

interface Props {
  question: string
  ans: any
}

const QuestionCard: FunctionComponent<Props> = ({ question, ans }) => {
  const [open, setOpen] = useState(false)
  return (
    <article className="flex flex-column pr9-l w-100">
      <p
        className="flex justify-between bb b--muted-3 pv3"
        onClick={() => setOpen(!open)}
      >
        <strong>{question}</strong>
        {open ? <IconCaretDown /> : <IconCaretRight />}
      </p>
      <p hidden={!open} className="ph5 lh-copy">
        {ans}
      </p>
    </article>
  )
}

export default QuestionCard

```


[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 code-cup/react/components/VTEX.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

import Logo from '../images/logo_vtex@2x.png'
import MapImage from '../images/01_mapa.png'

const VTEX: FunctionComponent = () => (
  <section className="bg-muted-5">
    <div className="flex flex-column flex-row-l pv9 justify-center items-center w-90 ml-auto-l mr0-l center">
      <div className="flex flex-column w-60-l">
        <img src={Logo} className="w-60 mb5" alt="VTEX Logo" />
        <p className="t-body lh-copy">
          A VTEX é uma empresa global de tecnologia focada em produtos para
          e-commerce que impacta diariamente o trabalho de milhares de pessoas
          ao redor do mundo. Através dos seus produtos e serviços, oferece aos
          lojistas uma plataforma coesa para executar todo o seu negócio e
          proporcionar aos seus clientes sempre a melhor experiência de compra.
        </p>
      </div>
      <div className="flex flex-column justify-between items-center">
        <img src={MapImage} className="w-75-l" alt="" />
      </div>
    </div>
  </section>
)

export default VTEX

```


[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 code-cup/react/components/Countdown.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

interface Props {
  date: string
}

interface State {
  days: number
  hours: number
  min: number
  sec: number
}

class Countdown extends Component<Props, State> {
  public constructor(props: Props) {
    super(props)

    this.state = {
      days: 0,
      hours: 0,
      min: 0,
      sec: 0,
    }
  }

  private interval = setInterval(() => {
    return
  }, 0)

  public componentDidMount() {
    // update every second
    this.interval = setInterval(() => {
      const date = this.calculateCountdown(this.props.date)
      date ? this.setState(date) : this.stop()
    }, 1000)
  }

  public componentWillUnmount() {
    this.stop()
  }

  private calculateCountdown(endDate: string) {
    let diff =
      (Date.parse(new Date(endDate).toUTCString()) -
        Date.parse(new Date().toUTCString())) /
      1000

    // clear countdown when date is reached
    if (diff <= 0) return false

    const timeLeft = {
      years: 0,
      days: 0,
      hours: 0,
      min: 0,
      sec: 0,
      millisec: 0,
    }

    // calculate time difference between now and expected date
    if (diff >= 365.25 * 86400) {
      // 365.25 * 24 * 60 * 60
      timeLeft.years = Math.floor(diff / (365.25 * 86400))
      diff -= timeLeft.years * 365.25 * 86400
    }
    if (diff >= 86400) {
      // 24 * 60 * 60
      timeLeft.days = Math.floor(diff / 86400)
      diff -= timeLeft.days * 86400
    }
    if (diff >= 3600) {
      // 60 * 60
      timeLeft.hours = Math.floor(diff / 3600)
      diff -= timeLeft.hours * 3600
    }
    if (diff >= 60) {
      timeLeft.min = Math.floor(diff / 60)
      diff -= timeLeft.min * 60
    }
    timeLeft.sec = diff

    return timeLeft
  }

  private stop() {
    clearInterval(this.interval)
  }

  public render() {
    const { days, hours, min, sec } = this.state

    return (
      <div className="pa7-l pa5 br3 bg-emphasis flex justify-around">
        <div className="mh5 flex flex-column justify-center items-center">
          <p className="t-heading-2 mv2">{days}</p>
          <p>dias</p>
        </div>
        <div className="mh5 flex flex-column justify-center items-center">
          <p className="t-heading-2 mv2">{hours}</p>
          <p>horas</p>
        </div>
        <div className="mh5 flex flex-column justify-center items-center">
          <p className="t-heading-2 mv2">{min}</p>
          <p>minutos</p>
        </div>
        <div className="mh5 flex flex-column justify-center items-center">
          <p className="t-heading-2 mv2">{sec}</p>
          <p>segundos</p>
        </div>
      </div>
    )
  }
}

export default Countdown

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faTwitter,
  faFacebook,
  faInstagram,
} from '@fortawesome/free-brands-svg-icons'

import Logo from '../images/logo_codecup_03@2x.png'

const Footer: FunctionComponent = () => (
  <footer className="bg-base--inverted flex flex-column flex-row-l justify-around pa8">
    <div className="flex flex-column w-25-l justify-around">
      <img src={Logo} className="w-70-l" alt="VTEX" />
      <div className="flex justify-between mb7 mt9 mb0-l c-on-base--inverted">
        <div>
          <a
            className="link c-on-base--inverted"
            href="https://twitter.com/vtexonline"
          >
            <FontAwesomeIcon icon={faTwitter} />
          </a>
        </div>
        <div>
          <a
            className="link c-on-base--inverted"
            href="https://www.facebook.com/vtexonline/"
          >
            <FontAwesomeIcon icon={faFacebook} />
          </a>
        </div>
        <div>
          <a
            className="link c-on-base--inverted"
            href="https://www.instagram.com/vtextruecloud/"
          >
            <FontAwesomeIcon icon={faInstagram} />
          </a>
        </div>
      </div>
    </div>
    <div className="flex flex-column justify-around w-40-l c-on-base">
      <div className="flex-l list justify-between">
        <p className="ttu">
          <strong>
            <a className="link c-on-base--inverted" href="https://vtex.com">
              vtex.com
            </a>
          </strong>
        </p>
        <p className="ttu">
          <strong>
            <a className="link c-on-base--inverted" href="/rules">
              termos e condições
            </a>
          </strong>
        </p>
        <p className="ttu">
          <strong>
            <a
              className="link c-on-base--inverted"
              href="https://careers.vtex.com"
            >
              careers
            </a>
          </strong>
        </p>
        <p className="ttu">
          <strong>
            <a
              className="link c-on-base--inverted"
              href="mailto:codecup@vtex.com"
            >
              contact us
            </a>
          </strong>
        </p>
      </div>
      <p className="c-on-base--inverted">
        VTEX - Unified Cloud Commerce ™. Gerenciamos bilhões de sessões com um
        GMV estimado em mais de R$ 8bilhões em 3.000 lojas.
      </p>
    </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 code-cup/react/components/FAQData.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

export const questions = [
  {
    question: 'O que é a VTEX Code Cup?',
    ans:
      'É o desafio de programação da VTEX para brasileiros, onde competidores usam algoritmos para resolver o maior número de problemas no menor tempo possível. Os participantes serão selecionados em uma fase online, de onde só os melhores serão convidados para uma competir presencialmente no escritório da VTEX.',
  },
  {
    question: 'Como a VTEX Code Cup funciona?',
    ans: (
      <Fragment>
        <p>
          Inscreva-se até as 21h do dia 10 maio de 2019 para participar da
          primeira fase da VTEX Code Cup.
        </p>
        <p>
          Essa etapa acontecerá online no dia 11 de maio de 2019 as 13h (horário
          de Brasília) e terá duração de 3h30 horas.
        </p>
        <p>
          Assim que se encerrarem as inscrições os competidores receberão um
          e-mail de confirmação, com o link para acessar a plataforma da
          competição.
        </p>
        <p>
          Os primeiros 10 colocados na primeira fase serão convidados para a
          fase presencial. Ela acontecerá na tarde do dia 08 de junho de 2019 na
          sede da VTEX no Rio de Janeiro.
        </p>
        <p>
          Os finalistas competirão pela glória eterna e pelo título de campeão
          da primeira VTEX Code Cup.
        </p>
        <p>
          O campeão receberá uma viagem para acompanhar a final da ACM ICPC
          2020, na Rússia.
        </p>
      </Fragment>
    ),
  },
  {
    question: 'Quem pode participar do VTEX Code Cup?',
    ans: (
      <Fragment>
        <p>
          1. O evento é destinado somente a residentes brasileiros. Não serão
          aceitos brasileiros residindo fora do país ou que estejam em viagem
          internacional durante o Round Final.
        </p>
        <p>
          2. Qualquer pessoa que não possua algum vínculo trabalhista com a VTEX
          (incluindo estágio) ou suas associadas.
        </p>
        <p>
          3. Você deve ter no mínimo 18 anos para poder participar da etapa
          presencial.
        </p>
      </Fragment>
    ),
  },
  {
    question:
      'Caso seja convidado para a etapa presencial, a VTEX vai pagar minha passagem?',
    ans: (
      <Fragment>
        Sim! Vamos arcar com todas as despesas necessárias para viabilizar sua
        participação na Segunda Fase Final (presencial) de acordo com as
        <a href="/rules"> Regras da Competição</a>, na cláusula de Reembolso de
        Despesas de Viagem.
      </Fragment>
    ),
  },
  {
    question: 'Como me inscrevo para a VTEX Code Cup?',
    ans: (
      <Fragment>
        Clique em <strong>{'quero participar'}</strong> aqui nessa página,
        preencha seus dados e envie. Até o dia 10 de maio de 2019, as 21h você
        receberá no seu email cadastrado o link para acesso à arena da
        competição.
      </Fragment>
    ),
  },
  {
    question: 'Ainda possui alguma dúvida?',
    ans: (
      <Fragment>
        Se você ainda possui alguma dúvida que não respondemos aqui nesse FAQ,
        mande um e-mail para{' '}
        <a href={'mailto:codecup@vtex.com'}>codecup@vtex.com</a> que estamos
        disponíveis para te ajudar.
      </Fragment>
    ),
  },
]

```


[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 code-cup/react/components/Header.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faTwitter,
  faFacebook,
  faInstagram,
} from '@fortawesome/free-brands-svg-icons'
import { IconBars } from 'vtex.styleguide'

import HeaderImage from '../images/imagem_home.jpg'
import Logo from '../images/logo_codecup_01@2x.png'
import ArrowsDown from '../images/setas_down@2x.png'
import Countdown from './Countdown'

const Header: FunctionComponent = () => {
  const [openNav, setOpenNav] = useState(false)

  return (
    <header className="flex flex-column-s flex-row-l w-100">
      <div
        className="flex-l dn-s justify-around pb9"
        style={{
          writingMode: 'vertical-lr',
          transform: 'rotate(-180deg)',
        }}
      >
        <div className="ph5">
          <p className="t-small c-muted-2">11 de maio de 2019</p>
          <p className="t-small">
            <strong>Primeira Fase Online</strong>
          </p>
        </div>
        <div className="ph5">
          <p className="t-small c-muted-2">08 de junho de 2019</p>
          <p className="t-small">
            <strong>Final presencial</strong>
          </p>
        </div>
        <div className="ph5">
          <p className="t-small c-muted-2">codecup@vtex.com</p>
          <p className="t-small">
            <strong>Rio de Janeiro . Brasil</strong>
          </p>
        </div>
      </div>
      <div
        className="flex flex-grow-1 pa9 flex-column justify-around c-on-emphasis bg-center-l"
        style={{
          backgroundImage: `url(${HeaderImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'cover',
        }}
      >
        <nav className="flex">
          <div className="c-on-emphasis w-100 flex flex-column flex-row-l justify-between">
            <div className="flex flex-column items-center">
              <img src={Logo} className="h3-l" alt="VTEX CODE CUP" />
              <button
                className="dn-l c-on-base w-33 mv7 bg-0 bn bg-transparent"
                onClick={() => setOpenNav(!openNav)}
              >
                <IconBars />
              </button>
            </div>
            <div className="flex-l" hidden={!openNav}>
              <div className="flex flex-column flex-row-l justify-center list mt0 items-center mb0">
                <p className="mh5-l mv5 mv0-l">
                  <a
                    className="link c-on-emphasis"
                    href="https://codecup.vtex.com"
                  >
                    <strong>HOME</strong>
                  </a>
                </p>
                <p className="mh5-l mv5 mv0-l bold">
                  <a className="link c-on-emphasis" href="#about">
                    <strong>O QUE É?</strong>
                  </a>
                </p>
                <p className="mh5-l mv5 mv0-l bold">
                  <a className="link c-on-emphasis" href="#faq">
                    <strong>FAQ</strong>
                  </a>
                </p>
                <p className="mh5-l mv5 mv0-l bold">
                  <a className="link c-on-emphasis" href="/rules">
                    <strong>REGRAS</strong>
                  </a>
                </p>
              </div>
            </div>
          </div>
        </nav>
        <div className="w-100 mv8 flex flex-column flex-row-l justify-between items-center flex-nowrap">
          <div className="w-50-l">
            <p className="t-heading-1">a competição de programação da VTEX</p>
            <p className="t-heading-3 normal">
              Teste suas habilidades junto com os melhores programadores do
              Brasil
            </p>
          </div>
          <div className="w-10 dn flex-l flex-column justify-around c-on-base">
            <div className="mv3">
              <a
                className="link c-on-base"
                href="https://twitter.com/vtexonline"
              >
                <FontAwesomeIcon icon={faTwitter} />
              </a>
            </div>
            <div className="mv3">
              <a
                className="link c-on-base"
                href="https://www.facebook.com/vtexonline/"
              >
                <FontAwesomeIcon icon={faFacebook} />
              </a>
            </div>
            <div className="mv3">
              <a
                className="link c-on-base"
                href="https://www.instagram.com/vtextruecloud/"
              >
                <FontAwesomeIcon icon={faInstagram} />
              </a>
            </div>
          </div>
        </div>
        <div className="flex flex-row-l flex-column items-center w-100 justify-around">
          <p className="self-end">08 DE JUNHO . FASE FINAL . BRASIL</p>
          <img
            src={ArrowsDown}
            className="h3 self-end-l"
            style={{ animation: 'bounce 3s infinite' }}
            alt=""
          />
          <div className="mt6">
            <Countdown date="June, 08, 2019, 15:00:00" />
          </div>
        </div>
      </div>
      <div className="bg-white flex flex-column dn-l justify-around">
        <div className="ph5">
          <p className="t-small">
            <strong>Primeira Fase Online</strong>
          </p>
          <p className="t-small c-muted-2">11 de maio de 2019</p>
        </div>
        <div className="ph5">
          <p className="t-small">
            <strong>Final presencial</strong>
          </p>
          <p className="t-small c-muted-2">08 de junho de 2019</p>
        </div>
        <div className="ph5">
          <p className="t-small">
            <strong>Rio de Janeiro . Brasil</strong>
          </p>
          <p className="t-small c-muted-2">codecup@vtex.com</p>
        </div>
      </div>
    </header>
  )
}

export default Header

```


[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 code-cup/react/components/Winners.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import First from '../images/Tiago1.jpg'
import Second from '../images/Artur2.jpg'
import Third from '../images/Gabriel3.jpg'
import Fourth from '../images/Cezar4.jpg'
import Fifth from '../images/Ivan5.jpg'
import Sixth from '../images/Misael6.jpg'
import Seventh from '../images/Lucas7.jpg'
import Eighth from '../images/Arthur8.png'
import Nineth from '../images/Luis9.jpg'
import Tenth from '../images/Lucas10.jpg'

const Winners = () => (
  <section id="about" className="bg-white w-90 w-75-l center pv9">
    <h1 className="c-emphasis t-heading-1">
      Selecionados para a final no Rio de Janeiro
    </h1>
    <div className="flex flex-wrap justify-around">
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={First} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">1º Lugar</p>
            <p className="t-body c-muted-2">Tiago Gonçalves</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Second} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">2º Lugar</p>
            <p className="t-body c-muted-2">Arthur Pratti Dadalto</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Third} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">3º Lugar</p>
            <p className="t-body c-muted-2">Gabriel Pessoa</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center justify-around link">
          <div className="mr7">
            <img src={Fourth} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">4º Lugar</p>
            <p className="t-body c-muted-2">
              Cezar Abadio Correia Guimarães Filho
            </p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Fifth} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">5º Lugar</p>
            <p className="t-body c-muted-2">Ivan Henrique Costa Petrin</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Sixth} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">6º Lugar</p>
            <p className="t-body c-muted-2">Misael Mateus Oliveira de Moraes</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Seventh} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">7º Lugar</p>
            <p className="t-body c-muted-2">Lucas Soares Ferreira</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Eighth} className="h4 w4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">8º Lugar</p>
            <p className="t-body c-muted-2">Artur Nascimento</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Nineth} className="h4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">9º Lugar</p>
            <p className="t-body c-muted-2">Luís Felipe Braga Gebrim Silva</p>
          </div>
        </div>
      </article>
      <article className="bg-muted-1 mv3 ph6 pv5 w-40-l w-90 br3">
        <div className="flex items-center link">
          <div className="mr7">
            <img src={Tenth} className="h4" />
          </div>
          <div>
            <p className="t-heading-4 c-muted-5 c-emphasis">10º Lugar</p>
            <p className="t-body c-muted-2">Lucas Turci</p>
          </div>
        </div>
      </article>
    </div>
    <h3 className="mt7 w-90 center">Esclarecimento VTEX Code Cup T-Shirt</h3>
    <p className="lh-copy w-90 center">
      <em>
        Você estará eleito a receber (1) t-shirt se pertencer aos 20% dos
        melhores colocados do ranking no Round 1”.
      </em>{' '}
      <strong>
        Considerando os melhores colocados os participantes que submeteram pelo
        menos uma vez.
      </strong>{' '}
      <br />
      Lista de competidores que ganharam camisetas da VTEX Code Cup está nesse
      link:{' '}
      <a href="https://drive.google.com/file/d/1DeNMqMH7teDBCnM4jVFGVgrFYhCZl0AL/view?usp=sharing">
        Camisetas VTEX Code Cup 2019
      </a>
      .<br />A produção do VTEX Code Cup irá entrar em contato e agendar a data
      de entrega das camisetas. <br />
      Confira o resultado completo em{' '}
      <a href="https://vtexcc19.kattis.com/">https://vtexcc19.kattis.com/</a>.
    </p>
    <p className="w-90 center">
      <em>
        Nota: O competidor Artur Vinicus Tomé Rodrigues não preencheu os
        pré-requisitos para a etapa presencial, seguindo o regulamento abriu-se
        uma vaga para o próximo competidor do ranking. Agradecemos a
        participação e fica a menção honrosa pelo belo espírito competitivo!
      </em>
    </p>
    <h3 className="mt7 w-90 center">Edital</h3>
    <p className="w-90 center">
      O link a seguir possui um edital descrevendo a solução de todos os
      problemas da primeira fase:{' '}
      <a href="https://docs.google.com/document/d/14UlgDhjDOtvcRakR0fkxX-KhCzco5FzIsuypgZKz63c/edit?usp=sharing">
        Edital VTEX Code Cup Primeira Fase
      </a>
    </p>
  </section>
)

export default Winners

```


[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 code-cup/react/components/FAQ.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

import UpArrow from '../images/setas_up@2x.png'
import QuestionCard from './QuestionCard'

import { questions } from './FAQData'

const FAQ: FunctionComponent = () => (
  <section id="faq" className="pt7 pb8 flex flex-column items-center">
    <div className="w-90 ml-auto-l mr0-l center">
      <h1 className="c-emphasis t-heading-1">regras e faq ::</h1>
      <p className="w-90">
        Para saber mais sobre o VTEX Code Cup, confira as{' '}
        <a className="link" href="/rules">
          Regras da Competição
        </a>{' '}
        e as dúvidas frequentes antes de iniciar sua inscrição.
      </p>
      <div className="flex flex-column items-center">
        {questions.map(q => (
          <QuestionCard question={q.question} ans={q.ans} key={q.question} />
        ))}
      </div>
    </div>
    <div className="flex items-center mt7">
      <img
        src={UpArrow}
        className="w-30"
        style={{ animation: 'bounce 3s infinite' }}
        alt=""
      />
    </div>
  </section>
)

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 code-cup/react/components/About.tsx from the code-cup VTEX app.

[Assistant]
Here's the implementation:

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

import TrophyIcon from '../images/icone_trofeu@2x.png'
import Logo from '../images/logo_codecup_02@2x.png'

const About: FunctionComponent = () => (
  <section id="about" className="bg-white flex w-90 w-100-l center pv9">
    <div
      className="flex-l justify-center dn"
      style={{ writingMode: 'vertical-lr', transform: 'rotate(-180deg)' }}
    >
      <p className="ph5">V T E X :: C O D E C U P</p>
    </div>
    <div className="flex flex-column flex-row-l ml8-l justify-around flex-grow-1">
      <div className="w-40-l pt6">
        <h1 className="t-heading-1" style={{ fontSize: '5rem' }}>
          o que é?
        </h1>
        <p className="lh-copy mv7">
          É a competição de programação da VTEX em que programadores de todos os
          níveis testam suas habilidades. A competição reúne programadores de
          todo o Brasil em somente duas etapas, online e a final presencial no
          Rio de Janeiro!
        </p>
        <img src={Logo} className="w-50-l w-60 mt7 mb8" alt="VTEX Code Cup" />
        <p className="c-emphasis t-heading-1">
          Inscreva-se e teste seus limites.
        </p>
        <p className="c-emphasis t-heading-3">INSCRIÇÕES ENCERRADAS</p>
      </div>
      <div className="bg-emphasis w-40-l br3 pv7 ph3 flex flex-column items-center justify-around">
        <p className="t-heading-1 c-on-muted-1 w-75 center">
          Prêmio final: viagem à Rússia para acompanhar a final da ICPC*
        </p>
        <img src={TrophyIcon} className="w-40 center mv6" alt="" />
        <a className="link" href="https://vtexcc19.kattis.com/">
          <button className="c-on-base--inverted br-pill mt6 mb3 bg-base--inverted ph9 b--none pointer">
            <p className="t-heading-4">Participar</p>
          </button>
        </a>
        <p className="t-mini w-75 c-on-base--inverted">
          * Caso a organização do ACM-ICPC não autorize acompanhar a final da
          ICPC ou o vencedor já esteja classificado para a final do ICPC em
          2020, poderá solicitar a troca do prêmio por uma participação no
          Moscow Pre-Finals Workshop ICPC 2020.
        </p>
      </div>
    </div>
  </section>
)

export default About

```


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

[Assistant]
Here's the implementation:

```json
{
  "product-description.title": "Descripción del Producto",
  "product-description.property": "Propiedad",
  "product-description.specification": "Especificación",
  "collapse.showMore": "Ver más",
  "collapse.showLess": "Volver",
  "pricing.installment-display": "O {installments} {times} de {installmentPrice}",
  "pricing.from": "De",
  "pricing.to": "Por",
  "pricing.savings": "Ahorre {savings}",
  "pricing.interest-free": "sin interés",
  "pricing.startingAtLabel": "A partir de",
  "pricing.unavailable": "Indisponible",
  "technicalspecifications.title": "Especificaciones Tecnicas",
  "sku-selector.select-warning": "Selecciona"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "product-description.title": "خصائص المنتج",
  "product-description.property": "المؤسسة",
  "product-description.specification": "المواصفات",
  "collapse.showMore": "اعرض المزيد",
  "collapse.showLess": "اعرض أقل",
  "pricing.installment-display": "أو {installments} {times} من {installmentPrice}",
  "pricing.from": "من",
  "pricing.to": "إلى",
  "pricing.savings": "توفير {savings}",
  "pricing.interest-free": "بدون فوائد",
  "pricing.startingAtLabel": "بداية من",
  "pricing.unavailable": "غير متاح",
  "technicalspecifications.title": "المواصفات الفنية",
  "sku-selector.select-warning": "اختر"
}

```


[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 butik/messages/pt-BR.json from the butik VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-description.title": "Descrição do Produto",
  "product-description.property": "Propriedade",
  "product-description.specification": "Especificação",
  "collapse.showMore": "Ver mais",
  "collapse.showLess": "Ver menos",
  "pricing.installment-display": "Ou {installments} {times} de {installmentPrice}",
  "pricing.from": "De",
  "pricing.to": "Por",
  "pricing.savings": "Economize {savings}",
  "pricing.interest-free": "sem juros",
  "pricing.startingAtLabel": "A partir de",
  "pricing.unavailable": "Indisponível",
  "technicalspecifications.title": "Especificações Técnicas",
  "sku-selector.select-warning": "Selecione"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "product-description.title": "Product Description",
  "product-description.property": "Property",
  "product-description.specification": "Specification",
  "collapse.showMore": "Show more",
  "collapse.showLess": "Show less",
  "pricing.installment-display": "Or {installments} {times} of {installmentPrice}",
  "pricing.from": "From",
  "pricing.to": "To",
  "pricing.savings": "Save {savings}",
  "pricing.interest-free": "interest-free",
  "pricing.startingAtLabel": "Starting at",
  "pricing.unavailable": "Unavailable",
  "technicalspecifications.title": "Technical Specifications",
  "sku-selector.select-warning": "Select"
}

```


[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 butik/tests/index-test.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import expect from 'expect'
import React from 'react'
import {render, unmountComponentAtNode} from 'react-dom'

import Component from 'react/'

describe('Component', () => {
  let node

  beforeEach(() => {
    node = document.createElement('div')
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('displays a welcome message', () => {
    render(<Component/>, node, () => {
      expect(node.innerHTML).toContain('Welcome to React components2')
    })
  })
})

```


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

[Assistant]
Here's the implementation:

```markdown
# Butik

> VTEX Butik React components ([Docs](https://butik.vtex.com))

- [Usage](#usage)
  - [Installing](#installing)
  - [Import intl translations](#import-intl-translations)
- [Docz](#docz)
  - [Running local docz page](#running-local-docz-page)

## Usage

For instructions on how to use Butik components in your project refer to the page itself: https://butik.vtex.com.

### Installing

npm
```sh
npm install @vtex/butik
```

VTEX IO
```sh
vtex install vtex.butik
```

### Import intl translations
Import translation files like above and add them to your react-intl
```javascript
import ptMessages from '@vtex/butik/messages/pt-BR.json'
import enMessages from '@vtex/butik/messages/en-US.json'
import esMessages from '@vtex/butik/messages/es-AR.json'
```

## Docz

### Running local docz page
```sh
npm start
```

```


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

[User] Show me the implementation of butik/react/ImageResizer.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ImageResizer from './components/ImageResizer'

export default ImageResizer

```


[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 butik/react/ProductName.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ProductName from './components/ProductName'

export default ProductName

```


[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 butik/react/BlurredLoader.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import BlurredLoader from './components/BlurredLoader'

export default BlurredLoader

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.butik",
  "dependencies": {
    "@material-ui/core": "^3.6.2",
    "@vtex/styleguide": "^9.72.4",
    "classnames": "^2.2.6",
    "debounce": "^1.2.0",
    "lodash": "^4.17.11",
    "object-hash": "^1.3.1",
    "ramda": "^0.26.1",
    "react-content-loader": "^3.4.1",
    "react-html-parser": "^2.0.2",
    "react-id-swiper": "^1.6.8",
    "react-intl": "^2.7.2",
    "react-transition-group": "^2.5.1",
    "vtex-tachyons": "^2.10.0",
    "xstate": "^4.2.2"
  },
  "version": "1.4.0"
}

```


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

[User] Show me the implementation of butik/react/GradientCollapse.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import GradientCollapse from './components/GradientCollapse'

export default GradientCollapse

```


[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 butik/react/SKUSelector.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import SKUSelector from './components/SKUSelector'

export default SKUSelector

```


[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 butik/react/Video.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Video from './components/Video'

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 butik/react/FixedButton.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import FixedButton from './components/FixedButton'

export default FixedButton

```


[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 butik/react/Carousel.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Carousel from './components/Carousel'

export default Carousel

```


[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 butik/react/ProductDescription.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ProductDescription from './components/ProductDescription'

export default ProductDescription

```


[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 butik/react/ProductPrice.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ProductPrice from './components/ProductPrice'

export default ProductPrice

```


[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 butik/es/SKUSelector/index.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import VariationSelector from './components/VariationSelector';
import { Machine } from 'xstate';
import { interpret } from 'xstate/lib/interpreter';
import hash from 'object-hash';
import './global.css';

/**
 * Display a list of SKU items of a product and its specifications.
 */

var SKUSelector = function (_PureComponent) {
  _inherits(SKUSelector, _PureComponent);

  function SKUSelector(props) {
    _classCallCheck(this, SKUSelector);

    var _this = _possibleConstructorReturn(this, _PureComponent.call(this, props));

    _this.getDifferentVariation = function (stateA, stateB) {
      var counter = 0;
      var differentVariation = null;

      Object.keys(stateA).forEach(function (variation) {
        if (stateA[variation] !== stateB[variation]) {
          counter++;
          differentVariation = variation;
        }
      });

      if (counter === 1) return differentVariation;
    };

    _this.createStateMachine = function (skus, visualVariations, standardVariations) {
      var stateMachine = _this.stateMachine;

      stateMachine.id = 'SKUSelector';
      stateMachine.states = {};
      stateMachine.initial = null;
      stateMachine.transitions = {};

      var states = stateMachine.states,
          transitions = stateMachine.transitions;

      skus.forEach(function (sku) {
        /** Creates all possible states without selecting some standardVariations **/
        var bitMaskLimit = 1 << standardVariations.length;

        var _loop = function _loop(bitMask) {
          var state = { variations: {} };

          visualVariations.forEach(function (variation) {
            return state.variations[variation] = sku[variation];
          });

          standardVariations.forEach(function (variation, variationIndex) {
            if (1 << variationIndex & bitMask) state.variations[variation] = sku[variation];else state.variations[variation] = null;
          });

          if (bitMask === 0 && !stateMachine.initial) stateMachine.initial = hash(state.variations);

          var stateKey = hash(state.variations);
          if (states[stateKey]) return 'continue';

          states[stateKey] = state;
          states[stateKey].sku = sku.skuId;
        };

        for (var bitMask = 0; bitMask < bitMaskLimit; bitMask++) {
          var _ret = _loop(bitMask);

          if (_ret === 'continue') continue;
        }
      });

      /** Creates a transition from A to B if there is only one different variation **/
      Object.keys(states).forEach(function (keyA) {
        states[keyA].on = {};

        Object.keys(states).forEach(function (keyB) {
          var stateA = states[keyA].variations;
          var stateB = states[keyB].variations;

          var differentVariation = _this.getDifferentVariation(stateA, stateB);
          if (!differentVariation) return;

          var action = {
            variation: differentVariation,
            label: stateB[differentVariation]
          };

          var actionHash = hash(action);
          transitions[actionHash] = action;
          states[keyA].on[actionHash] = keyB;
        });
      });

      return Machine(stateMachine);
    };

    _this.onSelectItem = function (actionHash) {
      return function () {
        _this.stateMachine.interpret.send(actionHash);
      };
    };

    _this.state = {};
    _this.visualVariations = [];
    _this.standardVariations = [];
    _this.stateMachine = {};
    _this.variationsOptions = {};
    return _this;
  }

  SKUSelector.prototype.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _props = this.props,
        skus = _props.skus,
        variations = _props.variations;

    variations.forEach(function (variation) {
      /** Separate all variations into visualVariations and standardVariations based on thumbSrc value */
      if (variation.thumbSrc) _this2.visualVariations.push(variation.name);else _this2.standardVariations.push(variation.name);

      /** Fills variationsOptions with all possible variationOptions */
      _this2.variationsOptions[variation.name] = {};
      skus.forEach(function (sku) {
        _this2.variationsOptions[variation.name][sku[variation.name]] = true;
      });
    });

    this.stateMachine.interpret = interpret(this.createStateMachine(skus, this.visualVariations, this.standardVariations));

    this.setState({ stateMachineStateHash: this.stateMachine.initial });
    this.stateMachine.interpret.onTransition(function (state) {
      return _this2.setState({ stateMachineStateHash: state.value });
    }).start();
  };

  /** Returns the variation that has a different label if there is exactly one different variation
   * or undefined otherwise
   * */

  /** Creates a state machine whose state is based on the selected variations **/

  SKUSelector.prototype.render = function render() {
    var _this3 = this;

    var visualVariations = this.visualVariations,
        standardVariations = this.standardVariations;

    var variations = visualVariations.concat(standardVariations);

    var stateMachineStateHash = this.state.stateMachineStateHash;

    if (!stateMachineStateHash) return React.createElement('div', null);

    var stateMachineState = this.stateMachine.states[stateMachineStateHash];

    var transitions = stateMachineState.on;
    var selectedVariations = stateMachineState.variations;

    return React.createElement(
      React.Fragment,
      null,
      variations.map(function (variation, variationIndex) {
        var selectedItem = selectedVariations[variation];

        var items = Object.keys(_this3.variationsOptions[variation]).reduce(function (accumulator, label) {
          var actionHash = hash({
            variation: variation,
            label: label === selectedItem ? null : label
          });

          if (transitions[actionHash] || label === selectedVariations[variation]) accumulator.push({
            label: label,
            available: true,
            thumbSrc: null,
            onSelectItem: _this3.onSelectItem(actionHash)
          });
          return accumulator;
        }, []);

        return React.createElement(VariationSelector, {
          key: variationIndex,
          variation: {
            name: variation,
            items: items
          },
          selectedItem: selectedItem
        });
      })
    );
  };

  return SKUSelector;
}(PureComponent);

// UP => selected SKU, isSkuFullySelected

SKUSelector.propTypes = process.env.NODE_ENV !== "production" ? {
  variations: PropTypes.arrayOf(PropTypes.shape({
    /** Variation name, the same used as key in 'skus' */
    name: PropTypes.string
  })),
  /** Can just pass vtex product.items */
  skus: PropTypes.arrayOf(PropTypes.shape({
    /** Value that will be returned as identifier when selected */
    skuId: PropTypes.any
    /** Also has the values for each variation as variationName: label */
  })),
  handleSKUSelect: PropTypes.func
} : {};
export default SKUSelector;
```


[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 butik/es/SKUSelector/utils/index.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { clone } from 'ramda';

/**
 * Return the maximum sku price
 * @param {array of sku's} items
 */
export var getMaxSkuPrice = function getMaxSkuPrice(items) {
  if (!items) return 0;

  return items.reduce(function (max, sku) {
    var _sku$sellers = sku.sellers,
        Price = _sku$sellers[0].commertialOffer.Price;

    return Math.max(max, Price);
  });
};

/**
 * Remove the 'https' from the given url
 * @param {string} url
 */
export var stripUrl = function stripUrl(url) {
  return url.replace(/^https?:/, '');
};

/**
 * Parse the variations field in the sku object
 * @param {sku} sku
 */
export var parseSku = function parseSku(sku) {
  var result = clone(sku);

  var variations = sku.variations.map(function (variation) {
    result[variation.name] = variation.values[0];
    return variation.name;
  });

  result.variations = variations;

  return result;
};

/**
 * Retrieves a list of unique options of a given variation
 * @param {string} variation
 * @param {skus} skus
 */
export var getVariationOptions = function getVariationOptions(variation, skus) {
  var hTable = {};

  skus.map(function (sku) {
    var value = sku[variation];
    hTable[value] = sku;
  });

  return Object.values(hTable).sort(function (a, b) {
    if (a[variation] < b[variation]) return -1;
    if (a[variation] > b[variation]) return 1;
    return 0;
  });
};

/**
 * Verifies if the variation is color
 * @param {string} variation
 */
export var isColor = function isColor(variation) {
  if (!variation) return false;

  return variation.toLowerCase() === 'cor' || variation.toLowerCase() === 'color';
};

/**
 * Choose wich variation will be the main one.
 * @param {Array[string]} variations
 */
export var getMainVariationName = function getMainVariationName(variations) {
  for (var i = 0; i < variations.length; i++) {
    if (isColor(variations[i])) return variations[i];
  }

  return variations[0];
};
```


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

[User] Show me the implementation of butik/es/SKUSelector/utils/proptypes.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types';

var skuPropType = PropTypes.shape({
  /** Name of the SKU Item */
  name: PropTypes.string.isRequired,
  /** Images of the SKU item */
  images: PropTypes.arrayOf(PropTypes.shape({
    /** URL of source Image */
    imageUrl: PropTypes.string.isRequired,
    /** Brief description of the image */
    imageLabel: PropTypes.string
  })).isRequired,
  /** SkuID */
  itemId: PropTypes.string.isRequired,
  /** List of products specifications names */
  variations: PropTypes.arrayOf(PropTypes.string)
});

export var SKUSelectorContainerPropTypes = {
  /** Product's slug */
  productSlug: PropTypes.string,
  /** SKU selected */
  skuSelected: skuPropType.isRequired,
  /** List of SKU Items */
  skuItems: PropTypes.arrayOf(skuPropType).isRequired,
  /** Callback that is called when an SKU is selected */
  onSKUSelected: PropTypes.func
};

var variationPropTypes = PropTypes.shape({
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
  options: PropTypes.arrayOf(skuPropType)
});

export var SKUSelectorPropTypes = {
  /** Selected SKU id */
  selectedId: PropTypes.string.isRequired,
  /** Function to go to the product page of a given sku */
  onSelectSku: PropTypes.func.isRequired,
  /** Name and list of options of the main variation */
  mainVariation: variationPropTypes,
  /** Name and list of options of the secondary variation */
  secondaryVariation: variationPropTypes,
  /** Max price find on the sku list */
  maxSkuPrice: PropTypes.number.isRequired
};
```


[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 butik/es/SKUSelector/components/VariationSelector.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import ItemSelector from './ItemSelector';

var VariationSelector = function (_React$PureComponent) {
  _inherits(VariationSelector, _React$PureComponent);

  function VariationSelector() {
    _classCallCheck(this, VariationSelector);

    return _possibleConstructorReturn(this, _React$PureComponent.apply(this, arguments));
  }

  VariationSelector.prototype.render = function render() {
    var _props = this.props,
        variation = _props.variation,
        selectedItem = _props.selectedItem;

    return React.createElement(
      'div',
      { className: 'vtex-sku-selector__container flex flex-column mb7' },
      React.createElement(
        'div',
        { className: 'vtex-sku-selector__name-container ma1' },
        React.createElement(
          'span',
          { className: 'vtex-sku-selector__name c-muted-2 db t-small overflow-hidden mb3' },
          variation.name
        ),
        React.createElement(
          'div',
          { className: 'inline-flex flex-wrap ml2' },
          variation.items.map(function (item, i) {
            return React.createElement(ItemSelector, {
              selected: selectedItem === item.label,
              key: i,
              handleSelect: item.onSelectItem,
              label: item.label,
              thumbSrc: item.thumbSrc,
              isAvailable: item.available,
              variation: variation.name
            });
          })
        )
      )
    );
  };

  return VariationSelector;
}(React.PureComponent);

VariationSelector.propTypes = process.env.NODE_ENV !== "production" ? {
  variation: PropTypes.shape({
    name: PropTypes.string.isRequired,
    items: PropTypes.arrayOf(PropTypes.shape({
      label: PropTypes.string.isRequired,
      available: PropTypes.bool.isRequired,
      thumbSrc: PropTypes.string,
      onSelectItem: PropTypes.func.isRequired
    })).isRequired
  }).isRequired,
  /** It's either null when no item is selected or the selected item index */
  selectedItem: PropTypes.string
} : {};

export default VariationSelector;
```


[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 butik/es/SKUSelector/components/ItemSelector.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './global.css';

function ItemSelector(props) {
  var selected = props.selected,
      handleSelect = props.handleSelect,
      isAvailable = props.isAvailable,
      thumbSrc = props.thumbSrc,
      label = props.label,
      variation = props.variation;

  return React.createElement(
    'div',
    {
      className: classNames('vtex-sku-selector__item relative di pointer flex items-center', thumbSrc && 'vtex-sku-selector__item-image'),
      onClick: handleSelect },
    React.createElement('div', {
      className: classNames('absolute frame-around b--action-primary br3 bw1', selected && 'ba')
    }),
    React.createElement(
      'div',
      {
        className: classNames('w-100 h-100 ba br2 b b--muted-4 z-1 c-muted-5 flex items-center overflow-hidden', selected || 'hover-b--muted-2') },
      React.createElement('div', {
        className: classNames('absolute absolute--fill', isAvailable || 'diagonal-cross')
      }),
      React.createElement(
        'div',
        { className: classNames(thumbSrc || 'c-on-base center pl5 pr5 z-1') },
        thumbSrc ? React.createElement('img', { src: thumbSrc, alt: label }) : label
      )
    )
  );
}

ItemSelector.propTypes = process.env.NODE_ENV !== "production" ? {
  label: PropTypes.string,
  selected: PropTypes.bool,
  handleSelect: PropTypes.func,
  thumbSrc: PropTypes.string,
  isAvailable: PropTypes.bool,
  variation: PropTypes.string
} : {};
export default ItemSelector;
```


[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 butik/es/SKUSelector/components2/SelectorItem.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { FormattedNumber } from 'react-intl';
import classNames from 'classnames';

/**
 * Inherits the components2 that should be displayed inside the Selector component.
 */

var SelectorItem = function (_PureComponent) {
  _inherits(SelectorItem, _PureComponent);

  function SelectorItem() {
    _classCallCheck(this, SelectorItem);

    return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
  }

  SelectorItem.prototype.render = function render() {
    var _props = this.props,
        isAvailable = _props.isAvailable,
        isSelected = _props.isSelected,
        children = _props.children,
        maxPrice = _props.maxPrice,
        price = _props.price,
        onClick = _props.onClick,
        isImage = _props.isImage;

    var discount = getDiscount(maxPrice, price);

    return React.createElement(
      'div',
      {
        className: classNames('vtex-sku-selector__item relative di pointer flex items-center', isImage && 'vtex-sku-selector__item-image'),
        onClick: onClick },
      React.createElement('div', {
        className: classNames('absolute frame-around b--action-primary br3 bw1', isSelected && 'ba')
      }),
      React.createElement(
        'div',
        {
          className: classNames('w-100 h-100 ba br2 b b--muted-4 z-1 c-muted-5 flex items-center overflow-hidden', isSelected || 'hover-b--muted-2') },
        React.createElement('div', {
          className: classNames('absolute absolute--fill', isAvailable || 'diagonal-cross')
        }),
        React.createElement(
          'div',
          {
            className: classNames(isImage || 'c-on-base center pl5 pr5 z-1') },
          children
        )
      ),
      discount > 0 && React.createElement(
        'span',
        { className: 'vtex-sku-selector__bagde b' },
        React.createElement(FormattedNumber, { value: discount, style: 'percent' })
      )
    );
  };

  return SelectorItem;
}(PureComponent);

export { SelectorItem as default };

SelectorItem.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Index of the item into the selector parent component starting from 0 */
  index: PropTypes.number,
  /** Children components2 */
  children: PropTypes.node,
  /** Function that is called when the item is clicked */
  onClick: PropTypes.func,
  /** Flag that indicates if the sku is available */
  isAvailable: PropTypes.bool,
  /** Flag that indicates if the current item is selected */
  isSelected: PropTypes.bool,
  /** Max sku price */
  maxPrice: PropTypes.number,
  /** Price of the current sku */
  price: PropTypes.number,
  /** SKU's ID */
  skuId: PropTypes.string,
  /** True if it's an image variation */
  isImage: PropTypes.bool
} : {};

SelectorItem.defaultProps = {
  index: 0,
  children: {},
  isAvailable: true,
  isSelected: false
};

var getDiscount = function getDiscount(maxPrice, price) {
  var discount = 0;
  if (maxPrice && price) {
    discount = 1 - price / maxPrice;
  }
  return discount;
};
```


[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 butik/es/SKUSelector/components2/index.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import { withRuntimeContext } from 'render';

import SKUSelector from './SKUSelector';
import { SKUSelectorContainerPropTypes } from '../utils/proptypes';
import { getMainVariationName, getVariationOptions, getMaxSkuPrice, parseSku } from '../utils/index';

import './global.css';

/**
 * Display a list of SKU items of a product and its specifications.
 */

var SKUSelectorContainer = function (_Component) {
  _inherits(SKUSelectorContainer, _Component);

  function SKUSelectorContainer() {
    var _temp, _this, _ret;

    _classCallCheck(this, SKUSelectorContainer);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleSkuSelection = function (skuId) {
      _this.props.onSKUSelected ? _this.props.onSKUSelected(skuId) : _this.redirectToSku(skuId);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  SKUSelectorContainer.prototype.redirectToSku = function redirectToSku(skuId) {
    var navigate = this.props.runtime.navigate;

    var slug = this.props.productSlug;

    navigate({
      page: 'store/product',
      params: { slug: slug },
      query: 'skuId=' + skuId
    });
  };

  SKUSelectorContainer.prototype.render = function render() {
    if (!this.props.skuSelected || !this.props.skuSelected.variations || this.props.skuSelected.variations.length === 0) return null;

    var skuSelected = this.props.skuSelected && parseSku(this.props.skuSelected);
    var skuItems = this.props.skuItems && this.props.skuItems.map(function (sku) {
      return parseSku(sku);
    });
    var itemId = skuSelected.itemId;
    var variations = skuSelected.variations;

    var name = getMainVariationName(variations);
    var mainVariation = {
      name: name,
      value: skuSelected[name],
      options: getVariationOptions(name, skuItems)
    };

    var maxSkuPrice = getMaxSkuPrice(skuItems);
    var secondaryVariation = {};

    var filteredSkus = skuItems.filter(function (sku) {
      return sku[name] === mainVariation.value;
    });

    if (variations.length > 1) {
      secondaryVariation.name = variations.filter(function (variation) {
        return variation !== name;
      })[0];
      secondaryVariation.options = getVariationOptions(secondaryVariation.name, filteredSkus);
    }

    return React.createElement(SKUSelector, {
      mainVariation: mainVariation,
      secondaryVariation: secondaryVariation,
      onSelectSku: this.handleSkuSelection,
      maxSkuPrice: maxSkuPrice,
      selectedId: itemId
    });
  };

  return SKUSelectorContainer;
}(Component);

SKUSelectorContainer.propTypes = process.env.NODE_ENV !== "production" ? SKUSelectorContainerPropTypes : {};

export default withRuntimeContext(SKUSelectorContainer);
```


[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 butik/es/SKUSelector/components2/SKUSelector.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';

import Variation from './Variation';
import { SKUSelectorPropTypes } from '../utils/proptypes';

/** Renders the main and the secondary variation, if it exists. */

var SKUSelector = function (_Component) {
  _inherits(SKUSelector, _Component);

  function SKUSelector() {
    _classCallCheck(this, SKUSelector);

    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
  }

  SKUSelector.prototype.render = function render() {
    var _props = this.props,
        selectedId = _props.selectedId,
        onSelectSku = _props.onSelectSku,
        mainVariation = _props.mainVariation,
        secondaryVariation = _props.secondaryVariation,
        maxSkuPrice = _props.maxSkuPrice;

    return React.createElement(
      'div',
      { className: 'vtex-sku-selector' },
      React.createElement(Variation, {
        variation: mainVariation,
        onSelectItem: onSelectSku,
        isSelected: function isSelected(sku) {
          return sku[mainVariation.name] === mainVariation.value;
        },
        maxSkuPrice: maxSkuPrice
      }),
      secondaryVariation.name && React.createElement(Variation, {
        variation: secondaryVariation,
        onSelectItem: onSelectSku,
        isSelected: function isSelected(sku) {
          return sku.itemId === selectedId;
        },
        maxSkuPrice: maxSkuPrice
      })
    );
  };

  return SKUSelector;
}(Component);

export { SKUSelector as default };

SKUSelector.propTypes = process.env.NODE_ENV !== "production" ? SKUSelectorPropTypes : {};
```


[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 butik/es/SKUSelector/components2/Variation.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';

import SelectorItem from './SelectorItem';
import { stripUrl, isColor } from '../utils';

var Variation = function (_Component) {
  _inherits(Variation, _Component);

  function Variation() {
    _classCallCheck(this, Variation);

    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
  }

  Variation.prototype.render = function render() {
    var _props = this.props,
        variation = _props.variation,
        onSelectItem = _props.onSelectItem,
        maxSkuPrice = _props.maxSkuPrice,
        isSelected = _props.isSelected;

    var displayImage = isColor(variation.name);

    return React.createElement(
      'div',
      { className: 'vtex-sku-selector__container flex flex-column mb7' },
      React.createElement(
        'div',
        { className: 'vtex-sku-selector__name-container ma1' },
        React.createElement(
          'span',
          { className: 'vtex-sku-selector__name c-muted-2 db t-small overflow-hidden mb3' },
          variation.name
        ),
        React.createElement(
          'div',
          { className: 'inline-flex flex-wrap ml2' },
          variation.options.map(function (skuItem) {
            if (!skuItem.images.length) return null;
            var _skuItem$images = skuItem.images,
                skuImage = _skuItem$images[0];
            var _skuItem$sellers = skuItem.sellers,
                seller = _skuItem$sellers[0];

            return React.createElement(
              SelectorItem,
              {
                isSelected: isSelected(skuItem),
                key: skuItem.itemId,
                isAvailable: seller.commertialOffer.AvailableQuantity > 0,
                maxPrice: maxSkuPrice,
                skuId: skuItem.itemId,
                price: seller.commertialOffer.Price,
                onClick: function onClick() {
                  return onSelectItem(skuItem.itemId);
                },
                isImage: displayImage },
              displayImage ? React.createElement('img', {
                src: stripUrl(skuImage.imageUrl),
                alt: skuImage.imageLabel
              }) : React.createElement(
                'span',
                { className: 'c-on-base t-body' },
                skuItem[variation.name]
              )
            );
          })
        )
      )
    );
  };

  return Variation;
}(Component);

export { Variation as default };
```


[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 butik/react/components/index.js from the butik VTEX app.

[Assistant]
Here's the implementation:

```javascript
import BlurredLoader from './BlurredLoader'
import Carousel from './Carousel'
import GradientCollapse from './GradientCollapse'
import ImageResizer from './ImageResizer'
import ProductDescription from './ProductDescription'
import ProductName from './ProductName'
import ProductPrice from './ProductPrice'
import SKUSelector from './SKUSelector'
import Video from './Video'
import FixedButton from './FixedButton'

export {
  BlurredLoader,
  Carousel,
  GradientCollapse,
  ImageResizer,
  ProductDescription,
  ProductName,
  ProductPrice,
  SKUSelector,
  Video,
  FixedButton,
}

```