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

[Assistant]
Here's the implementation:

```json
{
  "store/shipping-calculator.delivery": "Delivery",
  "store/shipping-calculator.deliveryFor": "Options for",
  "store/shipping-calculator.edit": "edit",
  "store/shipping-calculator.estimate": "estimate",
  "store/shipping-calculator.viewDeliveryOptions": "View delivery options",
  "store/shipping-calculator.allItemsUnavailable": "{numberOfUnavailableItems, plural, one {The product} other {All the products}} can't be delivered to this address.",
  "store/shipping-calculator.unavailableItems": "{numberOfUnavailableItems, plural, one {A product that can't be delivered to this address was highlighted} other {# products that can't be delivered to this address were highlighted}}.",
  "store/shipping-calculator.optionsForRemainingProducts": "{numberOfOptions, plural, one {Option} other {Options}} for remaining {numberOfItems, plural, one {product} other {products}}",
  "admin/editor.shipping-calculator.label": "Delivery",
  "admin/editor.shipping-calculator.title": "Title"
}

```


[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 shipping-calculator/messages/ro.json from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/shipping-calculator.delivery": "Livrare",
  "store/shipping-calculator.deliveryFor": "Opțiuni pentru",
  "store/shipping-calculator.edit": "editează",
  "store/shipping-calculator.estimate": "estimat",
  "store/shipping-calculator.viewDeliveryOptions": "Vezi opțiunile de livrare",
  "store/shipping-calculator.allItemsUnavailable": "{numberOfUnavailableItems, plural, one {Produs} other {Niciun produs}} nu pot fi livrat la această adresă.",
  "store/shipping-calculator.unavailableItems": "{numberOfUnavailableItems, plural, one {Un produs care nu poate fi livrat la această adresă va fi evidențiat}  other {# produse care nu poate fi livrate la această adresă vor fi evidențiate}}.",
  "store/shipping-calculator.optionsForRemainingProducts": "{numberOfOptions, plural, one {Opțiune} other {Opțiuni}} pentru {numberOfItems, plural, one {produsul} other {produsele}} rămase",
  "admin/editor.shipping-calculator.label": "Livrare",
  "admin/editor.shipping-calculator.title": "Titlu"
}

```


[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 shipping-calculator/messages/ko.json from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/shipping-calculator.delivery": "배달",
  "store/shipping-calculator.deliveryFor": "옵션",
  "store/shipping-calculator.edit": "편집",
  "store/shipping-calculator.estimate": "견적",
  "store/shipping-calculator.viewDeliveryOptions": "배송 옵션 보기",
  "store/shipping-calculator.allItemsUnavailable": "{numberOfUnavailableItems, plural, one {제품이} other {모든 제품이}} 이 주소로 배송될 수 없습니다.",
  "store/shipping-calculator.unavailableItems": "{numberOfUnavailableItems, plural, one {개의 이 주소로 배송할 수 없는 제품이 강조 표시되었습니다} other {#개의 이 주소로 배송할 수 없는 제품이 강조 표시되었습니다}}.",
  "store/shipping-calculator.optionsForRemainingProducts": "남은 {numberOfItems, plural, one {제품} other {제품}} {numberOfOptions, plural, one {옵션} other {옵션}}",
  "admin/editor.shipping-calculator.label": "배달",
  "admin/editor.shipping-calculator.title": "제목"
}

```


[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 shipping-calculator/messages/da.json from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/shipping-calculator.delivery": "Levering",
  "store/shipping-calculator.deliveryFor": "Indstillinger for",
  "store/shipping-calculator.edit": "rediger",
  "store/shipping-calculator.estimate": "estimeret",
  "store/shipping-calculator.viewDeliveryOptions": "Vælg leveringsmuligheder",
  "store/shipping-calculator.allItemsUnavailable": "{numberOfUnavailableItems, plural, one {Produktet} other {Alle produkterne}} kan ikke blive leveret til denne adresse.",
  "store/shipping-calculator.unavailableItems": "{numberOfUnavailableItems, plural, one {Et produkt, der ikke kan leveres til denne adresse, blev fremhævet} other {# produkter, der ikke kan leveres til denne adresse, blev fremhævet}}.",
  "store/shipping-calculator.optionsForRemainingProducts": "{numberOfOptions, plural, one {Indstilling} other {Indstillinger}} for resterende {numberOfItems, plural, one {produkt} other {produkter}}",
  "admin/editor.shipping-calculator.label": "Levering",
  "admin/editor.shipping-calculator.title": "Titel"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/shipping-calculator.delivery": "Entrega",
  "store/shipping-calculator.deliveryFor": "Opciones para",
  "store/shipping-calculator.edit": "cambiar",
  "store/shipping-calculator.estimate": "calcular",
  "store/shipping-calculator.viewDeliveryOptions": "Ver opciones de entrega",
  "store/shipping-calculator.allItemsUnavailable": "{numberOfUnavailableItems, plural, one {El producto no} other {Ningún de los productos}} se puede entregar en esta dirección.",
  "store/shipping-calculator.unavailableItems": "Se {numberOfUnavailableItems, plural, one {encuentra resaltado un producto que no se puede} other {encuentran marcados # productos que no se pueden}} entregar en esta dirección.",
  "store/shipping-calculator.optionsForRemainingProducts": "{numberOfOptions, plural, one {Opción} other {Opciones}} para {numberOfItems, plural, one {el producto restante} other {productos restantes}}",
  "admin/editor.shipping-calculator.label": "Entrega",
  "admin/editor.shipping-calculator.title": "Título"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/shipping-calculator.delivery": "التسليم",
  "store/shipping-calculator.deliveryFor": "خيار لـ",
  "store/shipping-calculator.edit": "تعديل",
  "store/shipping-calculator.estimate": "تقدير",
  "store/shipping-calculator.viewDeliveryOptions": "عرض خيارات التسليم",
  "store/shipping-calculator.allItemsUnavailable": "لا يمكن تسليم {numberOfUnavailableItems, plural, one {المنتج} other {المنتجات}} لهذا العنوان.",
  "store/shipping-calculator.unavailableItems": "{numberOfUnavailableItems, plural, one {تم تمييز المنتج الذي لا يمكن تسليمه إلى هذا العنوان} other {# تم تمييز المنتجات الأخرى التي لا يمكن تسليمها إلى هذا العنوان}}.",
  "store/shipping-calculator.optionsForRemainingProducts": "{numberOfOptions, plural, one {خيار} other {خيارات}} لـ  {numberOfItems, plural, one {للمنتج} other {المنتجات}} المتبقي(ة)",
  "admin/editor.shipping-calculator.label": "التسليم",
  "admin/editor.shipping-calculator.title": "العنوان"
}

```


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

[Assistant]
Here's the implementation:

```markdown
# VTEX IO Base Component
<!-- 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 -->

This demo component shows you how to make a simple yet complete VTEX IO component.

It shows a simple demonstration of the following features:

- Declaring a component interface in `store/interfaces.json`.
- Declaring a schema to receive props via Storefront.
- Using the `messages` feature to have localized strings.
- Using an NPM package like `react-intl`
- Using another VTEX IO App like `vtex.styleguide`.
- Using CSS Modules to make your component customizable via CSS on a store theme.
- Using tachyons tokens to quickly style your components.
## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

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

```


[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 shipping-calculator/react/Shipping.tsx from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactNode } from 'react'
import { FormattedMessage, defineMessages } from 'react-intl'
import { OrderShipping } from 'vtex.order-shipping'
import { useAddressRules } from 'vtex.checkout-shipping'
import { AddressContext } from 'vtex.address-context'
import { Loading } from 'vtex.render-runtime'
import { OrderForm } from 'vtex.order-manager'

const { useOrderForm } = OrderForm
const { useOrderShipping } = OrderShipping

const messages = defineMessages({
  delivery: {
    defaultMessage: 'Delivery',
    id: 'store/shipping-calculator.delivery',
  },
  label: {
    defaultMessage: '',
    id: 'admin/editor.shipping-calculator.label',
  },
  title: {
    defaultMessage: '',
    id: 'admin/editor.shipping-calculator.title',
  },
})

interface ShippingProps {
  children: ReactNode
  title: string
}

const Shipping: React.VFC<ShippingProps> = ({
  children,
  title = messages.delivery.id,
}) => {
  const { selectedAddress, countries } = useOrderShipping()
  const addressRules = useAddressRules()

  if (addressRules == null) {
    return <Loading />
  }

  return (
    <AddressContext.AddressContextProvider
      address={selectedAddress}
      countries={countries}
      rules={addressRules}
    >
      <div className="flex flex-column c-on-base">
        <h5 className="t-heading-5 mt0 mb6">
          <FormattedMessage id={title} />
        </h5>
        {children}
      </div>
    </AddressContext.AddressContextProvider>
  )
}
;(Shipping as any).schema = {
  title: messages.label.id,
}

const ShippingWithLoading: typeof Shipping = props => {
  const { loading } = useOrderForm()

  if (loading) {
    return <Loading />
  }

  return <Shipping {...props}>{props.children}</Shipping>
}

export default ShippingWithLoading

```


[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 shipping-calculator/react/styles.css from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```css
:global .vtex-input__prefix {
  padding-right: 0.25rem;
}

```


[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 shipping-calculator/react/ShippingCalculator.tsx from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { OrderShipping } from 'vtex.order-shipping'
import { ShippingForm } from 'vtex.checkout-shipping'
import { FormattedMessage } from 'react-intl'
import { ButtonPlain } from 'vtex.styleguide'

const { useOrderShipping } = OrderShipping

const ShippingCalculator: React.VFC = () => {
  const { selectedAddress } = useOrderShipping()
  const shouldInitiallyShowShippingEstimate = !!selectedAddress?.postalCode

  const [showShippingEstimate, setShowShippingEstimate] = useState(
    shouldInitiallyShowShippingEstimate
  )

  if (!showShippingEstimate) {
    return (
      <div>
        <ButtonPlain
          id="view-delivery-options"
          onClick={() => setShowShippingEstimate(true)}
        >
          <FormattedMessage id="store/shipping-calculator.viewDeliveryOptions" />
        </ButtonPlain>
      </div>
    )
  }

  return <ShippingForm />
}

export default ShippingCalculator

```


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

[Assistant]
Here's the implementation:

```json
{
  "version": "0.13.0",
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "prop-types": "^15.7.2",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "3.9.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.53",
    "@types/react-intl": "^2.3.17",
    "@vtex/country-codes": "^1.0.2",
    "@vtex/styleguide": "^9.95.0",
    "@vtex/test-tools": "^3.3.2",
    "apollo-client": "^2.5.1",
    "typescript": "3.9.7",
    "vtex.address-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-context@0.6.1/public/@types/vtex.address-context",
    "vtex.checkout-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-components@0.5.1/public/@types/vtex.checkout-components",
    "vtex.checkout-shipping": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-shipping@0.7.1/public/@types/vtex.checkout-shipping",
    "vtex.country-codes": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.country-codes@2.0.1/public/_types/react",
    "vtex.formatted-price": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.formatted-price@0.4.0/public/@types/vtex.formatted-price",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.5/public/@types/vtex.native-types",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
    "vtex.order-shipping": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-shipping@0.7.0/public/@types/vtex.order-shipping",
    "vtex.place-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.place-components@0.14.0/public/@types/vtex.place-components",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime",
    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.2/public/@types/vtex.shipping-estimate-translator",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.135.2/public/@types/vtex.styleguide"
  }
}

```


[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 shipping-calculator/store/contentSchemas.json from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "ShippingCalculator": {
      "properties": {
        "title": {
          "title": "admin/editor.shipping-calculator.title",
          "$ref": "app:vtex.native-types#/definitions/text",
          "default": "store/shipping-calculator.delivery"
        }
      }
    }
  }
}

```


[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 shipping-calculator/store/blocks.json from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "shipping-calculator": {
    "children": ["estimate-shipping"]
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "shipping-calculator": {
    "component": "Shipping",
    "allowed": ["estimate-shipping"],
    "composition": "children",
    "content": {
      "$ref": "#/definitions/ShippingCalculator"
    },
    "preview": {
      "type": "box",
      "height": 30,
      "width": 200,
      "options": {
        "padding": 0
      }
    }
  },
  "estimate-shipping": {
    "component": "ShippingCalculator"
  }
}

```


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

[Assistant]
Here's the implementation:

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

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function({ id: string }): object {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends {}>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


[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 shipping-calculator/react/typings/global.d.ts from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Address {
  addressId: string
  addressQuery?: string
  addressType: string
  city?: string
  complement?: string
  country?: string
  geoCoordinates?: number[]
  neighborhood?: string
  number?: string
  postalCode?: string
  receiverName?: string
  reference?: string
  state?: string
  street?: string
}

interface NewAddress {
  addressId?: string
  addressQuery?: string
  addressType?: string
  city?: string
  complement?: string
  country?: string
  geoCoordinates?: number[]
  neighborhood?: string
  number?: string
  postalCode?: string
  receiverName?: string
  reference?: string
  state?: string
  street?: string
}

interface AddressWithValidation {
  addressId: AddressField
  addressQuery?: AddressField
  addressType: AddressField
  city?: AddressField
  complement?: AddressField
  country?: AddressField
  geoCoordinates?: AddressField
  neighborhood?: AddressField
  number?: AddressField
  postalCode?: AddressField
  receiverName?: AddressField
  reference?: AddressField
  state?: AddressField
  street?: AddressField
}

interface AddressField {
  value: string | number[]
  valid: boolean | null
}

interface DeliveryOption {
  id: string
  price: number
  estimate: string
  isSelected: boolean
}

interface CheckoutAddress {
  addressType: string
  receiverName: string
  addressId: string
  postalCode: string
  city: string
  state: string
  country: string
  street: string
  number: string
  neighborhood: string
  complement: string
  reference: string | null
  geoCoordinates: number[]
}

interface DeliveryOption {
  id: string
  price: number
  estimate: string
  isSelected: boolean
}

```


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

[User] Show me the implementation of shipping-calculator/react/typings/css.d.ts from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


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

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: any
  }
}

```


[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 shipping-calculator/react/utils/gguid.ts from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```typescript
let gguid = 1

export default function getGGUID() {
  return (gguid++ * new Date().getTime() * -1).toString().replace('-', '')
}

```


[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 shipping-calculator/react/utils/slugify.ts from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const slugify = (text: string) => {
  return text.toLowerCase().replace(/\s+/g, '-')
}

```


[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 shipping-calculator/react/utils/address.ts from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```typescript
import getGGUID from './gguid'

export function newAddress(address?: NewAddress) {
  return {
    addressId: address?.addressId ?? getGGUID(),
    addressType: address?.addressType ?? 'residential',
    city: address?.city ?? '',
    complement: address?.complement ?? '',
    country: address?.country ?? '',
    geoCoordinates: address?.geoCoordinates ?? [],
    neighborhood: address?.neighborhood ?? '',
    number: address?.number ?? '',
    postalCode: address?.postalCode ?? '',
    receiverName: address?.receiverName ?? '',
    reference: address?.reference ?? '',
    state: address?.state ?? '',
    street: address?.street ?? '',
    addressQuery: address?.addressQuery ?? '',
  }
}

```


[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 shipping-calculator/react/components/DeliveryOptionsAvailability.tsx from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

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

interface Props {
  numberOfItems: number
  numberOfUnavailableItems: number
}

const DeliveryOptionsAvailability: FunctionComponent<Props> = ({
  numberOfItems,
  numberOfUnavailableItems,
}) => {
  const allItemsUnavailable = numberOfUnavailableItems === numberOfItems
  return (
    <Fragment>
      {numberOfUnavailableItems > 0 && (
        <Alert type="warning">
          {allItemsUnavailable ? (
            <FormattedMessage
              id="store/shipping-calculator.allItemsUnavailable"
              values={{ numberOfUnavailableItems }}
            />
          ) : (
            <FormattedMessage
              id="store/shipping-calculator.unavailableItems"
              values={{ numberOfUnavailableItems }}
            />
          )}
        </Alert>
      )}
    </Fragment>
  )
}

export default DeliveryOptionsAvailability

```


[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 shipping-calculator/react/__tests__/Shipping.test.tsx from the shipping-calculator VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { render } from '@vtex/test-tools/react'
import React from 'react'
import { OrderShippingContext } from 'vtex.order-shipping/OrderShipping'
import { OrderFormContext } from 'vtex.order-manager/OrderForm'

import Shipping from '../Shipping'
import ShippingCalculator from '../ShippingCalculator'

interface InsertAddressResult {
  success: boolean
  orderForm: any
}

interface Context {
  countries: string[]
  selectedAddress: Address
  insertAddress: (address: CheckoutAddress) => Promise<InsertAddressResult>
  deliveryOptions: DeliveryOption[]
  selectDeliveryOption: (option: string) => void
}

const mockedAddress = {
  addressId: '1569522356558',
  addressType: 'residential',
  city: 'Rio de Janeiro',
  complement: '',
  country: 'BRA',
  neighborhood: 'Botafogo',
  number: '',
  postalCode: '22230-005',
  receiverName: '',
  reference: '',
  state: 'RJ',
  street: '',
  geoCoordinates: [],
}

const mockedDeliveryOptions = [
  { id: 'Motoboy', price: 500, estimate: '8d', isSelected: false },
  { id: 'PAC', price: 1000, estimate: '5d', isSelected: true },
  { id: 'Expressa', price: 1000, estimate: '7d', isSelected: false },
]

const contextInfo = {
  countries: ['BRA'],
  selectedAddress: mockedAddress,
  deliveryOptions: mockedDeliveryOptions,
  selectDeliveryOption: jest.fn(),
  insertAddress: jest.fn(),
}

describe('Shipping', () => {
  const renderComponent = (customProps: Context) => {
    const {
      countries,
      deliveryOptions,
      insertAddress,
      selectDeliveryOption,
      selectedAddress,
    } = customProps

    const wrapper = render(
      <OrderFormContext.Provider
        value={{
          loading: false,
          orderForm: { shipping: { selectedAddress, deliveryOptions } },
        }}
      >
        <OrderShippingContext.Provider
          value={{
            countries,
            selectedAddress,
            deliveryOptions,
            selectDeliveryOption,
            insertAddress,
          }}
        >
          <Shipping title="Title">
            <ShippingCalculator />
          </Shipping>
        </OrderShippingContext.Provider>
      </OrderFormContext.Provider>
    )
    return wrapper
  }

  it('should be rendered', () => {
    const component = renderComponent(contextInfo)
    expect(component).toBeDefined()
  })

  it('should show postal code', () => {
    const { getByText } = renderComponent(contextInfo)
    expect(getByText(mockedAddress.postalCode)).toBeTruthy()
  })

  it('should show delivery options', () => {
    const { getByText } = renderComponent(contextInfo)
    expect(getByText(mockedDeliveryOptions[0].id)).toBeTruthy()
  })

  it('should show delivery button', () => {
    const { getByText } = renderComponent({
      ...contextInfo,
      selectedAddress: { addressId: '', addressType: '' },
    })
    expect(getByText('View delivery options')).toBeTruthy()
  })
})

```


[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 course-template/course/config.json from the course-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "title": "Template Course",
  "tagline": "Like a subtitle for your course",
  "description": "Description of your course",
  "languages": ["en", "pt"],
  "steps": [
    {
      "folder": "01-hello-world",
      "title": { "en": "First assignment", "pt": "Primeira tarefa" },
      "description": {
        "en": "Description for the Hello World step (used solely for Github's progress page)",
        "pt": "Descrição para o step de Hello World"
      },
      "challenge": "none"
    },
    {
      "folder": "02-writing-jsonc",
      "title": {
        "en": "On this step, we have tests that check if some JSONC files were correctly made",
        "pt": "Neste passo teremos testes para verificar se alguns arquivos JSONC foram corretamente criados"
      },
      "description": { "en": "Second description", "pt": "Segunda descrição" },
      "challenge": "tests"
    },
    {
      "folder": "03-writing-css",
      "title": {
        "en": "Here, we will get some CSS files and parse them, checking if the correct classes were declared",
        "pt": "Aqui, iremos parsear arquivos CSS submetidos e verificar se as classes foram corretamente criadas"
      },
      "description": { "en": "Third description", "pt": "Terceira descrição" },
      "challenge": "tests"
    },
    {
      "folder": "04-wrapping-up",
      "title": {
        "en": "Here you can set another title for this step",
        "pt": "Aqui você pode colocar outro título para seu step"
      },
      "description": {
        "en": "Every description is required for each step",
        "pt": "O campo descrição é obrigatório para todo step"
      },
      "challenge": "tests"
    }
  ]
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "build": "tsc",
    "test": "yarn jest"
  },
  "dependencies": {
    "postcss": "^7.0.27",
    "ramda": "^0.27.0",
    "typescript": "3.7.3"
  },
  "devDependencies": {
    "@types/ramda": "^0.26.43"
  }
}

```


[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 course-template/course/global.d.ts from the course-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import * as ramda from 'ramda'

export {}

declare global {
  interface TestContext {
    getFile: (path: string) => Promise<string>
    parseCss: (content: string) => object
    parseJsonc: (content: string) => object
    ramda: typeof ramda
    [key: string]: any
  }

  interface TestFunctionParameters {
    ctx: TestContext
  }

  interface TestCase {
    tests: {
      description: string
      failMsg: string
      test: (param: TestFunctionParameters) => Promise<boolean> | boolean
    }[]
  }
}

```


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

[User] Show me the implementation of course-template/course/template/manifest.json from the course-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "change-me-course",
  "version": "0.1.0",
  "title": "Change me Course",
  "description": "",
  "defaultLocale": "en-US",
  "builders": {
    "store": "0.x"
  },
  "dependencies": {
    "vtex.store": "2.x",
    "vtex.rich-text": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of course-template/course/template/store/routes.json from the course-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#change-me": {
    "path": "/change-me-course"
  }
}

```


[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 course-template/course/template/store/blocks/change-me.jsonc from the course-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#tab-layout": {
    "children": [
      "rich-text#foo"
    ]
  },
  "rich-text#foo": {
    "props": {
      "text": "iaew boy"
    }
  }
}

```


[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 course-template/course/steps/03-writing-css/index.ts from the course-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  tests: [
    {
      description: 'First test of SECOND step',
      failMsg: 'You can also throw custom error messages. This will be the default message sent.',
      test: async({ ctx }) => {
        const pdp = await ctx.getFile('store/blocks/product.jsonc')
        return !!pdp
      }
    }
  ]
} as TestCase

```


[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 course-template/course/steps/02-writing-jsonc/index.ts from the course-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  tests: [
    {
      description: 'First TEeT of this step',
      failMsg: 'You can also throw custom error messages. This will be the default message sent.',
      test: async ({ ctx: { getFile } }) => {
        const pdp = await getFile('store/blocks/product.jsonc')
        return !!pdp
      },
    },
  ],
} as TestCase

```


[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 course-template/course/steps/04-wrapping-up/index.ts from the course-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  tests: [
    {
      description: 'Test for the last step',
      failMsg: 'You can also throw custom error messages. This will be the default message sent.',
      test: async ({ ctx }) => {
        const pdp = await ctx.getFile('store/blocks/product.jsonc')
        return !!pdp
      },
    },
  ],
} as TestCase

```


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

[Assistant]
Here's the implementation:

```markdown
> ↪ **CONTENT MIGRATION NOTE**
>
> The content of this repository has been **migrated to [dev-portal-content](https://github.com/vtexdocs/dev-portal-content).**
>
> We apologize for any inconvenience this may cause and thank you for your understanding.

```


[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 release-notes/docs/2020-01/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Release Notes - January 2020
description: "See what is new in VTEX IO January 2020"
date: "2020-02-10"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2020-01/README.md"
---

# VTEX IO Release Notes - January 2020

And we are back, ladies and gentlemen :clap:

Long time no see... really missed you guys! I'm sure that you've missed us too, right? RIGHT :smirk:

2019 was a special, intense and long year, full of learnings for each and every one of us, that's for sure. But the time has come to aim above and beyond to **greatness**. Therefore, make sure to keep up-to-date with the IO Release Notes! It's the only way to keep up with everything that we're dutifully preparing for you.

2020, here we are. And here we go:

## Features :rocket:

- **Minicart v2** - A brand new Minicart is up and running, much more optimized and flexible that it's former version. For a look at the reasons why you'll want to migrate asap, check out the [documentation](https://vtex.io/docs/components/all/vtex.minicart/).

- **Block's composition** - This one here is truly mind-blowing so listen closely: within a block's `children` array, you can now declare any block you choose. That's right! When setting a block as another's child, forget about the allowed blocks list. Declare whatever block you want. But remember: this only works for the `children` array. Blocks declared in the `blocks` array will remain limited to the allowed list of the block parent.

- **Store Link app** - An app that allows you to create and display links that automatically consume context from other blocks. Sounds confusing? It is actually simple and amazing. Just give a look at the [Store Link](https://vtex.io/docs/components/all/vtex.store-link/) documentation.

- **JivoChat** - Integrate your store with the JivoChat solution using the [JivoChat pixel app](https://vtex.io/docs/components/pixel/vtex.jivochat/), available now just a click away from you.

- **Listrak** - More pixel apps to come! You are now also able to natively integrate with the [Listrak](https://vtex.io/docs/components/pixel/vtex.listrak-pixel/) solution.

## Improvements :heavy_plus_sign:

- **Site Editor** - Our beloved admin's Site Editor now allows you to configure some of the many [Shelf](https://vtex.io/docs/components/all/vtex.shelf/) (`maxItems`, `arrows`, `showTitle`, `titleText`, `minItemsPerPage`, `itemsPerPage` and `paginationDotsVisibility`) and [Slider Layout](https://vtex.io/docs/components/all/vtex.slider-layout/) (`navigationStep`, `itemsPerPage` and `autoplay`) props.

- **Search Results Filters** - The new `facetsBehavior` prop only allows you to display filters with actual search results in the [Search Result](https://vtex.io/docs/components/all/vtex.search-result/) page. No more misleadings. Yay!

- **Product Summary image** - Choose which product image will be shown in the [Product Summary Image](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-image) block thanks to the new `mainImageLabel` prop.

- **CSS Handles** - More CSS Handles for several apps, among which: [Stack Layout](https://vtex.io/docs/components/all/vtex.stack-layout/), [Product Summary](), [Search Result](https://vtex.io/docs/components/all/vtex.search-result/), [Menu](https://vtex.io/docs/components/all/vtex.menu/), [Minicart](https://vtex.io/docs/components/all/vtex.minicart/), [Flex Layout](https://vtex.io/docs/components/all/vtex.flex-layout/)) and ALL [store icons](https://vtex.io/docs/components/all/vtex.store-icons/). We're seriously not kidding around when it comes to Handles... do not forget to check out each related documentation.

- **SKU Selector** - Previously, the `showValueNameForImageVariation` prop did not serve every scenario it is was meant to because it only indicated a variation's value if it was an image type. It was replaced with a prop, namely the `showValueForVariation`, that encompasses even more scenarios, that is, it now indicates variation's value of all types (image and others!). Do not forget to give the [documentation](https://vtex.io/docs/components/all/vtex.store-components/sku-selector) a quick sneak peak to understand the prop's behavior.

- **Product Summary SKU Selector** - The possibility to add a slider in the [Product Summary SKU Selector](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-sku-selector) to make user navigation easier has just become reality thanks to the new `displayMode` prop.

## Notable bug fixes :bug:

- **Search Results ordering** - It's always a good idea to improve the Search Results page. Now, sorting products by "Relevance" takes the [score field](https://help.vtex.com/tutorial/how-does-the-score-field-work--1BUZC0mBYEEIUgeQYAKcae) value set in the admin's Catalog into consideration.

- **SKU Selector ordering** - We're really putting our house in order in 2020: the SKU Selector now respects the position given to [SKU specifications](https://help.vtex.com/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/2NQoBv8m4Yz3oQaLgDRagP#sku-specifications) values defined in the admin's catalog, displaying everything according to the retailer's order preference.

- **Product Impression event** - Previously, Product Impression events faced a problem: whenever the Shelf was hovered over, the event triggered the store’s Google Analytics informing that all Shelf products had been seen by the user, even those that were hidden by the SKU Selector’s slider. This is now changed: only products that are in fact displayed are sent by the event.

```


[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 release-notes/docs/2020-06/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Release Notes - June 2020
description: "See what is new in VTEX IO for June 2020"
date: "2020-07-16"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2020-06/README.md"
---

# VTEX IO Release Notes - June 2020

Welcome to the VTEX IO Release Notes for June 2020, team!

I know home office can be ~~extremely~~ a little bit tiring, but I do hope you will be able to set some time aside from your busy workweek to **catch up with VTEX IO latest news**.

Notice: i'm not saying this only because I'm the one writing the VTEX IO release notes, you know... it's actually because the past month of June really brought us some goodies worth looking at asap, such as:

- :rocket: The new Sitemap app
- :heavy_plus_sign: The 404 pages improvement
- :bug: The Clear button (from mobile filter sidebar) bug fix

Check out the last month's key changes below:

## Features :rocket:

- **Sitemap** - One long awaited tool for SEO is finally out of the oven: manage your website's sitemap file from now on using the new [VTEX IO Sitemap app](https://vtex.io/docs/components/functional/vtex.store-sitemap/).

- **Image zooming in a modal** - Open a modal for product image zooming whenever the Product Images component (`product-image` block) is clicked on. The instructions for setting up this new feature are available in the Advanced configuration section of the [Product Image block documentation](https://vtex.io/docs/components/all/vtex.store-components/productimages/).

- **Confirmation modal on Minicart**  - Using the [Modal Layout app](https://vtex.io/docs/components/all/vtex.modal-layout/), you can now display a confirmation modal when users decide to remove an item from the minicart. Learn how to configure the confirmation modal in your store by accessing the [Creating modals using icons](https://vtex.io/docs/recipes/templates/creating-modals-using-icons/) documentation.

- **VTEX IO Service Worker management** - Activate and deactivate the native VTEX IO service worker according to your store needs! This feature is a must if you are dealing with a third solution service worker. For more info, access the [Managing VTEX IO native service worker](https://vtex.io/docs/recipes/store-management/deactivating-the-vtex-io-native-service-worker/) documentation.

## Improvements :heavy_plus_sign:

- **404 pages** - The 404 pages feature was remodeled. It was already possible to natively enable 404 pages for nonexistent product pages and for URLs that have more than one invalid segment. But in addition to that, you can now also allow 404 pages when URLs have a single invalid path segment. Cheers to that! Learn more about this setup in the [Enabling 404 pages](https://vtex.io/docs/recipes/store-management/enabling-404-pages/) documentation.

- **Checkbox buttons customization**  - New CSS Handles were added to the VTEX Styleguide in order to simplify the Checkbox button customization, such as those ones used in filters from the search results page, namely `vtex-checkbox__box-wrapper`, `vtex-checkbox__box`, and `vtex-checkbox__input`. For further details, do not forget to check out the [VTEX Styleguide](https://styleguide.vtex.com/).

- **Price Range component customization**  - A new CSS Handle called `vtex-slider__base-internal` was also added to the VTEX Styleguide in order to simplify the customization of the Price Range component, rendered on the Search Result page. As previously recommended, you can access the [VTEX Styleguide](https://styleguide.vtex.com/) for more info.

- **Search bar in modals** -  Displaying a search bar in a modal using the [Modal Layout app](https://vtex.io/docs/components/all/vtex.modal-layout/) and the  [Search Result](https://vtex.io/docs/components/all/vtex.search-result/) block `search-bar` was already possible. Now, however, the modal is immediately closed when a search is performed by users, enhancing their navigation experience.

- **Product Specifications customization** - It became possible to apply CSS classes for each product specification displayed on the interface, allowing for their independent customization. This marvel of a release is all thanks to the way CSS Handles (used by the [Product Specifications](https://vtex.io/docs/components/all/vtex.store-components/productspecifications/) block) currently behave when inspected.

- **Product Summary Name heading tags**  - Forget about when a single heading tag was mandatory: using the new `tag` prop, you can now choose which heading tag should be applied when rendering the Product Summary Name block.  Don't forget to check out the [block documentation](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-name/).

- **Add To Cart Button text label** - We really mean to empower our users: decide which text should be displayed on the Add To Cart Button using its new props `text` and `unavailableText`. For more, access the [Add To Cart Button documentation](https://vtex.io/docs/components/all/vtex.add-to-cart-button/).

- **Add To Cart Button behavior** - One more for the Add To Cart Button: thanks to its new prop `onClickBehavior`, you can now set the button's behavior once it is clicked on, defining whether it will redirect users to the product page or directly add the given product to the minicart.  Check out more in the [Add To Cart Button documentation](https://vtex.io/docs/components/all/vtex.add-to-cart-button/).

*Still with us? We are just half way there! Hold on tight, because we still have some great improvements to show you:*

- **Product Summary Buy Button behavior** - We're really improving some buttons here, aren't we? The `product-summary-buy-button` block, exported by the Product Summary app, has a new prop called `buyButtonBehavior` that defines the button's behavior when clicked on. Understand which behaviors are accepted by accessing the [Product Summary Buy Button documentation](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-buy-button/).

- **Open Graph meta tags** -  Open Graph meta tags (used by Facebook) are now available in the `store.home`, `store.product`, and `store.search` templates (respectively home, product, and search result pages). These tags are extremely useful when these pages are shared on Facebook, since they're used to display rich previews to users.

- **CSS Handles for Search Result** - A VTEX IO release notes is not a proper one if it does not include new CSS Handles. `filterBreadcrumbsItem` and `filterBreadcrumbsItemName` were added to the [Search Result app](https://vtex.io/docs/components/all/vtex.search-result/), allowing for the customization of filter breadcrumbs on mobile devices.

- **CSS handles for Search Bar** - Another CSS Handles release to make you smile: the [Search Bar block](https://vtex.io/docs/components/all/vtex.store-components/searchbar/), exported by the [Store Components app](https://vtex.io/docs/components/all/vtex.store-components@3.119.6/), gained new handles responsible for customizing the search bar component specifically when it is opened and/or filled out by users.

- **Quantity badge behavior on Minicart** - The `minicart.v2` block, part of the Minicart app (v2), received a new prop called `itemCountMode`. This new prop is responsible for defining the quantity badge's behavior when displaying the number of items added to the Minicart.  Understand which behaviors are accepted by accessing the [Minicart app documentation](https://vtex.io/docs/components/all/vtex.minicart/).

- **Minicart icon** - Flexibility is what we aimed for this past month! Thanks to the new `MinicartIcon` prop, you can now change the Minicart icon (v2) by choosing from the icons exported by the [Store Icons app](https://vtex.io/docs/components/all/vtex.store-icons/). Check out the [Minicart documentation](https://vtex.io/docs/components/all/vtex.minicart/) in order to learn how to use this new prop.

- **Progress bar on the search results page** - The `search-products-progress-bar` block, responsible for displaying a progress bar for product results on the search results page, can now be declared as a child of the `search-result` block from the previous version of the [Search Result app](https://vtex.io/docs/components/all/vtex.search-result/). Previously, it only could be declared as a child of the `search-result-layout` block pertaining to current version of the app.

## Bug fixes :bug:

- **[Clear button from mobile filter sidebar](https://github.com/vtex-apps/search-result/pull/376)** - The Filter sidebar's `Clear` button was not properly working on mobile devices, since it was not properly clearing filters applied by users. This behavior has been fixed and the button now clears every checked filter.

- **[Assembly options selection](https://github.com/vtex-apps/product-customizer/pull/67)** - Previously, assembly options were only selected if the user clicked on the Radio button/checkbox. In order to improve user experience, assembly options are now duly selected whenever users select them (whether using the buttons or not).

- **[Newsletter's email address field](https://github.com/vtex-apps/store-components/pull/790)** - Spaces unintentionally added to the [Newsletter](https://vtex.io/docs/components/all/vtex.store-components@3.119.6/newsletter/)'s email address field were invalidating user subscriptions. The component no longer accepts spaces in the field, thus improving user experience.

- **[Search Result's custom query](https://github.com/vtex-apps/search-result/pull/359)**  - The `search-result-layout.customQuery` block, exported by the [Search Result app](https://vtex.io/docs/components/all/vtex.search-result/) and responsible for performing custom queries to the Search API, was not properly working when declared in a column built by the [Flex Layout app](https://vtex.io/docs/components/all/vtex.flex-layout/). This unwanted behavior is now fixed.

## Praises :sparkles:

We would not be able to deliver so many amazing results during this last month if it were not for the following outstanding contributors:

-   [BeatrizMiranda](https://github.com/BeatrizMiranda)  _from ACCT_
-   [gustavopvasconcellos](https://github.com/gustavopvasconcellos) _from ACCT_
-   [ygorneves10](https://github.com/ygorneves10) _from Corebiz_
-   [igorpoubel](https://github.com/igorpoubel) _from Corebiz_

Thank you, team :muscle:

```


[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 release-notes/docs/2019-week-34/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Highlights - Week 34/2019
description: "See what is new in VTEX IO Week 34/2019"
date: "2019-08-30"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-34/README.md"
---

# VTEX IO Highlights - Week 34/2019

Hello, team!

Today is the last working day of August :tada:

In order to celebrate the end of this endless month, check out the VTEX IO Release Notes for this week:

> :bell: Keep up with VTEX IO release notes! Simply click on **Releases only** in the **Watch** box in the right upper corner of this page.

### New features :rocket:

- [Toolbelt apps installation inspection](https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-34/toolbelt-apps-installation-inspection.md) - Automatically check whether route conflicts can occur in your workspace as a result of installing an app.
- [`ProductSummaryBrand` component](https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-34/ProductSummaryBrand-component.md) - Render brand data with your own customizations in your Shelf component.

### Improvements :heavy_plus_sign:

- [Platform performance](https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-34/platform-performance.md) - Understand last week's VTEX IO performance improvement key points.
- [Shelf in mobile mode](https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-34/shelf-in-mobile-mode.md) - Partially display products in Shelf component without breaking the page layout.

### Notable bug fixes :bug:

- [CSS Filter Navigator Handles](https://github.com/vtex-apps/search-result/pull/223) - At long last, numerous `filter-navigator.v2` elements got new CSS handles.
- [Telemarketing user profile](https://github.com/vtex-apps/telemarketing/pull/53) - Telemarketing user issues were fixed, such as the UI, login/logout failure and the orderForm not being updated with the customer's data.

```


[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 release-notes/docs/2020-08/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Release Notes - August 2020
description: "See what is new in VTEX IO for August 2020"
date: "2020-09-18"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2020-08/README.md"
---

# VTEX IO Release Notes - August 2020

It may make a delayed entrance, but it never fails: it's finally here guys :pray:

Did you know that August is called the month of chagrin by some in Brazil? Nonsense....  VTEX IO is here to prove them wrong with this month's release notes.

A lot of freshly baked wonder-cakes are finally out of our development oven, among which:

- 🚀 The new Disclosure Layout app
- ➕ Change in the app deploying time
- ❌ Product Specifications block deprecation

Wonderful right? And it is not just because I wrote everything here... this month's release notes is so blissful that is would change anyone's mood. Have a closer look:

## Features 🚀

- **Disclosure Layout app** - The Disclosure Layout app is finally among us! The new layout app is responsible for creating a layout structure based on disclosure triggers, as shown below. For more details on the new app, access the [Disclosure Layout documentation](https://vtex.io/docs/components/layout-blocks/vtex.disclosure-layout/).

![disclosure-layout-gif](https://user-images.githubusercontent.com/52087100/93628124-6ca2d500-f9bc-11ea-9a47-cae413459a05.gif)

- **Product Highlights app** - The Product Highlights app is here to allow you to display highlight badges on products according to the collection or promotion they are linked to. To learn how to configure it in your store, check out the [Product Highlights app documentation](https://vtex.io/docs/components/all/vtex.product-highlights/).

![product-highlight](https://user-images.githubusercontent.com/52087100/93628222-91974800-f9bc-11ea-93a1-a9bb7420456a.png)

- **Product Specifications app** - Aiming to bring you more flexibility when using the Product Specifications component, our product team developed the Product Specifications app, replacing the former [Product Specifications block](https://github.com/vtex-apps/store-components/blob/master/docs/ProductSpecifications.md) exported by the [Store Components app](https://vtex.io/docs/app/vtex.store-components). Its setup is just a few clicks away: check out the new [Product Specifications app documentation](https://vtex.io/docs/components/all/vtex.product-specifications/)!

![product-specification](https://user-images.githubusercontent.com/52087100/93628330-c73c3100-f9bc-11ea-95fb-e6974b73774e.png)

- **Product Price block for seller name** - A new block responsible for displaying the seller name next to the product price is among us! Learn how to configure the `product-seller-name` block in your store by accessing the [Product Prices app documentation](https://vtex.io/docs/components/all/vtex.product-price/).

![block-seller](https://user-images.githubusercontent.com/52087100/93628529-15513480-f9bd-11ea-84ee-47ccb84de0db.png)

## Improvements ➕

- **Slider Layout's elements positioning** - The Slider Layout has gained a new prop called `centerMode`, which is responsible for defining how slider elements are positioned on the screen for each device. One of its possible values is `center` which allows you to display your slider element in a centered way to your users, as shown below. This improvement is extremely useful for Shelves and other components that use the Slider Layout for rendering product data.

![RN-](https://user-images.githubusercontent.com/52087100/93630391-5f87e500-f9c0-11ea-8402-d2f1eba22659.png)

- **Filters display on Search Result page**  -  Thanks to the new `openFiltersMode` prop, you can now define how many filters a user can concomitantly open on the Filter Navigator component.  For more details, access the [Search Result app documentation](https://vtex.io/docs/components/all/vtex.search-result/)!

![filter-selection](https://user-images.githubusercontent.com/52087100/93628732-72e58100-f9bd-11ea-8600-32c0551e4b43.gif)

*Note that only one filter can be opened at any time. In the example above, the prop `openFiltersMode` is declared as `one`.*

- **Bazaar Voice info in Google structured data** -  From now on, user review data fetched by the Bazaar Voice app is considered in Google's structured data, used to understand and gather information about the content of the store's page. This improvement is extremely useful for SEO purposes since google will now be able to effectively fetch product reviews and display them on search result pages.

![bazaar-voice-structured-data](https://user-images.githubusercontent.com/52087100/93628800-8d1f5f00-f9bd-11ea-80fa-41d463991072.png)

- **Markdown interpretation by Assets Builder** - The [Assets Builder](https://vtex.io/docs/recipes/development/using-the-assets-builder) now supports assets whose URLs are built using markdown. This improvement is extremely useful and relevant since block props use the markdown structure to declare media on components.

- **App deploying time**  - Aiming to strengthen the security of our development process, published apps will now have to wait 7 minutes until they become ready to be deployed. Note the following: if this timing is not respected, an `Invalid state transition` error will be received from Toolbelt. For more on this process, check out the [Publishing an app](https://vtex.io/docs/recipes/development/publishing-an-app) documentation.

- **`pageInfo` event on search results page** - Retailers can now benefit from the new search results page event: the `pageInfo`.  Your store's new taggable event is triggered whenever the search results page content is changed due to user interaction, namely: selecting new filters, reordering the results, and clicking on the `Show More` button.

- **EAN in Google Analytics events** - The EAN (product identifier) data is now included in the `addToCart` event. In practice, this means that the VTEX Store Framework now provides EAN data to Google Analytics events, allowing for a deeper analysis and extra integrations.

- **Dynamic content on Slider Layout** - The Slider Layout has gained full dynamic content support! Previously, the component couldn't behave as expected with a dynamic number of slides i.e. when slides were added and removed according to user interaction (as in the case with product-comparison components). The Slider Layout is now adapted to always work as it is configured, regardless of its new content.

- **Minicart v2 automatic display** - A trigger responsible for automatically opening the Minicart v2 on the interface can now be set by using any desired store event and the block's new `customPixelEventId` and `customPixelEventName` props! A long-awaited scenario, in which this new release is extremely useful, is to automatically open the Minicart component whenever the `Add To Cart button` is clicked on by users. Brace yourselves because the wait has finally come to an end: to prettify this release, the `add-to-cart-button` block has also gained a new prop called `customPixelEventId` to broadcast an event of its own when it is clicked on. In practice, this means that you can now set up both `add-to-cart-button` and `minicart.v2` blocks to configure this behavior in your store, displaying the options to move to checkout or  just keep shopping to your users.

*Hold on tight, my friend! Some amazing improvements related to store customization still await you:*

- **Image's non-active dots customization [CSS Handle]** - Previously, we had no CSS handles that would enable users to select and customize non-active dots in the `product-images` block (from [Store Components app](https://vtex.io/docs/app/vtex.store-components/)). Thanks to the new `swiperBullet` and `swiperBullet--active` CSS Handles, an image's non-active dots can now be selected and customized. For more on this, access the [Product Images block documentation](https://vtex.io/docs/components/all/vtex.store-components/product-images/) and our documentation on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization/).

![image-dot-non-active](https://user-images.githubusercontent.com/52087100/93629085-0fa81e80-f9be-11ea-8fa9-eebbd82bca58.png)

*In the image above only the first image dot, which was currently selected (or active), had both `vtex-store-components-3-x-swiperBullet`  and `vtex-store-components-3-x-swiperBullet--active` CSS classes. The second image dot, which was not active, did not have any CSS class which basically meant that users could not select it for customization.*

- **Product Specifications block customization [CSS Handles]**  - New CSS Handles, namely `specificationsTableRow`, `specificationsTableHead`, and `specificationsTableBody`, were added to the [Product Specifications block](https://github.com/vtex-apps/store-components/blob/master/docs/ProductSpecifications.md), exported by the [Store Components app](https://vtex.io/docs/app/vtex.store-components/), in order to grant you more flexibility while customizing the component's elements.

![css-handles-product-specifications](https://user-images.githubusercontent.com/52087100/93629133-2c445680-f9be-11ea-8170-39ca1b04a780.png)

***Caution**: As previously informed, the Product Specifications block was deprecated and replaced with the Product Specifications app. This release only applies to the former.*

- **Drawer overlay customization [CSS Handles]** -  The Drawer app has gained two new CSS Handles, namely `overlay` and `overlay--visible`, responsible for allowing retailers to customize the overlay structure used by the mobile component. For further details, access this [practical example recorded on loom](https://www.loom.com/share/d4da3624507e464281caae057496a426), as well as the [Drawer app documentation](https://vtex.io/docs/components/all/vtex.store-drawer/).

 - **`nth-child` CSS Selector with step size** - `:nth-child` selectors with step size, such as `:nth-child(2n)` are now allowed when customizing your store with CSS! For more on customizing your store with CSS and HTML selectors, access [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization/#best-practices).

## Deprecations ❌

- **Product Specifications block** - The [Product Specification block](https://github.com/vtex-apps/store-components/blob/master/docs/ProductSpecifications.md), pertaining to the [Store Components app](https://vtex.io/docs/app/vtex.store-components/) was deprecated. Although support for this block is still provided, we strongly recommend you to update your store theme with the [**Product Specifications app**](https://vtex.io/docs/components/all/vtex.product-specifications@1.0.1/) in order to benefit from greater flexibility and to keep up with the component's evolution.

## Bug fixes 🐛

- **[Sum of installments without interest on search results page](https://github.com/vtex-apps/search-resolver/pull/84)** - Previously, the search query was presenting price errors when displaying product data on the search results page. As shown in the image below, the sum of installments without interest was higher than the product price itself, leading to a poor and frustrating user experience. The search query for this page was fixed and the bug removed, meaning that the sum of installments without interest is now displayed mathematically correct on search results pages as well as on the product details page.

![installments-bug](https://user-images.githubusercontent.com/52087100/93629964-8abe0480-f9bf-11ea-9141-42e699c1aee1.png)

## Praises ✨

We would not be able to deliver so many amazing results during this last month if it were not for the following outstanding contributors:

- [BeatrizMiranda](https://github.com/BeatrizMiranda)  *from ACCT*
- [Lucas Pacheco](https://github.com/lucaspacheco-acct) *from ACCT*
- [Marcos Ewbank](https://github.com/marcosewbank) *from ACCT*
- [Gabriel Carafizi](https://github.com/carafizi1) *from ACCT*
- [Gustavo Vasconcellos](https://github.com/gustavopvasconcellos) *from ACCT*
- [Jayendra](https://github.com/Jayendra88) *from Clouda*

Thank you, team! 💪

```


[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 release-notes/docs/2020-09/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Release Notes - September 2020
description: "See what is new in VTEX IO for September 2020"
date: "2020-10-23"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2020-09/README.md"
---

# VTEX IO Release Notes - September 2020

Just in time: **the VTEX IO Release Notes for September 2020 is finally *among us***!

That being said, your task list from now on consists of:

- Read our hot-off-the-press news.
- Implement the latest and best configs in your store.
- Spread the word to your crewmates about the newest VTEX IO Release Notes.

Easy-peasy... and let me tell you this: our team has prepared so many delightful releases that I'm 100% sure that the above tasks will be done even before tiredness gets to you! No sabotage is allowed!

Shall we?

## Features :rocket:

- **Store Video app** - The Store Video app has arrived, allowing you to display video assets on your store pages with divine features such as auto-play, loop, and mute. It gets even better: the app also supports YouTube, Vimeo, and other third-party players! What are you waiting for? Check out now the [documentation](https://vtex.io/docs/components/content-blocks/vtex.store-video/)!

![store-video](https://user-images.githubusercontent.com/52087100/97001317-8d57d080-150e-11eb-989e-e09b8e61c079.png)

- **Product SKU Attributes block** -  The [Store Component app](https://vtex.io/docs/components/content-blocks/vtex.store-components/)'s brand new block is here to allow you to effortlessly display product SKU attributes. Learn more about it in the [Product SKU attributes documentation](https://vtex.io/docs/components/content-blocks/vtex.store-components/productskuattributes/)!

![product-sku-attributes](https://user-images.githubusercontent.com/52087100/97001314-8cbf3a00-150e-11eb-85c3-b538c42d5d22.png)

- **Facebook Domain Verification app** - The Facebook Domain Verification adds a meta-tag containing the Facebook verification code to your homepage `<head>`, which is used by Facebook for checking your website's ownership. The new app is more than ready to be installed: access its documentation [here](https://vtex.io/docs/components/pixel/vtex.facebook-domain-verification/)!

- **Auto-complete for `product-context` properties** - The TypeScript types of the `vtex.product-context` app are working! Now, if you develop a React app that depends on them, you might run `vtex setup --typings` to have auto-complete and other juicy features that types provide.

## Improvements :heavy_plus_sign:

- **Performance optimization** - If there is one thing that everyone dreams about, it's performance optimization! With that in mind, the VTEX IO team has prepared a bunch of new configs for you, such as *partial fetching of facets on the search results page* and *CSS concatenation*. The best part is that they are just a couple of clicks away: check out now the documentation on [improving your store's performance](https://vtex.io/docs/recipes/store-management/improving-your-stores-performance/) and apply our best practices in your store!

![cms-store-advanced](https://user-images.githubusercontent.com/52087100/97001256-76b17980-150e-11eb-827f-b91928f4ddf6.png)

- **Repetitive purchase of products** - Before this release, adding the same product to the [Minicart v2](https://vtex.io/docs/components/content-blocks/vtex.minicart/) multiple times was kind of a big challenge for store users. Due to the `Item already on cart` error message, displayed whenever the `Add to cart` button was clicked on more than once, users were being blocked from having a smooth shopping experience. Good thing that loss in sales is not something we condone, nor want. Therefore, users are now able to click on the [Add to cart button](https://vtex.io/docs/components/content-blocks/vtex.add-to-cart-button/) as many times as desired! Cheers to that!

![add-to-cart-loop](https://user-images.githubusercontent.com/52087100/97001241-73b68900-150e-11eb-888f-38a03f042835.gif)

- **Filtering payment methods in the search query** - Thanks to two new props, namely `includedPaymentSystems`  and `excludedPaymentSystems`, it finally became possible to define which payment methods should and should not be taken into account in the search query when displaying the installment options to your store users. Access the [Search Results app documentation](https://vtex.io/docs/components/content-blocks/vtex.search-result/) now and learn how to set these props up in your search results page!

- **Power Review app internationalization** - The [Power Review app](https://vtex.io/docs/components/pixel/vtex.powerreviews/) now works properly with international stores! When globalizing your brand, you no longer need to worry about user reviews in different languages: from this release onward, reviews are automatically fetched, translated, and displayed according to the store locale set by users.

- **Radio and Radiogroup customization** - The Radio and Radiogroup [VTEX Styleguide](https://styleguide.vtex.com/#/Introduction) components have gained these new CSS Handles to call their own: `vtex-radiogroup__fieldset`, `vtex-radiogroup__legend`, `vtex-radiogroup__label`, `vtex-radiogroup__radioContainer`, and `vtex-radiogroup__error`, thus allowing you to customize several store components that are built using them, including [Store Form](https://vtex.io/docs/components/content-blocks/vtex.store-form/) and [Newsletter](https://vtex.io/docs/components/content-blocks/vtex.store-components/newsletter).

- **Sales channel parameter in the `productsByIdentifier` query** - A new parameter was added to the [`productsByIdentifier` search query](https://github.com/vtex-apps/search-graphql/blob/master/graphql/schema.graphql#L216), allowing your custom components to fetch and display products according to the desired sales channel.

- **Item ID as product identifier** - From now on, the [Product Identifier app](https://vtex.io/docs/components/content-blocks/vtex.product-identifier/) also accepts item IDs as product identifiers. Before this release, only Product Reference, Product ID, SKU EAN, and SKU Reference ID were accepted as valid to be displayed on the component.

![product-identifier](https://user-images.githubusercontent.com/52087100/97001233-6ef1d500-150e-11eb-8949-fb5bb60fd306.png)

## Bug fixes :bug:

- [Title attribute missing in image components](https://github.com/vtex-apps/store-image/pull/24) - The title attribute was nowhere to be found in store images. Poor little guy! It was linked to the incorrect HTML element when components were rendered - `a` instead of `img`. This behavior is now fixed and the title attribute can be properly found and tracked.

- [SKU Selector frozen on slider component](https://github.com/vtex-apps/slider-layout/pull/46) - The SKU Selector had its product data frozen when rendered on slider components. In this previous and ugly scenario, users could only update the data displayed either when scrolling the page or when changing the slide currently hovered on. The good thing is that we are close to summer in Brazil and the SKU Selector was defrosted just in time: it is now working as expected!

## Docs :page_facing_up:

Documentation is **key**! Check out our out-of-the-oven docs below :

### Tracks

- [Desenvolva componentes usando VTEX IO e React](https://vtex.io/docs/getting-started/desenvolva-componentes-usando-vtex-io-e-react/1/) (*Develop components using VTEX IO and React*) - Currently only available in Portuguese!

### Recipes

- [Using events to trigger side effects on store components](https://vtex.io/docs/recipes/templates/using-events-to-trigger-side-effects-on-store-components/)
- [Cross-border store content internationalization](https://vtex.io/docs/recipes/store-management/cross-border-stores-content-internationalization/)
- [Managing landing pages in cross-border stores](https://vtex.io/docs/recipes/store-management/managing-landing-pages-in-cross-border-stores/)
- [Creating robots files for cross-border stores](https://vtex.io/docs/recipes/store-management/creating-robots-files-for-cross-border-stores/)
- [Checking your store’s binding ID](https://vtex.io/docs/recipes/store-management/checking-your-store-binding-id/)
- [Multi-language stores](https://vtex.io/docs/recipes/store-management/multi-language-stores/)
- [Migrating CMS settings after a theme major update](https://vtex.io/docs/recipes/development/migrating-CMS-settings-after-major-update/)
- [Running IO scripts in any VTEX store](https://vtex.io/docs/recipes/development/running-IO-scripts-in-any-VTEX-store/)

### Concepts

- [Billing Option](https://vtex.io/docs/concepts/billing-options/)
- [Cross-border stores](https://vtex.io/docs/concepts/cross-border-stores/)
- [Slots](https://vtex.io/docs/concepts/slots/)

## Praises :sparkles:

We would not be able to deliver so many amazing results during this last month if it were not for the following outstanding contributors:

- [Marcos Ewbank](https://github.com/marcosewbank) *from ACCT*
- [Raissa Campos](https://github.com/raissacmp) *from ACCT*
- [Lucas Pacheco](https://github.com/lucaspacheco-acct) *from ACCT*
- [Gabriel Carafizi](https://github.com/carafizi1) *from ACCT*
- [Erislandio](https://github.com/Erislandio) *from ACCT*

```


[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 release-notes/docs/2019-week-35/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Highlights - Week 35/2019
description: "See what is new in VTEX IO Week 35/2019"
date: "2019-09-06"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-35/README.md"
---

# VTEX IO Highlights - Week 35/2019

Welcome to the VTEX IO weekly release notes!

We're extremely happy to have achieved 10 straight weeks of VTEX IO Release Notes 🎉 We hope that you're excited as well!

Unfortunately, this week's Release Notes size does not do justice to our impish glee with this achievement. This one comes in a mini format since our team is laser focused on improving the platform's performance.

Check out what were the key changes for the last week:

> :bell: Keep up with VTEX IO release notes! Simply click on **Releases only** in the **Watch** box in the right upper corner of this page.

### New features :rocket:

- [Google Search Box script](https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-35/google-search-box-script.md) - Effortlessly display a store's internal search box during Google searches and watch how page access soars.

### Improvements :heavy_plus_sign:

- [Platform performance](https://github.com/vtex-apps/release-notes/blob/master/docs/2019-week-35/platform-performance.md) - Understand last week's VTEX IO key performance improvement points.

### Notable bug fixes :bug:

- [Shelf `itemsPerPage` limit](https://github.com/vtex-apps/shelf/pull/176) - The Shelf component had a bug that limited the number of items it displayed to 5. Now, whatever number of items the `itemsPerPage` decides is duly displayed.
- [RelatedShelf component](https://github.com/vtex-apps/shelf/pull/179) - The RelatedShelf no longer displays a maximum quantity of products due to not being able to properly identify if it's rendering for mobile or not.

```


[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 release-notes/docs/2020-07/README.md from the release-notes VTEX app.

[Assistant]
Here's the implementation:

```markdown
---
title: VTEX IO Release Notes - July 2020
description: "See what is new in VTEX IO for July 2020"
date: "2020-08-17"
git: "https://github.com/vtex-apps/release-notes/blob/master/docs/2020-07/README.md"
---

# VTEX IO Release Notes - July 2020

Make room for the VTEX IO Release Notes - July 2020 version, team!

It is time to step aside from all the world's craziness and restfully read the goodies brought to us in the past month by the VTEX IO team.

Stretch your legs, take a deep breath and a sip of coffee: you are about to reach the high-point of your August home-office days with our ***latest news**!

Some of the key changes include:

- 🚀 The new `font-faces.css` file in Store Theme
- ➕ Product Price blocks for installment options
- ❌ Animation and Slider blocks deprecation
- 🐛 Related Products Shelf rendering on mobile devices fix

*And much more*. Cast you eyes on these freshly baked releases right now:

## Features 🚀

- **Cookie Script pixel app** - A VTEX [Cookie Script](https://cookie-script.com/) native integration is now available for your store, making your website cookies comply with GDPR and CCPA. Learn how to install it by accessing the [Cookie Script app documentation](https://developers.vtex.com/docs/vtex-cookie-script).

- **Tawk.to pixel app** - Another pixel app on the front lines: a [Tawk.to](https://www.tawk.to/) native integration is also now available for your store. It allows you to monitor and chat with visitors on either your website, mobile app, or from a free customizable page. Learn how to install it in your VTEX account by accessing the [Tawk.to app documentation](https://developers.vtex.com/docs/vtex-tawk-to).

- **Elfsight pixel app**  - They say three is a charm, don't they? A VTEX [Elfsight](https://elfsight.com/?gclid=EAIaIQobChMI4Yejsrnh6gIVVQmRCh0UPgQJEAAYASAAEgIvR_D_BwE) native integration is available, providing widgets to increase sales, engage visitors, collect leads, and more. Learn how to install it in your VTEX account by accessing the [Elfsight app documentation](https://vtex.io/docs/components/pixel/vtex.elfsight/).

- **OneSignal pixel app** - What do we call it? Four is a blast? I think so! A [OneSignal](https://onesignal.com/) native integration is among us, providing web push notifications for customer engagement. Learn how to install it in your VTEX account by accessing the [OneSignal app documentation](https://vtex.io/docs/components/all/vtex.onesignal/).

- **New `font-faces.css` file in the Store Theme app** - Create a CSS global file specifically for your store's fonts and change your store's typography according to your business needs using your Store Theme app code. But keep in mind: the `font-faces.css` file is now mandatory when changing your store's typography using your store theme code, meaning you can no longer upload fonts directly in the app's CSS by overriding files. For more on this topic, access the [Customizing your store's typography](https://vtex.io/docs/recipes/style/customizing-your-stores-typography/) documentation.

## Improvements ➕

- **Product spot price in Google structured data** - The product spot price is now considered in the  `lowPrice`  field from Google structured data, used to understand and gather information about the content of the store page. This improvement is extremely useful for stores that use Google Shopping, since it will now be able to effectively fetch the product's lowest price (meaning the spot price).

- **Product spot price on search results page**  - The product spot price is really deciding to come out. It is now displayed on the store's search results page (whether the store uses VTEX Intelligent Search or the former search solution).

![spot-price-search-results](https://user-images.githubusercontent.com/52087100/90401143-ec631a00-e073-11ea-92c6-c95bf163da4b.png)
*Previously, the product spot price was only available for product detail pages.*

- **Order custom tax data in the `dataLayer` object** -  New fields were added to the `dataLayer` object, allowing the store's website to export data related to the order custom taxes. This improvement is extremely useful for stores wishing to handle order custom tax data in Google tracking mechanisms, such as Google Analytics.

- **Product Price blocks for installment options** - The Product Price component now displays all the available installment options according to the desired payment method, thanks to the new blocks `product-installments-list` and  `product-installments-list-item`. Previously, the Product Price component only rendered the max number of installments, regardless of the payment method. For more, do not forget to access the [Product Price app documentation](https://vtex.io/docs/components/all/vtex.product-price/).

- **Assets builder's file paths in CSS files**  - Media uploaded on Assets builder can now be referenced in your store theme CSS files by adding the accurate file path. Previously, file paths from Assets builder only worked in `blocks.json` and `blocks.jsonc` files. For more on this topic, check out the [Using the Assets Builder](https://vtex.io/docs/recipes/development/using-the-assets-builder/) documentation.

- **List price presentation on product selling price** - The `hasListPrice` prop was added to the `product-selling-price` block from the [Product Price app](https://vtex.io/docs/components/all/vtex.product-price/). It is responsible for defining whether the product should display its [list price](https://help.vtex.com/en/tutorial/prices-v2--tutorials_4393?locale=en) (if any) on its selling price or not.

![rn-no-list-price](https://user-images.githubusercontent.com/52087100/90403203-fc302d80-e076-11ea-972d-25ed247092c4.png)
*Product selling price with no list price being displayed.*

![rn-with-list-price](https://user-images.githubusercontent.com/52087100/90403199-f9353d00-e076-11ea-92c8-5ff3d1d339cb.png)
*Product selling price with the list price also being displayed.*

- **Submenu customization per user navigation [CSS Handles]** - New CSS Handles with modifiers (`submenuWrapper--isOpen`  and `submenuWrapper--isClosed`) were added to the [Menu app](https://vtex.io/docs/components/all/vtex.menu/), making it possible to create animation effects when the submenu opens and closes according to the user navigation. For more on how to properly use CSS Handles, access the [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization) documentation.

![submenu-handle](https://user-images.githubusercontent.com/52087100/90402269-98f1cb80-e075-11ea-9331-923a21655df2.png)
*Notice how the menu animation showed above only works because the `submenuWrapper--isClosed` Handle is being applied.*

- **Shelf slide dot customization [CSS Handle]** - A new CSS Handle (`dot--isActive`) was added to the [Shelf app](https://vtex.io/docs/components/all/vtex.shelf/), enabling the customization of the shelf active slide dot.

![shelf-handle](https://user-images.githubusercontent.com/52087100/90402463-db1b0d00-e075-11ea-8a05-740609e7015e.png)
*The shelf slide dot highlights the shelf slide currently being hovered on by users.*

We already are half way through! Hold on tight, some marvelous improvements still await you:

- **Filter Navigator customization on mobile devices [CSS Handles]** - New CSS Handles were added to the [Search Result app](https://vtex.io/docs/components/all/vtex.search-result/) to enable the Filter Navigator component customization on mobile devices. They are, namely: `accordionFilterContainer` , `accordionFilterContent`, `filterBreadcrumbsContent`, and `filterBreadcrumbsText`.

- **Search results page customization per display mode [CSS Handles]**  - It became possible to apply CSS classes to search results according to the way they are displayed on the interface! This release marvel is all thanks to the way `galleryItem` CSS Handle (exported by the [Search Result app](https://vtex.io/docs/components/all/vtex.store-components/productspecifications/)) presently behaves when inspected.  It now accepts an HTML modifier  (`{displayMode}`) meaning that the handle name changes according to the display mode used to render search results.

![release-displaymode-modifier](https://user-images.githubusercontent.com/52087100/90401469-5bd90980-e074-11ea-97d7-9ab0774af624.png)
*In the example above, the CSS Handle `galleryItem` presents itself as `galleryItem-inline` when inspected. Notice that the new Handle name is defined according to the display mode set on the search results page.*

- **Product Images' active slide dot customization [CSS Handles]** -  A new CSS Handle (`swiperBullet--active`) was added to the [Product Images block](https://vtex.io/docs/components/all/vtex.store-components/productimages)(from the [Store Components app](https://vtex.io/docs/components/all/vtex.store-components/)), enabling the customization of the active slide dot. This handle is extremely useful for scenarios where the Product Images block is used to build a slider component, such as a [Carousel](https://vtex.io/docs/recipes/templates/building-a-carousel-using-slider-layout).

![rn-swiper-product-images](https://user-images.githubusercontent.com/52087100/90403392-4dd8b800-e077-11ea-857c-334396b6ece8.png)
*The slider active dot highlights the slide currently being hovered on by users.*

- **Search result's Order By customization [CSS Handles]** - A new CSS Handle (`orderByOptionItem--selected`) was added to the [Search Result app](https://vtex.io/docs/components/all/vtex.search-result/), allowing you to customize the item selected by users on the page's Order by component.

![rn-order-by-handle](https://user-images.githubusercontent.com/52087100/90404114-4bc32900-e078-11ea-8e33-259d9c9db50c.png)

- **Seller Selector context** - Other VTEX Store Framework apps can now use the context exported by the [Seller Selector app](https://vtex.io/docs/components/all/vtex.seller-selector/) (`SellerContext`) regarding seller data by using the `import { SellerContext } from 'vtex.seller-selector'` expression in the Store Theme code.

 - **Breadcrumb structured data** - Previously, neither the [Breadcrumb app](https://vtex.io/docs/components/all/vtex.breadcrumb/) nor the store itself provided the `position` and `itemListElement` data necessary to guide search engines to the current page position in the store category tree. The Breadcrumb app is now configured to have [structured data](https://developers.google.com/search/docs/guides/intro-structured-data), improving your store's SEO.

## Removals ⛔

- **Back button as modal closing button** - The browser's Back button no longer works as a modal closing button when configuring the [Modal Layout app](https://vtex.io/docs/components/all/vtex.modal-layout/). This feature was extremely useful for users from mobile devices since the modal opened in them works as a brand new page. In the meantime, it was leading users to a poor experience when using desktop devices since the Back button wasn't taking users to the previous page as expected. Instead, it only closed modals (if any on the page). In order to improve the website navigation, this feature was removed, meaning that the Modal Layout now depends on its own button in order to be properly closed.

## Deprecations ❌

- **Animation and Slider blocks** - The [Animation](https://github.com/vtex-apps/store-components/blob/master/docs/Animation.md) and the [Slider](https://github.com/vtex-apps/store-components/blob/master/docs/Slider.md) blocks, pertaining to the [Store Components app](https://vtex.io/docs/components/all/vtex.store-components/) were deprecated. Although support for both blocks is still provided, it is strongly recommended to update your store theme with the [Slider Layout](https://vtex.io/docs/components/layout-blocks/vtex.slider-layout/) block in order to keep up with the Slider component evolution.

## Bug fixes 🐛

- **[Product variation sorting on SKU Selector](https://github.com/vtex-apps/store-resources/pull/123)** - Previously, the SKU Selector rendered in a Product Summary Component ([`product-summary-sku-selector` block](https://vtex.io/docs/components/all/vtex.product-summary/product-summary-sku-selector/)) did not respect the Catalog data when displaying product variations. As a result, product variations didn't have a specific sorting when displayed to users, leading to a poor UX.  This unexpected behavior is now fixed and the SKU Selector now presents the variations according to how they are ordered in the Catalog module.

- **[`hideImpossibleCombinations` prop behavior](https://github.com/vtex-apps/store-components/pull/828)** - Before this fix, [SKU Selector](https://vtex.io/docs/components/all/vtex.store-components/sku-selector/)'s `hideImpossibleCombinations` prop was not properly hiding impossible specifications (specifications that can't be chosen according to the filter previously selected) when defined as `true` in certain scenarios. In addition, when the prop value was  `false`, impossible specifications were not being displayed by the component in an intuitive way. These behaviors are now fixed and the prop is working as expected, improving user experience when using the SKU Selector component. Check out this [link](https://www.loom.com/share/2f11b9f6ae6c4bcf9f23380d3f8bf9eb) to watch a practical demonstration of this bug and its fix.

- **[Slider Layout's slide navigation](https://github.com/vtex-apps/slider-layout/pull/34)** - The [Slider Layout app](https://vtex.io/docs/components/all/vtex.slider-layout/) has gone through fundamental changes in order to improve its usability and therefore the user's experience on it. Previously, the component was showing a mobile delay (mobile users were facing a delay when sliding across products by swiping instead of using the arrow buttons) and a rewind effect (due to the lack of an infinite scroll feature, the component was presenting a rewind effect, taking users back to the *first* displayed product when the *last* one was presented). Both issues were addressed and fixed! Cheers to that! Now the Slider Layout automatically works with a smooth slide transition (infinite scroll effect) and also quickly responds to user interaction on mobile devices.

- **[Related Products Shelf rendering on mobile devices](https://github.com/vtex-apps/shelf/pull/227)**  - Due to an implementation detail in the `isMobile` prop, the [Related Products Shelf component](https://vtex.io/docs/components/all/vtex.shelf/) was only being rendered in its desktop mode, even when displayed on mobile devices. This undesirable behavior is now fixed and the Related Products Shelf is working for mobile users as expected.

## Praises ✨

We would not have been able to deliver so many amazing results during this last month if it were not for the following outstanding contributors:

- [BeatrizMiranda](https://github.com/BeatrizMiranda)  *from ACCT*
- [Matheus Araujo](https://github.com/MatheusR42) *from Corebiz*
- [Sahan Jayawardana](https://github.com/sahanljc) *from Clouda Inc*

Thank you, team! 💪

```