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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StoreResources/OrderFormContext.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component, useContext } from 'react'
import hoistNonReactStatics from 'hoist-non-react-statics'
import PropTypes from 'prop-types'

const OrderFormContext = React.createContext({})
const { Provider } = OrderFormContext

function orderFormConsumer(WrappedComponent) {
  const WithOrderForm = (props) => {
    const { orderFormContext } = useContext(OrderFormContext)
    return <WrappedComponent {...props} orderFormContext={orderFormContext} />
  }
  WithOrderForm.displayName = `OrderFormContext(${Component.displayName ||
    Component.name ||
    'Component'})`
  WithOrderForm.WrappedComponent = WrappedComponent

  return hoistNonReactStatics(
    WithOrderForm,
    WrappedComponent
  )
}

const useOrderForm = () => {
  const context = useContext(OrderFormContext)

  return context.orderFormContext
}

const contextPropTypes = PropTypes.shape({
  /* Toast message that will be displayed  */

  message: PropTypes.shape({
    isSuccess: PropTypes.bool,
    message: PropTypes.string,
  }).isRequired,
  /* Is information still loading*/

  loading: PropTypes.bool.isRequired,
  /* Function to refetch the orderForm query */

  refetch: PropTypes.func.isRequired,
  /* Function to add a new item into the orderForm */

  addItem: PropTypes.func.isRequired,
  /* Function to update the orderForm */

  updateOrderForm: PropTypes.func.isRequired,
  /* Function to update the orderForm profile data*/

  updateOrderFormProfile: PropTypes.func.isRequired,
  /* Function to update the orderForm and refetch the data*/

  updateAndRefetchOrderForm: PropTypes.func.isRequired,
  /* Function to update the message */

  updateToastMessage: PropTypes.func.isRequired,
  /* Function to update the shipping data */

  updateOrderFormShipping: PropTypes.func.isRequired,
  /* Order form */

  orderForm: PropTypes.shape({
    /* Order form id */

    orderFormId: PropTypes.string,
    /* Total price of the order */

    value: PropTypes.number,
    /* Items in the mini cart */

    items: PropTypes.arrayOf(PropTypes.object),
    /* CustomData in the OrderForm */

    customData: PropTypes.shape({
      customApps: PropTypes.arrayOf(
        PropTypes.shape({
          id: PropTypes.string,
          fields: PropTypes.object
        })
      )
    }),
    /* Shipping Address */

    shippingData: PropTypes.shape({
      address: PropTypes.shape({
        addressName: PropTypes.string,
        addressType: PropTypes.string,
        city: PropTypes.string,
        complement: PropTypes.string,
        country: PropTypes.string,
        id: PropTypes.string,
        neighborhood: PropTypes.string,
        number: PropTypes.string,
        postalCode: PropTypes.string,
        receiverName: PropTypes.string,
        reference: PropTypes.string,
        state: PropTypes.string,
        street: PropTypes.string,
        userId: PropTypes.string,
      }),
      /* Available Addresses */

      availableAddresses: PropTypes.arrayOf(PropTypes.object),
    }),
  }),
}).isRequired

export default {
  orderFormConsumer,
  contextPropTypes,
  Provider,
  useOrderForm,
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StoreResources/package.json from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "devDependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.6.3"
  },
  "dependencies": {
    "hoist-non-react-statics": "^3.3.0",
    "react-apollo": "^2.5.8"
  },
  "version": "0.44.0"
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StoreResources/PWAContext.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable react-hooks/exhaustive-deps */
import { loader } from 'graphql.macro'
import React, {
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'
import { useQuery } from 'react-apollo'
import { Helmet } from 'react-helmet'

import { usePixel } from '../PixelContext/PixelContext'

const pwaData = loader('./queries/pwaData.gql')

const PWAContext = React.createContext(null)

const PWAProvider = ({ rootPath, children }) => {
  const { data, loading, error } = useQuery(pwaData, { ssr: false })
  const { manifest, iOSIcons, splashes, pwaSettings } = data || {}
  const { push } = usePixel()

  const deferredPrompt = useRef(null)
  /* beforeinstallprompt event is fired even after the userChoice is to cancel (and there is no need to re-render) */
  const captured = useRef(false)

  const [alreadyInstalled, setAlreadyInstalled] = useState(false)
  const [installDismissed, setInstallDismissed] = useState(false)

  useEffect(() => {
    const handleBeforeInstall = e => {
      const { promptOnCustomEvent, disablePrompt } = pwaSettings
      if (promptOnCustomEvent !== 'default' && !captured.current) {
        e.preventDefault()

        if (disablePrompt) {
          return false
        }

        deferredPrompt.current = e
        captured.current = true
        return false
      }
      return true
    }

    window.addEventListener('beforeinstallprompt', handleBeforeInstall)
    return () =>
      window.removeEventListener('beforeinstallprompt', handleBeforeInstall)
  }, [captured, pwaSettings])

  useEffect( () => {
    const webAppInstalled = localStorage.getItem('webAppInstalled')
    if (webAppInstalled) {
      setAlreadyInstalled(webAppInstalled)
    }
    const webAppInstallDismissed = localStorage.getItem('webAppInstallDismissed')
    if (webAppInstallDismissed) {
      setInstallDismissed(webAppInstallDismissed)
    }
  }, [])

  const showInstallPrompt = useCallback(() => {
    const prompt = deferredPrompt.current
    if (prompt) {
      prompt.prompt()
      prompt.userChoice.then(choiceResult => {
        if (choiceResult.outcome === 'accepted') {
          localStorage.setItem('webAppInstalled', 'true')
        } else {
          localStorage.setItem('webAppInstallDismissed', 'true')
        }
        push({
          event: 'installWebApp',
          userChoice: choiceResult.outcome
        })
        deferredPrompt.current = null
      })
    }
  }, [])

  const context = useMemo( () => {
    if (pwaSettings) {
      const { disablePrompt, promptOnCustomEvent } = pwaSettings
      /* browsers for ios devices doesn't support install prompt */
      const isIOS = navigator && !!navigator.userAgent.match(/(iPod|iPhone|iPad)/)

      return {
        showInstallPrompt,
        settings: {
          promptOnCustomEvent: (disablePrompt || isIOS || installDismissed || alreadyInstalled) ? ''
            : promptOnCustomEvent
        }
      }
    }
  }, [showInstallPrompt, pwaSettings, alreadyInstalled])

  const hasManifest = !loading && manifest && !error

  return (
    <PWAContext.Provider value={context}>
      {hasManifest && (
        <Helmet
          meta={[
            { name: 'theme-color', content: manifest.theme_color },
            { name: 'apple-mobile-web-app-capable', content: 'yes' },
          ]}
          link={[
            {
              rel: 'manifest',
              href: `${rootPath}/pwa/manifest.json`,
            },
            ...(iOSIcons
              ? iOSIcons.map(icon => ({
                rel: 'apple-touch-icon',
                sizes: icon.sizes,
                href: `${rootPath}${icon.src}`,
              }))
              : []),
            ...(splashes
              ? splashes.map(splash => ({
                href: `${rootPath}${splash.src}`,
                sizes: splash.sizes,
                rel: 'apple-touch-startup-image',
              }))
              : []),
          ].filter(Boolean)}
        />
      )}
      {children}
    </PWAContext.Provider>
  )
}

const usePWA = () => {
  return useContext(PWAContext)
}

export default { PWAContext, PWAProvider, usePWA }

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StoreResources/Queries.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { loader } from 'graphql.macro'

const orderForm = loader('./queries/orderForm.gql')
const product = loader('./queries/product.gql')
const productPreviewFragment = loader('./queries/productPreview.gql')
const recommendationsAndBenefits = loader('./queries/recommendationsAndBenefits.gql')
const search = loader('./queries/search.gql')
const productSearch = loader('./queries/productSearch.gql')
const productSearchV2 = loader('./queries/productSearchV2.gql')
const session = loader('./queries/session.gql')
const productBenefits = loader('./queries/productBenefits.gql')
const address = loader('./queries/address.gql')
const searchMetadata = loader('./queries/searchMetadata.gql')
const productCategoryTree = loader('./queries/UNSTABLE__productCategoryTree.gql')
const facets = loader('./queries/facets.gql')

export default {
  address,
  orderForm,
  product,
  productSearch,
  productSearchV2,
  productPreviewFragment,
  recommendationsAndBenefits,
  search,
  session,
  productBenefits,
  UNSTABLE__productCategoryTree: productCategoryTree,
  searchMetadata,
  facets,
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FormatCurrency/typings/storefront.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FormatCurrency/typings/vtex.render-runtime.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  interface RuntimeContext {
    culture: {
      currency: string
      customCurrencyDecimalDigits?: number | null
      customCurrencySymbol?: string | null
    }
  }

  export const useRuntime = () => RuntimeContext
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FormatCurrency/typings/graphql.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/FormatCurrency/typings/vtex.styleguide.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/FormatCurrency/__tests__/FormattedCurrency.test.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import FormattedCurrency from '../FormattedCurrency'
import { useRuntime, RuntimeContext } from '../../../../../vtex.render-runtime'

const mockedUseRuntime = useRuntime as jest.Mock<RuntimeContext>

test('Use currencyCode as default format', () => {
  mockedUseRuntime.mockImplementation(() => ({
    culture: {
      currency: 'USD',
      customCurrencyDecimalDigits: null,
      customCurrencySymbol: null,
    },
  }))

  const { getByText, rerender } = render(<FormattedCurrency value={10} />)

  getByText('$10.00')

  mockedUseRuntime.mockImplementation(() => ({
    culture: {
      currency: 'BRL',
      customCurrencyDecimalDigits: null,
      customCurrencySymbol: null,
    },
  }))

  rerender(<FormattedCurrency value={10} />)

  getByText('R$10.00')
})

test('should use custom decimal digits', () => {
  mockedUseRuntime.mockImplementation(() => ({
    culture: {
      currency: 'BRL',
      customCurrencyDecimalDigits: 0,
      customCurrencySymbol: null,
    },
  }))

  const { getByText } = render(<FormattedCurrency value={10} />)

  getByText('R$10')
})

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StackLayout/typings/vtex.css-handles.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.css-handles' {
  type CssHandlesInput = readonly string[]
  type ValueOf<T extends readonly any[]> = T[number]
  type CssHandles<T extends CssHandlesInput> = Record<ValueOf<T>, string>
  interface CssHandlesOptions {
    migrationFrom?: string | string[]
  }

  export const useCssHandles: <T extends CssHandlesInput>(
    handles: T,
    options: CssHandlesOptions = {}
  ) => CssHandles<T>
  export const applyModifiers: (
    handles: string,
    modifier: string | string[]
  ) => string
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StackLayout/typings/global.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'
import { TachyonsScaleInput } from '../hooks/tachyons'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    schema?: object
    getSchema?(props?: P): object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    schema?: object
    getSchema?(props: P): object
  }

  interface StorefrontElement extends ReactElement {
    schema?: object
    getSchema?(props: P): object
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Drawer/modules/getPointerPosition.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
function isMouseEvent(event: TouchEvent | MouseEvent): event is MouseEvent {
  return !!(event as MouseEvent).clientX
}

function isTouchEvent(event: TouchEvent | MouseEvent): event is TouchEvent {
  const touches = (event as TouchEvent).touches
  if (!touches) return false
  return touches.length > 0
}

export default function getPointerPosition(event: TouchEvent | MouseEvent) {
  if (isMouseEvent(event)) {
    return {
      x: event.clientX,
      y: event.clientY,
      source: 'mouse',
      timeStamp: event.timeStamp,
    }
  }

  if (!isTouchEvent(event)) {
    return null
  }

  const touch = event.touches[0]

  return {
    x: touch.clientX,
    y: touch.clientY,
    source: 'touch',
    timeStamp: event.timeStamp,
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Drawer/modules/animation.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import parseMeasure from './parseMeasure'

const animations = []

const createAnimation = ({ object, prop, stop, isStopped }) => ({
  object,
  prop,
  stop,
  isStopped,
})

const stopConflictingAnimations = animation =>
  animations.filter(cur => {
    const isConflicting =
      cur.object === animation.object && cur.prop === animation.prop
    if (isConflicting) {
      cur.stop()
    }
    return !cur.isStopped()
  })

function animate({
  object,
  prop,
  target,
  duration,
  speed,
  acceleration,
  maxSpeed,
  onUpdate = null,
  onComplete = null,
}) {
  const targetFps = 60
  const frameDuration = 1000 / targetFps

  const [targetValue, targetUnit, isTargetUnitless] = parseMeasure(target)
  const [originValue, originUnit] = parseMeasure(object[prop])
  const unit = isTargetUnitless ? originUnit : targetUnit
  const delta = targetValue - originValue

  const ease = v => v * (2 - v)
  const maxTimeMultiplier = 2

  let stopped = false

  const stop = () => {
    stopped = true
  }
  const isStopped = () => {
    return stopped
  }

  let current = duration ? 0 : originValue
  let last = null

  const update = now => {
    if (stopped) return
    let timeMultiplier = 1
    if (last != null) {
      const deltaTime = now - last
      timeMultiplier = deltaTime / frameDuration
      if (timeMultiplier > maxTimeMultiplier) timeMultiplier = maxTimeMultiplier
    }
    last = now

    if (duration) {
      const step = frameDuration / (duration * 1000)
      current += step * timeMultiplier
      if (current >= 1) {
        current = 1
        if (onComplete != null) {
          onComplete()
        }
        stop()
      }

      const value = `${originValue + ease(current) * delta}${unit}`

      object[prop] = value

      if (onUpdate != null) {
        onUpdate(value)
      }
    } else if (speed) {
      current += speed / (targetFps * timeMultiplier)

      if (acceleration) {
        speed *= acceleration
      }

      if (maxSpeed && speed > maxSpeed) {
        speed = maxSpeed
      }

      if (
        (speed > 0 && current >= targetValue) ||
        (speed < 0 && current <= targetValue)
      ) {
        current = targetValue
        if (onComplete != null) {
          onComplete()
        }
        stop()
      }
      const formattedValue = `${current}${unit}`
      object[prop] = formattedValue

      if (onUpdate != null) {
        onUpdate(formattedValue)
      }
    }

    requestAnimationFrame(update)
  }
  update()

  const animation = createAnimation({ object, prop, stop, isStopped })
  stopConflictingAnimations(animation)

  animations.push(animation)

  return stop
}

export { animate }

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Drawer/modules/parseMeasure.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
type Measure = number | string

type Value = number
type Unit = string
type IsUnitless = boolean

type ParsedMeasure = [Value, Unit, IsUnitless]

function parseMeasure(value: Measure): ParsedMeasure | null {
  if (typeof value === 'number') {
    return [value, 'px', true]
  }
  const matchResult = value.match(/([-\d]*)([^0-9\n]+)/)
  if (!matchResult) {
    return null
  }
  const parsedValue = matchResult[1]
  const parsedUnit = matchResult[2]

  return [parseInt(parsedValue), parsedUnit, false]
}

export default parseMeasure

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Drawer/modules/useLockScroll.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useRef, useState, useEffect } from 'react'
import styles from '../styles.css'

// https://stackoverflow.com/a/3464890/5313009
const getScrollPosition = () => {
  const documentElement =
    window && window.document && window.document.documentElement
  if (!documentElement) {
    return 0
  }
  return (
    (window.pageYOffset || documentElement.scrollTop) -
    (documentElement.clientTop || 0)
  )
}

const propertiesNames = ['top', 'width'] as const

interface PropertyStyle {
  name: keyof CSSStyleDeclaration
  value: string
}

const useLockScroll = () => {
  const initialized = useRef(false)
  const [isLocked, setLocked] = useState(false)
  type ScrollPosition = number | null
  const [lockedScrollPosition, setLockedScrollPosition] = useState<
    ScrollPosition
  >(null)

  useEffect(() => {
    if (!initialized.current && !isLocked) {
      // Prevent this from running at first, if it's not locked.
      // Important because this triggers re-layout, thus slowing
      // down the rendering unnecessarily.
      initialized.current = true
      return
    }
    /** Locks scroll of the root HTML element if the
     * drawer menu is open
     */
    const shouldLockScroll = isLocked

    if (window && window.document) {
      const bodyBounds = document.body.getBoundingClientRect()

      /** iOS doesn't lock the scroll of the body by just setting overflow to hidden.
       * It requires setting the position of the HTML element to fixed, which also
       * resets the scroll position.
       * This code is intended to record the scroll position and set it as
       * the element's position, and revert it once the menu is closed.
       */
      const scrollPosition =
        lockedScrollPosition == null
          ? getScrollPosition()
          : lockedScrollPosition

      if (lockedScrollPosition == null && shouldLockScroll) {
        setLockedScrollPosition(scrollPosition)
      }

      if (lockedScrollPosition != null && !shouldLockScroll) {
        window && window.scrollTo(0, scrollPosition)
        setLockedScrollPosition(null)
      }

      const properties: PropertyStyle[] = [
        {
          name: 'top',
          value: `-${scrollPosition}px`,
        },
        {
          name: 'width',
          value: `${bodyBounds.width}px`,
        },
      ]

      if (shouldLockScroll) {
        properties.forEach(prop => {
          window.document.body.style[prop.name as any] = prop.value
        })

        window.document.body.classList.add(styles.hiddenBody)
      } else {
        properties.forEach(prop => {
          window.document.body.style.removeProperty(prop.name as any)
        })
        window.document.body.classList.remove(styles.hiddenBody)
      }
    }

    return () => {
      propertiesNames.forEach(prop => {
        window.document.body.style.removeProperty(prop)
      })
      window.document.body.classList.remove(styles.hiddenBody)
    }
  }, [isLocked]) // eslint-disable-line react-hooks/exhaustive-deps
  // ☝ no need to trigger this on lockedScrollPosition changes

  return setLocked
}

export default useLockScroll

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/typings/vtex.store-components.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.store-components' {
  import { ComponentType, ReactElement } from 'react'

  declare const Container: ComponentType<ContainerProps>

  interface ContainerProps {
    className: string
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/typings/vtex.render-runtime.d.ts from the store-on-localhost 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: Record<string, any>
  }

  interface Pages {
    [name: string]: Page
  }

  interface Route {
    domain: string
    blockId: string
    canonicalPath?: string
    id: string
    params: Record<string, string>
    path: string
    title?: string
  }

  interface Culture {
    availableLocales: string[]
    locale: string
    language: string
    country: string
    currency: string
  }

  export interface RenderRuntime {
    account: string
    accountId: string
    appsEtag: string
    workspace: string
    disableSSR: boolean
    hints: {
      desktop: boolean
      mobile: boolean
      phone: boolean
      tablet: boolean
    }
    page: string
    route: Route
    version: string
    culture: Culture
    pages: Pages
    preview: boolean
    production: boolean
    publicEndpoint: string
    renderMajor: number
    query?: Record<string, string>
    start: boolean
    runtimeMeta: {
      version: string
      config?: any
    }
    settings: {
      app: Record<string, any>
    }
    segmentToken: string
    rootPath?: string
    workspaceCookie: string
    hasNewExtensions: boolean
    platform: string
  }

  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 useRuntime: () => RenderRuntime
  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 store-on-localhost/src/monobloco/components/new/Footer/typings/vtex.native-types.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.native-types' {
  import { ComponentType } from 'react'
  import { InjectedIntl } from 'react-intl'

  export const IOMessage: ComponentType<{ id: string }>

  interface Options {
    intl: InjectedIntl
    id: string
  }

  export const formatIOMessage: (options: Options) => string
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/typings/global.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent, ReactElement } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }

  interface StorefrontElement extends ReactElement {
    getSchema?(props: P): object
    schema: object
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/typings/css.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/Footer/typings/graphql.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/Footer/legacy/Footer.test.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { render } from '@vtex/test-tools/react'

import Footer from './Footer'

describe('<Footer /> component', () => {
  const renderComponent = customProps => {
    const props = {
      socialNetworks: [
        {
          url: 'https://www.facebook.com/',
          socialNetwork: 'Facebook',
        },
      ],
      sectionLinks: [
        {
          title: 'Section title',
          links: [{ url: 'mockedUrl', title: 'Some title' }],
        },
      ],
      badges: [{ image: 'imageURL' }],
      paymentForms: [
        {
          title: 'Title payment',
          paymentTypes: ['MasterCard', 'Visa', 'Diners Club'],
        },
      ],
      showPaymentFormsInColor: true,
      showSocialNetworksInColor: true,
      showVtexLogoInColor: true,
      logo: 'logoUrl',
      ...customProps,
    }

    return render(<Footer {...props} />)
  }

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

  it('should match the snapshot', () => {
    const { asFragment } = renderComponent()
    expect(asFragment()).toMatchSnapshot()
  })

  it('should contain the section links', () => {
    const sectionLinks = [
      {
        title: 'We have one section title',
        links: [
          { url: 'someUrl', title: 'someTitle' },
          { url: 'anotherUrl', title: 'anotherTitle' },
        ],
      },
      {
        title: 'We have two section titles',
        links: [{ url: 'yetAnotherUrl', title: 'yetAnotherUrl' }],
      },
    ]

    const { getByText } = renderComponent({ sectionLinks })

    sectionLinks.forEach(({ title, links }) => {
      expect(getByText(title)).toBeTruthy()

      links.forEach(({ title }) => {
        expect(getByText(title)).toBeTruthy()
      })
    })
  })

  it('should contain the payment forms', () => {
    const paymentForms = [
      {
        title: 'Credit',
        paymentTypes: ['MasterCard', 'Visa', 'Diners Club'],
      },
      {
        title: 'Debit',
        paymentTypes: ['MasterCard', 'Visa'],
      },
    ]

    const { getByText } = renderComponent({ paymentForms })

    paymentForms.forEach(({ title }) => {
      expect(getByText(title)).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 store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterVtexLogo.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { withRuntimeContext } from '../../../../../vtex.render-runtime'
import { PLATFORM_GOCOMMERCE } from '../modules/platformCode'
import withImage from '../components/withImage'
import footer from './footer.css'

/**
 * "Powered By Vtex" image's component, used in Footer
 */
const FooterVtexLogo = ({ runtime, logoUrl, imageSrc }) => {
  if (!imageSrc) {
    return null
  }

  const isPlatformGCResult = runtime.platform === PLATFORM_GOCOMMERCE
  const vtexLogoItemClasses = classNames(footer.vtexLogoItem, {
    w4: isPlatformGCResult,
    'h3 w3': !isPlatformGCResult,
  })

  return (
    <div
      className={`${footer.badgeList} flex flex-row justify-center pv4-s pa0-ns items-center ml-auto-m`}
    >
      {logoUrl && (
        <span className={`${footer.badge} pa2-s pa1-ns`}>
          <img
            className={`${footer.logoImage} h3`}
            alt={runtime.platform}
            src={logoUrl}
          />
        </span>
      )}
      <span className={`${footer.badge} pa2-s pa1-ns nt7-ns`}>
        <img
          className={vtexLogoItemClasses}
          alt={runtime.platform}
          src={imageSrc}
        />
      </span>
    </div>
  )
}

FooterVtexLogo.displayName = 'FooterVtexLogo'

FooterVtexLogo.propTypes = {
  /** Get the account name to find the correct platfom */
  runtime: PropTypes.shape({
    account: PropTypes.string.isRequired,
    platform: PropTypes.string.isRequired,
  }).isRequired,
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor: PropTypes.bool,
  /** The source for an external customizable logo to show above "Powered By Vtex" */
  logoUrl: PropTypes.string,
  imageSrc: PropTypes.string,
}

const getImagePathFromProps = ({ runtime, showInColor }) =>
  `${runtime.platform}${showInColor ? '' : '-bw'}.svg`

export default withRuntimeContext(
  withImage(getImagePathFromProps)(FooterVtexLogo)
)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterPaymentFormMatrix.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import FooterPaymentFormList from './FooterPaymentFormList'

import footer from './footer.css'

export default class FooterPaymentFormMatrix extends Component {
  static propTypes = {
    /** Payment forms array */
    paymentForms: PropTypes.arrayOf(
      PropTypes.shape({
        /** Payment form title */
        title: PropTypes.string,
        /** Payment types */
        paymentTypes: PropTypes.arrayOf(PropTypes.string.isRequired),
      })
    ),
    /** Determines if the icons are colorful */
    showPaymentFormsInColor: PropTypes.bool,
  }

  render() {
    const { paymentForms, ...otherProps } = this.props

    return (
      paymentForms && (
        <div className={`${footer.paymentMatrix} flex flex-wrap`}>
          {paymentForms.map((paymentFormsItem, index) => (
            <div
              key={`payment-container-${index}`}
              className={footer.paymentMatrixItem}
            >
              <FooterPaymentFormList
                horizontal
                titleId={paymentFormsItem.title}
                list={paymentFormsItem.paymentTypes.map(paymentType => ({
                  paymentType,
                }))}
                {...otherProps}
              />
            </div>
          ))}
        </div>
      )
    )
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterLinkList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { injectIntl, intlShape } from 'react-intl'
import formatIOMessage from '../../NativeTypes/formatIOMessage'

import footerList from './footerList'
import footer from './footer.css'

const FooterLinkItem = ({ url, title, target, intl }) =>
  title ? (
    <a
      className={`${
        footer.listLink
      } dib no-underline underline-hover mb0 mt2 w-100 t-small truncate c-muted-1 pointer`}
      href={formatIOMessage({ id: url, intl })}
      target={target ? target : '_self'}
    >
      <IOMessage id={title} />
    </a>
  ) : null

FooterLinkItem.displayName = 'FooterLinkItem'

FooterLinkItem.propTypes = {
  url: PropTypes.string,
  title: PropTypes.string,
  target: PropTypes.oneOf(['_self', '_blank']),
  intl: intlShape,
}

const FooterLinkItemWithIntl = injectIntl(FooterLinkItem)

export { FooterLinkItemWithIntl as FooterLinkItem }

export default footerList(FooterLinkItemWithIntl)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterPaymentFormList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

import footerList from './footerList'
import withImage from '../components/withImage'
import footer from './footer.css'

/**
 * Shows an image for the payments forms accepted
 */
const FooterPaymentFormItem = ({ imageSrc }) => {
  if (!imageSrc) {
    return null
  }

  return (
    <img className={`${footer.paymentFormItem} pr0 w2 h2`} src={imageSrc} />
  )
}

FooterPaymentFormItem.displayName = 'FooterPaymentFormItem'

FooterPaymentFormItem.propTypes = {
  /** Indicates which one of the payments forms should the component show its image */
  paymentType: PropTypes.string.isRequired,
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor: PropTypes.bool.isRequired,
}

const getImagePathFromProps = ({ paymentType, showInColor }) =>
  `${paymentType.toLowerCase()}${showInColor ? '' : '-bw'}.svg`

export default footerList(
  withImage(getImagePathFromProps)(FooterPaymentFormItem)
)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/propTypes.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

export const objectLikeLinkArray = PropTypes.arrayOf(
  PropTypes.shape({
    url: PropTypes.string,
    title: PropTypes.string,
    target: PropTypes.oneOf(['_self', '_blank']),
  })
)

export const objectLikeBadgeArray = PropTypes.arrayOf(
  PropTypes.shape({
    image: PropTypes.string,
  })
)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterLinksMatrix.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import Accordion from './Accordion'
import FooterLinkList, { FooterLinkItem } from './FooterLinkList'
import { objectLikeLinkArray } from './propTypes'
import footer from './footer.css'

export default class FooterLinksMatrix extends Component {
  static propTypes = {
    /** Links to be shown */
    links: PropTypes.arrayOf(
      PropTypes.shape({
        /** Link section title */
        title: PropTypes.string,
        /** Link section links */
        links: objectLikeLinkArray,
      })
    ),
  }

  render() {
    const { links } = this.props

    if (!links) {
      return null
    }

    return (
      <div className={`${footer.matrixContainer} flex flex-wrap`}>
        {links.map((linkItem, index) => (
          <Fragment key={`links-container-${index}`}>
            <div className={`${footer.matrixItem} flex flex-auto dn-s flex-ns`}>
              <FooterLinkList titleId={linkItem.title} list={linkItem.links} />
            </div>
            <div
              className={`${
                footer.matrixItemSmall
              } bb b--muted-2 dn-ns db-s w-100 ph2 pv3`}
            >
              <Accordion title={linkItem.title}>
                {linkItem.links.map(link => (
                  <div
                    key={`${link.title}-${index}`}
                    className={`${footer.accordionItem} pt1`}
                  >
                    <FooterLinkItem {...link} />
                  </div>
                ))}
              </Accordion>
            </div>
          </Fragment>
        ))}
      </div>
    )
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterSocialNetworkList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'

import footerList from './footerList'
import withImage from '../components/withImage'
import footer from './footer.css'

/**
 * Shows an image for an specific social network
 */
const FooterSocialNetworkItem = ({ imageSrc, url }) => {
  if (!imageSrc) {
    return null
  }

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener"
      className={`${footer.socialNetworkList} c-muted-1`}>
      <img className={`${footer.socialNetworkItem} w2 h2`} src={imageSrc} />
    </a>
  )
}

FooterSocialNetworkItem.displayName = 'FooterSocialNetworkItem'

FooterSocialNetworkItem.propTypes = {
  /** Social network icon source */
  imageSrc: PropTypes.string,
  /** For which link should the user be redirected if the image is clicked */
  url: PropTypes.string,
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor: PropTypes.bool.isRequired,
  /** Indicates from which social network should the image be displayed */
  socialNetwork: PropTypes.oneOf([
    'Facebook',
    'Twitter',
    'Instagram',
    'Youtube',
  ]),
}
const getImagePathFromProps = ({ socialNetwork, showInColor }) =>
  `${socialNetwork.toLowerCase()}${showInColor ? '' : '-bw'}.svg`

export default footerList(
  withImage(getImagePathFromProps)(FooterSocialNetworkItem)
)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/FooterBadgeList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

import footerList from './footerList'

const FooterBadgeItem = ({ image }) => {
  return (image && <img src={image} />) || null
}

FooterBadgeItem.displayName = 'FooterBadgeItem'

FooterBadgeItem.propTypes = {
  image: PropTypes.string,
}

export default footerList(FooterBadgeItem)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/footer.css from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```css
.footer {
  --vpadding: 1.25rem;
  --vpadding-limits: 1.5rem;
  --icon-filling: #727273;
  --tilte-min-height: 0.875rem;
}

.listTitle {
  min-height: var(--tilte-min-height);
}

.accordionIcon path {
  fill: var(--icon-filling);
}

/* Mobile */
@media screen and (min-width: 10em) {
  .container {
    flex-direction: column;
  }
}

@media screen and (min-width: 40em) {
  .container {
    flex-flow: row wrap;
  }
}

@media screen and (min-width: 64em) {
  .container {
    padding-top: var(--vpadding);
    padding-bottom: var(--vpadding);
  }

  .container:first-of-type {
    padding-top: var(--vpadding-limits);
  }

  .container:last-of-type {
    padding-bottom: var(--vpadding-limits);
  }
}

.accordion {}

.accordionTitle {}

.listLink {}

.matrixContainer {}

.matrixItem {}

.matrixItemSmall {}

.accordionItem {}

.listContainer {}

.listContainerRightAligned {}

.listContainerHorizontal {}

.list {}

.listHorizontal {}

.listItem {}

.listItemHorizontal {}

.paymentFormItem {}

.paymentMatrix {}

.paymentMatrixItem {}

.socialNetworkItem {}

.vtexLogoItem {}

.badgeList {}

.badge {}

.logoImage {}

.textInformation {}

.links {}

.socialNetworkContainer {}

.textContainer {}

.socialNetworkList {}

.navigation {}

.payment {}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/Footer.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classNames from 'classnames'
import Container from '../../StoreComponents/Container'
import IOMessage from '../../NativeTypes/IOMessage'

import FooterBadgeList from './FooterBadgeList'
import FooterLinksMatrix from './FooterLinksMatrix'
import FooterPaymentFormMatrix from './FooterPaymentFormMatrix'
import FooterVtexLogo from './FooterVtexLogo'
import FooterSocialNetworkList from './FooterSocialNetworkList'
import { objectLikeBadgeArray, objectLikeLinkArray } from './propTypes'

import footer from './footer.css'

/**
 * Footer component that appears in the bottom of every page.
 * Can be configured by the pages editor.
 */
export default class Footer extends Component {
  static displayName = 'Footer'

  static propTypes = {
    /** Social Networks */
    socialNetworks: objectLikeLinkArray,
    /** Links Sections */
    sectionLinks: PropTypes.arrayOf(
      PropTypes.shape({
        /** Link section title */
        title: PropTypes.string,
        /** Link  section links */
        links: objectLikeLinkArray,
      })
    ),
    /** Badges */
    badges: objectLikeBadgeArray,
    /** Payment Forms */
    paymentForms: PropTypes.arrayOf(
      PropTypes.shape({
        /** Payment Form title */
        title: PropTypes.string,
        /** Payment Types */
        paymentTypes: PropTypes.arrayOf(PropTypes.string),
      })
    ),
    /** Determines if the icons are colorful */
    showPaymentFormsInColor: PropTypes.bool,
    /** Determines if the icons are colorful */
    showSocialNetworksInColor: PropTypes.bool,
    /** Determines if VTEX logo are colorful */
    showVtexLogoInColor: PropTypes.bool,
    /** Logo URL */
    logo: PropTypes.string,
    /** Store Informations */
    storeInformations: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
  }

  static defaultProps = {
    showPaymentFormsInColor: false,
    showSocialNetworksInColor: false,
    showVtexLogoInColor: false,
    socialNetworks: [
      {
        socialNetwork: 'Facebook',
        url: '#',
      },
    ],
    sectionLinks: [],
    badges: [],
    paymentForms: [
      {
        title: 'admin/editor.footer.paymentForms.paymentForm',
        paymentTypes: ['MasterCard'],
      },
    ],
    storeInformations: [],
  }

  getInformationCssClasses = (listLength, index) => {
    let paddingClass
    const defaultClasses = `${footer.textInformation} w-100 w-50-ns t-mini ma0`
    // Only apply vertical paddings if there is more than 1 element
    if (listLength > 1) {
      if (index === 0) {
        paddingClass = 'pt4-s pb4-s pr4-ns'
      } else if (index + 1 === listLength) {
        paddingClass = 'pt4-s pb4-ns pl4-ns'
      } else {
        paddingClass = 'pv4-s'
      }
    }
    return classNames(defaultClasses, paddingClass)
  }

  render() {
    const {
      showPaymentFormsInColor,
      showSocialNetworksInColor,
      showVtexLogoInColor,
      logo,
      sectionLinks,
      socialNetworks,
      paymentForms,
      badges,
      storeInformations,
    } = this.props

    return (
      <footer className={`${footer.footer} bt bw1 b--muted-4 mt4 pv5`}>
        <Container className="justify-center flex">
          <div className="w-100 mw9">
            <nav
              className={`${footer.container} ${
                footer.navigation
              } pt5-s flex justify-between bg-base c-muted-1`}>
              <div className={`${footer.links} t-small w-100-s w-80-ns pb5-s`}>
                <FooterLinksMatrix links={sectionLinks} />
              </div>
              <div className={`${footer.socialNetworkContainer} pv5-s pa1-ns`}>
                <FooterSocialNetworkList
                  titleId="store/social-networks"
                  list={socialNetworks}
                  horizontal
                  alignRight
                  titleCapitals
                  showInColor={showSocialNetworksInColor}
                />
              </div>
            </nav>
            <div
              className={`${footer.container} ${
                footer.payment
              } pv5-s flex justify-between bg-base c-muted-1`}>
              <FooterPaymentFormMatrix
                paymentForms={paymentForms}
                horizontal
                showInColor={showPaymentFormsInColor}
              />
            </div>
            <div
              className={`${footer.container} ${
                footer.informationContainer
              } pt5-s flex justify-between bg-base c-muted-1`}>
              <div
                className={`${
                  footer.textContainer
                } w-100-s pb5-s w-80-ns flex flex-wrap`}>
                {storeInformations &&
                  storeInformations.map(({ storeInformation }, index) => (
                    <p
                      key={`information-${index}`}
                      className={this.getInformationCssClasses(
                        storeInformations.length,
                        index
                      )}>
                      <IOMessage id={storeInformation} />
                    </p>
                  ))}
              </div>
              <FooterVtexLogo
                logoUrl={logo}
                showInColor={showVtexLogoInColor}
              />
              <FooterBadgeList list={badges} />
            </div>
          </div>
        </Container>
      </footer>
    )
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/footerList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { injectIntl, intlShape } from 'react-intl'

import footer from './footer.css'

const getDisplayName = Component => {
  return Component.displayName || Component.name || 'Component'
}

export default WrappedComponent => {
  class FooterList extends Component {
    static displayName = `FooterList(${getDisplayName(WrappedComponent)})`

    static propTypes = {
      titleId: PropTypes.string,
      list: PropTypes.array,
      intl: intlShape.isRequired,
      alignRight: PropTypes.bool,
      horizontal: PropTypes.bool,
      titleCapitals: PropTypes.bool,
    }

    static defaultProps = {
      alignRight: false,
      horizontal: false,
    }

    formatMessage(id) {
      return (
        (this.props.intl.messages[id] &&
          this.props.intl.formatMessage({ id })) ||
        id
      )
    }

    render() {
      const {
        list,
        titleId,
        alignRight,
        horizontal,
        titleCapitals,
        ...otherProps
      } = this.props

      if (!list || list.length === 0) return null

      const titleClasses = classNames(`${footer.listTitle} t-small ma0 db`, {
        ttu: !titleCapitals,
      })

      const listContainerClasses = classNames(
        `${footer.listContainer} pl0 w-100 mt0-ns`,
        {
          [`${footer.listContainerRightAligned} ml-auto-m`]: alignRight,
          [`${footer.listContainerHorizontal} w-auto-m`]: horizontal,
        }
      )

      const listClasses = classNames(
        `${footer.list} list flex flex-column flex-wrap pa0 mb0 mt3`,
        {
          [`${footer.listHorizontal} flex-row flex-wrap`]: horizontal,
        }
      )

      const listItemClasses = classNames(`${footer.listItem} mr0 mr3`, {
        [`${footer.listItemHorizontal}`]: horizontal,
      })

      return (
        <div className={listContainerClasses}>
          {titleId && (
            <span className={titleClasses}>{this.formatMessage(titleId)}</span>
          )}
          <ul className={listClasses}>
            {list.map((item, index) => (
              <li key={index} className={listItemClasses}>
                <WrappedComponent {...otherProps} {...item} />
              </li>
            ))}
          </ul>
        </div>
      )
    }
  }

  return injectIntl(FooterList)
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/legacy/Accordion.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Collapse } from 'react-collapse'
import { injectIntl, intlShape } from 'react-intl'

import IconCaret from '../StoreIcons/IconCaret'

import footer from './footer.css'

class Accordion extends Component {
  static propTypes = {
    /** Title shown in Accordion */
    title: PropTypes.string,
    /** Accordion children. Components shown inside Collapse */
    children: PropTypes.node.isRequired,
    /** Internationalization */
    intl: intlShape.isRequired,
  }

  state = {
    open: false,
  }

  handleClick = () => {
    this.setState(({ open }) => ({ open: !open }))
  }

  translate = id => {
    return this.props.intl.messages[id]
      ? this.props.intl.formatMessage({ id })
      : id
  }

  render() {
    const { children, title } = this.props
    const { open } = this.state

    return (
      <div className={`${footer.accordion} pv2`}>
        <div
          role="button"
          tabIndex={0}
          className="pointer"
          onKeyDown={e => {
            if (e.key === 'Enter') {
              this.handleClick()
            }
          }}
          onClick={this.handleClick}
        >
          <div>
            {title && (
              <span className={`${footer.accordionTitle} dib ma0 ttu`}>
                {this.translate(title)}
              </span>
            )}
            <span className={`${footer.accordionIcon} fr`}>
              {open ? (
                <IconCaret orientation="down" />
              ) : (
                <IconCaret orientation="right" />
              )}
            </span>
          </div>
        </div>

        <div style={{ overflowY: 'auto' }}>
          <Collapse isOpened={open}>{children}</Collapse>
        </div>
      </div>
    )
  }
}

export default injectIntl(Accordion)

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/components/PaymentMethodIcon.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { injectIntl, WrappedComponentProps } from 'react-intl'
import formatIOMessage from '../../NativeTypes/formatIOMessage'
import useCssHandles from '../../CssHandles/useCssHandles'

import withImage from './withImage'

interface PaymentMethodIconProps extends WrappedComponentProps {
  imageSrc?: string
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor?: boolean
  /** Indicates which one of the payments method should the component show its image */
  paymentMethod: PaymentMethod
}

const CSS_HANDLES = ['paymentMethodIcon', 'paymentMethodIconImage']

/**
 * Shows an image for the payments forms accepted
 */
const PaymentMethodIcon: StorefrontFunctionComponent<
  PaymentMethodIconProps
> = ({ imageSrc, paymentMethod, intl }) => {
  const handles = useCssHandles(CSS_HANDLES)

  if (!imageSrc) {
    return null
  }

  return (
    <div className={`${handles.paymentMethodIcon} w2 h2 mh2 flex items-center`}>
      <img
        className={`${handles.paymentMethodIconImage} w-100`}
        src={imageSrc}
        alt={formatIOMessage({ id: paymentMethod, intl })}
        title={formatIOMessage({ id: paymentMethod, intl })}
      />
    </div>
  )
}

export enum PaymentMethod {
  'diners club' = 'diners club',
  'mastercard' = 'mastercard',
  'visa' = 'visa',
}

const getImagePathFromProps = ({
  paymentMethod,
  showInColor,
}: PaymentMethodIconProps) =>
  `${paymentMethod.toLowerCase()}${showInColor ? '' : '-bw'}.svg`

export default withImage(getImagePathFromProps)(injectIntl(PaymentMethodIcon))

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/components/SocialNetwork.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { injectIntl, WrappedComponentProps } from 'react-intl'
import formatIOMessage from '../../NativeTypes/formatIOMessage'
import useCssHandles from '../../CssHandles/useCssHandles'
import applyModifiers from '../../CssHandles/applyModifiers'

import withImage from './withImage'

interface SocialNetworkProps extends WrappedComponentProps {
  imageSrc: string
  showInColor: boolean
  url: string
  name: string
}

const CSS_HANDLES = ['socialNetworkLink', 'socialNetworkImage'] as const

/**
 * Shows an image for an specific social network
 */
const SocialNetwork: React.FC<SocialNetworkProps> = ({
  imageSrc,
  url,
  name,
  intl,
}) => {
  const handles = useCssHandles(CSS_HANDLES)

  if (!imageSrc) {
    return null
  }

  const normalizedName = String(name).toLowerCase()

  return (
    <a
      href={formatIOMessage({ id: url, intl })}
      target="_blank"
      rel="noopener noreferrer"
      className={`${handles.socialNetworkLink} ${applyModifiers(
        handles.socialNetworkLink,
        normalizedName
      )} c-muted-1 w2 h2 mh2 flex items-center`}
    >
      <img
        className={`${handles.socialNetworkImage} ${applyModifiers(
          handles.socialNetworkImage,
          normalizedName
        )}`}
        src={imageSrc}
        alt={formatIOMessage({ id: name, intl })}
        title={formatIOMessage({ id: name, intl })}
      />
    </a>
  )
}

SocialNetwork.displayName = 'SocialNetwork'

const getImagePathFromProps = ({ name, showInColor }: SocialNetworkProps) =>
  `${name.toLowerCase()}${showInColor ? '' : '-bw'}.svg`

export default withImage(getImagePathFromProps)(injectIntl(SocialNetwork))

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/components/withImage.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

function getDisplayName(Component) {
  return Component.displayName || Component.name || 'Component'
}

/**
 * HOC used for lazily load an image in the 'images' folder right above
 * this component.
 *
 * Used for loading the logos for the Footer
 *
 * @param {Function} getImageFilename
 */
export default getImageFilename => {
  return WrappedComponent => {
    class WithImage extends Component {
      static displayName = `WithImage(${getDisplayName(WrappedComponent)})`
      static getSchema = WrappedComponent.getSchema
      static schema = WrappedComponent.schema

      state = {}

      _isMounted = false

      componentDidMount() {
        const imageName = getImageFilename(this.props)
        this._isMounted = true
        this.lazyImport(imageName)
      }

      componentWillUnmount() {
        this._isMounted = false
      }

      componentDidUpdate() {
        const imageName = getImageFilename(this.props)
        if (imageName !== this.state.imageName) {
          this.lazyImport(imageName)
        }
      }

      lazyImport = imageName => {
        return import(`../images/${imageName}`).then(imageSrc => {
          if (this._isMounted) {
            this.setState({ imageSrc: imageSrc.default, imageName })
          }
        })
      }

      render() {
        return (
          <WrappedComponent {...this.props} imageSrc={this.state.imageSrc} />
        )
      }
    }

    return WithImage
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/components/withImage.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FC, ComponentType } from 'react'

export default (mapper: (props: any) => void) => (
  component: ComponentType<any>
) => FC

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Footer/__tests__/PoweredBy.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render, waitForElement } from '@vtex/test-tools/react'

import PoweredBy from '../PoweredBy'

describe('PoweredBy', () => {
  it('should get the platform from runtime', async () => {
    const { getByAltText } = render(<PoweredBy />)

    const element = await waitForElement(() => getByAltText('VTEX'))

    const src = element.getAttribute('src')

    expect(src).toBe('vtex-bw.svg')
  })
})

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/ProductListContext/utils/parser.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { pathOr, head } from 'ramda'

import { Product } from '../ProductListContext'

import { changeImageUrlSize, toHttps } from './urlHelpers'

const defaultImage = { imageUrl: '', imageLabel: '' }
const defaultReference = { Value: '' }
const defaultSeller = { commertialOffer: { Price: 0, ListPrice: 0 } }

function findAvailableProduct(item: any) {
  return item.sellers.find(
    ({ commertialOffer = {} }: { commertialOffer: any }) =>
      commertialOffer.AvailableQuantity > 0
  )
}

export function parseToProductImpression(product: Product): Product {
  const parsedProduct = { ...product }
  const items = parsedProduct.items || []
  const sku = items.find(findAvailableProduct) || head(items)
  if (sku) {
    const [seller = defaultSeller] = pathOr([], ['sellers'], sku)
    const [referenceId = defaultReference] = pathOr([], ['referenceId'], sku)
    const [image = defaultImage] = pathOr([], ['images'], sku)

    const resizedImage = changeImageUrlSize(toHttps(image.imageUrl), 500)
    const parsedImage = { ...image, imageUrl: resizedImage }
    parsedProduct.sku = {
      ...sku,
      seller,
      referenceId,
      image: parsedImage,
    }
  }
  return parsedProduct
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/ProductListContext/utils/urlHelpers.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const DEFAULT_WIDTH = 'auto'
export const DEFAULT_HEIGHT = 'auto'
export const MAX_WIDTH = 3000
export const MAX_HEIGHT = 4000

/**
 * Having the url below as base for the LEGACY file manager,
 * https://storecomponents.vteximg.com.br/arquivos/ids/155472/Frame-3.jpg?v=636793763985400000
 * the following regex will match https://storecomponents.vteximg.com.br/arquivos/ids/155472
 *
 * Also matches urls with defined sizes like:
 * https://storecomponents.vteximg.com.br/arquivos/ids/155473-160-auto
 * @type {RegExp}
 *
 * On the new vtex.file-manager isn't necessary replace the URL, just add the param on the querystring, like:
 * "?width=WIDTH&height=HEIGHT&aspect=true"
 *
 */
const baseUrlRegex = /.+ids\/(\d+)/
const httpRegex = /http:\/\//
const legacyUrlPattern = '/arquivos/ids/'

export function toHttps(url: any) {
  return url.replace(httpRegex, 'https://')
}

export function cleanImageUrl(imageUrl: any) {
  const result = baseUrlRegex.exec(imageUrl)
  if (!result) return
  if (result.length > 0) return result[0]
  return
}

function replaceLegacyFileManagerUrl(imageUrl: any, width: any, height: any) {
  const isLegacyUrl = imageUrl.includes(legacyUrlPattern)
  if (!isLegacyUrl) return imageUrl
  return `${cleanImageUrl(imageUrl)}-${width}-${height}`
}

export function changeImageUrlSize(
  imageUrl: any,
  width: number | string = DEFAULT_WIDTH,
  height: number | string = DEFAULT_HEIGHT
) {
  if (!imageUrl) return
  if (typeof width === 'number') width = Math.min(width, MAX_WIDTH)
  if (typeof height === 'number') height = Math.min(height, MAX_HEIGHT)

  const normalizedImageUrl = replaceLegacyFileManagerUrl(
    imageUrl,
    width,
    height
  )
  const queryStringSeparator = normalizedImageUrl.includes('?') ? '&' : '?'

  return `${normalizedImageUrl}${queryStringSeparator}width=${width}&height=${height}&aspect=true`
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/CheckoutResources/fragments/address.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
fragment Address on Address {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/CheckoutResources/fragments/orderForm.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import './address.graphql'

fragment OrderFormFragment on OrderForm {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/mutations/insertCoupon.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import '../fragments/orderForm.graphql'

mutation insertCoupon($text: String) {
  insertCoupon(text: $text) @context(provider: "vtex.checkout-graphql") {
    ...OrderFormFragment
  }
}

fragment Address on Address @context(provider: "vtex.checkout-graphql") {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

fragment OrderFormFragment on OrderForm @context(provider: "vtex.checkout-graphql")  {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/mutations/selectDeliveryOption.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import '../fragments/orderForm.graphql'

mutation selectDeliveryOption($deliveryOptionId: String) {
  selectDeliveryOption(deliveryOptionId: $deliveryOptionId)
    @context(provider: "vtex.checkout-graphql") {
    ...OrderFormFragment
  }
}

fragment Address on Address @context(provider: "vtex.checkout-graphql") {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

fragment OrderFormFragment on OrderForm @context(provider: "vtex.checkout-graphql")  {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/mutations/updateItems.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import '../fragments/orderForm.graphql'

mutation updateItems($orderItems: [ItemInput]) {
  updateItems(orderItems: $orderItems) @context(provider: "vtex.checkout-graphql") {
    ...OrderFormFragment
  }
}

fragment Address on Address @context(provider: "vtex.checkout-graphql") {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

fragment OrderFormFragment on OrderForm @context(provider: "vtex.checkout-graphql")  {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/mutations/estimateShipping.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import '../fragments/orderForm.graphql'

mutation estimateShipping($addressInput: AddressInput) {
  estimateShipping(address: $addressInput)
    @context(provider: "vtex.checkout-graphql") {
    ...OrderFormFragment
  }
}

fragment Address on Address @context(provider: "vtex.checkout-graphql") {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

fragment OrderFormFragment on OrderForm @context(provider: "vtex.checkout-graphql")  {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/mutations/addToCart.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import '../fragments/orderForm.graphql'

mutation addToCart($items: [ItemInput]) {
  addToCart(items: $items) @context(provider: "vtex.checkout-graphql") {
    ...OrderFormFragment
  }
}

fragment Address on Address @context(provider: "vtex.checkout-graphql") {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

fragment OrderFormFragment on OrderForm @context(provider: "vtex.checkout-graphql")  {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/typings/graphql.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/CheckoutResources/queries/orderForm.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
# import '../fragments/orderForm.graphql'

query orderFormCheckout {
  orderForm @context(provider: "vtex.checkout-graphql") {
    ...OrderFormFragment
  }
}

fragment Address on Address @context(provider: "vtex.checkout-graphql") {
  addressId
  addressType
  city
  complement
  country
  neighborhood
  number
  postalCode
  receiverName
  reference
  state
  street
}

fragment OrderFormFragment on OrderForm @context(provider: "vtex.checkout-graphql")  {
  id
  items {
    additionalInfo {
      brandName
    }
    parentAssemblyBinding
    sellingPriceWithAssemblies
    options {
      assemblyId
      id
      quantity
      seller
      inputValues
      options {
        assemblyId
        id
        quantity
        seller
        inputValues
        options {
          assemblyId
          id
          quantity
          seller
          inputValues
        }
      }
    }
    availability
    detailUrl
    id
    imageUrls {
      at1x
      at2x
      at3x
    }
    listPrice
    measurementUnit
    name
    price
    productCategories
    productCategoryIds
    productRefId
    productId
    quantity
    sellingPrice
    skuName
    skuSpecifications {
      fieldName
      fieldValues
    }
    uniqueId
  }
  canEditData
  marketingData {
    coupon
  }
  totalizers {
    id
    name
    value
  }
  shipping {
    countries
    availableAddresses {
      ...Address
    }
    selectedAddress {
      ...Address
    }
    deliveryOptions {
      id
      price
      estimate
      isSelected
    }
  }
  messages {
    couponMessages {
      code
    }
    generalMessages {
      code
      text
      status
    }
  }
  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 store-on-localhost/src/monobloco/components/new/CheckoutResources/utils/useCheckoutURL.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useQuery } from 'react-apollo'
import { loader } from 'graphql.macro'

const installedApp = loader('./graphql/installedApp.graphql')

const CHECKOUT_URL = {
  V0: '/checkout/#/cart',
  V1: '/cart',
}

export const useCheckoutURL = () => {
  const { data } = useQuery(installedApp, {
    ssr: false,
    variables: {
      slug: 'vtex.checkout',
    },
  })

  const version = data?.installedApp?.version
  const major = version && parseInt(version.split('.')[0])

  return {
    url: major > 0 ? CHECKOUT_URL.V1 : CHECKOUT_URL.V0,
    major,
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/CheckoutResources/utils/__tests__/useCheckoutURL.test.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { flushPromises, render } from '@vtex/test-tools/react'
import { MockedProvider } from '@apollo/react-testing'

import installedApp from '../graphql/installedApp.graphql'
import { useCheckoutURL } from '../useCheckoutURL'

describe('useCheckoutURL', () => {
  it('should return the correct URL when checkout major is 0', async () => {
    jest.useFakeTimers()

    const Component: FC = () => {
      const { url } = useCheckoutURL()
      return <div>{url}</div>
    }

    const mockInstalledApp = {
      request: {
        query: installedApp,
        variables: {
          slug: 'vtex.checkout',
        },
      },
      result: {
        data: {
          installedApp: {
            version: '0.4.2',
          },
        },
      },
    }

    const { getByText } = render(<Component />, {
      graphql: { mocks: [mockInstalledApp] },
      MockedProvider,
    })

    await flushPromises()
    jest.runAllTimers()

    expect(getByText('/checkout/#/cart')).toBeTruthy()
  })

  it('should return the correct URL when checkout major is 1', async () => {
    jest.useFakeTimers()

    const Component = () => {
      const { url } = useCheckoutURL()
      return <div>{url}</div>
    }

    const mockInstalledApp = {
      request: {
        query: installedApp,
        variables: {
          slug: 'vtex.checkout',
        },
      },
      result: {
        data: {
          installedApp: {
            version: '1.4.2',
          },
        },
      },
    }

    const { getByText } = render(<Component />, {
      graphql: { mocks: [mockInstalledApp] },
      MockedProvider,
    })

    await flushPromises()
    jest.runAllTimers()

    expect(getByText('/cart')).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 store-on-localhost/src/monobloco/components/new/CheckoutResources/utils/graphql/installedApp.graphql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
query installedApp($slug: String!) {
  installedApp(slug: $slug) {
    version
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/LocaleSwitcher/typings/storefront.d.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent, ReactElement } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/LocaleSwitcher/typings/vtex.render-runtime.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/LocaleSwitcher/typings/css.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/LocaleSwitcher/typings/graphql.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/LocaleSwitcher/typings/vtex.styleguide.d.ts from the store-on-localhost 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 store-on-localhost/src/monobloco/components/new/LocaleSwitcher/queries/locales.gql from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Locales {
  languages @context(provider: "vtex.messages") {
    default
    supported
  }
   currentBinding  @context(provider: "vtex.tenant-graphql") {
    supportedLocales
  }
}
```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/ProductSummary/legacy/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable react/jsx-handler-names */
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ProductName from '../../StoreComponents/ProductName'
import ProductPrice from '../../StoreComponents/ProductPrice'

import ProductSummaryNormal from './components/ProductSummaryNormal'
import ProductSummarySmall from './components/ProductSummarySmall'
import ProductSummaryInline from './components/ProductSummaryInline'
import ProductSummaryInlinePrice from './components/ProductSummaryInlinePrice'
import displayButtonTypes, {
  getDisplayButtonNames,
  getDisplayButtonValues,
} from '../utils/displayButtonTypes'
import { productShape } from '../utils/propTypes'

const DISPLAY_MODE_MAP = {
  normal: ProductSummaryNormal,
  small: ProductSummarySmall,
  inline: ProductSummaryInline,
  inlinePrice: ProductSummaryInlinePrice,
}

/**
 * Product Summary component. Summarizes the product information.
 */
class ProductSummary extends Component {
  static propTypes = {
    /** Product that owns the informations */
    product: productShape,
    /** Shows the product list price */
    showListPrice: PropTypes.bool,
    /** Should redirect to checkout after clicking on buy */
    isOneClickBuy: PropTypes.bool,
    /** Set pricing labels' visibility */
    showLabels: PropTypes.bool,
    /** Set installments' visibility */
    showInstallments: PropTypes.bool,
    /** Set the borders product's visibility */
    showBorders: PropTypes.bool,
    /** Set the discount badge's visibility */
    showBadge: PropTypes.bool,
    /** Set the product description visibility */
    showDescription: PropTypes.bool,
    /** Set the quantity selector visibility */
    showQuantitySelector: PropTypes.bool,
    /** Text of selling Price's label */
    labelSellingPrice: PropTypes.string,
    /** Text of list Price's label */
    labelListPrice: PropTypes.string,
    /** Text shown on badge */
    badgeText: PropTypes.string,
    /** Custom buy button text */
    buyButtonText: PropTypes.string,
    /** Defines the display mode of buy button */
    displayBuyButton: PropTypes.oneOf(getDisplayButtonValues()),
    /** Hides the buy button completely . If active, the button will not be shown in any condition */
    hideBuyButton: PropTypes.bool,
    /** Defines if the collection badges are shown */
    showCollections: PropTypes.bool,
    /** Name schema props */
    nameSchema: PropTypes.object,
    /** Display mode of the summary used in the search result */
    displayMode: PropTypes.oneOf(['normal', 'small', 'inline', 'inlinePrice']),
    /** Function that is executed when a product is clicked */
    actionOnClick: PropTypes.func,
    /** Set the price align to left */
    priceAlignLeft: PropTypes.bool,
    muted: PropTypes.bool,
    index: PropTypes.number,
  }

  static defaultProps = {
    showListPrice: true,
    showInstallments: true,
    showLabels: true,
    showBadge: true,
    showQuantitySelector: true,
    showCollections: false,
    showDescription: false,
    displayBuyButton: displayButtonTypes.DISPLAY_ALWAYS.value,
    isOneClickBuy: false,
    nameSchema: {
      showProductReference: false,
      showBrandName: false,
      showSku: false,
    },
    displayMode: 'normal',
    showBorders: false,
    muted: false,
  }

  state = {
    isHovering: false,
    isUpdatingItems: false,
  }

  handleMouseLeave = () => {
    this.setState({ isHovering: false })
  }

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

  handleItemsStateUpdate = isLoading =>
    this.setState({ isUpdatingItems: isLoading })

  render() {
    const {
      product,
      actionOnClick,
      displayMode,
      displayBuyButton,
      isOneClickBuy,
      buyButtonText,
      showBorders,
      showDescription,
      showBadge,
      badgeText,
      showCollections,
      showListPrice,
      showLabels,
      showInstallments,
      labelSellingPrice,
      labelListPrice,
      nameSchema: showFieldsProps,
      showQuantitySelector,
      priceAlignLeft,
      muted,
      index,
    } = this.props

    const imageProps = {
      product,
      showBadge,
      badgeText,
      showCollections,
      displayMode,
    }
    const nameProps = { product, showFieldsProps }

    const priceProps = {
      product,
      showListPrice,
      showLabels,
      showInstallments,
      labelSellingPrice,
      labelListPrice,
      isLoading: this.state.isUpdatingItems,
    }

    const buyButtonProps = {
      product,
      displayBuyButton,
      isOneClickBuy,
      buyButtonText,
      isHovering: this.state.isHovering,
    }

    const ProductSummaryComponent =
      DISPLAY_MODE_MAP[displayMode] || ProductSummaryNormal

    return (
      <ProductSummaryComponent
        product={product}
        showBorders={showBorders}
        showDescription={showDescription}
        handleMouseEnter={this.handleMouseEnter}
        handleMouseLeave={this.handleMouseLeave}
        handleItemsStateUpdate={this.handleItemsStateUpdate}
        actionOnClick={actionOnClick}
        imageProps={imageProps}
        nameProps={nameProps}
        priceProps={priceProps}
        buyButtonProps={buyButtonProps}
        showQuantitySelector={showQuantitySelector}
        priceAlignLeft={priceAlignLeft}
        muted={muted}
        index={index}
      />
    )
  }
}

const defaultSchema = {
  title: 'admin/editor.productSummary.title',
  description: 'admin/editor.productSummary.description',
  type: 'object',
  properties: {
    isOneClickBuy: {
      type: 'boolean',
      title: 'admin/editor.productSummary.isOneClickBuy.title',
      default: false,
      isLayout: true,
    },
    showBadge: {
      type: 'boolean',
      title: 'admin/editor.productSummary.showBadge.title',
      default: true,
      isLayout: true,
    },
    displayBuyButton: {
      title: 'admin/editor.productSummary.displayBuyButton.title',
      type: 'string',
      enum: getDisplayButtonValues(),
      enumNames: getDisplayButtonNames(),
      default: displayButtonTypes.DISPLAY_ALWAYS.value,
      isLayout: true,
    },
    showCollections: {
      type: 'boolean',
      title: 'admin/editor.productSummary.showCollections.title',
      default: false,
      isLayout: true,
    },

    ...ProductPrice.schema.properties,
  },
}

ProductSummary.getSchema = () => {
  const nameSchema = ProductName.schema
  return {
    ...defaultSchema,
    properties: {
      ...defaultSchema.properties,
      nameSchema,
    },
  }
}

export default ProductSummary

```