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

[User] Show me the implementation of collections/react/components/DatePicker/react-dates.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
.PresetDateRangePicker_panel {
  padding: 0 22px 11px
}
.PresetDateRangePicker_button {
  position: relative;
  height: 100%;
  text-align: center;
  background: 0 0;
  border: 2px solid #00a699;
  color: #00a699;
  padding: 4px 12px;
  margin-right: 8px;
  font: inherit;
  font-weight: 700;
  line-height: normal;
  overflow: visible;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer
}
.PresetDateRangePicker_button:active {
  outline: 0
}
.PresetDateRangePicker_button__selected {
  color: #fff;
  background: #00a699
}
.SingleDatePickerInput {
  display: inline-block;
  background-color: #fff
}
.SingleDatePickerInput__withBorder {
  border: 1px solid #dbdbdb
}
.SingleDatePickerInput__rtl {
  direction: rtl
}
.SingleDatePickerInput__disabled {
  background-color: #f2f2f2
}
.SingleDatePickerInput__block {
  display: block
}
.SingleDatePickerInput__showClearDate {
  padding-right: 30px
}
.SingleDatePickerInput_clearDate {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
.SingleDatePickerInput_clearDate__default:focus,
.SingleDatePickerInput_clearDate__default:hover {
  background: #dbdbdb;
  border-radius: 50%
}
.SingleDatePickerInput_clearDate__small {
  padding: 6px
}
.SingleDatePickerInput_clearDate__hide {
  visibility: hidden
}
.SingleDatePickerInput_clearDate_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle
}
.SingleDatePickerInput_clearDate_svg__small {
  height: 9px
}
.SingleDatePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px
}
.SingleDatePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle
}
.SingleDatePicker {
  position: relative;
  display: inline-block
}
.SingleDatePicker__block {
  display: block
}
.SingleDatePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute
}
.SingleDatePicker_picker__rtl {
  direction: rtl
}
.SingleDatePicker_picker__directionLeft {
  left: 0
}
.SingleDatePicker_picker__directionRight {
  right: 0
}
.SingleDatePicker_picker__portal {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.SingleDatePicker_picker__fullScreenPortal {
  background-color: #fff
}
.SingleDatePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2
}
.SingleDatePicker_closeButton:focus,
.SingleDatePicker_closeButton:hover {
  color: darken(#cacccd,10%);
  text-decoration: none
}
.SingleDatePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
.DayPickerKeyboardShortcuts_buttonReset {
  background: 0 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  cursor: pointer;
  font-size: 14px
}
.DayPickerKeyboardShortcuts_buttonReset:active {
  outline: 0
}
.DayPickerKeyboardShortcuts_show {
  width: 22px;
  position: absolute;
  z-index: 2
}
.DayPickerKeyboardShortcuts_show__bottomRight {
  border-top: 26px solid transparent;
  border-right: 33px solid #00a699;
  bottom: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover {
  border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_show__topRight {
  border-bottom: 26px solid transparent;
  border-right: 33px solid #00a699;
  top: 0;
  right: 0
}
.DayPickerKeyboardShortcuts_show__topRight:hover {
  border-right: 33px solid #008489
}
.DayPickerKeyboardShortcuts_show__topLeft {
  border-bottom: 26px solid transparent;
  border-left: 33px solid #00a699;
  top: 0;
  left: 0
}
.DayPickerKeyboardShortcuts_show__topLeft:hover {
  border-left: 33px solid #008489
}
.DayPickerKeyboardShortcuts_showSpan {
  color: #fff;
  position: absolute
}
.DayPickerKeyboardShortcuts_showSpan__bottomRight {
  bottom: 0;
  right: -28px
}
.DayPickerKeyboardShortcuts_showSpan__topRight {
  top: 1px;
  right: -28px
}
.DayPickerKeyboardShortcuts_showSpan__topLeft {
  top: 1px;
  left: -28px
}
.DayPickerKeyboardShortcuts_panel {
  overflow: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  padding: 22px;
  margin: 33px
}
.DayPickerKeyboardShortcuts_title {
  font-size: 16px;
  font-weight: 700;
  margin: 0
}
.DayPickerKeyboardShortcuts_list {
  list-style: none;
  padding: 0;
  font-size: 14px
}
.DayPickerKeyboardShortcuts_close {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 2
}
.DayPickerKeyboardShortcuts_close:active {
  outline: 0
}
.DayPickerKeyboardShortcuts_closeSvg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}
.DayPickerKeyboardShortcuts_closeSvg:focus,
.DayPickerKeyboardShortcuts_closeSvg:hover {
  fill: #82888a
}
.CalendarDay {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  text-align: center
}
.CalendarDay:active {
  outline: 0
}
.CalendarDay__defaultCursor {
  cursor: default
}
.CalendarDay__default {
  border: 1px solid #e4e7e7;
  color: #565a5c;
  background: #fff
}
.CalendarDay__default:hover {
  background: #e4e7e7;
  border: 1px double #e4e7e7;
  color: inherit
}
.CalendarDay__hovered_offset {
  background: #f4f5f5;
  border: 1px double #e4e7e7;
  color: inherit
}
.CalendarDay__outside {
  border: 0;
  background: #fff;
  color: #565a5c
}
.CalendarDay__blocked_minimum_nights {
  background: #fff;
  border: 1px solid #eceeee;
  color: #cacccd
}
.CalendarDay__blocked_minimum_nights:active,
.CalendarDay__blocked_minimum_nights:hover {
  background: #fff;
  color: #cacccd
}
.CalendarDay__highlighted_calendar {
  background: #ffe8bc;
  color: #565a5c
}
.CalendarDay__highlighted_calendar:active,
.CalendarDay__highlighted_calendar:hover {
  background: #ffce71;
  color: #565a5c
}
.CalendarDay__selected_span {
  background: #66e2da;
  border: 1px solid #33dacd;
  color: #fff
}
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
  background: #33dacd;
  border: 1px solid #33dacd;
  color: #fff
}
.CalendarDay__last_in_range {
  border-right: #00a699
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: #00a699;
  border: 1px solid #00a699;
  color: #fff
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #b2f1ec;
  border: 1px solid #80e8e0;
  color: #007a87
}
.CalendarDay__hovered_span:active {
  background: #80e8e0;
  border: 1px solid #80e8e0;
  color: #007a87
}
.CalendarDay__blocked_calendar,
.CalendarDay__blocked_calendar:active,
.CalendarDay__blocked_calendar:hover {
  background: #cacccd;
  border: 1px solid #cacccd;
  color: #82888a
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
  background: #fff;
  border: 1px solid #e4e7e7;
  color: #cacccd
}
.CalendarMonth {
  background: #fff;
  text-align: center;
  padding: 0 13px;
  vertical-align: top;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.CalendarMonth_table {
  border-collapse: collapse;
  border-spacing: 0
}
.CalendarMonth_caption {
  color: #565a5c;
  font-size: 18px;
  text-align: center;
  padding-top: 22px;
  padding-bottom: 37px;
  caption-side: initial
}
.CalendarMonth_caption__verticalScrollable {
  padding-top: 12px;
  padding-bottom: 7px
}
.CalendarMonthGrid {
  background: #fff;
  text-align: left;
  z-index: 0
}
.CalendarMonthGrid__animating {
  z-index: 1
}
.CalendarMonthGrid__horizontal {
  position: absolute;
  left: 9px
}
.CalendarMonthGrid__vertical {
  margin: 0 auto
}
.CalendarMonthGrid__vertical_scrollable {
  margin: 0 auto;
  overflow-y: scroll
}
.CalendarMonthGrid_month__horizontal {
  display: inline-block;
  vertical-align: top;
  min-height: 100%
}
.CalendarMonthGrid_month__hideForAnimation {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none
}
.CalendarMonthGrid_month__hidden {
  visibility: hidden
}
.DayPickerNavigation_container {
  position: relative;
  z-index: 2
}
.DayPickerNavigation_container__vertical {
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
  position: absolute;
  bottom: 0;
  left: 0;
  height: 52px;
  width: 100%
}
.DayPickerNavigation_container__verticalScrollable {
  position: relative
}
.DayPickerNavigation_button {
  cursor: pointer;
  line-height: .78;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.DayPickerNavigation_button__default {
  border: 1px solid #e4e7e7;
  background-color: #fff;
  color: #757575
}
.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
  border: 1px solid #c4c4c4
}
.DayPickerNavigation_button__default:active {
  background: #f2f2f2
}
.DayPickerNavigation_button__horizontal {
  border-radius: 3px;
  padding: 6px 9px;
  top: 18px;
  position: absolute
}
.DayPickerNavigation_leftButton__horizontal {
  left: 22px
}
.DayPickerNavigation_rightButton__horizontal {
  right: 22px
}
.DayPickerNavigation_button__vertical {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 50%
}
.DayPickerNavigation_button__vertical__default {
  padding: 5px
}
.DayPickerNavigation_nextButton__vertical__default {
  border-left: 0
}
.DayPickerNavigation_nextButton__verticalScrollable {
  width: 100%
}
.DayPickerNavigation_svg__horizontal {
  height: 19px;
  width: 19px;
  fill: #82888a
}
.DayPickerNavigation_svg__vertical {
  height: 42px;
  width: 42px;
  fill: #565a5c
}
.DayPicker {
  background: #fff;
  position: relative;
  text-align: left
}
.DayPicker__horizontal {
  background: #fff
}
.DayPicker__verticalScrollable {
  height: 100%
}
.DayPicker__hidden {
  visibility: hidden
}
.DayPicker__withBorder {
  box-shadow: 0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);
  border-radius: 3px
}
.DayPicker_portal__horizontal {
  box-shadow: none;
  position: absolute;
  left: 50%;
  top: 50%
}
.DayPicker_portal__vertical {
  position: initial
}
.DayPicker_focusRegion {
  outline: 0
}
.DayPicker_calendarInfo__horizontal,
.DayPicker_wrapper__horizontal {
  display: inline-block;
  vertical-align: top
}
.DayPicker_weekHeaders {
  position: relative
}
.DayPicker_weekHeaders__horizontal {
  margin-left: 9px
}
.DayPicker_weekHeader {
  color: #757575;
  position: absolute;
  top: 62px;
  z-index: 2;
  padding: 0 13px;
  text-align: left
}
.DayPicker_weekHeader__vertical {
  left: 50%
}
.DayPicker_weekHeader__verticalScrollable {
  top: 0;
  display: table-row;
  border-bottom: 1px solid #dbdbdb;
  background: #fff;
  margin-left: 0;
  left: 0;
  width: 100%;
  text-align: center
}
.DayPicker_weekHeader_ul {
  list-style: none;
  margin: 1px 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 14px
}
.DayPicker_weekHeader_li {
  display: inline-block;
  text-align: center
}
.DayPicker_transitionContainer {
  position: relative;
  overflow: hidden;
  border-radius: 3px
}
.DayPicker_transitionContainer__horizontal {
  -webkit-transition: height .2s ease-in-out;
  -moz-transition: height .2s ease-in-out;
  transition: height .2s ease-in-out
}
.DayPicker_transitionContainer__vertical {
  width: 100%
}
.DayPicker_transitionContainer__verticalScrollable {
  padding-top: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-y: scroll
}
.DateInput {
  margin: 0;
  padding: 0;
  background: #fff;
  position: relative;
  display: inline-block;
  width: 130px;
  vertical-align: middle
}
.DateInput__small {
  width: 90px
}
.DateInput__block {
  width: 100%
}
.DateInput__disabled {
  background: #f2f2f2;
  color: #dbdbdb
}
.DateInput_input {
  font-weight: 200;
  font-size: 18px;
  line-height: 24px;
  color: #565a5c;
  background-color: #fff;
  width: 100%;
  padding: 13px 12px 11px;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid transparent;
  border-left: 0
}
.DateInput_input__small {
  font-size: 14px;
  line-height: 18px;
  padding: 8px 8px 6px
}
.DateInput_input__regular {
  font-weight: auto
}
.DateInput_input__readOnly {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.DateInput_input__focused {
  outline: 0;
  background: #fff;
  border: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 2px solid #008489;
  border-left: 0
}
.DateInput_input__disabled {
  background: #f2f2f2;
  font-style: italic
}
.DateInput_screenReaderMessage {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}
.DateInput_fang {
  position: absolute;
  width: 20px;
  height: 10px;
  left: 22px;
  z-index: 2
}
.DateInput_fangShape {
  fill: #fff
}
.DateInput_fangStroke {
  stroke: #dbdbdb;
  fill: transparent
}
.DateRangePickerInput {
  background-color: #fff;
  display: inline-block
}
.DateRangePickerInput__disabled {
  background: #f2f2f2
}
.DateRangePickerInput__withBorder {
  border: 1px solid #cacccd
}
.DateRangePickerInput__rtl {
  direction: rtl
}
.DateRangePickerInput__block {
  display: block
}
.DateRangePickerInput__showClearDates {
  padding-right: 30px
}
.DateRangePickerInput_arrow {
  display: inline-block;
  vertical-align: middle
}
.DateRangePickerInput_arrow_svg {
  vertical-align: middle;
  fill: #565a5c;
  height: 24px;
  width: 24px
}
.DateRangePickerInput_arrow_svg__small {
  height: 19px;
  width: 19px
}
.DateRangePickerInput_clearDates {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px 0 5px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}
.DateRangePickerInput_clearDates__small {
  padding: 6px
}
.DateRangePickerInput_clearDates_default:focus,
.DateRangePickerInput_clearDates_default:hover {
  background: #dbdbdb;
  border-radius: 50%
}
.DateRangePickerInput_clearDates__hide {
  visibility: hidden
}
.DateRangePickerInput_clearDates_svg {
  fill: #82888a;
  height: 12px;
  width: 15px;
  vertical-align: middle
}
.DateRangePickerInput_clearDates_svg__small {
  height: 9px
}
.DateRangePickerInput_calendarIcon {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 0 5px 0 10px
}
.DateRangePickerInput_calendarIcon_svg {
  fill: #82888a;
  height: 15px;
  width: 14px;
  vertical-align: middle
}
.DateRangePicker {
  position: relative;
  display: inline-block
}
.DateRangePicker__block {
  display: block
}
.DateRangePicker_picker {
  z-index: 1;
  background-color: #fff;
  position: absolute
}
.DateRangePicker_picker__rtl {
  direction: rtl
}
.DateRangePicker_picker__directionLeft {
  left: 0
}
.DateRangePicker_picker__directionRight {
  right: 0
}
.DateRangePicker_picker__portal {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.DateRangePicker_picker__fullScreenPortal {
  background-color: #fff
}
.DateRangePicker_closeButton {
  background: 0 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  z-index: 2
}
.DateRangePicker_closeButton:focus,
.DateRangePicker_closeButton:hover {
  color: darken(#cacccd,10%);
  text-decoration: none
}
.DateRangePicker_closeButton_svg {
  height: 15px;
  width: 15px;
  fill: #cacccd
}

```


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

[User] Show me the implementation of collections/react/components/Checkbox/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './style.css'

class Checkbox extends Component {
  render() {
    return (
      <label className={style.container}>
        <input
          type="checkbox"
          checked={this.props.checked}
          onChange={this.props.onChange}
        />
        <span
          className={
            `${style.checkmark} ba bw1 ${this.props.semiChecked ? 'b--blue' : 'b--light-gray'}`
          }
          style={{ width: '12px', height: '12px' }}
        />
      </label>
    )
  }
}

Checkbox.propTypes = {
  id: PropTypes.string,
  checked: PropTypes.bool,
  semiChecked: PropTypes.bool,
  defaultChecked: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
}

export default Checkbox

```


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

[User] Show me the implementation of collections/react/components/Checkbox/style.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #FFF;
  border-radius: 2px;
}

.container {
  display: block;
  position: relative;
  padding-left: 1rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  margin-bottom: .75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  margin-right: 1rem;
}

.container:hover input ~ .checkmark {
  background-color: #e3e4e6;
}

.container input:checked ~ .checkmark {
  background-color: #368df7;
  border: solid #368df7 2px;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 3px;
  top: -1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

```


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

[User] Show me the implementation of collections/react/components/Toggle/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

const noop = () => {}

class Toggle extends Component {
  render() {
    const { semantic, disabled, id, checked } = this.props

    let classes = 'flex items-center relative h1 w2 ph1 br4 bg-animate '
    let circleClasses = 'absolute br-100 pa3 '

    // Background
    if (semantic) {
      if (!disabled && !checked) {
        classes += 'bg-red '
      }

      if (!disabled && checked) {
        classes += 'bg-green '
      }
    } else if (disabled) {
      classes += 'bg-near-white '
    } else {
      if (!checked) {
        classes += 'bg-gray '
      }

      if (checked) {
        classes += 'bg-blue '
      }
    }

    // Circle
    if (checked) {
      circleClasses += 'left-1 '
    } else {
      circleClasses += 'left-0 '
    }

    if (disabled) {
      circleClasses += 'bg-light-gray '
    } else {
      circleClasses += 'bg-white '
    }

    const eventHandlers = {
      onClick: this.props.onClick ? this.props.onClick : noop,
      onChange: this.props.onChange ? this.props.onChange : noop,
    }

    return (
      <label
        htmlFor={`${id}`}
        className={`flex flex-row items-center ${!disabled && 'pointer'}`}
      >
        {this.props.children ? this.props.children : ''}
        <div className={`${classes}`}>
          <div
            style={{
              height: '0.8rem',
              width: '0.8rem',
              transition: 'all .2s ease-out',
              boxShadow: disabled ? 'none' : '0 0 10px rgba(0,0,0,0.2)',
            }}
            className={`${circleClasses}`}
          />
        </div>
        <input
          id={`${id}`}
          type="checkbox"
          className="dn"
          disabled={disabled}
          checked={checked}
          {...eventHandlers}
        />
      </label>
    )
  }
}

Toggle.defaultProps = {
  checked: false,
  disabled: false,
  semantic: false,
}

Toggle.propTypes = {
  checked: PropTypes.bool,
  semantic: PropTypes.bool,
  disabled: PropTypes.bool,
  id: PropTypes.string,
  children: PropTypes.node,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
}

export default Toggle

```


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

[User] Show me the implementation of collections/react/components/Toggle/README.md from the collections VTEX app.

[Assistant]
Here's the implementation:

```markdown
Default

```js
class ToggleExample extends React.Component {
  constructor() {
    super()
    this.state = { checked: true }

    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    this.setState((prevState) => ({
      checked: !prevState.checked
    }))
  }

  render() {
    return (
      <Toggle id='toggle1'
        checked={this.state.checked}
        onClick={this.onClick}/>
    )
  }
};
<ToggleExample />
```

Semantic

```js
class ToggleSemanticExample extends React.Component {
  constructor() {
    super()
    this.state = { checked: false }

    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    this.setState((prevState) => ({
      checked: !prevState.checked
    }))
  }

  render() {
    return (
      <Toggle id='toggle2'
        semantic
        checked={this.state.checked}
        onClick={this.onClick}/>
    )
  }
};
<ToggleSemanticExample />
```

Disabled

```js

  <Toggle disabled id='toggle3'/>

```

Side by side

```js
class ToggleExample extends React.Component {
  constructor() {
    super()
    this.state = { checked: true }

    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    this.setState((prevState) => ({
      checked: !prevState.checked
    }))
  }

  render() {
    return (
      <Toggle id='toggle4'
        checked={this.state.checked}
        onClick={this.onClick}/>
    )
  }
};
class ToggleSemanticExample extends React.Component {
  constructor() {
    super()
    this.state = { checked: false }

    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    this.setState((prevState) => ({
      checked: !prevState.checked
    }))
  }

  render() {
    return (
      <Toggle id='toggle5'
        semantic
        checked={this.state.checked}
        onClick={this.onClick}/>
    )
  }
};

  <ToggleExample />

  <ToggleSemanticExample />

  <Toggle disabled id='toggle6'/>

```

```


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

[User] Show me the implementation of collections/react/components/EmptyStates/EmptyCollectionSearch.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import EmptySearchIcon from './EmptySearchIcon'

class EmptyCollectionSearch extends Component {
  render() {
    return (
      <div
        className="pa10 tc flex flex-column items-center justify-center mw7 center"
      >
        <EmptySearchIcon />
        <div className="pt5 f4">
          There's no collection with that name or ID
        </div>
      </div>
    )
  }
}

export default EmptyCollectionSearch

```


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

[User] Show me the implementation of collections/react/components/EmptyStates/EmptyStateIcon.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class EmptyStateIcon extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 64 64"
        xmlSpace="preserve"
        width="64"
        height="64"
      >
        <g className="nc-icon-wrapper" fill="#368df7">
          <polyline
            data-cap="butt"
            fill="none"
            stroke={this.props.stroke}
            strokeWidth="2"
            strokeMiterlimit="10"
            points="48,18 48,11 24,11 18,5 2,5 2,59 49,59 61,23 14,23 2,59 "
            transform="translate(0, 0)"
            strokeLinejoin="round"
            strokeLinecap="round"
          />
        </g>
      </svg>
    )
  }
}

EmptyStateIcon.defaultProps = {
  stroke: config.colors['rebel-pink'],
}

EmptyStateIcon.propTypes = {
  stroke: PropTypes.string.isRequired,
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default EmptyStateIcon

```


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

[User] Show me the implementation of collections/react/components/EmptyStates/EmptyCollection.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import EmptyStateIcon from './EmptyStateIcon'

class EmptyCollection extends Component {
  render() {
    return (
      <div
        className="pa10 tc flex flex-column items-center justify-center mw7 center"
      >
        <EmptyStateIcon />
        <div className="pt5 f4">
          Your collection is empty!
        </div>
        <div className="pt4 f6">
          Search and select some products to compose your collection
        </div>
      </div>
    )
  }
}

export default EmptyCollection

```


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

[User] Show me the implementation of collections/react/components/EmptyStates/EmptySearch.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import EmptySearchIcon from './EmptySearchIcon'

class EmptySearch extends Component {
  render() {
    return (
      <div
        className="pa10 tc flex flex-column items-center justify-center mw7 center"
      >
        <EmptySearchIcon />
        <div className="pt5 f4">
          There's no product or SKU with that name
        </div>
        <div className="pt4 f6">
          Try another name or check if your product is in your catalog
        </div>
      </div>
    )
  }
}

export default EmptySearch

```


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

[User] Show me the implementation of collections/react/components/EmptyStates/EmptySearchIcon.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class EmptySearchIcon extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 64 64"
        xmlSpace="preserve"
        width="64"
        height="64"
      >
        <g fill="#368df7">
          <line
            data-cap="butt"
            data-color="color-2"
            fill="none"
            stroke={this.props.stroke}
            strokeWidth="2"
            strokeMiterlimit="10"
            x1="60"
            y1="60"
            x2="43"
            y2="43"
            strokeLinejoin="round"
            strokeLinecap="round"
          />
          <circle
            fill="none"
            stroke={this.props.stroke}
            strokeWidth="2"
            strokeLinecap="round"
            strokeMiterlimit="10"
            cx="26"
            cy="26"
            r="24"
            strokeLinejoin="round"
          />
          <line
            data-color="color-2"
            fill="none"
            stroke={this.props.stroke}
            strokeWidth="2"
            strokeLinecap="round"
            strokeMiterlimit="10"
            transform="rotate(45 26 26)"
            x1="26"
            y1="18"
            x2="26"
            y2="34"
            strokeLinejoin="round"
          />
          <line
            data-color="color-2"
            fill="none"
            stroke={this.props.stroke}
            strokeWidth="2"
            strokeLinecap="round"
            strokeMiterlimit="10"
            transform="rotate(45 26 26)"
            x1="34"
            y1="26"
            x2="18"
            y2="26"
            strokeLinejoin="round"
          />
        </g>
      </svg>
    )
  }
}

EmptySearchIcon.defaultProps = {
  stroke: config.colors['rebel-pink'],
}

EmptySearchIcon.propTypes = {
  stroke: PropTypes.string.isRequired,
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default EmptySearchIcon

```


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

[User] Show me the implementation of collections/react/components/CollapsedGroup/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Card from '../Card'
import Button from '@vtex/styleguide/lib/Button'
import Badge from '../Badge'

class CollapsedGroup extends Component {
  render() {
    return (
      <Card>
        <div>
          <div className="flex justify-between items-center">
            <div className="f3 fw7 w-50">
              GroupName
            </div>
            <div>
              <Badge type="active">Manual</Badge>
            </div>
          </div>
          <div className="w-100 pt4">
            <div className="f6">
              <span className="fw7">6 skus</span> manually selected
            </div>
          </div>
        </div>
        <div className="pt6 nl5">
          <div>
            <Button>Edit</Button>
            <Button>Delete group</Button>
          </div>
        </div>
      </Card>
    )
  }
}

export default CollapsedGroup

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import BaseGroup from '../BaseGroup'
import Items from './Items'

class ManualGroup extends Component {
  constructor(props) {
    super(props)

    this.state = {
      group: {
        name: props.name,
        skus: props.skus,
        type: 'I',
        preSale: false,
        release: false,
        brands: [],
        categories: [],
      },
      currentPage: 1,
      queryFrom: 0,
      queryTo: 9,
      query: '',
    }
  }

  handleChangeName = e => {
    const name = e.target.value
    this.setState(prevState => ({ group: {...prevState.group, name} }))
  };

  handleSave = () => {
    this.props.onSave(this.state.group)
  };

  handleCancel = () => {};

  handleChangeSkus = changes => {
    const skus = changes.reduce(
      (acc, change) => {
        if (change.checked && !acc.includes(change.skuId)) {
          return this.addSku(acc, change.skuId)
        }
        if (!change.checked && acc.includes(change.skuId)) {
          return this.removeSku(acc, change.skuId)
        }
        return acc
      },
      this.state.group.skus
    )

    this.setState(prevState => ({ group: {...prevState.group, skus} }))
  };

  handleChangeSearch = newState => {
    this.setState(newState)
  }

  removeSku(skus, skuId) {
    return skus.filter(sku => sku !== skuId)
  }

  addSku(skus, skuId) {
    return skus.concat(skuId)
  }

  render() {
    return (
      <BaseGroup
        name={this.state.name}
        onChangeName={this.handleChangeName}
        onSave={this.handleSave}
        onCancel={this.handleCancel}
      >
        <Items
          query={this.state.query}
          currentPage={this.state.currentPage}
          queryFrom={this.state.queryFrom}
          queryTo={this.state.queryTo}
          collectionId={this.props.collectionId}
          skus={this.state.group.skus}
          onChange={this.handleChangeSearch}
          onChangeSkus={this.handleChangeSkus}
        />
      </BaseGroup>
    )
  }
}

ManualGroup.propTypes = {
  collectionId: PropTypes.string,
  name: PropTypes.string,
  skus: PropTypes.array.isRequired,
  onSave: PropTypes.func.isRequired,
}

export default ManualGroup

```


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

[User] Show me the implementation of collections/react/components/NewGroup/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Card from '../Card'
import Button from '@vtex/styleguide/lib/Button'

class NewGroup extends Component {
  render() {
    return (
      <Card>
        <div>
          <div className="f3 fw7 w-50">
            <input
              className="w-auto bn f3 fw7 near-black"
              type="text"
              placeholder="Name your collection"
              defaultValue="Type a name"
              style={{ width: '10em' }}
              onChange={()=>{}}
            />
          </div>
          <form className="pt6">
            <div className="f6 pb3">
              <input type="radio" name="grouptype" id="manual" />
              <label className="pl3" htmlFor="manual">Add products manually</label>
            </div>
            <div className="f6">
              <input type="radio" name="grouptype" id="dynamic" />
              <label className="pl3" htmlFor="dynamic">Add products dynamically based on conditions</label>
            </div>
          </form>
          <div>
            <div className="pt6 nl5">
              <Button>Start group</Button>
              <Button>Cancel</Button>
            </div>
          </div>
        </div>
      </Card>
    )
  }
}

export default NewGroup

```


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

[User] Show me the implementation of collections/react/components/NewGroupButton/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Button from '@vtex/styleguide/lib/Button'
import AddIcon from './AddIcon'
import config from 'vtex-tachyons/config.json'

class NewGroupButon extends PureComponent {
  constructor(props) {
    super(props)
    this.state = { hover: false }
  }

  handleMouseEnter = () => {
    this.setState({ hover: true })
  };

  handleMouseLeave = () => {
    this.setState({ hover: false })
  };
  render() {
    return (
      <div className="tc mt7">
        <Button
          secondary
          onClick={this.props.onClick}
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
        >
          <div className="flex items-center">
            <AddIcon
              color={
                this.state.hover ? config.colors.white : config.colors.blue
              }
            />
            {' '}
            <span className="ml2">Add new group</span>
          </div>
        </Button>
      </div>
    )
  }
}

NewGroupButon.propTypes = {
  onClick: PropTypes.func,
}

export default NewGroupButon

```


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

[User] Show me the implementation of collections/react/components/NewGroupButton/AddIcon.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class AddIcon extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width="16"
        height="16"
      >
        <g className="nc-icon-wrapper" fill={this.props.color}>
          <circle
            fill="none"
            stroke={this.props.color}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeMiterlimit="10"
            cx="8.5"
            cy="8.5"
            r="7"
          />
          {' '}
          <line
            data-color="color-2"
            fill="none"
            stroke={this.props.color}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeMiterlimit="10"
            x1="8.5"
            y1="4.5"
            x2="8.5"
            y2="12.5"
          />
          <line
            data-color="color-2"
            fill="none"
            stroke={this.props.color}
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeMiterlimit="10"
            x1="4.5"
            y1="8.5"
            x2="12.5"
            y2="8.5"
          />
        </g>
      </svg>
    )
  }
}

AddIcon.defaultProps = {
  color: config.colors.blue,
}

AddIcon.propTypes = {
  color: PropTypes.string.isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default AddIcon

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Button from '@vtex/styleguide/lib/Button'
import Card from '../Card'
import CategoryAutocomplete from './CategoryAutocomplete'
import BrandAutocomplete from './BrandAutocomplete'

class DynamicGroup extends Component {
  constructor(props) {
    super(props)

    this.state = { ...this.mapPropsToState(props) }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ ...this.mapPropsToState(nextProps) })
  }

  mapPropsToState(props) {
    return {
      name: props.name,
      brands: props.brands,
      categories: props.categories,
    }
  }

  handleChangeName = e => {
    this.setState({ name: e.target.value })
  };

  handleChangeCategories = categories => {
    this.setState({ categories })
  };

  handleChangeBrands = brands => {
    this.setState({ brands })
  };

  render() {
    return (
      <Card>
        <div>
          <div className="f3 fw7 w-50">
            <input
              className="w-auto bn f3 fw7 near-black"
              type="text"
              placeholder="Name your collection"
              value={this.state.name}
              style={{ width: '10em' }}
              onChange={this.handleChangeName}
            />
          </div>

          <div className="w-100 pt7">
            <div className="f6 pb3">
              Include products from the following brands:
            </div>
            <BrandAutocomplete
              values={this.state.brands}
              onChange={this.handleChangeBrands}
            />
          </div>

          <div className="w-100 pt5">
            <div className="f6 pb3">
              Include products from the following categories:
            </div>
            <CategoryAutocomplete
              values={this.state.categories}
              onChange={this.handleChangeCategories}
            />
          </div>

          <div>
            <div className="pt6 nl5">
              <Button>Save group</Button>
              <Button>Cancel</Button>
            </div>
          </div>
        </div>
      </Card>
    )
  }
}

DynamicGroup.propTypes = {
  collectionId: PropTypes.string,
  name: PropTypes.string,
  categories: PropTypes.arrayOf(PropTypes.number),
  brands: PropTypes.arrayOf(PropTypes.number),
  onSave: PropTypes.func.isRequired,
}

export default DynamicGroup

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/SearchCollectionSkus.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
#import './ProductInfoFragment.gql'

query SearchCollectionSkus(
  $ids: [Int],
) {
  products: getProductsBySku(
    ids: $ids,
    from: 0,
    to: 9,
  ) {
    items {
      ...ProductInfo
    }
  }
}

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/IconArrowDown.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class IconArrowDown extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width={this.props.width}
        height={this.props.height}
      >
        <g className="nc-icon-wrapper" fill="#368df7">
          <polygon
            fill={this.props.fill}
            points="8,11.4 2.6,6 4,4.6 8,8.6 12,4.6 13.4,6 "
          />
        </g>
      </svg>
    )
  }
}

IconArrowDown.defaultProps = {
  fill: config.colors.blue,
}

IconArrowDown.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default IconArrowDown

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { graphql, compose } from 'react-apollo'

import SearchProducts from './SearchProducts.gql'
import SearchCollectionSkus from './SearchCollectionSkus.gql'
import CollectionContains from './CollectionContains.gql'

import Search from './Search'
import Result from './Result/index'
import Pagination from '../../Pagination/index'

import EmptyCollection from '../../EmptyStates/EmptyCollection'
import EmptySearch from '../../EmptyStates/EmptySearch'
import Loading from '../../Loading'

class Items extends Component {
  getCurrentPage() {
    return this.hasData()
      ? this.props.query
        ? this.props.search.products.paging.pages
        : Math.ceil(this.props.queryFrom / 10) + 1
      : 1
  }

  getPages() {
    return this.hasData()
      ? this.props.query
        ? this.props.search.products.paging.pages
        : Math.ceil(this.props.skus.length / 10) === 0
          ? 1
          : Math.ceil(this.props.skus.length / 10)
      : Infinity
  }

  getFrom() {
    return this.hasData()
      ? this.props.query
        ? this.props.search.products.paging._from
        : this.props.queryFrom
      : null
  }

  getTo() {
    return this.hasData()
      ? this.props.query
        ? this.props.search.products.paging._to
        : this.props.queryTo
      : null
  }

  hasData() {
    return (this.props.query && !this.props.search.loading) ||
      (!this.props.query && !this.props.collection.loading)
  }

  handleChangeSearch = e => {
    const query = e.target.value
    const newState = { query, queryFrom: 0, queryTo: 9 }
    this.props.onChange(newState)
  };

  handleChangePage = (page, from, to) => {
    this.props.onChange({ currentPage: page, queryFrom: from, queryTo: to })
  };

  render() {
    return (
      <div>
        <div className="flex items-end w-100 justify-between pt6">
          <div className="flex-auto">
            <Search
              value={this.props.query}
              placeholder="Search by product or sku name…"
              onChange={this.handleChangeSearch}
            />
          </div>
          <div className="ml4">
            <Pagination
              pages={this.getPages()}
              from={this.getFrom()}
              to={this.getTo()}
              currentPage={this.getCurrentPage()}
              onChange={this.handleChangePage}
            />
          </div>
        </div>
        <div className="pt6">
          {this.props.query
            ? this.props.search.loading
              ? <div className="flex flex-column items-center pa10">
                <Loading />
              </div>
              : this.props.search.products.items.length === 0
                ? <EmptySearch />
                : <Result
                  isSearch
                  products={this.props.search.products.items}
                  selectedSkus={this.props.skus}
                  onChange={this.props.onChangeSkus}
                />
            : this.props.collection.loading
              ? <div className="flex flex-column items-center pa10">
                <Loading />
              </div>
              : this.props.skus.length === 0
                ? <EmptyCollection />
                : <Result
                  isCollection
                  products={this.props.collection.products.items}
                  selectedSkus={this.props.skus}
                  onChange={this.props.onChangeSkus}
                />}
        </div>
      </div>
    )
  }
}

Items.defaultProps = {
  skus: [],
}

Items.propTypes = {
  currentPage: PropTypes.number.isRequired,
  query: PropTypes.string,
  queryFrom: PropTypes.number.isRequired,
  queryTo: PropTypes.number.isRequired,
  collection: PropTypes.object,
  skus: PropTypes.array.isRequired,
  contains: PropTypes.object,
  search: PropTypes.object,
  onChangeSkus: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
}

const ItemsContainer = compose(
  graphql(SearchProducts, {
    name: 'search',
    options(
      {
        query = '',
        queryFrom = 0,
        queryTo = 9,
      }
    ) {
      return {
        variables: {
          query,
          queryFrom,
          queryTo,
        },
      }
    },
  }),
  graphql(CollectionContains, {
    name: 'contains',
    options({ collectionId, search }) {
      return {
        variables: {
          collectionId,
          skus: search.loading
            ? []
            : search.products.items.reduce(
              (acc, product) =>
                product.items.reduce(
                  (skuIds, sku) =>
                    skuIds.concat({ id: parseInt(sku.itemId) }),
                  acc
                ),
              []
            ),
        },
      }
    },
  }),
  graphql(SearchCollectionSkus, {
    name: 'collection',
    options({ skus = [], queryFrom, queryTo }) {
      return {
        variables: {
          ids: skus.slice(queryFrom, queryTo),
        },
      }
    },
  })
)(Items)

export default ItemsContainer

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/IconArrowUp.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class IconArrowUp extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width={this.props.width}
        height={this.props.height}
      >
        <g className="nc-icon-wrapper" fill="#368df7">
          <polygon
            fill={this.props.fill}
            points="12,11.4 8,7.4 4,11.4 2.6,10 8,4.6 13.4,10 "
          />
        </g>
      </svg>
    )
  }
}

IconArrowUp.defaultProps = {
  fill: config.colors.blue,
}

IconArrowUp.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default IconArrowUp

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/Search.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Search extends Component {
  render() {
    return (
      <div className="">
        <label htmlFor="search" className="f7 fw3">Search</label>
        <div className="pt3 flex flex-auto">
          <input placeholder={this.props.placeholder} id="search" value={this.props.value} onChange={this.props.onChange} className="flex flex-auto ba b--light-gray bw1 pa4 f6 br2 ma0 border-box outline-0 near-black bg-white" />
        </div>
      </div>
    )
  }
}

Search.propTypes = {
  value: PropTypes.string,
  placeholder: PropTypes.string,
  onChange: PropTypes.func.isRequired,
}

export default Search

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/ProductInfoFragment.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
fragment ProductInfo on Product @context(provider: "vtex.collections") {
  productId
  productName
  productReference
  items {
    images {
      imageUrl
    }
    itemId
    name
    nameComplete
    complementName
    referenceId {
      Key
      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 collections/react/components/ManualGroup/Items/SearchProducts.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
#import './ProductInfoFragment.gql'

query SearchProducts(
  $query: String,
  $queryFrom: Int,
  $queryTo: Int,
) {
  products: getProducts(
    query: $query,
    from: $queryFrom,
    to: $queryTo,
  ) {
    items {
      ...ProductInfo
    }
    paging {
      pages
      perPage
      total
      page
      _to
      _from
    }
  }
}

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/CollectionContains.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query CollectionContains(
  $collectionId: Int
  $skus: [SkuContainsInput]
) {
  collectionContains(
    collectionId: $collectionId
    skus: $skus
  ) {
    skus {
      id
      contains
    }
  }
}

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/Result/Sku.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Checkbox from '../../../Checkbox'

class Sku extends Component {
  handleChange = () => {
    this.props.onChange({
      skuId: this.props.sku.itemId,
      checked: !this.props.inCollection,
    })
  };

  render() {
    const { sku, inCollection } = this.props

    return (
      <div className="flex items-center" style={{ paddingLeft: '3.75rem' }}>
        <Checkbox checked={inCollection} onChange={this.handleChange} />
        <div
          className="bl br b--light-gray ph4 pv5 flex items-center f6 flex-grow-1 justify-between bg-near-white"
        >
          <div className="flex items-center">
            <div className="ml2">{sku.nameComplete}</div>
          </div>
          <div className="flex items-center fw3 justify-end pr7 f6">
            <div className="tl pr9">REF: {sku.referenceId[0].Value}</div>
            <div className="tl">ID: {sku.itemId}</div>
          </div>
        </div>
      </div>
    )
  }
}

Sku.propTypes = {
  sku: PropTypes.object.isRequired,
  inCollection: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
}

export default Sku

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/Result/IconArrowDown.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class IconArrowDown extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width={this.props.width}
        height={this.props.height}
      >
        <g className="nc-icon-wrapper" fill="#368df7">
          <polygon
            fill={this.props.fill}
            points="8,11.4 2.6,6 4,4.6 8,8.6 12,4.6 13.4,6 "
          />
        </g>
      </svg>
    )
  }
}

IconArrowDown.defaultProps = {
  fill: config.colors.blue,
}

IconArrowDown.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default IconArrowDown

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/Result/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Product from './Product'

class Result extends Component {
  render() {
    const {
      selectedSkus,
      products,
      onChange,
    } = this.props

    return (
      <div>
        {products.map(product => {
          const productSelectedSkus = selectedSkus.filter(
            skuId =>
              product.items.find(
                item => parseInt(item.itemId) === parseInt(skuId)
              )
          )

          return (
            <Product
              key={
                `${product.productId}-${JSON.stringify(productSelectedSkus) || ''}`
              }
              product={product}
              selectedSkus={productSelectedSkus}
              onChange={onChange}
            />
          )
        })}
      </div>
    )
  }
}

Result.propTypes = {
  selectedSkus: PropTypes.array,
  products: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
}

export default Result

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/Result/IconArrowUp.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class IconArrowUp extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width={this.props.width}
        height={this.props.height}
      >
        <g className="nc-icon-wrapper" fill="#368df7">
          <polygon
            fill={this.props.fill}
            points="12,11.4 8,7.4 4,11.4 2.6,10 8,4.6 13.4,10 "
          />
        </g>
      </svg>
    )
  }
}

IconArrowUp.defaultProps = {
  fill: config.colors.blue,
}

IconArrowUp.propTypes = {
  fill: PropTypes.string,
  width: PropTypes.number,
  height: PropTypes.number,
}

export default IconArrowUp

```


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

[User] Show me the implementation of collections/react/components/ManualGroup/Items/Result/Product.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import filter from 'lodash/filter'

import IconArrowDown from './IconArrowDown'
import IconArrowUp from './IconArrowUp'
import Sku from './Sku'
import Checkbox from '../../../Checkbox'

class Product extends Component {
  constructor(props) {
    super(props)

    this.state = {
      open: false,
      allSkusChecked: this.areAllSkusSelected(props),
      hasOneChecked: this.hasOneChecked(props),
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      allSkusChecked: this.areAllSkusSelected(nextProps),
      hasOneChecked: this.hasOneChecked(nextProps),
    })
  }

  areAllSkusSelected = props => {
    return props.selectedSkus.length === props.product.items.length
  };

  hasOneChecked = props => {
    return props.selectedSkus.length > 0
  };

  handleClickArrow = () => {
    this.setState(prevState => ({ open: !prevState.open }))
  };

  handleChangeSkuSelection = ({ skuId, checked }) => {
    this.props.onChange([{ skuId, checked }])
  };

  handleChangeProductSelection = () => {
    this.props.onChange(
      this.props.product.items.map(item => ({
        skuId: item.itemId,
        checked: !this.state.allSkusChecked,
      }))
    )
  };

  render() {
    const { product, productState, selectedSkus } = this.props
    const { open, allSkusChecked, hasOneChecked } = this.state

    return (
      <Fragment>
        <div className="flex items-center">
          <Checkbox
            checked={allSkusChecked}
            semiChecked={hasOneChecked}
            onChange={this.handleChangeProductSelection}
          />
          <div
            className={
              `bt bl bb br b--light-gray pa4 flex items-center f6 flex-grow-1 justify-between relative ${open ? 'bg-near-white' : ''}`
            }
          >
            <div className="flex items-center">
              <img
                src={product.items[0].images[0].imageUrl}
                style={{ width: '3rem', height: '3rem' }}
              />
              <div className="ml5">{product.productName}</div>
            </div>
            <div className="flex items-center fw3 justify-end pr7 f6">
              <div className="tl pr9">REF: {product.productReference}</div>
              <div className="tl">ID: {product.productId}</div>
            </div>
            <button
              className="bg-serious-black pa2 br-100 absolute flex items-center bn pointer dim"
              style={{ right: '-0.75rem' }}
              onClick={this.handleClickArrow}
            >
              {open
                ? <IconArrowUp fill="#FFFFFF" width={14} height={14} />
                : <IconArrowDown fill="#FFFFFF" width={14} height={14} />}
            </button>
          </div>
        </div>
        {open
          ? product.items.map(item => (
            <Sku
              key={item.itemId}
              sku={item}
              onChange={this.handleChangeSkuSelection}
              inCollection={selectedSkus.includes(item.itemId) || selectedSkus.includes(parseInt(item.itemId))}
            />
          ))
          : null}
      </Fragment>
    )
  }
}

Product.defaultProps = {
  selectedSkus: [],
}

Product.propTypes = {
  product: PropTypes.object.isRequired,
  selectedSkus: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
}

export default Product

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/CategoryAutocomplete/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { graphql } from 'react-apollo'
import createAutocomplete from '../../Autocomplete'
import CategoryName from './CategoryName.graphql'
import CategoriesAutocomplete from './CategoriesAutocomplete.graphql'

const CategoryAutocomplete = createAutocomplete({
  graphql: {
    suggestion: graphql(CategoriesAutocomplete, {
      options({ inputValue = '' }) {
        return {
          variables: {
            name: inputValue,
          },
        }
      },
    }),
    name: graphql(CategoryName, {
      options({ values }) {
        return {
          variables: {
            categories: values,
          },
        }
      },
    }),
  },
})

export default CategoryAutocomplete

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/CategoryAutocomplete/CategoriesAutocomplete.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query CategoriesAutocomplete(
  $name: String!
) {
  suggestions: categoriesAutocomplete(name: $name) {
    id,
    name
  }
}

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/CategoryAutocomplete/CategoryName.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query CategoryName(
  $categories: [Int]
) {
  names: getCategories(
    ids: $categories
  ) {
    id
    name
  }
}

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/BrandAutocomplete/BrandsAutocomplete.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query BrandsAutocomplete(
  $name: String!
) {
  suggestions: brandsAutocomplete(name: $name) {
    id,
    name
  }
}

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/BrandAutocomplete/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { graphql } from 'react-apollo'
import createAutocomplete from '../../Autocomplete'
import BrandName from './BrandName.graphql'
import BrandsAutocomplete from './BrandsAutocomplete.graphql'

const BrandAutocomplete = createAutocomplete({
  graphql: {
    suggestion: graphql(BrandsAutocomplete, {
      options({ inputValue = '' }) {
        return {
          variables: {
            name: inputValue,
          },
        }
      },
    }),
    name: graphql(BrandName, {
      options({ values }) {
        return {
          variables: {
            brands: values,
          },
        }
      },
    }),
  },
})

export default BrandAutocomplete

```


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

[User] Show me the implementation of collections/react/components/DynamicGroup/BrandAutocomplete/BrandName.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query BrandName(
  $brands: [Int]
) {
  names: getBrands(
    ids: $brands
  ) {
    id
    name
  }
}

```


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

[User] Show me the implementation of checkout-ui-settings/checkout-ui-custom/checkout5-custom.css from the checkout-ui-settings VTEX app.

[Assistant]
Here's the implementation:

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

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

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

```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of checkout-ui-settings/checkout-ui-custom/checkout6-custom.css from the checkout-ui-settings VTEX app.

[Assistant]
Here's the implementation:

```css
/* Content copied from "checkout5-custom.css" at 2019-03-01T05:12:59.334Z */

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

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

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

```


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

[User] Show me the implementation of checkout-ui-settings/docs/README.md from the checkout-ui-settings VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Checkout UI Settings

The Checkout UI Settings app is responsible for **customizing your store's Checkout UI through scripts**.

The main advantage of using the app instead of the [store's admin](https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en) for this customization is that your Checkout scripts will behave as configurations for platform apps.

In practice, it means that Checkout UI Settings allows A/B testing in your store's scripts, in addition to the possibility of quick rollbacks for old scripts (i.e. scripts pertaining to older Checkout UI Settings app's versions).

## Configuration

1.  Using your terminal and the [VTEX IO Toolbelt](https://vtex.io/docs/recipes/development/vtex-io-cli-installment-and-command-reference), log into the desired account;
2.  Run `vtex list` to access the list of apps that are already installed on the account you're working on. If the Checkout UI Settings option already exists, you can skip to step 7 of this step-by-step;
3.  If the Checkout UI Settings app was not found in the list of installed apps, run the `vtex init` command;
4. Select the `checkout-ui-settings` option;
5.  Open the `checkout-ui-settings`  app in whichever code editor you prefer;
6.  In the  `manifest.json`  file, change the predefined default value  `vendor`  to the name of the account in which you want to install the app;
7.  In the  `checkout-ui-custom`  folder, create the files in which the scripts will be included, just as you would do in the [admin's interface](https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en#configure-code). Notice that a few defaults files already exist in the `checkout-ui-custom` folder, files which you can use to insert the scripts;
8.  According to the Checkout customization you are looking for, open the most suitable file and insert the desired scripts;
9.  Save your changes. Then, [publish](https://vtex.io/docs/recipes/development/publishing-an-app) the app's new version;
10. Still logged into the desired account, [create a production workspace](https://vtex.io/docs/recipes/development/creating-a-production-workspace) and [install the app](https://vtex.io/docs/recipes/development/installing-an-app);
10. If everything is working as expected, [promote the workspace to master](https://vtex.io/docs/recipes/development/promoting-a-workspace-to-master).

## Modus Operandi

Once the app is deployed and installed in the account, every scripts contained in it will be automatically linked to your store and used to [build the templates](https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en#configuring-templates-from-the-code-menu) to customize your Checkout.

:warning: **Scripts used by Checkout are linked to the Checkout UI Settings version that's installed in your store**. If a prior app version was already installed and your want to change the scripts linked to it, you'll need to repeat the already existing code and thereafter launch the app's new version containing the changes you just did. Housekeeper is responsible for updating app versions in the accounts it's installed in.

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Store Indexer

The Store Indexer is a VTEX IO app designed to listen to IO broadcasters and index data based on catalog changes. It enhances your store’s catalog indexing and search functionality by responding to system events and automating key tasks:

- **Translations:** Updates translations whenever translatable fields set as messages are modified.

- **Route management:** Updates internal routes by saving the correct page type and canonical route ID, and flags deactivated products as "not found".

- **Search indexing:**Indexes the canonical URLs of top searches.

- **Brand search as full text:** Enhances [Intelligent Search](https://help.vtex.com/pt/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb) by resolving brand search queries as full text. This configuration enables search results to include products where the brand name appears in fields like the product title or description, rather than limiting results to a brand filter. For detailed instructions, refer to [Setting up brand search queries as full text](https://developers.vtex.com/docs/guides/setting-up-brand-search-queries-as-full-text).

## Manual event testing

Since the Store Indexer is not part of the store's rendering pipeline, testing can be complex. This section outlines how to manually generate an event from the broadcasting system to facilitate testing.

> The example below focuses on testing the product pipeline. Extending it to test other pipelines follows a similar approach.

### Step 1: Retrieving the event body

Use **catalog-graphql** to fetch the body of the event. The following `curl` command retrieves the necessary data:

```sh
curl --location --request POST 'https://app.io.vtex.com/vtex.catalog-graphql/v1/{account}/{workspace}/_v/graphql' \
--header 'Authorization: {auth}' \
--header 'x-vtex-locale: {locale}' \
--header 'x-vtex-tenant: {locale}' \
--header 'Content-Type: application/json' \
--data-raw '{
	"query": "query GetProduct ($identifier: ProductUniqueIdentifier!) {  product (identifier: $identifier) {    id    brandId    categoryId    departmentId    name    linkId    refId    isVisible    description    shortDescription    releaseDate    keywords    title    isActive    taxCode    metaTagDescription    supplierId    showWithoutStock    score    salesChannel {      id    }  }}",
	"variables": {
		"identifier": {
    		"field": "id",
    		"value": {productId}
		}
	}
}'
```

### Step 2: Triggering an event for Store Indexer

After retrieving the event body, copy the value of the `product` key from the response. Use this data to create an event for the **Store Indexer**. Here's an example `curl` command with a mocked product:

```sh
curl --location --request POST 'https://app.io.vtex.com/vtex.store-indexer/v0/{account}/{workspace}/_events' \
--header 'Authorization: {auth}' \
--header 'x-event-handler-id: broadcasterProduct' \
--header 'Content-Type: application/json' \
--data-raw '{
    "id": "2000185",
    "brandId": "2000010",
    "categoryId": "48",
    "departmentId": "25",
    "name": "Jumper Best Friend",
    "linkId": "jumper-best-friend",
    "refId": "",
    "isVisible": true,
    "description": "",
    "shortDescription": "",
    "releaseDate": "2019-11-19T00:00:00",
    "keywords": [
        "Hoodie",
        "Best",
        "Friend",
        "blouse",
        "t-shirt",
        "jumper"
    ],
    "title": "Jumper Best Friend",
    "isActive": true,
    "taxCode": "",
    "metaTagDescription": "",
    "supplierId": null,
    "showWithoutStock": true,
    "score": null,
    "salesChannel": [
        {
            "id": "1"
        }
    ]
}'
```

```


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

[User] Show me the implementation of store-indexer/node/service.json from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "events": {
    "broadcasterProduct": {
      "keys": ["broadcaster.product"]
    },
    "broadcasterBrand": {
      "keys": ["broadcaster.brand"]
    },
    "broadcasterCategory": {
      "keys": ["broadcaster.category"]
    },
    "searchUrlsCountIndex": {
      "sender": "vtex.search-graphql",
      "keys": ["searchUrlsCountIndex"]
    }
  }
}

```


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

[User] Show me the implementation of store-indexer/node/package.json from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "crypto": "^1.0.1",
    "koa-compose": "^4.0.0",
    "ramda": "^0.26.1",
    "route-parser": "^0.0.5"
  },
  "devDependencies": {
    "@types/koa-compose": "^3.2.0",
    "@types/node": "^12.12.17",
    "@types/ramda": "^0.26.38",
    "@types/route-parser": "^0.1.3",
    "@vtex/api": "6.48.0",
    "tslint": "^5.14.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.9.7",
    "vtex.catalog-api-proxy": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.catalog-api-proxy@0.9.0/public/_types/react",
    "vtex.catalog-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.catalog-graphql@1.79.2/public/@types/vtex.catalog-graphql",
    "vtex.messages": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.messages@1.60.2/public/@types/vtex.messages",
    "vtex.rewriter": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rewriter@1.45.2/public/@types/vtex.rewriter",
    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.27.2/public/_types/react",
    "vtex.store-indexer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-indexer@0.15.2/public/_types/react"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.ts'"
  },
  "version": "0.18.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 store-indexer/node/index.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { brandInternals } from './middlewares/internals/brand'
import { categoryInternals } from './middlewares/internals/category'
import { deleteOldRoutes } from './middlewares/internals/delete'
import { productInternals } from './middlewares/internals/product'
import { saveInternals } from './middlewares/internals/save'
import { createCanonicals } from './middlewares/search/createCanonicals'
import { getSearchStats } from './middlewares/search/getSearchStats'
import { indexCanonicals } from './middlewares/search/indexCanonicals'
import { settings } from './middlewares/settings'
import { tenant } from './middlewares/tenant'
import { throttle } from './middlewares/throttle'
import { State } from './typings/global'

const TIMEOUT_MS = 3000
const TRANSLATION_CONCURRENCY = 10
const TRANSLATION_RETRIES = 3
const CONCURRENCY = 10

const tenantCacheStorage = new LRUCache<string, Cached>({
  max: 3000,
})

const appsCacheStorage = new LRUCache<string, Cached>({
  max: 3000,
})

metrics.trackCache('tenant', tenantCacheStorage)
metrics.trackCache('apps', appsCacheStorage)

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    apps: {
      memoryCache: appsCacheStorage,
    },
    default: {
      concurrency: CONCURRENCY,
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    messages: {
      concurrency: TRANSLATION_CONCURRENCY,
      retries: TRANSLATION_RETRIES,
      timeout: TIMEOUT_MS,
    },
    tenant: {
      memoryCache: tenantCacheStorage,
      timeout: TIMEOUT_MS,
    },
  },
}

export default new Service<Clients, State, ParamsContext>({
  clients,
  events: {
    broadcasterBrand: [
      throttle,
      settings,
      tenant,
      brandInternals,
      saveInternals,
      deleteOldRoutes,
    ],
    broadcasterCategory: [
      throttle,
      settings,
      tenant,
      categoryInternals,
      saveInternals,
      deleteOldRoutes,
    ],
    broadcasterProduct: [
      throttle,
      settings,
      tenant,
      productInternals,
      saveInternals,
      deleteOldRoutes,
    ],
    searchUrlsCountIndex: [
      throttle,
      settings,
      getSearchStats,
      tenant,
      createCanonicals,
      indexCanonicals,
    ],
  },
})

```


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

[User] Show me the implementation of store-indexer/node/clients/messages.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { MessagesGraphQL } from '@vtex/api'
import { Query, TranslateArgs } from 'vtex.messages'

interface Response {
  translate: Query['translate']
}

interface Variables {
  args: TranslateArgs
}

export class Messages extends MessagesGraphQL {
  public async translateNoCache(args: TranslateArgs) {
    const response = await this.graphql.query<Response, Variables>(
      {
        query: `query Translate($args: TranslateArgs!) {
          translate(args: $args)
        }`,
        variables: { args },
      },
      {
        headers: {
          'cache-control': 'no-cache',
        },
        metric: 'messages-translate-v2',
      }
    )
    return response.data!.translate as 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 store-indexer/node/clients/rewriter.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AppGraphQLClient, InstanceOptions, IOContext } from '@vtex/api'
import {
  EntityLocator,
  Internal,
  InternalInput,
  RedirectInput,
  RouteLocator,
  RoutesByBinding,
} from 'vtex.rewriter'

const rewriterSaveManyInternalMutation = `mutation SaveMany($routes: [InternalInput!]!) {
  internal {
    saveMany(routes: $routes)
  }
}`

const rewriterSaveInternalMutation = `mutation Save($route: InternalInput!) {
  internal {
    save(route: $route) {
      type
    }
  }
}`

const rewriterSaveRedirectMutation = `mutation Save($route: RedirectInput!) {
  redirect {
    save(route: $route) {
      type
    }
  }
}`

const rewriterGetInternal = `query Internal($path: String!) {
  internal {
    get(path: $path) {
      id
    }
  }
}`

const rewriterDeleteInternalMutation = `mutation Delete($path: String!, $locator: RouteLocator) {
  internal {
    delete(path: $path, locator: $locator) {
      id
    }
  }
}`

const rewriterRoutesById = `query Routes($locator: EntityLocator!) {
  internal {
    routes(locator: $locator) {
      route
      binding
    }
  }
}
`

const rewriterDeleteManyInternalMutation = `mutation DeleteMany($paths: [String!]!, $locators: [RouteLocator!]) {
  internal {
    deleteMany(paths: $paths, locators: $locators)
  }
}`

export class Rewriter extends AppGraphQLClient {
  constructor(ctx: IOContext, opts?: InstanceOptions) {
    super('vtex.rewriter@1.x', ctx, opts)
  }

  public async saveManyInternals(internals: InternalInput[]) {
    const { tenant } = this.context
    return this.graphql.mutate<boolean, { routes: InternalInput[] }>(
      {
        mutate: rewriterSaveManyInternalMutation,
        variables: { routes: internals },
      },
      {
        headers: {
          ...(this.options && this.options.headers),
          'Proxy-Authorization': this.context.authToken,
          VtexIdclientAutCookie: this.context.authToken,
          'x-vtex-tenant': tenant,
        },
        metric: 'rewriter-save-many-internal',
      }
    )
  }

  public async saveInternal(internal: InternalInput) {
    const { tenant } = this.context
    return this.graphql.mutate<
      { internal: { type: string } },
      { route: InternalInput }
    >(
      {
        mutate: rewriterSaveInternalMutation,
        variables: { route: internal },
      },
      {
        headers: {
          ...(this.options && this.options.headers),
          'Proxy-Authorization': this.context.authToken,
          VtexIdclientAutCookie: this.context.authToken,
          'x-vtex-tenant': tenant,
        },
        metric: 'rewriter-save-internal',
      }
    )
  }

  public async saveRedirect(redirect: RedirectInput) {
    const { tenant } = this.context
    return this.graphql.mutate<boolean, { route: RedirectInput }>(
      {
        mutate: rewriterSaveRedirectMutation,
        variables: { route: redirect },
      },
      {
        headers: {
          ...(this.options && this.options.headers),
          'Proxy-Authorization': this.context.authToken,
          'x-vtex-tenant': tenant,
        },
        metric: 'rewriter-save-redirect',
      }
    )
  }

  public async getInternal(path: string) {
    const { tenant } = this.context
    return this.graphql
      .query<{ internal: { get: Internal } }, { path: string }>(
        {
          query: rewriterGetInternal,
          variables: { path },
        },
        {
          headers: {
            ...(this.options && this.options.headers),
            'Proxy-Authorization': this.context.authToken,
            'x-vtex-tenant': tenant,
          },
          metric: 'rewriter-get-internal',
        }
      )
      .then(res => res.data?.internal.get)
  }

  public routesById(locator: EntityLocator): Promise<RoutesByBinding[]> {
    return this.graphql
      .query<
        { internal: { routes: RoutesByBinding[] } },
        { locator: EntityLocator }
      >(
        {
          query: rewriterRoutesById,
          variables: { locator },
        },
        {
          metric: 'rewriter-get-routes-by-id',
        }
      )
      .then(res => res.data?.internal?.routes) as Promise<RoutesByBinding[]>
  }

  public async deleteInternal(locator: RouteLocator) {
    return this.graphql.mutate<
      { internal: { id: string } },
      { path: string; locator: RouteLocator }
    >(
      {
        mutate: rewriterDeleteInternalMutation,
        variables: { path: locator.from, locator },
      },
      {
        headers: {
          ...(this.options && this.options.headers),
          'Proxy-Authorization': this.context.authToken,
          VtexIdclientAutCookie: this.context.authToken,
        },
        metric: 'rewriter-delete-internal',
      }
    )
  }

  public async deleteManyInternals(locators: RouteLocator[]) {
    const { tenant } = this.context
    const paths = locators.map(locator => locator.from)
    return this.graphql.mutate<
      boolean,
      { locators: RouteLocator[]; paths: string[] }
    >(
      {
        mutate: rewriterDeleteManyInternalMutation,
        variables: { locators, paths },
      },
      {
        headers: {
          ...(this.options && this.options.headers),
          'Proxy-Authorization': this.context.authToken,
          VtexIdclientAutCookie: this.context.authToken,
          'x-vtex-tenant': tenant,
        },
        metric: 'rewriter-delete-many-internal',
      }
    )
  }
}

```


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

[User] Show me the implementation of store-indexer/node/clients/index.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

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

import { Catalog } from './catalog'
import { Messages } from './messages'
import { Rewriter } from './rewriter'
import { SearchGraphql } from './searchGraphql'

/* eslint-disable @typescript-eslint/explicit-member-accessibility */
export class Clients extends IOClients {
  get searchGraphql() {
    return this.getOrSet('searchGraphql', SearchGraphql)
  }

  get catalog() {
    return this.getOrSet('catalog', Catalog)
  }

  get rewriter() {
    return this.getOrSet('rewriter', Rewriter)
  }

  get messages() {
    return this.getOrSet('messages', Messages)
  }
}

```


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

[User] Show me the implementation of store-indexer/node/clients/searchGraphql.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

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

const searchUrlsCountQuery = `query SearchURLsCount($limit: Int){
  searchURLsCount(limit: $limit){
    path
  }
}`

export class SearchGraphql extends AppGraphQLClient {
  constructor(ctx: IOContext, opts?: InstanceOptions) {
    super('vtex.search-graphql@0.x', ctx, opts)
  }

  public async getSearchURLsCount(limit: number) {
    return this.graphql
      .query<any, any>(
        {
          query: searchUrlsCountQuery,
          variables: {
            limit,
          },
        },
        {
          metric: 'search-urls-count',
        }
      )
      .then(({ data: { searchURLsCount } }) => {
        return searchURLsCount
      })
  }
}

```


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

[User] Show me the implementation of store-indexer/node/clients/catalog.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

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

export type PageType =
  | 'Category'
  | 'Department'
  | 'Product'
  | 'FullText'
  | 'SubCategory'
  | 'Brand'
  | 'Search'
  | 'NotFound'

export interface CatalogPageTypeResponse {
  pageType: PageType
  id: string
  url: string
}

export interface FieldResponseAPI {
  Name: string
  CategoryId: number | null
  FieldId: number
  IsActive: boolean
  IsRequired: boolean
  FieldTypeId: number
  FieldTypeName: string
  FieldValueId: string | null
  Description: string | null
  IsStockKeepingUnit: boolean
  IsFilter: boolean
  IsOnProductDetails: boolean
  Position: number
  IsWizard: boolean
  IsTopMenuLinkActive: boolean
  IsSideMenuLinkActive: boolean
  DefaultValue: string | null
  FieldGroupId: number
  FieldGroupName: string
}

export class Catalog extends AppClient {
  constructor(ctx: IOContext, opts?: InstanceOptions) {
    super('vtex.catalog-api-proxy@0.x', ctx, opts)
  }

  public pageType = (path: string, query?: Record<string, string>) =>
    this.get<CatalogPageTypeResponse>(`/pub/portal/pagetype${path}`, {
      headers: {
        ...(this.options && this.options.headers),
        'Proxy-Authorization': this.context.authToken,
        'x-vtex-locale': this.context.locale,
        'x-vtex-tenant': this.context.tenant,
      },
      metric: 'catalog-pagetype',
      params: query,
    })

  public getField = (id: number) =>
    this.get<FieldResponseAPI>(`/pub/specification/fieldGet/${id}`, {
      headers: {
        ...(this.options && this.options.headers),
        'Proxy-Authorization': this.context.authToken,
        'x-vtex-locale': this.context.locale,
        'x-vtex-tenant': this.context.tenant,
      },
      metric: 'catalog-get-field-by-id',
    })

  private get = <T = any>(url: string, config: RequestConfig = {}) =>
    this.http.get<T>(`/proxy/catalog${url}`, config)
}

```


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

[User] Show me the implementation of store-indexer/node/typings/global.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { EventContext, RecorderState, Tenant } from '@vtex/api'
import { InternalInput, RouteLocator } from 'vtex.rewriter'

import { Clients } from '../clients'
import { Settings } from '../middlewares/settings'

export type Context = EventContext<Clients, State>

export interface State extends RecorderState {
  searchURLs: Array<{ path: string; canonicalPath?: string }>
  settings: Settings
  tenantInfo: Tenant
  internals?: InternalInput[]
  oldRoutes?: RouteLocator[]
}

export interface Event {
  appId: string
  key: string
  message: string
  sender: string
  senderName: string
  trigger: string
  buildId: string
  buildCode: string
  routeId: 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 store-indexer/node/middlewares/throttle.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

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

import { Context } from '../typings/global'

const MAX_REQUEST = 10
let COUNTER = 0

export async function throttle(_: Context, next: () => Promise<void>) {
  COUNTER++
  try {
    if (COUNTER > MAX_REQUEST) {
      throw new TooManyRequestsError()
    }
    await next()
  } finally {
    COUNTER--
  }
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/settings.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

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

import { Context } from '../typings/global'

export interface Settings {
  numberOfIndexedSearches: number
  usesMultiLanguageSearch: boolean
  resolveBrandMapQueryAs: string
}

export const DEFAULT_SETTINGS: Settings = {
  numberOfIndexedSearches: 0,
  resolveBrandMapQueryAs: 'b',
  usesMultiLanguageSearch: false,
}

export async function settings(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { apps },
  } = ctx

  const appSettings = await apps.getAppSettings(APP.ID)
  ctx.state.settings = { ...DEFAULT_SETTINGS, ...appSettings }

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/tenant.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Context } from '../typings/global'

const TEN_MINUTES_S = 10 * 60

export async function tenant(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { tenant: tenantClient },
  } = ctx
  const tenantInfo = await tenantClient.info({
    forceMaxAge: TEN_MINUTES_S,
  })

  const locale = tenantInfo.defaultLocale

  ctx.state.tenantInfo = tenantInfo
  ctx.vtex.locale = locale
  ctx.vtex.tenant = { locale }

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/utils/messages.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Messages } from '../clients/messages'

interface Message {
  content: string
  context: string
}

export const createTranslator = (service: Messages) => async (
  from: string,
  to: string,
  messages: Message[]
) => {
  if (from.toLowerCase() === to.toLowerCase()) {
    return messages.map(({ content }) => content)
  }
  const translations = await service.translateNoCache({
    indexedByFrom: [
      {
        from,
        messages,
      },
    ],
    to,
  })
  return translations
}

```


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

[User] Show me the implementation of store-indexer/node/utils/bindings.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Tenant } from '@vtex/api'
import { Product } from 'vtex.catalog-graphql'

export const filterBindingsBySalesChannel = (
  tenantInfo: Tenant,
  salesChannels: Product['salesChannel']
): Tenant['bindings'] => {
  const salesChannelsSet = salesChannels?.reduce((acc, sc) => {
    if (sc?.id) {
      acc.add(sc.id)
    }
    return acc
  }, new Set<string>())

  return tenantInfo.bindings.filter(binding => {
    if (binding.targetProduct === 'vtex-storefront') {
      const bindingSC: number | undefined =
        binding.extraContext.portal?.salesChannel
      const productActiveInBindingSC =
        bindingSC && salesChannelsSet?.has(bindingSC.toString())
      if (productActiveInBindingSC || !salesChannelsSet) {
        return true
      }
    }
    return false
  })
}

export const filterStoreBindings = (tenantInfo: Tenant): Tenant['bindings'] =>
  tenantInfo.bindings.filter(
    binding => binding.targetProduct === 'vtex-storefront'
  )

```