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

[User] Show me the implementation of google-geolocation-resolver/node/countries/ISO.ts from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ISOAlpha2, ISOAlpha3 } from './types'

const countryISOMapping: Array<[ISOAlpha2, ISOAlpha3]> = [
  ['AF', 'AFG'],
  ['AX', 'ALA'],
  ['AL', 'ALB'],
  ['DZ', 'DZA'],
  ['AS', 'ASM'],
  ['AD', 'AND'],
  ['AO', 'AGO'],
  ['AI', 'AIA'],
  ['AQ', 'ATA'],
  ['AG', 'ATG'],
  ['AR', 'ARG'],
  ['AM', 'ARM'],
  ['AW', 'ABW'],
  ['AU', 'AUS'],
  ['AT', 'AUT'],
  ['AZ', 'AZE'],
  ['BS', 'BHS'],
  ['BH', 'BHR'],
  ['BD', 'BGD'],
  ['BB', 'BRB'],
  ['BY', 'BLR'],
  ['BE', 'BEL'],
  ['BZ', 'BLZ'],
  ['BJ', 'BEN'],
  ['BM', 'BMU'],
  ['BT', 'BTN'],
  ['BO', 'BOL'],
  ['BA', 'BIH'],
  ['BW', 'BWA'],
  ['BV', 'BVT'],
  ['BR', 'BRA'],
  ['VG', 'VGB'],
  ['IO', 'IOT'],
  ['BN', 'BRN'],
  ['BG', 'BGR'],
  ['BF', 'BFA'],
  ['BI', 'BDI'],
  ['KH', 'KHM'],
  ['CM', 'CMR'],
  ['CA', 'CAN'],
  ['CV', 'CPV'],
  ['KY', 'CYM'],
  ['CF', 'CAF'],
  ['TD', 'TCD'],
  ['CL', 'CHL'],
  ['CN', 'CHN'],
  ['HK', 'HKG'],
  ['MO', 'MAC'],
  ['CX', 'CXR'],
  ['CC', 'CCK'],
  ['CO', 'COL'],
  ['KM', 'COM'],
  ['CG', 'COG'],
  ['CD', 'COD'],
  ['CK', 'COK'],
  ['CR', 'CRI'],
  ['CI', 'CIV'],
  ['HR', 'HRV'],
  ['CU', 'CUB'],
  ['CY', 'CYP'],
  ['CZ', 'CZE'],
  ['DK', 'DNK'],
  ['DJ', 'DJI'],
  ['DM', 'DMA'],
  ['DO', 'DOM'],
  ['EC', 'ECU'],
  ['EG', 'EGY'],
  ['SV', 'SLV'],
  ['GQ', 'GNQ'],
  ['ER', 'ERI'],
  ['EE', 'EST'],
  ['ET', 'ETH'],
  ['FK', 'FLK'],
  ['FO', 'FRO'],
  ['FJ', 'FJI'],
  ['FI', 'FIN'],
  ['FR', 'FRA'],
  ['GF', 'GUF'],
  ['PF', 'PYF'],
  ['TF', 'ATF'],
  ['GA', 'GAB'],
  ['GM', 'GMB'],
  ['GE', 'GEO'],
  ['DE', 'DEU'],
  ['GH', 'GHA'],
  ['GI', 'GIB'],
  ['GR', 'GRC'],
  ['GL', 'GRL'],
  ['GD', 'GRD'],
  ['GP', 'GLP'],
  ['GU', 'GUM'],
  ['GT', 'GTM'],
  ['GG', 'GGY'],
  ['GN', 'GIN'],
  ['GW', 'GNB'],
  ['GY', 'GUY'],
  ['HT', 'HTI'],
  ['HM', 'HMD'],
  ['VA', 'VAT'],
  ['HN', 'HND'],
  ['HU', 'HUN'],
  ['IS', 'ISL'],
  ['IN', 'IND'],
  ['ID', 'IDN'],
  ['IR', 'IRN'],
  ['IQ', 'IRQ'],
  ['IE', 'IRL'],
  ['IM', 'IMN'],
  ['IL', 'ISR'],
  ['IT', 'ITA'],
  ['JM', 'JAM'],
  ['JP', 'JPN'],
  ['JE', 'JEY'],
  ['JO', 'JOR'],
  ['KZ', 'KAZ'],
  ['KE', 'KEN'],
  ['KI', 'KIR'],
  ['KP', 'PRK'],
  ['KR', 'KOR'],
  ['KW', 'KWT'],
  ['KG', 'KGZ'],
  ['LA', 'LAO'],
  ['LV', 'LVA'],
  ['LB', 'LBN'],
  ['LS', 'LSO'],
  ['LR', 'LBR'],
  ['LY', 'LBY'],
  ['LI', 'LIE'],
  ['LT', 'LTU'],
  ['LU', 'LUX'],
  ['MK', 'MKD'],
  ['MG', 'MDG'],
  ['MW', 'MWI'],
  ['MY', 'MYS'],
  ['MV', 'MDV'],
  ['ML', 'MLI'],
  ['MT', 'MLT'],
  ['MH', 'MHL'],
  ['MQ', 'MTQ'],
  ['MR', 'MRT'],
  ['MU', 'MUS'],
  ['YT', 'MYT'],
  ['MX', 'MEX'],
  ['FM', 'FSM'],
  ['MD', 'MDA'],
  ['MC', 'MCO'],
  ['MN', 'MNG'],
  ['ME', 'MNE'],
  ['MS', 'MSR'],
  ['MA', 'MAR'],
  ['MZ', 'MOZ'],
  ['MM', 'MMR'],
  ['NA', 'NAM'],
  ['NR', 'NRU'],
  ['NP', 'NPL'],
  ['NL', 'NLD'],
  ['AN', 'ANT'],
  ['NC', 'NCL'],
  ['NZ', 'NZL'],
  ['NI', 'NIC'],
  ['NE', 'NER'],
  ['NG', 'NGA'],
  ['NU', 'NIU'],
  ['NF', 'NFK'],
  ['MP', 'MNP'],
  ['NO', 'NOR'],
  ['OM', 'OMN'],
  ['PK', 'PAK'],
  ['PW', 'PLW'],
  ['PS', 'PSE'],
  ['PA', 'PAN'],
  ['PG', 'PNG'],
  ['PY', 'PRY'],
  ['PE', 'PER'],
  ['PH', 'PHL'],
  ['PN', 'PCN'],
  ['PL', 'POL'],
  ['PT', 'PRT'],
  ['PR', 'PRI'],
  ['QA', 'QAT'],
  ['RE', 'REU'],
  ['RO', 'ROU'],
  ['RU', 'RUS'],
  ['RW', 'RWA'],
  ['BL', 'BLM'],
  ['SH', 'SHN'],
  ['KN', 'KNA'],
  ['LC', 'LCA'],
  ['MF', 'MAF'],
  ['PM', 'SPM'],
  ['VC', 'VCT'],
  ['WS', 'WSM'],
  ['SM', 'SMR'],
  ['ST', 'STP'],
  ['SA', 'SAU'],
  ['SN', 'SEN'],
  ['RS', 'SRB'],
  ['SC', 'SYC'],
  ['SL', 'SLE'],
  ['SG', 'SGP'],
  ['SK', 'SVK'],
  ['SI', 'SVN'],
  ['SB', 'SLB'],
  ['SO', 'SOM'],
  ['ZA', 'ZAF'],
  ['GS', 'SGS'],
  ['SS', 'SSD'],
  ['ES', 'ESP'],
  ['LK', 'LKA'],
  ['SD', 'SDN'],
  ['SR', 'SUR'],
  ['SJ', 'SJM'],
  ['SZ', 'SWZ'],
  ['SE', 'SWE'],
  ['CH', 'CHE'],
  ['SY', 'SYR'],
  ['TW', 'TWN'],
  ['TJ', 'TJK'],
  ['TZ', 'TZA'],
  ['TH', 'THA'],
  ['TL', 'TLS'],
  ['TG', 'TGO'],
  ['TK', 'TKL'],
  ['TO', 'TON'],
  ['TT', 'TTO'],
  ['TN', 'TUN'],
  ['TR', 'TUR'],
  ['TM', 'TKM'],
  ['TC', 'TCA'],
  ['TV', 'TUV'],
  ['UG', 'UGA'],
  ['UA', 'UKR'],
  ['AE', 'ARE'],
  ['GB', 'GBR'],
  ['US', 'USA'],
  ['UM', 'UMI'],
  ['UY', 'URY'],
  ['UZ', 'UZB'],
  ['VU', 'VUT'],
  ['VE', 'VEN'],
  ['VN', 'VNM'],
  ['VI', 'VIR'],
  ['WF', 'WLF'],
  ['EH', 'ESH'],
  ['YE', 'YEM'],
  ['ZM', 'ZMB'],
  ['ZW', 'ZWE'],
]

export const toAlpha3 = (country: ISOAlpha2): ISOAlpha3 => {
  const index = countryISOMapping.findIndex(([alpha2]) => alpha2 === country)

  return countryISOMapping[index][1]
}

export const toAlpha2 = (country: ISOAlpha3): ISOAlpha2 => {
  const index = countryISOMapping.findIndex(([, alpha3]) => alpha3 === country)

  return countryISOMapping[index][0]
}

export const isAlpha2 = (country: string): boolean => {
  return countryISOMapping.findIndex(([alpha2]) => alpha2 === country) !== -1
}

export const isAlpha3 = (country: string): boolean => {
  return countryISOMapping.findIndex(([, alpha3]) => alpha3 === country) !== -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 google-geolocation-resolver/node/countries/ARG.ts from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
const rules: Rules = {
  geolocation: {
    postalCode: {
      valueIn: 'long_name',
      types: ['postal_code'],
      required: false,
    },
    number: {
      valueIn: 'long_name',
      types: ['street_number'],
      required: true,
      notApplicable: true,
    },
    street: { valueIn: 'long_name', types: ['route'] },
    neighborhood: {
      valueIn: 'long_name',
      types: [
        'neighborhood',
        'sublocality_level_1',
        'sublocality_level_2',
        'sublocality_level_3',
        'sublocality_level_4',
        'sublocality_level_5',
      ],
    },
    state: {
      valueIn: 'long_name',
      types: ['administrative_area_level_1'],
    },
    city: {
      valueIn: 'long_name',
      types: ['administrative_area_level_2', 'locality'],
    },
  },
}

export default rules

```


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

[User] Show me the implementation of google-geolocation-resolver/node/countries/BOL.ts from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
const rules: Rules = {
  geolocation: {
    postalCode: {
      valueIn: 'long_name',
      types: ['postal_code'],
      required: false,
    },
    number: {
      valueIn: 'long_name',
      types: ['street_number'],
      required: true,
      notApplicable: true,
    },
    street: { valueIn: 'long_name', types: ['route'] },
    state: {
      valueIn: 'short_name',
      types: ['administrative_area_level_1'],
    },
    city: {
      valueIn: 'long_name',
      types: ['locality', 'administrative_area_level_2'],
    },
    neighborhood: {
      valueIn: 'long_name',
      types: ['administrative_area_level_3'],
    },
  },
}

export default rules

```


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

[User] Show me the implementation of google-geolocation-resolver/node/countries/types.ts from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
export type ISOAlpha2 =
  | 'AF'
  | 'AX'
  | 'AL'
  | 'DZ'
  | 'AS'
  | 'AD'
  | 'AO'
  | 'AI'
  | 'AQ'
  | 'AG'
  | 'AR'
  | 'AM'
  | 'AW'
  | 'AU'
  | 'AT'
  | 'AZ'
  | 'BS'
  | 'BH'
  | 'BD'
  | 'BB'
  | 'BY'
  | 'BE'
  | 'BZ'
  | 'BJ'
  | 'BM'
  | 'BT'
  | 'BO'
  | 'BA'
  | 'BW'
  | 'BV'
  | 'BR'
  | 'VG'
  | 'IO'
  | 'BN'
  | 'BG'
  | 'BF'
  | 'BI'
  | 'KH'
  | 'CM'
  | 'CA'
  | 'CV'
  | 'KY'
  | 'CF'
  | 'TD'
  | 'CL'
  | 'CN'
  | 'HK'
  | 'MO'
  | 'CX'
  | 'CC'
  | 'CO'
  | 'KM'
  | 'CG'
  | 'CD'
  | 'CK'
  | 'CR'
  | 'CI'
  | 'HR'
  | 'CU'
  | 'CY'
  | 'CZ'
  | 'DK'
  | 'DJ'
  | 'DM'
  | 'DO'
  | 'EC'
  | 'EG'
  | 'SV'
  | 'GQ'
  | 'ER'
  | 'EE'
  | 'ET'
  | 'FK'
  | 'FO'
  | 'FJ'
  | 'FI'
  | 'FR'
  | 'GF'
  | 'PF'
  | 'TF'
  | 'GA'
  | 'GM'
  | 'GE'
  | 'DE'
  | 'GH'
  | 'GI'
  | 'GR'
  | 'GL'
  | 'GD'
  | 'GP'
  | 'GU'
  | 'GT'
  | 'GG'
  | 'GN'
  | 'GW'
  | 'GY'
  | 'HT'
  | 'HM'
  | 'VA'
  | 'HN'
  | 'HU'
  | 'IS'
  | 'IN'
  | 'ID'
  | 'IR'
  | 'IQ'
  | 'IE'
  | 'IM'
  | 'IL'
  | 'IT'
  | 'JM'
  | 'JP'
  | 'JE'
  | 'JO'
  | 'KZ'
  | 'KE'
  | 'KI'
  | 'KP'
  | 'KR'
  | 'KW'
  | 'KG'
  | 'LA'
  | 'LV'
  | 'LB'
  | 'LS'
  | 'LR'
  | 'LY'
  | 'LI'
  | 'LT'
  | 'LU'
  | 'MK'
  | 'MG'
  | 'MW'
  | 'MY'
  | 'MV'
  | 'ML'
  | 'MT'
  | 'MH'
  | 'MQ'
  | 'MR'
  | 'MU'
  | 'YT'
  | 'MX'
  | 'FM'
  | 'MD'
  | 'MC'
  | 'MN'
  | 'ME'
  | 'MS'
  | 'MA'
  | 'MZ'
  | 'MM'
  | 'NA'
  | 'NR'
  | 'NP'
  | 'NL'
  | 'AN'
  | 'NC'
  | 'NZ'
  | 'NI'
  | 'NE'
  | 'NG'
  | 'NU'
  | 'NF'
  | 'MP'
  | 'NO'
  | 'OM'
  | 'PK'
  | 'PW'
  | 'PS'
  | 'PA'
  | 'PG'
  | 'PY'
  | 'PE'
  | 'PH'
  | 'PN'
  | 'PL'
  | 'PT'
  | 'PR'
  | 'QA'
  | 'RE'
  | 'RO'
  | 'RU'
  | 'RW'
  | 'BL'
  | 'SH'
  | 'KN'
  | 'LC'
  | 'MF'
  | 'PM'
  | 'VC'
  | 'WS'
  | 'SM'
  | 'ST'
  | 'SA'
  | 'SN'
  | 'RS'
  | 'SC'
  | 'SL'
  | 'SG'
  | 'SK'
  | 'SI'
  | 'SB'
  | 'SO'
  | 'ZA'
  | 'GS'
  | 'SS'
  | 'ES'
  | 'LK'
  | 'SD'
  | 'SR'
  | 'SJ'
  | 'SZ'
  | 'SE'
  | 'CH'
  | 'SY'
  | 'TW'
  | 'TJ'
  | 'TZ'
  | 'TH'
  | 'TL'
  | 'TG'
  | 'TK'
  | 'TO'
  | 'TT'
  | 'TN'
  | 'TR'
  | 'TM'
  | 'TC'
  | 'TV'
  | 'UG'
  | 'UA'
  | 'AE'
  | 'GB'
  | 'US'
  | 'UM'
  | 'UY'
  | 'UZ'
  | 'VU'
  | 'VE'
  | 'VN'
  | 'VI'
  | 'WF'
  | 'EH'
  | 'YE'
  | 'ZM'
  | 'ZW'

export type ISOAlpha3 =
  | 'AFG'
  | 'ALA'
  | 'ALB'
  | 'DZA'
  | 'ASM'
  | 'AND'
  | 'AGO'
  | 'AIA'
  | 'ATA'
  | 'ATG'
  | 'ARG'
  | 'ARM'
  | 'ABW'
  | 'AUS'
  | 'AUT'
  | 'AZE'
  | 'BHS'
  | 'BHR'
  | 'BGD'
  | 'BRB'
  | 'BLR'
  | 'BEL'
  | 'BLZ'
  | 'BEN'
  | 'BMU'
  | 'BTN'
  | 'BOL'
  | 'BIH'
  | 'BWA'
  | 'BVT'
  | 'BRA'
  | 'VGB'
  | 'IOT'
  | 'BRN'
  | 'BGR'
  | 'BFA'
  | 'BDI'
  | 'KHM'
  | 'CMR'
  | 'CAN'
  | 'CPV'
  | 'CYM'
  | 'CAF'
  | 'TCD'
  | 'CHL'
  | 'CHN'
  | 'HKG'
  | 'MAC'
  | 'CXR'
  | 'CCK'
  | 'COL'
  | 'COM'
  | 'COG'
  | 'COD'
  | 'COK'
  | 'CRI'
  | 'CIV'
  | 'HRV'
  | 'CUB'
  | 'CYP'
  | 'CZE'
  | 'DNK'
  | 'DJI'
  | 'DMA'
  | 'DOM'
  | 'ECU'
  | 'EGY'
  | 'SLV'
  | 'GNQ'
  | 'ERI'
  | 'EST'
  | 'ETH'
  | 'FLK'
  | 'FRO'
  | 'FJI'
  | 'FIN'
  | 'FRA'
  | 'GUF'
  | 'PYF'
  | 'ATF'
  | 'GAB'
  | 'GMB'
  | 'GEO'
  | 'DEU'
  | 'GHA'
  | 'GIB'
  | 'GRC'
  | 'GRL'
  | 'GRD'
  | 'GLP'
  | 'GUM'
  | 'GTM'
  | 'GGY'
  | 'GIN'
  | 'GNB'
  | 'GUY'
  | 'HTI'
  | 'HMD'
  | 'VAT'
  | 'HND'
  | 'HUN'
  | 'ISL'
  | 'IND'
  | 'IDN'
  | 'IRN'
  | 'IRQ'
  | 'IRL'
  | 'IMN'
  | 'ISR'
  | 'ITA'
  | 'JAM'
  | 'JPN'
  | 'JEY'
  | 'JOR'
  | 'KAZ'
  | 'KEN'
  | 'KIR'
  | 'PRK'
  | 'KOR'
  | 'KWT'
  | 'KGZ'
  | 'LAO'
  | 'LVA'
  | 'LBN'
  | 'LSO'
  | 'LBR'
  | 'LBY'
  | 'LIE'
  | 'LTU'
  | 'LUX'
  | 'MKD'
  | 'MDG'
  | 'MWI'
  | 'MYS'
  | 'MDV'
  | 'MLI'
  | 'MLT'
  | 'MHL'
  | 'MTQ'
  | 'MRT'
  | 'MUS'
  | 'MYT'
  | 'MEX'
  | 'FSM'
  | 'MDA'
  | 'MCO'
  | 'MNG'
  | 'MNE'
  | 'MSR'
  | 'MAR'
  | 'MOZ'
  | 'MMR'
  | 'NAM'
  | 'NRU'
  | 'NPL'
  | 'NLD'
  | 'ANT'
  | 'NCL'
  | 'NZL'
  | 'NIC'
  | 'NER'
  | 'NGA'
  | 'NIU'
  | 'NFK'
  | 'MNP'
  | 'NOR'
  | 'OMN'
  | 'PAK'
  | 'PLW'
  | 'PSE'
  | 'PAN'
  | 'PNG'
  | 'PRY'
  | 'PER'
  | 'PHL'
  | 'PCN'
  | 'POL'
  | 'PRT'
  | 'PRI'
  | 'QAT'
  | 'REU'
  | 'ROU'
  | 'RUS'
  | 'RWA'
  | 'BLM'
  | 'SHN'
  | 'KNA'
  | 'LCA'
  | 'MAF'
  | 'SPM'
  | 'VCT'
  | 'WSM'
  | 'SMR'
  | 'STP'
  | 'SAU'
  | 'SEN'
  | 'SRB'
  | 'SYC'
  | 'SLE'
  | 'SGP'
  | 'SVK'
  | 'SVN'
  | 'SLB'
  | 'SOM'
  | 'ZAF'
  | 'SGS'
  | 'SSD'
  | 'ESP'
  | 'LKA'
  | 'SDN'
  | 'SUR'
  | 'SJM'
  | 'SWZ'
  | 'SWE'
  | 'CHE'
  | 'SYR'
  | 'TWN'
  | 'TJK'
  | 'TZA'
  | 'THA'
  | 'TLS'
  | 'TGO'
  | 'TKL'
  | 'TON'
  | 'TTO'
  | 'TUN'
  | 'TUR'
  | 'TKM'
  | 'TCA'
  | 'TUV'
  | 'UGA'
  | 'UKR'
  | 'ARE'
  | 'GBR'
  | 'USA'
  | 'UMI'
  | 'URY'
  | 'UZB'
  | 'VUT'
  | 'VEN'
  | 'VNM'
  | 'VIR'
  | 'WLF'
  | 'ESH'
  | 'YEM'
  | 'ZMB'
  | 'ZWE'

```


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

[User] Show me the implementation of google-geolocation-resolver/node/countries/rules.ts from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ISOAlpha3 } from './types'
import ARG from './ARG'
import BOL from './BOL'
import BRA from './BRA'
import USA from './USA'

const rules: { [key in ISOAlpha3]?: Rules } = {
  ARG,
  BOL,
  BRA,
  USA,
}

export default rules

```


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

[User] Show me the implementation of google-geolocation-resolver/node/countries/USA.ts from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
const rules: Rules = {
  geolocation: {
    postalCode: {
      valueIn: 'long_name',
      types: ['postal_code'],
      required: false,
    },
    street: {
      valueIn: 'long_name',
      types: ['route'],
    },
    neighborhood: {
      valueIn: 'long_name',
      types: [
        'neighborhood',
        'sublocality_level_1',
        'sublocality_level_2',
        'sublocality_level_3',
        'sublocality_level_4',
        'sublocality_level_5',
      ],
    },
    state: {
      valueIn: 'short_name',
      types: ['administrative_area_level_1'],
    },
    city: {
      valueIn: 'long_name',
      types: ['locality'],
    },
  },
}

export default rules

```


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

[User] Show me the implementation of is-api-middleware-resolver/docs/README.md from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX Intelligent Search API Middleware Resolver

`vtex.is-api-middleware-resolver` is a boilerplate for the Intelligent Search Middleware feature.

Check the full documentation to learn how to create a middleware for your account.

<!-- TODO: add link to the documentation -->

```


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

[User] Show me the implementation of is-api-middleware-resolver/node/service.json from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "stack": "nodejs",
    "memory": 256,
    "minReplicas": 3,
    "workers": 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 is-api-middleware-resolver/node/package.json from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "is-api-middleware-resolver",
  "private": true,
  "license": "UNLICENSED",
  "dependencies": {
    "graphql": "^14.5.8",
    "graphql-tools": "^4.0.6",
    "vtex.is-api-middleware-graphql": "http://hiago--storecomponents.myvtex.com/_v/public/typings/v1/vtex.is-api-middleware-graphql@0.0.2/public"
  },
  "devDependencies": {
    "@types/atob": "^2.1.2",
    "@types/node": "^12.12.21",
    "@vtex/api": "6.45.12",
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "^1.19.1",
    "typescript": "3.9.7"
  },
  "version": "0.1.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 is-api-middleware-resolver/node/global.ts from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients/index'

declare global {
  type Context = ServiceContext<Clients>

  type SelectedFacet = {
    key: string
    value: string
  }

  type Operator = 'AND' | 'OR'

  type Options = {
    allowRedirect: boolean
  }

  type BoostAction = 'add' | 'remove' | 'promote' | 'demote'

  type BoostType =
    | 'term'
    | 'id'
    | 'skuId'
    | 'skuEan'
    | 'skuReference'
    | 'productLink'
    | 'product'
    | 'sku'
    | 'productId'
    | 'attribute'

  type DynamicRule = {
    action: BoostAction
    type: BoostType
    value: string
  }

  type SearchParams = {
    query?: string
    page?: string
    count?: string
    sort?: string
    operator?: string
    fuzzy?: string
    locale?: string
    allowRedirect?: boolean
    regionId?: string
    simulationBehavior?: 'skip' | 'only1P' | 'default' | null
    hideUnavailableItems?: boolean | null
    productOriginVtex?: string
    selectedFacets?: SelectedFacet[]
    dynamicRules?: DynamicRule[]
    searchState?: 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 is-api-middleware-resolver/node/index.ts from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Service, RecorderState, ParamsContext } from '@vtex/api'
import schema from 'vtex.is-api-middleware-graphql/graphql'

import { Clients, clients } from './clients'
import before from './resolvers/before'

export default new Service<Clients, RecorderState, ParamsContext>({
  clients,
  graphql: {
    resolvers: {
      Query: {
        before,
      },
    },
    schema,
  },
})

```


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

[User] Show me the implementation of is-api-middleware-resolver/node/clients/index.ts from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

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

const MEDIUM_TIMEOUT_MS = 2 * 1000

export class Clients extends IOClients {
  // Add client example
  // public get myClient(): ClientType {
  //   return this.getOrSet('myClient', ClientType)
  // }
}

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

```


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

[User] Show me the implementation of is-api-middleware-resolver/node/resolvers/before.ts from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default async function before(
  _: unknown,
  args: SearchParams,
  __: Context
): Promise<SearchParams> {
  // This is just an example. Change the implementation of this function however you like :)

  if (args.query === 'shoes') {
    const myDynamicRules: DynamicRule[] = [
      {
        action: 'promote',
        type: 'id',
        value: '123',
      },
    ]

    return { ...args, dynamicRules: myDynamicRules }
  }

  return args
}

```


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

[User] Show me the implementation of quickorder/messages/de.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "store/quickorder.ORD002": "Ungültiger Warenkorb",
    "store/quickorder.ORD003": "Kommunikationsfehler mit der Aktion",
    "store/quickorder.ORD004": "Negativer Gesamtbetrag",
    "store/quickorder.ORD005": "Kein Artikel im Warenkorb gefunden",
    "store/quickorder.ORD006": "Ungültiger Versand",
    "store/quickorder.ORD007": "Ungültiges Profil",
    "store/quickorder.ORD008": "Stornierte Bestellung",
    "store/quickorder.ORD009": "Ausreißerwerte",
    "store/quickorder.ORD011": "Produkt ohne SLA",
    "store/quickorder.ORD012": "Reservierung kann nicht vorgenommen werden",
    "store/quickorder.ORD013": "Produkt nicht verfügbar",
    "store/quickorder.ORD014": "Workflow-Fehler",
    "store/quickorder.ORD015": "Verkäuferfehler",
    "store/quickorder.ORD016": "Kommunikationsfehler",
    "store/quickorder.ORD017": "Aktionsfehler",
    "store/quickorder.ORD019": "Ungültiger Anhang",
    "store/quickorder.ORD020": "Ungültige Zahlung",
    "store/quickorder.ORD021": "Katalogfehler",
    "store/quickorder.ORD022": "Alte Warenkorb-Version",
    "store/quickorder.ORD023": "Nicht verfügbare Produkte",
    "store/quickorder.ORD024": "Präzisionspreis-Fehler",
    "store/quickorder.ORD025": "Fehlender obligatorischer Anhang",
    "store/quickorder.ORD026": "Fehler bei der Postleitzahl",
    "store/quickorder.ORD027": "Inaktives Produkt",
    "store/quickorder.ORD028": "Produkt nicht verfügbar",
    "store/quickorder.ORD029": "Versandfehler",
    "store/quickorder.ORD030": "Versandfehler",
    "store/quickorder.ORD031": "Versandfehler",
    "store/quickorder.addToCart": "In den Warenkorb legen",
    "store/quickorder.autocomplete.addButton": "Hinzufügen",
    "store/quickorder.autocomplete.placeholder": "Nach einem Produkt suchen...",
    "store/quickorder.autocomplete.selectSku": "Bitte wählen Sie eine SKU aus",
    "store/quickorder.autocomplete.multiplierOf": "Einheit Multiplikator von",
    "store/quickorder.available": "Verfügbar",
    "store/quickorder.back": "Zurück",
    "store/quickorder.cannotBeDelivered": "Kann nicht geliefert werden",
    "store/quickorder.inactive": "Nicht verfügbar",
    "store/quickorder.cannotGetSkuInfo": "Konnte die SKU-Informationen nicht abrufen",
    "store/quickorder.category.addButton": "Artikel zum Warenkorb hinzufügen",
    "store/quickorder.category.loading": "Wird geladen...",
    "store/quickorder.category.noneSelection": "Geben Sie eine Menge bei den Artikeln ein",
    "store/quickorder.category.multiplier": "Die Artikelmenge wurde auf das nächste Vielfache des Einheitsmultiplikators gerundet",
    "store/quickorder.invalidPattern": "Ungültiges Muster",
    "store/quickorder.review.label.content": "Inhalt",
    "store/quickorder.review.label.lineNumber": "#",
    "store/quickorder.review.label.quantity": "Menge",
    "store/quickorder.review.label.multiplier": "Einheit Multiplikator",
    "store/quickorder.review.label.totalQuantity": "Gesamtmenge",
    "store/quickorder.review.label.seller": "Verkäufer",
    "store/quickorder.review.label.sku": "SKU",
    "store/quickorder.review.label.status": "Status",
    "store/quickorder.review.label.emptyState": "Nichts anzuzeigen.",
    "store/quickorder.skuNotFound": "SKU nicht gefunden",
    "store/quickorder.upload.drop": "Hier können Sie Ihre XLS ablegen oder",
    "store/quickorder.upload.choose": "Eine Datei auswählen",
    "store/quickorder.valid": "Gültig",
    "store/quickorder.validate": "Validieren",
    "store/quickorder.withoutPriceFulfillment": "Produkt ohne Preis",
    "store/quickorder.withoutStock": "Ohne Lagerbestand",
    "store/quickorder.limited": "Eingeschränkter Artikel",
    "store/quickorder.partiallyAvailable": "Maximale Menge ist {quantity}. Insgesamt sind nur {totalQuantity} Einheiten verfügbar.",
    "store/toaster.cart.duplicated": "Element dupliziert",
    "store/toaster.cart.error": "Fehler beim Hinzufügen von Produkten zum Warenkorb",
    "store/toaster.cart.seeCart": "Warenkorb anzeigen",
    "store/toaster.cart.success": "Produkte erfolgreich zum Warenkorb hinzugefügt"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "Carrinho inválido",
  "store/quickorder.ORD003": "Erro de comunicação com promoções",
  "store/quickorder.ORD004": "Total negativo",
  "store/quickorder.ORD005": "Nenhum no carrinho",
  "store/quickorder.ORD006": "Entrega inválida",
  "store/quickorder.ORD007": "Perfil inválido",
  "store/quickorder.ORD008": "Pedido cancelado",
  "store/quickorder.ORD009": "Valores incoerentes",
  "store/quickorder.ORD011": "Produto sem SLA",
  "store/quickorder.ORD012": "Reserva não pode ser efetuada",
  "store/quickorder.ORD013": "Produto indisponível",
  "store/quickorder.ORD014": "Erro de Workflow",
  "store/quickorder.ORD015": "Erro de vendedor",
  "store/quickorder.ORD016": "Erro de comunicação",
  "store/quickorder.ORD017": "Erro de promoção",
  "store/quickorder.ORD019": "Anexo inválido",
  "store/quickorder.ORD020": "Pagamento inválido",
  "store/quickorder.ORD021": "Erro no catálogo",
  "store/quickorder.ORD022": "Versão antiga do carrinho",
  "store/quickorder.ORD023": "Produtos indisponíveis",
  "store/quickorder.ORD024": "Erro de precisão no preço",
  "store/quickorder.ORD025": "Faltando anexo obrigatório",
  "store/quickorder.ORD026": "Erro de código postal",
  "store/quickorder.ORD027": "Produto inativo",
  "store/quickorder.ORD028": "Produto indisponível",
  "store/quickorder.ORD029": "Erro de entrega",
  "store/quickorder.ORD030": "Erro de entrega",
  "store/quickorder.ORD031": "Erro de entrega",
  "store/quickorder.addToCart": "Adicionar ao Carrinho",
  "store/quickorder.autocomplete.addButton": "Adicionar",
  "store/quickorder.autocomplete.placeholder": "Busque um produto...",
  "store/quickorder.autocomplete.selectSku": "Por favor, selecione um SKU",
  "store/quickorder.autocomplete.multiplierOf": "Multiplicador de Unidade de",
  "store/quickorder.available": "Disponível",
  "store/quickorder.back": "Voltar",
  "store/quickorder.cannotBeDelivered": "Não pode ser entregue",
  "store/quickorder.inactive": "Indisponível",
  "store/quickorder.cannotGetSkuInfo": "Não foi possível obter informações do SKU",
  "store/quickorder.category.addButton": "Adicionar itens ao carrinho",
  "store/quickorder.category.loading": "Carregando...",
  "store/quickorder.category.noneSelection": "Informe alguma quantidade nos items desejados",
  "store/quickorder.category.multiplier": "A quantidade do item foi arredondada para o múltiplo mais próximo do multiplicador de unidade",
  "store/quickorder.invalidPattern": "Formato inválido",
  "store/quickorder.review.label.content": "Conteúdo",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "Quantidade",
  "store/quickorder.review.label.multiplier": "Multiplicador de Unidade",
  "store/quickorder.review.label.totalQuantity": "Quantidade total",
  "store/quickorder.review.label.seller": "Seller",
  "store/quickorder.review.label.sku": "SKU",
  "store/quickorder.review.label.status": "Status",
  "store/quickorder.review.label.emptyState": "Nada a mostrar.",
  "store/quickorder.skuNotFound": "SKU não encontrado",
  "store/quickorder.upload.choose": "selecione o arquivo",
  "store/quickorder.upload.drop": "Arraste aqui seu arquivo XLS ou",
  "store/quickorder.valid": "Válido",
  "store/quickorder.validate": "Validar",
  "store/quickorder.withoutPriceFulfillment": "Produto sem preço",
  "store/quickorder.withoutStock": "Sem estoque",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "A quantidade máxima é {quantity}. Existem apenas {totalQuantity} unidades disponíveis.",
  "store/toaster.cart.duplicated": "Item duplicado",
  "store/toaster.cart.error": "Erro adicionando produtos ao carrinho",
  "store/toaster.cart.seeCart": "Ver o carrinho",
  "store/toaster.cart.success": "Produtos adicionados com sucesso"
}

```


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

[User] Show me the implementation of quickorder/messages/en.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "Invalid cart",
  "store/quickorder.ORD003": "Communication error with promotion",
  "store/quickorder.ORD004": "Negative total amount",
  "store/quickorder.ORD005": "None item found in the cart",
  "store/quickorder.ORD006": "Invalid shipping",
  "store/quickorder.ORD007": "Invalid profile",
  "store/quickorder.ORD008": "Canceled order",
  "store/quickorder.ORD009": "Outlier values",
  "store/quickorder.ORD011": "Product without SLA",
  "store/quickorder.ORD012": "Reservation cannot be done",
  "store/quickorder.ORD013": "Unavailable product",
  "store/quickorder.ORD014": "Workflow error",
  "store/quickorder.ORD015": "Seller error",
  "store/quickorder.ORD016": "Communication error",
  "store/quickorder.ORD017": "Promotion error",
  "store/quickorder.ORD019": "Invalid attachment",
  "store/quickorder.ORD020": "Invalid payment",
  "store/quickorder.ORD021": "Catalog error",
  "store/quickorder.ORD022": "Old cart version",
  "store/quickorder.ORD023": "Unavailable products",
  "store/quickorder.ORD024": "Precision price error",
  "store/quickorder.ORD025": "Missing mandatory attachment",
  "store/quickorder.ORD026": "Postal code error",
  "store/quickorder.ORD027": "Inactive product",
  "store/quickorder.ORD028": "Product unavailable",
  "store/quickorder.ORD029": "Shipping error",
  "store/quickorder.ORD030": "Shipping error",
  "store/quickorder.ORD031": "Shipping error",
  "store/quickorder.addToCart": "Add to Cart",
  "store/quickorder.autocomplete.addButton": "Add",
  "store/quickorder.autocomplete.placeholder": "Search for a product...",
  "store/quickorder.autocomplete.selectSku": "Please select one SKU",
  "store/quickorder.autocomplete.multiplierOf": "Unit Multiplier of",
  "store/quickorder.available": "Available",
  "store/quickorder.back": "Back",
  "store/quickorder.cannotBeDelivered": "Cannot be delivered",
  "store/quickorder.inactive": "Unavailable",
  "store/quickorder.cannotGetSkuInfo": "Could not get SKU information",
  "store/quickorder.category.addButton": "Add items to Cart",
  "store/quickorder.category.loading": "Loading...",
  "store/quickorder.category.noneSelection": "Enter some quantity on the items",
  "store/quickorder.category.multiplier": "The item quantity has been rounded to the closest multiple of the unit multiplier",
  "store/quickorder.invalidPattern": "Invalid pattern",
  "store/quickorder.review.label.content": "Content",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "Quantity",
  "store/quickorder.review.label.multiplier": "Unit Multiplier",
  "store/quickorder.review.label.totalQuantity": "Total Quantity",
  "store/quickorder.review.label.seller": "Seller",
  "store/quickorder.review.label.sku": "SKU",
  "store/quickorder.review.label.status": "Status",
  "store/quickorder.review.label.emptyState": "Nothing to show.",
  "store/quickorder.skuNotFound": "SKU Not Found",
  "store/quickorder.upload.choose": "choose a file",
  "store/quickorder.upload.drop": "Drop here your XLS or",
  "store/quickorder.valid": "Valid",
  "store/quickorder.validate": "Validate",
  "store/quickorder.withoutPriceFulfillment": "Product without price",
  "store/quickorder.withoutStock": "Without stock",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "Max quantity is {quantity}. Only {totalQuantity} total units available.",
  "store/toaster.cart.duplicated": "Item duplicated",
  "store/toaster.cart.error": "Error adding products to the cart",
  "store/toaster.cart.seeCart": "See cart",
  "store/toaster.cart.success": "Products successfuly added to the cart"
}

```


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

[User] Show me the implementation of quickorder/messages/ro.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "Coș nevalid",
  "store/quickorder.ORD003": "Eroare de comunicare la promovare",
  "store/quickorder.ORD004": "Suma totală negativă",
  "store/quickorder.ORD005": "Niciun articol găsit în coș",
  "store/quickorder.ORD006": "Expediere nevalidă",
  "store/quickorder.ORD007": "Profil nevalid",
  "store/quickorder.ORD008": "Comandă anulată",
  "store/quickorder.ORD009": "Valori anterioare",
  "store/quickorder.ORD011": "Produs fără SLA",
  "store/quickorder.ORD012": "Rezervarea nu poate fi făcută",
  "store/quickorder.ORD013": "Produs indisponibil",
  "store/quickorder.ORD014": "Eroare flux de lucru",
  "store/quickorder.ORD015": "Eroare vânzător",
  "store/quickorder.ORD016": "Eroare de comunicare",
  "store/quickorder.ORD017": "Eroare la promoție",
  "store/quickorder.ORD019": "Atașament nevalid",
  "store/quickorder.ORD020": "Plată nevalidă",
  "store/quickorder.ORD021": "Eroare de catalog",
  "store/quickorder.ORD022": "Versiunea de coș veche",
  "store/quickorder.ORD023": "Produse indisponibile",
  "store/quickorder.ORD024": "Eroare de preț de precizie",
  "store/quickorder.ORD025": "Lipsește atașamentul obligatoriu",
  "store/quickorder.ORD026": "Eroare cod poștal",
  "store/quickorder.ORD027": "Produs inactiv",
  "store/quickorder.ORD028": "Produsul nu este disponibil",
  "store/quickorder.ORD029": "Eroare de expediere",
  "store/quickorder.ORD030": "Eroare de expediere",
  "store/quickorder.ORD031": "Eroare de expediere",
  "store/quickorder.addToCart": "Adauga in Cos",
  "store/quickorder.autocomplete.addButton": "Adauga",
  "store/quickorder.autocomplete.placeholder": "Căutați un produs...",
  "store/quickorder.autocomplete.selectSku": "Selecteaza un SKU",
  "store/quickorder.autocomplete.multiplierOf": "Multiplicator unitar al",
  "store/quickorder.available": "Disponibil",
  "store/quickorder.back": "Inapoi",
  "store/quickorder.cannotBeDelivered": "Nu poate fi livrat",
  "store/quickorder.inactive": "Indisponibil",
  "store/quickorder.cannotGetSkuInfo": "Nu s-au primit informațiile SKU",
  "store/quickorder.category.addButton": "Adauga articole in carucior",
  "store/quickorder.category.loading": "Se incarca...",
  "store/quickorder.category.noneSelection": "Introduceti cantitati",
  "store/quickorder.category.multiplier": "Cantitatea articolului a fost rotunjită la cel mai apropiat multiplu al multiplicatorului unității",
  "store/quickorder.invalidPattern": "Pattern Invalid",
  "store/quickorder.review.label.content": "Continut",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "Cantitate",
  "store/quickorder.review.label.multiplier": "Multiplicator unitar",
  "store/quickorder.review.label.totalQuantity": "Cantitate totală",
  "store/quickorder.review.label.seller": "Vanzator",
  "store/quickorder.review.label.sku": "SKU",
  "store/quickorder.review.label.status": "Stare",
  "store/quickorder.review.label.emptyState": "Nimic de afișat.",
  "store/quickorder.skuNotFound": "SKU negasit",
  "store/quickorder.upload.choose": "alege fisier",
  "store/quickorder.upload.drop": "Incarca aici XLS or",
  "store/quickorder.valid": "Valid",
  "store/quickorder.validate": "Validare",
  "store/quickorder.withoutPriceFulfillment": "Produs fără preț",
  "store/quickorder.withoutStock": "Fără stoc",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "Cantitatea maximă este {quantity}. Sunt disponibile doar {totalQuantity} unități în total.",
  "store/toaster.cart.duplicated": "Articol duplicat",
  "store/toaster.cart.error": "Eroare la adaugarea produselor in cos",
  "store/toaster.cart.seeCart": "Vezi cos",
  "store/toaster.cart.success": "Produse adaugate in cos"
}

```


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

[User] Show me the implementation of quickorder/messages/context.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "store/quickorder.ORD002",
  "store/quickorder.ORD003": "store/quickorder.ORD003",
  "store/quickorder.ORD004": "store/quickorder.ORD004",
  "store/quickorder.ORD005": "store/quickorder.ORD005",
  "store/quickorder.ORD006": "store/quickorder.ORD006",
  "store/quickorder.ORD007": "store/quickorder.ORD007",
  "store/quickorder.ORD008": "store/quickorder.ORD008",
  "store/quickorder.ORD009": "store/quickorder.ORD009",
  "store/quickorder.ORD011": "store/quickorder.ORD011",
  "store/quickorder.ORD012": "store/quickorder.ORD012",
  "store/quickorder.ORD013": "store/quickorder.ORD013",
  "store/quickorder.ORD014": "store/quickorder.ORD014",
  "store/quickorder.ORD015": "store/quickorder.ORD014",
  "store/quickorder.ORD016": "store/quickorder.ORD016",
  "store/quickorder.ORD017": "store/quickorder.ORD017",
  "store/quickorder.ORD019": "store/quickorder.ORD019",
  "store/quickorder.ORD020": "store/quickorder.ORD020",
  "store/quickorder.ORD021": "store/quickorder.ORD021",
  "store/quickorder.ORD022": "store/quickorder.ORD022",
  "store/quickorder.ORD023": "store/quickorder.ORD023",
  "store/quickorder.ORD024": "store/quickorder.ORD024",
  "store/quickorder.ORD025": "store/quickorder.ORD025",
  "store/quickorder.ORD026": "store/quickorder.ORD026",
  "store/quickorder.ORD027": "store/quickorder.ORD027",
  "store/quickorder.ORD028": "store/quickorder.ORD028",
  "store/quickorder.ORD029": "store/quickorder.ORD029",
  "store/quickorder.ORD030": "store/quickorder.ORD030",
  "store/quickorder.ORD031": "store/quickorder.ORD031",
  "store/quickorder.addToCart": "store/quickorder.addToCart",
  "store/quickorder.autocomplete.addButton": "store/quickorder.autocomplete.addButton",
  "store/quickorder.autocomplete.placeholder": "store/quickorder.autocomplete.placeholder",
  "store/quickorder.autocomplete.selectSku": "store/quickorder.autocomplete.selectSku",
  "store/quickorder.autocomplete.multiplierOf": "store/quickorder.autocomplete.multiplierOf",
  "store/quickorder.available": "store/quickorder.available",
  "store/quickorder.back": "store/quickorder.back",
  "store/quickorder.cannotBeDelivered": "store/quickorder.cannotBeDelivered",
  "store/quickorder.inactive": "store/quickorder.inactive",
  "store/quickorder.cannotGetSkuInfo": "store/quickorder.cannotGetSkuInfo",
  "store/quickorder.category.addButton": "store/quickorder.category.addButton",
  "store/quickorder.category.loading": "store/quickorder.category.loading",
  "store/quickorder.category.noneSelection": "store/quickorder.category.noneSelection",
  "store/quickorder.category.multiplier": "store/quickorder.category.multiplier",
  "store/quickorder.invalidPattern": "store/quickorder.invalidPattern",
  "store/quickorder.review.label.content": "store/quickorder.review.label.content",
  "store/quickorder.review.label.lineNumber": "store/quickorder.review.label.lineNumber",
  "store/quickorder.review.label.quantity": "store/quickorder.review.label.quantity",
  "store/quickorder.review.label.multiplier": "store/quickorder.review.label.multiplier",
  "store/quickorder.review.label.totalQuantity": "store/quickorder.review.label.totalQuantity",
  "store/quickorder.review.label.seller": "store/quickorder.review.label.seller",
  "store/quickorder.review.label.sku": "store/quickorder.review.label.sku",
  "store/quickorder.review.label.status": "store/quickorder.review.label.status",
  "store/quickorder.review.label.emptyState": "store/quickorder.review.label.emptyState",
  "store/quickorder.skuNotFound": "store/quickorder.skuNotFound",
  "store/quickorder.upload.choose": "store/quickorder.upload.choose",
  "store/quickorder.upload.drop": "store/quickorder.upload.drop",
  "store/quickorder.valid": "store/quickorder.valid",
  "store/quickorder.validate": "store/quickorder.validate",
  "store/quickorder.withoutPriceFulfillment": "store/quickorder.withoutPriceFulfillment",
  "store/quickorder.withoutStock": "store/quickorder.withoutStock",
  "store/quickorder.limited": "store/quickorder.limited",
  "store/quickorder.partiallyAvailable": "store/quickorder.partiallyAvailable",
  "store/toaster.cart.duplicated": "store/toaster.cart.duplicated",
  "store/toaster.cart.error": "store/toaster.cart.error",
  "store/toaster.cart.seeCart": "store/toaster.cart.seeCart",
  "store/toaster.cart.success": "store/toaster.cart.success"
}

```


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

[User] Show me the implementation of quickorder/messages/ko.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "유효하지 않은 장바구니입니다",
  "store/quickorder.ORD003": "프로모션 일시 오류",
  "store/quickorder.ORD004": "총 합계를 다시 확인해주세요",
  "store/quickorder.ORD005": "장바구니 내역이 비어있습니다",
  "store/quickorder.ORD006": "유효하지 않은 배송지입니다",
  "store/quickorder.ORD007": "유효하지 않은 사용자 정보입니다",
  "store/quickorder.ORD008": "취소된 주문입니다",
  "store/quickorder.ORD009": "이상값",
  "store/quickorder.ORD011": "SLA가 없는 제품",
  "store/quickorder.ORD012": "예약을 실행할 수 없습니다",
  "store/quickorder.ORD013": "유효하지 않은 제품번호입니다",
  "store/quickorder.ORD014": "작업 오류",
  "store/quickorder.ORD015": "판매자 정보 오류",
  "store/quickorder.ORD016": "통신 실패",
  "store/quickorder.ORD017": "프로모션 정보 오류",
  "store/quickorder.ORD019": "유효하지 않은 첨부파일입니다",
  "store/quickorder.ORD020": "잘못된 지불",
  "store/quickorder.ORD021": "카탈로그 오류",
  "store/quickorder.ORD022": "지난 장바구니",
  "store/quickorder.ORD023": "해당 제품을 주문할 수 없습니다",
  "store/quickorder.ORD024": "가격정보 오류",
  "store/quickorder.ORD025": "첨부파일을 확인해주세요",
  "store/quickorder.ORD026": "우편번호 오류",
  "store/quickorder.ORD027": "비활성화된 제품입니다",
  "store/quickorder.ORD028": "해당 제품을 주문할 수 없습니다",
  "store/quickorder.ORD029": "배송지 오류",
  "store/quickorder.ORD030": "배송지 오류",
  "store/quickorder.ORD031": "배송지 오류",
  "store/quickorder.addToCart": "장바구니에 추가",
  "store/quickorder.autocomplete.addButton": "장바구니에 추가",
  "store/quickorder.autocomplete.placeholder": "제품을 검색 중 입니다...",
  "store/quickorder.autocomplete.selectSku": "SKU를 선택해주세요",
  "store/quickorder.autocomplete.multiplierOf": "주문 단위:",
  "store/quickorder.available": "주문 가능",
  "store/quickorder.back": "뒤",
  "store/quickorder.cannotBeDelivered": "배송 불가",
  "store/quickorder.inactive": "사용 불가능",
  "store/quickorder.cannotGetSkuInfo": "SKU 정보를 가져올 수 없습니다",
  "store/quickorder.category.addButton": "장바구니가 비어있습니다",
  "store/quickorder.category.loading": "로딩 중...",
  "store/quickorder.category.noneSelection": "주문 수량을 입력해주세요",
  "store/quickorder.category.multiplier": "주문 단위 기준으로 수량이 조정되었습니다",
  "store/quickorder.invalidPattern": "잘못된 패턴",
  "store/quickorder.review.label.content": "입력값",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "수량",
  "store/quickorder.review.label.multiplier": "주문 단위",
  "store/quickorder.review.label.totalQuantity": "총 수량",
  "store/quickorder.review.label.seller": "판매자",
  "store/quickorder.review.label.sku": "SKU",
  "store/quickorder.review.label.status": "상태",
  "store/quickorder.review.label.emptyState": "표시할 내용이 없습니다.",
  "store/quickorder.skuNotFound": "SKU를 조회할 수 없습니다",
  "store/quickorder.upload.choose": "업로드할 파일을 선택해 주세요.",
  "store/quickorder.upload.drop": "마우스로 드래그해서 파일을 추가하거나",
  "store/quickorder.valid": "주문 가능",
  "store/quickorder.validate": "다음",
  "store/quickorder.withoutPriceFulfillment": "가격정보가 없습니다",
  "store/quickorder.withoutStock": "재고 부족",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "최대 수량은 {quantity}입니다. {totalQuantity} 총 단위만 사용할 수 있습니다.",
  "store/toaster.cart.duplicated": "중복된 항목이 있습니다",
  "store/toaster.cart.error": "장바구니에 담기가 실패하였습니다",
  "store/toaster.cart.seeCart": "장바구니",
  "store/toaster.cart.success": "장바구니에 제품을 추가했습니다"
}

```


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

[User] Show me the implementation of quickorder/messages/id.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "Troli tidak valid",
  "store/quickorder.ORD003": "Kesalahan komunikasi dengan promosi",
  "store/quickorder.ORD004": "Total jumlah negatif",
  "store/quickorder.ORD005": "Tidak ada item yang ditemukan di trol",
  "store/quickorder.ORD006": "Pengiriman tidak valid",
  "store/quickorder.ORD007": "Profil tidak valid",
  "store/quickorder.ORD008": "Pesanan yang dibatalkan",
  "store/quickorder.ORD009": "Nilai titik luar",
  "store/quickorder.ORD011": "Produk tanpa SLA",
  "store/quickorder.ORD012": "Reservasi tidak dapat dilakukan",
  "store/quickorder.ORD013": "Produk yang tidak tersedia",
  "store/quickorder.ORD014": "Kesalahan alur kerja",
  "store/quickorder.ORD015": "Kesalahan penjual",
  "store/quickorder.ORD016": "Kesalahan komunikasi",
  "store/quickorder.ORD017": "Kesalahan promosi",
  "store/quickorder.ORD019": "Lampiran tidak valid",
  "store/quickorder.ORD020": "Pembayaran tidak valid",
  "store/quickorder.ORD021": "Kesalahan katalog",
  "store/quickorder.ORD022": "Versi troli lama",
  "store/quickorder.ORD023": "Produk yang tidak tersedia",
  "store/quickorder.ORD024": "Kesalahan harga presisi",
  "store/quickorder.ORD025": "Lampiran wajib tidak ditemukan",
  "store/quickorder.ORD026": "Kesalahan kode pos",
  "store/quickorder.ORD027": "Produk tidak aktif",
  "store/quickorder.ORD028": "Produk tidak tersedia",
  "store/quickorder.ORD029": "Kesalahan pengiriman",
  "store/quickorder.ORD030": "Kesalahan pengiriman",
  "store/quickorder.ORD031": "Kesalahan pengiriman",
  "store/quickorder.addToCart": "Tambahkan ke Troli",
  "store/quickorder.autocomplete.addButton": "Tambahkan",
  "store/quickorder.autocomplete.placeholder": "Cari produk...",
  "store/quickorder.autocomplete.selectSku": "Pilih satu SKU",
  "store/quickorder.autocomplete.multiplierOf": "Pengali Unit",
  "store/quickorder.available": "Tersedia",
  "store/quickorder.back": "Kembali",
  "store/quickorder.cannotBeDelivered": "Tidak dapat dikirimkan",
  "store/quickorder.inactive": "Tidak tersedia",
  "store/quickorder.cannotGetSkuInfo": "Tidak bisa mendapat informasi SKU",
  "store/quickorder.category.addButton": "Tambahkan item ke Troli",
  "store/quickorder.category.loading": "Memuat…",
  "store/quickorder.category.noneSelection": "Masukkan beberapa jumlah untuk item",
  "store/quickorder.category.multiplier": "Jumlah item dibulatkan ke kelipatan terdekat dari pengali unit",
  "store/quickorder.invalidPattern": "Pola tidka valid",
  "store/quickorder.review.label.content": "Konten",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "Jumlah",
  "store/quickorder.review.label.multiplier": "Pengali Unit",
  "store/quickorder.review.label.totalQuantity": "Total Jumlah",
  "store/quickorder.review.label.seller": "Penjual",
  "store/quickorder.review.label.sku": "SKU",
  "store/quickorder.review.label.status": "Status",
  "store/quickorder.review.label.emptyState": "Tidak ada yang dapat ditampilkan.",
  "store/quickorder.skuNotFound": "SKU Tidak Ditemukan",
  "store/quickorder.upload.choose": "pilih file",
  "store/quickorder.upload.drop": "Lepaskan XLS Anda di sini atau",
  "store/quickorder.valid": "Valid",
  "store/quickorder.validate": "Validasi",
  "store/quickorder.withoutPriceFulfillment": "Produk tanpa harga",
  "store/quickorder.withoutStock": "Tanpa stok",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "Max quantity is {quantity}. Only {totalQuantity} total units available.",
  "store/toaster.cart.duplicated": "Item diduplikat",
  "store/toaster.cart.error": "Terjadi kesalahan saat menambahkan produk ke troli",
  "store/toaster.cart.seeCart": "Lihat troli",
  "store/toaster.cart.success": "Produk berhasil ditambahkan ke troli"
}

```


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

[User] Show me the implementation of quickorder/messages/es.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "Carrito inválido",
  "store/quickorder.ORD003": "Error de comunicación con promoción",
  "store/quickorder.ORD004": "Importe total negativo",
  "store/quickorder.ORD005": "Ningún artículo encontrado en el carrito",
  "store/quickorder.ORD006": "Envío no válido",
  "store/quickorder.ORD007": "Perfil no válido",
  "store/quickorder.ORD008": "Pedido cancelado",
  "store/quickorder.ORD009": "Valores atípicos",
  "store/quickorder.ORD011": "Producto sin SLA",
  "store/quickorder.ORD012": "No se puede hacer la reserva",
  "store/quickorder.ORD013": "Producto no disponible",
  "store/quickorder.ORD014": "Error de flujo de trabajo",
  "store/quickorder.ORD015": "Error del vendedor",
  "store/quickorder.ORD016": "Error de comunicación",
  "store/quickorder.ORD017": "Error de promoción",
  "store/quickorder.ORD019": "Archivo adjunto no válido",
  "store/quickorder.ORD020": "Pago no válido",
  "store/quickorder.ORD021": "Error de catálogo",
  "store/quickorder.ORD022": "Versión de carrito anterior",
  "store/quickorder.ORD023": "Productos no disponibles",
  "store/quickorder.ORD024": "Error de precio de precisión",
  "store/quickorder.ORD025": "Falta el archivo adjunto obligatorio",
  "store/quickorder.ORD026": "Error de código postal",
  "store/quickorder.ORD027": "Producto inactivo",
  "store/quickorder.ORD028": "Producto no disponible",
  "store/quickorder.ORD029": "Error de envío",
  "store/quickorder.ORD030": "Error de envío",
  "store/quickorder.ORD031": "Error de envío",
  "store/quickorder.addToCart": "Agregar al carrito",
  "store/quickorder.autocomplete.addButton": "Agregar",
  "store/quickorder.autocomplete.placeholder": "Buscar un producto...",
  "store/quickorder.autocomplete.selectSku": "Por favor, seleccione un SKU",
  "store/quickorder.autocomplete.multiplierOf": "Multiplicador de unidades de",
  "store/quickorder.available": "Disponible",
  "store/quickorder.back": "Atrás",
  "store/quickorder.cannotBeDelivered": "No se puede entregar",
  "store/quickorder.inactive": "Indisponible",
  "store/quickorder.cannotGetSkuInfo": "No se pudo obtener la información de SKU",
  "store/quickorder.category.addButton": "Agregar ítems al carrito",
  "store/quickorder.category.loading": "Cargando...",
  "store/quickorder.category.noneSelection": "Ingresa una cantidad en los ítems",
  "store/quickorder.category.multiplier": "La cantidad del artículo se ha redondeado al múltiplo más cercano del multiplicador de unidades.",
  "store/quickorder.invalidPattern": "Formato no válido",
  "store/quickorder.review.label.content": "Contenido",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "Cantidad",
  "store/quickorder.review.label.multiplier": "Multiplicador de unidades",
  "store/quickorder.review.label.totalQuantity": "Cantidad total",
  "store/quickorder.review.label.seller": "Seller",
  "store/quickorder.review.label.sku": "SKU",
  "store/quickorder.review.label.status": "Estado",
  "store/quickorder.review.label.emptyState": "Nada que mostrar.",
  "store/quickorder.skuNotFound": "SKU no encontrado",
  "store/quickorder.upload.choose": "selecciona un archivo",
  "store/quickorder.upload.drop": "Suelta tu XLS aquí o",
  "store/quickorder.valid": "Válido",
  "store/quickorder.validate": "Validar",
  "store/quickorder.withoutPriceFulfillment": "Producto sin precio",
  "store/quickorder.withoutStock": "Sin stock",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "La cantidad máxima es {quantity}. Solo hay {totalQuantity} unidades disponibles.",
  "store/toaster.cart.duplicated": "Elemento duplicado",
  "store/toaster.cart.error": "Error al agregar productos al carrito",
  "store/toaster.cart.seeCart": "Ver el carrito",
  "store/toaster.cart.success": "Productos agregados correctamente"
}

```


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

[User] Show me the implementation of quickorder/messages/ar.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/quickorder.ORD002": "عربة غير صالحة",
  "store/quickorder.ORD003": "خطأ في الاتصال مع العرض الترويجي",
  "store/quickorder.ORD004": "المبلغ الإجمالي السلبي",
  "store/quickorder.ORD005": "لم يتم العثور على أي عنصر في العربة",
  "store/quickorder.ORD006": "الشحن غير صالح",
  "store/quickorder.ORD007": "الملف الشخصي غير صالح",
  "store/quickorder.ORD008": "طلب ملغي",
  "store/quickorder.ORD009": "القيم البعيدة",
  "store/quickorder.ORD011": "المنتج بدون SLA",
  "store/quickorder.ORD012": "لا يمكن إجراء الحجز",
  "store/quickorder.ORD013": "منتج غير متوفر",
  "store/quickorder.ORD014": "خطأ في سير العمل",
  "store/quickorder.ORD015": "خطأ البائع",
  "store/quickorder.ORD016": "خطأ في الاتصال",
  "store/quickorder.ORD017": "خطأ في العرض",
  "store/quickorder.ORD019": "المرفق غير صالح",
  "store/quickorder.ORD020": "الدفع غير صالح",
  "store/quickorder.ORD021": "خطأ في الكتالوج",
  "store/quickorder.ORD022": "إصدار عربة التسوق قديم",
  "store/quickorder.ORD023": "المنتجات غير المتاحة",
  "store/quickorder.ORD024": "خطأ في السعر الدقيق",
  "store/quickorder.ORD025": "مرفق إلزامي مفقود",
  "store/quickorder.ORD026": "خطأ في الرمز البريدي",
  "store/quickorder.ORD027": "المنتج غير نشط",
  "store/quickorder.ORD028": "المنتج غير متوفر",
  "store/quickorder.ORD029": "خطأ في الشحن",
  "store/quickorder.ORD030": "خطأ في الشحن",
  "store/quickorder.ORD031": "خطأ في الشحن",
  "store/quickorder.addToCart": "أضف لعربة التسوق",
  "store/quickorder.autocomplete.addButton": "إضافة",
  "store/quickorder.autocomplete.placeholder": "البحث عن منتج...",
  "store/quickorder.autocomplete.selectSku": "الرجاء تحديد رمز SKU واحد",
  "store/quickorder.autocomplete.multiplierOf": "وحدة مضاعفات",
  "store/quickorder.available": "متاحة",
  "store/quickorder.back": "عودة",
  "store/quickorder.cannotBeDelivered": "لا يمكن تسليمه",
  "store/quickorder.inactive": "غير متوفر",
  "store/quickorder.cannotGetSkuInfo": "تعذر الحصول على معلومات وحدة SKU",
  "store/quickorder.category.addButton": "إضافة عناصر إلى العربة",
  "store/quickorder.category.loading": "جاري التحميل...",
  "store/quickorder.category.noneSelection": "أدخل بعض الكمية على العناصر",
  "store/quickorder.category.multiplier": "تم تقريب كمية العنصر إلى أقرب مضاعف من مضاعف الوحدة",
  "store/quickorder.invalidPattern": "نمط غير صالح",
  "store/quickorder.review.label.content": "محتوى",
  "store/quickorder.review.label.lineNumber": "#",
  "store/quickorder.review.label.quantity": "الكمية",
  "store/quickorder.review.label.multiplier": "وحدة المضاعف",
  "store/quickorder.review.label.totalQuantity": "إجمالي الكمية",
  "store/quickorder.review.label.seller": "البائع",
  "store/quickorder.review.label.sku": "الـ SKU",
  "store/quickorder.review.label.status": "الحالة",
  "store/quickorder.review.label.emptyState": "لا يوجد شيء لإظهاره",
  "store/quickorder.skuNotFound": "وحدة SKU غير موجودة",
  "store/quickorder.upload.choose": "اختر ملفًا",
  "store/quickorder.upload.drop": "قم بإسقاط ملف XLS هنا أو",
  "store/quickorder.valid": "صالح",
  "store/quickorder.validate": "تأكيد التحقق",
  "store/quickorder.withoutPriceFulfillment": "المنتج بدون سعر",
  "store/quickorder.withoutStock": "بدون مخزون",
  "store/quickorder.limited": "Restricted Item",
  "store/quickorder.partiallyAvailable": "الكمية القصوى هي {quantity}. فقط {totalQuantity} وحدات إجمالية متاحة.",
  "store/toaster.cart.duplicated": "عنصر مكرر",
  "store/toaster.cart.error": "خطأ في إضافة المنتجات إلى عربة التسوق",
  "store/toaster.cart.seeCart": "مشاهدة العربة",
  "store/toaster.cart.success": "تم إضافة المنتجات بنجاح إلى عربة التسوق"
}

```


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

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

[Assistant]
Here's the implementation:

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

# Quickorder

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

The Quickorder app, designed for **B2B scenarios**, creates a custom page in your store aimed at purchases in bulk, offering tools such as uploading a spreadsheet to make bulk orders more agile.

![quick-order](https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/RawQuickorder.png)
_Example of a quick order page without customization_

## Configuration

1. [Install](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-installing-an-app) the Quickorder app by running `vtex install vtex.quickorder@3.x` in your terminal.
2. Open your store's Store Theme app directory in your code editor.
3. Add the Quickorder app as a `peerDependency` in the `manifest.json` file:

   ```diff
    "peerDependencies": {
   +  "vtex.quickorder": "3.x"
    }
   ```

Once installed, the app will generate a new route called `/quickorder` for your store, creating the Quickorder custom page that allows bulk orders.

The new page already contains a default template with all blocks exported by the **Quickorder** app. This means the **Quickorder** page is ready to be rendered and no further actions are required.

However, you can customize it by overwriting the template and creating a brand new one tailored to your preferences. To do so, check the [Advanced configurations](#advanced-configurations) section below.

### Advanced configurations

In order to define the **Quickorder** custom page UI, you must use the blocks exported by the `vtex.quickorder` app:

| Block name                | Description                                                                                |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `quickorder-textarea`     | Renders a text box, allowing users to paste a list of desired SKUs following the structure `[SKU Reference ID],[Quantity]`. For more on this component, check out the [How the app works](#how-the-app-works) section.                                                                |
| `quickorder-upload`       | Renders an upload box, working as an option that replaces the Copy/Paste SKU component (`quickorder-textarea` block). It allows users to upload a spreadsheet containing the desired SKUs. For more on this component, check out the [How the app works](#how-the-app-works) section. |
| `quickorder-autocomplete` | Renders a custom search bar, allowing users to look for SKUs and add them to the Minicart at once according to the desired quantity. For more on this component, check out the [How the app works](#how-the-app-works) section.                                                       |
| `quickorder-categories`   | Renders the store's category tree, allowing users to look for the desired SKUs and add them to the Minicart at once according to the desired quantity.                                                                                |

To use these blocks, follow the instructions below.

1. In the `store` folder of your Store Theme app, create a new file called `quickorder.json`.
2. Then, create a new store template called `store.quickorder`.
3. In its `blocks` array, declare the blocks responsible for building your **Quickorder** custom page. For example:

   ```json
   {
     "store.quickorder": {
       "blocks": [
         "flex-layout.row#title",
         "flex-layout.row#textarea",
         "flex-layout.row#upload",
         "flex-layout.row#autocomplete",
         "flex-layout.row#categories"
       ]
     },
   ```

4. Configure each one of the blocks previously declared using its props, as shown in the example below:

   ```json
   {
     "store.quickorder": {
       "blocks": [
         "flex-layout.row#title",
         "flex-layout.row#textarea",
         "flex-layout.row#upload",
         "flex-layout.row#autocomplete",
         "flex-layout.row#categories"
       ]
     },
     "flex-layout.row#title": {
       "children": ["flex-layout.col#title"]
     },
     "flex-layout.col#title": {
       "children": ["rich-text#title"],
       "props": {
         "blockClass": "titleQuickorder",
         "preventVerticalStretch": true
       }
     },
     "rich-text#title": {
       "props": {
         "text": "## Quick Order"
       }
     },

     "flex-layout.row#textarea": {
       "children": ["flex-layout.col#textarea"]
     },
     "flex-layout.col#textarea": {
       "children": ["quickorder-textarea"]
     },
     "quickorder-textarea": {
       "props": {
         "componentOnly": false,
         "text": "Copy/Paste Skus",
         "description": "[SKU Reference ID],[Quantity]",
       }
     },

     "flex-layout.row#upload": {
       "children": ["flex-layout.col#upload"]
     },
     "flex-layout.col#upload": {
       "children": ["quickorder-upload"]
     },
     "quickorder-upload": {
       "props": {
         "componentOnly": false,
         "text": "Upload",
         "description": "Upload a Spreadsheet with two columns (SKU, Quantity) to bulk order",
         "downloadText": "Click here to download a spreadsheet model",
         "alwaysShowAddToCart:": true,
       }
     },

     "flex-layout.row#autocomplete": {
       "children": ["flex-layout.col#autocomplete"]
     },
     "flex-layout.col#autocomplete": {
       "children": ["quickorder-autocomplete"]
     },
     "quickorder-autocomplete": {
       "props": {
         "componentOnly": false,
         "text": "One by One",
         "description": "Type the product name, select, enter quantity, add to the cart",
       }
     },

     "flex-layout.row#categories": {
       "children": ["flex-layout.col#categories"]
     },
     "flex-layout.col#categories": {
       "children": ["quickorder-categories"]
     },
     "quickorder-categories": {
       "props": {
         "componentOnly": false,
         "text": "Categories",
         "description": "Add products directly from their categories",
       }
     }
   }
   ```

#### Props

All blocks exported by the `quickorder` app share the same props:

| Prop name       | Type      | Description                                                                                | Default value |
| --------------- | --------- | --------------------------------------------------------------------------------------------------------------- | ------------- |
| `text`          | `string`  | Component title.                                                                                | `undefined`   |
| `description`   | `string`  | Component description. It should be used to explain users how to properly bulk order using the given component. | `undefined`   |
| `componentOnly` | `boolean` | If `true`, only the component will be loaded, removing the `text` and `description` column.                     | `false`       |

Especially, the `quickorder-upload` block also can use the following prop:

| Prop name      | Type     | Description                                                                                | Default value |
| -------------- | -------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| `downloadText` | `string` | Defines a text for the spreadsheet download button. Use this prop to explain users how to properly download the spreadsheet model provided by the component. | `undefined`   |
| `alwaysShowAddToCart` | `boolean` | Property that defines if the add to cart button will appear even if it has some invalid Sku. | `true`   |

In addition, the `quickorder-upload` and the `quickorder-textarea` block can use the following prop:

| Prop name       | Type                                                    | Description                                                                                | Default value |
| --------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `hiddenColumns` | `array of strings (i.e. ["sku", "seller", "quantity"])` | Defines which columns of the review block must be hidden, you might hide more than one column separating the values with comma | `[]`          |

For more on each of the components and their respective functionalities, check out the [How the app works](#how-the-app-works) section below.

## How the app works

The **Quickorder** custom page works just like any other store page, with a unique route and its own components.

This means that you can display a link to it in components from other pages, such as the homepage, so that your storefront users can access it faster.

When configuring the page itself, we recommend that you choose a maximum of 2 bulk order options (from the total of 4 available) to establish clear communication with users. Remember: the more options on the UI, the more complex the order process becomes.

Read the following sections to learn more about the available options.

### Copy/Paste SKU (`quickorder-textarea` block)

The **Copy/Paste SKU** option allows user to paste a list of desired SKUs in a text box following the structure `[SKU Reference ID],[Quantity]`, where:

- `SKU Reference ID`: SKU Reference ID (be aware that this is not the SKU ID displayed in your admin's Catalog).
- `Quantity`: SKU quantity you wish to add to the cart.

For example:

![Copy & Paste](https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Copy-n-Paste.gif)

> ℹ Remember that you need to validate the list after pasting it. Validating the Reference IDs will let you know if the selected SKUs are in fact available for purchase.

### Upload (`quickorder-upload` block)

Another possible option that replaces the **Copy/Paste SKU** option is to upload a spreadsheet containing two columns (SKU and Quantity) to the **Upload** component (`quickorder-upload` block).

![Spreadsheet](https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Spreadsheet.png)

The spreadsheet will work in the same way as the list pasted using the **Copy/Paste SKU** option, as follows:

- `SKU` column: SKU Reference ID (be aware that this is not the SKU ID displayed in your admin's Catalog).
- `Quantity` column: SKU quantity you wish to add to the cart.

> ℹ Once uploaded, the spreadsheet is then validated. Based on the filled in SKU reference IDs, **Quickorder** will confirm whether the SKUs are in fact available for purchase.

### Custom Search Bar (`quickorder-autocomplete` block)

The **Custom Search Bar** component works as a custom search bar. Simply add the name of the desired SKU, then select it and set the amount you wish to add to the cart.

Remember to add each selected item to the cart by clicking on `Add`.

![One by One](https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/One-by-One.gif)

This option does not require any validation, since selecting the SKUs using a search bar already ensures that they are available to purchase.

### Categories (`quickorder-categories` block)

The **Categories** component allows users to choose their desired SKUs and respective quantities using the store's categories tree, adding all the selected options to the cart at once.

![Category](https://raw.githubusercontent.com/vtex-apps/quickorder/master/docs/image/Category.gif)

> ⚠ This option is only recommended if you have less than 50 SKUs for each category in your Catalog. Otherwise, the component will take too long to load and will negatively affect your store's user experience.

This scenario also does not require validating the SKUs that you've added to the cart, since selecting them directly from the store's categories tree ensures their availability.

## Customization

In order to apply CSS customizations to this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles                  |
| ---------------------------- |
| `autocompleteBlock`          |
| `buttonAdd`                  |
| `buttonClear`                |
| `buttonsBlock`               |
| `buttonValidate`             |
| `categoriesSubCategory`      |
| `categoriesProductContainer` |
| `categoryButtonAdd`          |
| `categoryContainer`          |
| `categoryLoadingProducts`    |
| `categoryHelper`             |
| `categoryInputQuantity`      |
| `categoryProductLabel`       |
| `categoryProductTitle`       |
| `categoryProductThumb`       |
| `categoryProductReference`   |
| `categoryProductItem`        |
| `categoryTitle`              |
| `componentContainer`         |
| `container`                  |
| `copyPasteBlock`             |
| `dropzoneContainer`          |
| `dropzoneLink`               |
| `dropzoneText`               |
| `downloadLink`               |
| `inputQuantity`              |
| `productLabel`               |
| `productTitle`               |
| `productSku`                 |
| `productThumb`               |
| `reviewBlock`                |
| `skuSelection`               |
| `textContainer`              |
| `textContainerTitle`         |
| `textContainerDescription`   |
| `title`                      |
| `customOptionButton`         |

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```


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

[User] Show me the implementation of quickorder/graphql/schema.graphql from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  skuFromRefIds(
    refids: [String]
    orderFormId: String
    refIdSellerMap: RefIdSellerMap
    refIdQuantityMap: RefIdQuantityMap
  ): Refids @cacheControl(scope: SEGMENT, maxAge: MEDIUM) @withSegment
  sellers: SellersType
    @cacheControl(scope: SEGMENT, maxAge: MEDIUM)
    @withSegment
}

scalar RefIdSellerMap

scalar RefIdQuantityMap

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "stack": "nodejs",
  "memory": 1536,
  "ttl": 30,
  "timeout": 12,
  "minReplicas": 2,
  "maxReplicas": 100
}

```


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

[User] Show me the implementation of quickorder/node/featureFlags.ts from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const flags = {
  VTEX_ASSETS_URL: false,
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.search-graphql",
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts .",
    "test": "yarn vtex-test-tools test"
  },
  "jest": {
    "transform": {
      "^.+\\.ts?$": "ts-jest"
    },
    "testRegex": "(.*(test|spec)).ts?$",
    "testEnvironment": "node",
    "setupFilesAfterEnv": [
      "<rootDir>/tests/setupTests.ts"
    ]
  },
  "dependencies": {
    "@gocommerce/utils": "^0.7.3",
    "@vtex/api": "6.48.0",
    "atob": "^2.1.2",
    "axios": "^0.19.0",
    "camelcase": "^5.0.0",
    "cookie": "^0.3.1",
    "graphql": "^14.5.8",
    "graphql-tools": "^4.0.6",
    "qs": "^6.6.0",
    "querystring": "^0.2.0",
    "ramda": "^0.26.1",
    "slugify": "^1.2.6",
    "typescript": "3.9.7"
  },
  "devDependencies": {
    "@types/atob": "^2.1.2",
    "@types/camelcase": "^4.1.0",
    "@types/cookie": "^0.3.2",
    "@types/es6-shim": "^0.31.32",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^26.0.24",
    "@types/koa": "^2.0.46",
    "@types/node": "^12.0.0",
    "@types/qs": "^6.5.1",
    "@types/ramda": "^0.26.21",
    "@vtex/test-tools": "^3.4.1",
    "@vtex/tsconfig": "^0.5.0",
    "ts-jest": "^25.1.0"
  },
  "version": "3.16.3"
}

```


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

[User] Show me the implementation of quickorder/node/globals.ts from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {
  IOContext,
  ParamsContext,
  RecorderState,
  ServiceContext,
  SegmentData,
} from '@vtex/api'
import { MetricsAccumulator } from '@vtex/api'

import type { Clients } from './clients'

if (!global.metrics) {
  console.error('No global.metrics at require time')
  global.metrics = new MetricsAccumulator()
}

declare global {
  type Context = ServiceContext<Clients, RecorderState, CustomContext>

  interface CustomContext extends ParamsContext {
    cookie: string
    originalPath: string
    vtex: CustomIOContext
  }

  interface CustomIOContext extends IOContext {
    segment?: SegmentData
  }

  interface Property {
    name: string
    values: [string]
  }

  interface TranslatableMessage {
    content: string
    from: string
    id: string
  }

  interface Reference {
    Key: string
    Value: 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 quickorder/node/index.ts from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```typescript
import './globals'

import type { Cached, RecorderState } from '@vtex/api'
import { LRUCache, Service } from '@vtex/api'

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

const TWO_SECONDS_MS = 2 * 1000
const THREE_SECONDS_MS = 3 * 1000
const SIX_SECONDS_MS = 6 * 1000

// Segments are small and immutable.
// const MAX_SEGMENT_CACHE = 10000
// const segmentCache = new LRUCache<string, Cached>({ max: MAX_SEGMENT_CACHE })
const searchCache = new LRUCache<string, Cached>({ max: 3000 })
const messagesCache = new LRUCache<string, Cached>({ max: 3000 })

// metrics.trackCache('segment', segmentCache)
metrics.trackCache('search', searchCache)
metrics.trackCache('messages', messagesCache)

export default new Service<Clients, RecorderState, CustomContext>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        retries: 2,
        timeout: THREE_SECONDS_MS,
      },
      messagesGraphQL: {
        concurrency: 5,
        memoryCache: messagesCache,
        timeout: TWO_SECONDS_MS,
      },
      search: {
        concurrency: 10,
        memoryCache: searchCache,
        timeout: SIX_SECONDS_MS,
      },
    },
  },
  graphql: {
    resolvers,
    schemaDirectives,
  },
})

```


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

[User] Show me the implementation of quickorder/react/AutocompleteBlock.tsx from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react/prop-types */
import type { FunctionComponent } from 'react'
import React, { useState, useContext } from 'react'
import type { WrappedComponentProps } from 'react-intl'
import { FormattedMessage, injectIntl } from 'react-intl'
import { Button, Tag, Input, ToastContext, IconClear } from 'vtex.styleguide'
import { OrderForm } from 'vtex.order-manager'
import type { OrderForm as OrderFormType } from 'vtex.checkout-graphql'
import { addToCart as ADD_TO_CART } from 'vtex.checkout-resources/Mutations'
import { usePWA } from 'vtex.store-resources/PWAContext'
import { usePixel } from 'vtex.pixel-manager/PixelContext'
import PropTypes from 'prop-types'
import { useCssHandles } from 'vtex.css-handles'
import { useApolloClient, useMutation } from 'react-apollo'

import { autocompleteMessages as messages } from './utils/messages'
import QuickOrderAutocomplete from './components/QuickOrderAutocomplete'
import productQuery from './queries/product.gql'
import getAppSettings from './utils/getAppSettings'

import './global.css'

const AutocompleteBlock: FunctionComponent<any & WrappedComponentProps> = ({
  text,
  description,
  componentOnly,
  intl,
}) => {
  const client = useApolloClient()
  const { showToast } = useContext(ToastContext)
  const [state, setState] = useState<any>({
    selectedItem: null,
    quantitySelected: 1,
    unitMultiplier: 1,
  })

  const appSettings = getAppSettings()
  const checkoutUrl = appSettings?.checkoutUrl ?? '/checkout#/cart'

  const [addToCart, { error, loading }] = useMutation<
    { addToCart: OrderFormType },
    { items: [] }
  >(ADD_TO_CART)

  const { push } = usePixel()
  const { settings = {}, showInstallPrompt = undefined } = usePWA() || {}
  const { promptOnCustomEvent } = settings

  const { setOrderForm }: OrderFormContext = OrderForm.useOrderForm()
  const orderForm = OrderForm.useOrderForm()

  const translateMessage = (message: MessageDescriptor) => {
    return intl.formatMessage(message)
  }

  const resolveToastMessage = (success: boolean, isNewItem: boolean) => {
    if (!success) return translateMessage(messages.error)
    if (!isNewItem) return translateMessage(messages.duplicate)

    return translateMessage(messages.success)
  }

  const toastMessage = (arg: any) => {
    let message
    let action

    if (typeof arg === 'string') {
      message = intl.formatMessage(messages[arg])
    } else {
      const {
        success,
        isNewItem,
      }: {
        success: boolean
        isNewItem: boolean
      } = arg

      message = resolveToastMessage(success, isNewItem)

      action = success
        ? {
            label: translateMessage(messages.seeCart),
            href:
              typeof checkoutUrl === 'string' && checkoutUrl !== ''
                ? checkoutUrl
                : '/checkout/#/cart',
          }
        : undefined
    }

    showToast({ message, action })
  }

  const clear = () => {
    setState({
      ...state,
      selectedItem: null,
      quantitySelected: 1,
      unitMultiplier: 1,
    })
  }

  interface ItemType {
    id: string
    quantity: number
  }

  const { selectedItem, quantitySelected, unitMultiplier } = state
  const callAddToCart = async (items: any) => {
    const currentItemsInCart = orderForm.orderForm.items
    const mutationResult = await addToCart({
      variables: {
        items: items.map((item: ItemType) => {
          const [existsInCurrentOrder] = currentItemsInCart.filter(
            (el) => el.id === item.id.toString()
          )

          if (existsInCurrentOrder) {
            item.quantity += parseInt(existsInCurrentOrder.quantity, 10)
          }

          return {
            ...item,
          }
        }),
      },
    })

    if (error) {
      console.error(error)
      toastMessage({ success: false, isNewItem: false })

      return
    }

    // Update OrderForm from the context
    mutationResult.data && setOrderForm(mutationResult.data.addToCart)

    const adjustSkuItemForPixelEvent = (item: any) => {
      return {
        skuId: item.id,
        quantity: item.quantity,
      }
    }

    // Send event to pixel-manager
    const pixelEventItems = items.map(adjustSkuItemForPixelEvent)

    push({
      event: 'addToCart',
      items: pixelEventItems,
    })

    if (
      mutationResult.data?.addToCart?.messages?.generalMessages &&
      mutationResult.data.addToCart.messages.generalMessages.length
    ) {
      mutationResult.data.addToCart.messages.generalMessages.map((msg: any) => {
        return showToast({
          message: msg.text,
          action: undefined,
          duration: 30000,
        })
      })
    } else {
      toastMessage({ success: true, isNewItem: true })
      clear()
    }

    if (promptOnCustomEvent === 'addToCart' && showInstallPrompt) {
      showInstallPrompt()
    }

    return showInstallPrompt
  }

  const onSelect = async (product: any) => {
    if (!!product && product.length) {
      const query = {
        query: productQuery,
        variables: { skuId: product[0].value },
      }

      const { data } = await client.query(query)
      const selectedSku =
        data.product.items.length === 1 ? data.product.items[0].itemId : null

      const seller = selectedSku
        ? data.product.items[0].sellers.find((item: any) => {
            return item.sellerDefault === true
          }).sellerId
        : null

      let multiplier = 1

      if (data.product.items.length === 1) {
        multiplier = data.product.items[0].unitMultiplier
      }

      setState({
        ...state,
        selectedItem:
          !!product && product.length
            ? { ...product[0], value: selectedSku, seller, data }
            : null,
        unitMultiplier: multiplier,
        quantitySelected: multiplier,
      })
    }

    return true
  }

  const selectSku = (value: string) => {
    const seller = selectedItem.data.product.items
      .find((item: any) => {
        return item.itemId === value
      })
      .sellers.find((s: any) => {
        return s.sellerDefault === true
      }).sellerId

    const newSelected = {
      ...selectedItem,
      seller,
      value,
    }

    const matchedItem = selectedItem.data.product.items.find(
      (item) => item.itemId === value
    )

    setState({
      ...state,
      selectedItem: newSelected,
      unitMultiplier: matchedItem.unitMultiplier,
      quantitySelected: matchedItem.unitMultiplier,
    })
  }

  const thumb = (url: string) => {
    return url.replace('25-25', `50-50`)
  }

  const calculateDivisible = (quantity: number, multiplier: number) => {
    if (multiplier) {
      return quantity / multiplier
    }

    return quantity
  }

  const callAddUnitToCart = () => {
    if (selectedItem?.value) {
      const items = [
        {
          id: parseInt(selectedItem.value, 10),
          quantity: calculateDivisible(
            parseFloat(quantitySelected),
            unitMultiplier
          ),
          seller: selectedItem.seller,
        },
      ]

      callAddToCart(items)
    } else {
      toastMessage('selectSku')
    }
  }

  const roundToNearestMultiple = (quantity: number, multiplier: number) => {
    if (multiplier) {
      toastMessage('multiplier')

      return Math.round(quantity / multiplier) * multiplier
    }

    return quantity
  }

  const CSS_HANDLES = [
    'autoCompleteBlock',
    'skuSelection',
    'productThumb',
    'productTitle',
    'productSku',
    'skuSelected',
    'productLabel',
    'inputQuantity',
    'buttonAdd',
    'textContainer',
    'textContainerTitle',
    'textContainerDescription',
    'componentContainer',
    'buttonClear',
  ] as const

  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`${handles.autoCompleteBlock}`}>
      {!componentOnly && (
        <div className={`${handles.textContainer} w-third-l w-100-ns fl-l`}>
          <h2
            className={`${handles.textContainerTitle} t-heading-3 mb3 ml5 ml3-ns mt4`}
          >
            {text}
          </h2>
          <div
            className={`${handles.textContainerDescription} t-body lh-copy c-muted-1 mb7 ml3 false`}
          >
            {description}
          </div>
        </div>
      )}
      <div
        className={`${handles.componentContainer} ${
          !componentOnly ? 'w-two-thirds-l w-100-ns fr-l' : ''
        }`}
      >
        <div className="w-100 mb5">
          <div className="bg-base t-body c-on-base pa7 br3 b--muted-4">
            {!selectedItem && <QuickOrderAutocomplete onSelect={onSelect} />}
            {!!selectedItem && (
              <div>
                <div className="w-two-thirds-l w-100-ns fl-l">
                  <div
                    className={`flex flex-column w-10 fl ${handles.productThumb}`}
                  >
                    <img
                      src={thumb(selectedItem.thumb)}
                      width="50"
                      height="50"
                      alt=""
                    />
                  </div>
                  <div
                    className={`flex flex-column w-90 fl ${handles.productLabel}`}
                  >
                    <span className={`${handles.productTitle}`}>
                      {selectedItem.label}
                    </span>

                    {!!selectedItem &&
                      selectedItem.data.product.items.length > 1 && (
                        <div className={`${handles.productSku} flex flex-row`}>
                          {selectedItem.data.product.items.map((item: any) => {
                            return (
                              <span
                                key={item.itemId}
                                className={`mr4 ${handles.skuSelection} ${
                                  item.itemId === selectedItem.value &&
                                  handles.skuSelected
                                }`}
                              >
                                <Tag
                                  size="small"
                                  bgColor={
                                    item.itemId === selectedItem.value
                                      ? '#8bc34a'
                                      : '#979899'
                                  }
                                  onClick={() => {
                                    selectSku(item.itemId)
                                  }}
                                >
                                  {item.name}
                                </Tag>
                              </span>
                            )
                          })}
                        </div>
                      )}
                  </div>
                  {!!selectedItem && unitMultiplier && (
                    <div
                      className={`flex flex-column w-90 fl ${handles.productLabel}`}
                    >
                      <span className="mr4">
                        <Tag type="warning" variation="low">
                          <FormattedMessage id="store/quickorder.autocomplete.multiplierOf" />{' '}
                          {unitMultiplier}
                        </Tag>
                      </span>
                    </div>
                  )}
                </div>
                <div className="w-third-l w-100-ns fr-l">
                  <div
                    className={`flex flex-column w-40 ph5-l ph2 p fl ${handles.inputQuantity}`}
                  >
                    <Input
                      value={quantitySelected}
                      size="small"
                      type="number"
                      min={unitMultiplier}
                      step={unitMultiplier}
                      onChange={(e: any) => {
                        if (e.target.value > 0) {
                          setState({
                            ...state,
                            quantitySelected: e.target.value,
                          })
                        }
                      }}
                      onBlur={() => {
                        const roundedValue = roundToNearestMultiple(
                          quantitySelected,
                          unitMultiplier
                        )

                        setState({
                          ...state,
                          quantitySelected: roundedValue,
                        })
                      }}
                    />
                  </div>
                  <div
                    className={`flex flex-column w-40 fl ${handles.buttonAdd}`}
                  >
                    <Button
                      variation="primary"
                      size="small"
                      isLoading={loading}
                      onClick={() => {
                        callAddUnitToCart()
                      }}
                    >
                      <FormattedMessage id="store/quickorder.autocomplete.addButton" />
                    </Button>
                  </div>
                  <div
                    className={`flex flex-column w-20 fl ${handles.buttonClear}`}
                  >
                    <Button
                      variation="tertiary"
                      size="small"
                      disabled={loading}
                      onClick={() => {
                        clear()
                      }}
                    >
                      <IconClear
                        onClick={() => {
                          clear()
                        }}
                      />
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

AutocompleteBlock.propTypes = {
  componentOnly: PropTypes.bool,
  text: PropTypes.string,
  description: PropTypes.string,
}

interface OrderFormContext {
  loading: boolean
  orderForm: OrderFormType | undefined
  setOrderForm: (orderForm: Partial<OrderFormType>) => void
}

interface MessageDescriptor {
  id: string
  description?: string | any
  defaultMessage?: string
}

export default injectIntl(AutocompleteBlock)

```