[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 order-placed/react/typings/json.d.ts from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.json' {
  const value: any
  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 order-placed/react/typings/graphql.d.ts from the order-placed 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 order-placed/react/typings/vtex.store-resources.d.ts from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.store-resources/PWAContext' {
  export const 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 order-placed/react/typings/vtex.styleguide.d.ts from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Alert
  export const Button
  export const ButtonWithIcon
  export const IconCaretDown
  export const IconCaretUp
  export const IconInfo
  export const PageBlock
  export const Tooltip
}

```


[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 order-placed/react/utils/testUtils.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactElement } from 'react'
import { render, queryByText } from '@vtex/test-tools/react'
import { IntlProvider } from 'react-intl'

import * as defaultStrings from '../../messages/en.json'
import { OrderGroupContext } from '../components/OrderGroupContext'
import { OrderContext } from '../components/OrderContext'
import { CurrencyContext } from '../components/CurrencyContext'

const doesNodeMatchesText = (node: HTMLElement, regexp: RegExp) =>
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  !!node.textContent!.match(regexp)

export const queryByTextWithMarkup = (container: HTMLElement, regexp: RegExp) =>
  queryByText(container, (_: string, node: HTMLElement) => {
    const childrenDontHaveText = Array.from(node.children).every(
      (child) => !doesNodeMatchesText(child as HTMLElement, regexp)
    )
    return doesNodeMatchesText(node, regexp) && childrenDontHaveText
  })

export const renderWithIntl = (component: ReactElement, options?: any) => {
  return render(
    <IntlProvider locale="en-US" messages={defaultStrings}>
      {component}
    </IntlProvider>,
    options
  )
}

export const renderWithOrderGroup = (
  orderGroup: OrderGroup,
  component: ReactElement,
  options?: any
) => {
  return renderWithIntl(
    <CurrencyContext.Provider value="BRL">
      <OrderGroupContext.Provider value={orderGroup}>
        {component}
      </OrderGroupContext.Provider>
    </CurrencyContext.Provider>,
    options
  )
}

export const renderWithOrder = (
  orderGroup: OrderGroup,
  component: ReactElement,
  options?: any
) => {
  return renderWithOrderGroup(
    orderGroup,
    <OrderContext.Provider value={orderGroup.orders[0]}>
      {component}
    </OrderContext.Provider>,
    options
  )
}

```


[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 order-placed/react/utils/index.ts from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```typescript
import get from 'lodash/get'
import flow from 'lodash/flow'
import toPairs from 'lodash/toPairs'
import filter from 'lodash/filter'
import map from 'lodash/map'
import { defineMessages } from 'react-intl'

export interface PaymentGroupInfo {
  barCodeNumber: string | null
  barCodePNG: string | null
  dueDate: string | null
  paymentGroup: string
  paymentSystemName: string
  url: string | null
  value: number
}

const messages = defineMessages({
  frequencyDay: {
    id: 'store/items.attachments.subscription.frequency.day',
    defaultMessage: '',
  },
  frequencyMonth: {
    id: 'store/items.attachments.subscription.frequency.month',
    defaultMessage: '',
  },
  frequencyWeek: {
    id: 'store/items.attachments.subscription.frequency.week',
    defaultMessage: '',
  },
  frequencyYear: {
    id: 'store/items.attachments.subscription.frequency.year',
    defaultMessage: '',
  },
  purchaseDay: {
    id: 'store/items.attachments.subscription.purchaseday',
    defaultMessage: '',
  },
})

function hasValueAndIsNotPrivate(connectorResponses: ConnectorResponses) {
  return filter(
    connectorResponses,
    (c) => c[0] && c[1] && c[0].charAt(0) !== '_'
  )
}

function toKeyValue(connectorResponses: ConnectorResponses) {
  return map(connectorResponses, (c) => ({ key: c[0], value: c[1] }))
}

export function transformConnectorResponsesToArray(
  connectorResponses: ConnectorResponses
): ConnectorResponse[] {
  return flow([toPairs, hasValueAndIsNotPrivate, toKeyValue])(
    connectorResponses
  )
}

export function getPaymentMethodsInfoFromOrder(
  order: Order
): PaymentGroupInfo[] {
  const { transactions } = order.paymentData

  if (!transactions || transactions.length === 0) {
    return []
  }
  // eslint-disable-next-line prefer-destructuring
  const { payments } = transactions[0]

  if (!payments || payments.length === 0) {
    return []
  }

  const paymentsGroupInfo = payments.map(
    ({
      bankIssuedInvoiceBarCodePNG,
      dueDate,
      group,
      paymentSystemName,
      url,
      value,
      bankIssuedInvoiceIdentificationNumber,
    }) =>
      ({
        barCodeNumber: bankIssuedInvoiceIdentificationNumber,
        barCodePNG: bankIssuedInvoiceBarCodePNG,
        paymentGroup: group,
        dueDate,
        paymentSystemName,
        url,
        value,
      } as PaymentGroupInfo)
  )

  return paymentsGroupInfo
}

export function isSubscription(attachmentItem: Attachment) {
  return attachmentItem.name.indexOf('vtex.subscription') === 0
}

export function getSubscriptionInfo(attachmentItem: Attachment, intl: any) {
  if (!isSubscription(attachmentItem)) {
    return {}
  }
  const vtexSubsPrefix = 'vtex.subscription.key.'
  const subsFrequency: string =
    attachmentItem.content[`${vtexSubsPrefix}frequency`]
  const subsPurchaseDay = attachmentItem.content[`${vtexSubsPrefix}purchaseday`]
  const subsValidityBegin =
    attachmentItem.content[`${vtexSubsPrefix}validity.begin`]
  const subsValidityEnd =
    attachmentItem.content[`${vtexSubsPrefix}validity.end`]

  // This matches a key in the format: "3 months"
  const numberPeriodRegex = /([\d]{1,3}) ([A-z]{1,20})/
  // This matches a key in the format: "weekly"
  const wordlyPeriodRegex = /([A-z]{1,20})/

  const subsFrequencyString = numberPeriodRegex.test(subsFrequency)
    ? intl.formatMessage(
        {
          id: `store/items.attachments.subscription.frequency.${
            (numberPeriodRegex.exec(subsFrequency) ?? [])[2]
          }`,
        },
        {
          frequencyNumber: parseInt(
            (numberPeriodRegex.exec(subsFrequency) ?? [])[1],
            10
          ),
        }
      )
    : intl.formatMessage({
        id: `store/items.attachments.subscription.frequency.${
          (wordlyPeriodRegex.exec(subsFrequency) ?? [])[1]
        }`,
      })

  const subsPurchaseDayString =
    subsPurchaseDay !== ''
      ? intl.formatMessage(messages.purchaseDay, {
          purchaseday: subsPurchaseDay,
        })
      : null

  return {
    subsFrequency: subsFrequencyString,
    subsPurchaseDay: subsPurchaseDayString,
    subsValidityBegin,
    subsValidityEnd,
  }
}

export function parseBankInvoiceUrl(url: string) {
  const isEncrypted = !!url.match(/(\*.\*.)+\*\w\*/g)
  if (!isEncrypted) return url

  const loginUrl = getLoginUrl()

  return loginUrl
}

export function getLoginUrl() {
  return `${get(
    window,
    '__RUNTIME__.rootPath',
    ''
  )}/login?returnUrl=${encodeURIComponent(
    window.location.pathname + window.location.search
  )}`
}

export function getTotals(totals: OrderItemTotal[]) {
  const newTotals: OrderItemTotal[] = []
  const taxes: OrderItemTotal[] = []

  const totalTaxes = totals.reduce((sum, total) => {
    if (total.id === 'CustomTax') {
      taxes.push({ ...total })
      return sum + total.value
    }
    newTotals.push({ ...total })
    return sum
  }, 0)

  const taxTotal = newTotals.findIndex(({ id }) => id === 'Tax')
  newTotals[taxTotal].value += totalTaxes

  return [newTotals, taxes]
}

```


[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 order-placed/react/utils/useSessionResponse.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useMemo, useState } from 'react'

export const useSessionResponse = () => {
  const [session, setSession] = useState<any>()
  const sessionPromise = useMemo(
    () =>
      ((window as any).__RENDER_8_SESSION__?.sessionPromise as Promise<any>) ??
      undefined,
    []
  )

  useEffect(() => {
    if (!sessionPromise) {
      return
    }

    sessionPromise.then((sessionResponse: any) => {
      setSession(sessionResponse?.response)
    })
  }, [sessionPromise, setSession])

  return session
}

```


[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 order-placed/react/components/DeliveryHeader.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { FormattedMessage } from 'react-intl'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
import { Address } from 'vtex.order-details'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'

interface Props {
  shippingData: Parcel
  index: number
  numPackages: number
  giftRegistry?: GiftRegistry | null
}

const CSS_HANDLES = [
  'packageHeader',
  'packageShippingEstimate',
  'packageSLA',
  'packageGiftDescription',
  'packageAddressWrapper',
  'packageAddressTitle',
  'packageDeliveryTitle',
] as const

const DeliveryHeader: FC<Props> = ({
  shippingData,
  index,
  numPackages,
  giftRegistry,
}) => {
  const handles = useCssHandles(CSS_HANDLES)
  const multipleDeliveries = numPackages > 1

  return (
    <Fragment>
      <div
        className={`${applyModifiers(
          handles.packageHeader,
          'delivery'
        )} t-heading-4-ns t-heading-5 mb5`}
        data-testid="shipping-header"
      >
        <span className={`${handles.packageDeliveryTitle}`}>
          <FormattedMessage id="store/shipping.header.title" />
          {multipleDeliveries && (
            <FormattedMessage
              id="store/common.header.counter"
              values={{ index: index + 1, numPackages }}
            />
          )}
        </span>
        <br />
        <small
          className={`${handles.packageShippingEstimate} c-muted-2 t-small`}
        >
          <TranslateEstimate
            shippingEstimate={shippingData.shippingEstimate}
            scheduled={shippingData.deliveryWindow}
          />
        </small>
        <br />
        <small className={`${handles.packageSLA} c-muted-2 t-small`}>
          {shippingData.selectedSla}
        </small>
      </div>

      {giftRegistry &&
      giftRegistry.addressId === shippingData.address.addressId ? (
        <div className={`${handles.packageGiftDescription} c-muted-1`}>
          <span className={`${handles.packageAddressTitle} dn`}>
            <FormattedMessage id="store/shipping.header.address" />
          </span>
          <FormattedMessage
            id="store/shipping.header.wishlist.address"
            values={{ giftRegistryName: giftRegistry.description }}
          />
        </div>
      ) : (
        <div className={`${handles.packageAddressWrapper} mb5 mr10-m`}>
          <span className={`${handles.packageAddressTitle} dn`}>
            <FormattedMessage id="store/shipping.header.address" />
          </span>
          <Address address={shippingData.address} />
        </div>
      )}
    </Fragment>
  )
}

export default DeliveryHeader

```


[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 order-placed/react/components/CurrencyContext.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext, useContext } from 'react'

export const CurrencyContext = createContext<string>('BRL')

export function useCurrency() {
  return useContext(CurrencyContext)
}

```


[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 order-placed/react/components/DeliverySummary.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import estimateCalculator from '@vtex/estimate-calculator'
import { FormattedMessage } from 'react-intl'

import { useOrderGroup } from './OrderGroupContext'
import SummaryBox from './SummaryBox'

const DeliverySummary: FC = () => {
  const { totalDeliveryParcels } = useOrderGroup()

  if (totalDeliveryParcels.length === 0) {
    return null
  }

  const deliveryItemsQuantity = totalDeliveryParcels.reduce(
    (acc, deliveryPackage) => acc + deliveryPackage.items.length,
    0
  )

  const longestDeliveryEstimate = estimateCalculator.getLatestSla(
    totalDeliveryParcels
  )

  return (
    <SummaryBox
      type="delivery"
      title={<FormattedMessage id="store/summary.shipping" />}
      itemQuantity={
        <FormattedMessage
          id="store/summary.items"
          values={{ itemsQuantity: deliveryItemsQuantity }}
        />
      }
      parcelQuantity={
        <FormattedMessage
          id="store/summary.shipping.quantity"
          values={{ shippings: totalDeliveryParcels.length }}
        />
      }
      shippingEstimate={longestDeliveryEstimate.shippingEstimate}
      shippingAddress={
        <FormattedMessage
          id="store/summary.shipping.address"
          values={{
            addressNumber: totalDeliveryParcels[0].address.number,
            addressStreet: totalDeliveryParcels[0].address.street,
          }}
        />
      }
    />
  )
}

export default DeliverySummary

```


[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 order-placed/react/components/OrderList.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { ExtensionPoint } from 'vtex.render-runtime'
import { useCssHandles } from 'vtex.css-handles'

import { useOrderGroup } from './OrderGroupContext'
import { OrderContext } from './OrderContext'

const CSS_HANDLES = ['orderList', 'orderListItem']

const OrderList: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const orderGroup = useOrderGroup()
  return (
    <ul className={`${handles.orderList} list pa0 ma0`}>
      {orderGroup.orders.map((order) => (
        <OrderContext.Provider key={order.orderId} value={order}>
          <li className={`${handles.orderListItem} db bb b--muted-4 pb9 mb9`}>
            <ExtensionPoint id="op-order" />
          </li>
        </OrderContext.Provider>
      ))}
    </ul>
  )
}

export default OrderList

```


[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 order-placed/react/components/PickupSummary.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import estimateCalculator from '@vtex/estimate-calculator'
import { FormattedMessage } from 'react-intl'

import { useOrderGroup } from './OrderGroupContext'
import SummaryBox from './SummaryBox'

const PickupSummary: FC = () => {
  const { totalPickUpParcels } = useOrderGroup()

  if (totalPickUpParcels.length === 0) {
    return null
  }

  const pickUpItemsQuantity = totalPickUpParcels.reduce(
    (acc, pickupPackage) => acc + pickupPackage.items.length,
    0
  )

  const longestPickUpEstimate = estimateCalculator.getLatestSla(
    totalPickUpParcels
  )

  return (
    <SummaryBox
      type="pickup"
      title={<FormattedMessage id="store/summary.pickup" />}
      itemQuantity={
        <FormattedMessage
          id="store/summary.items"
          values={{ itemsQuantity: pickUpItemsQuantity }}
        />
      }
      parcelQuantity={
        <FormattedMessage
          id="store/summary.pickup.quantity"
          values={{ pickups: totalPickUpParcels.length }}
        />
      }
      shippingEstimate={longestPickUpEstimate.shippingEstimate}
      shippingAddress={
        <FormattedMessage
          id="store/summary.pickup.friendlyName"
          values={{
            friendlyName: totalPickUpParcels[0].pickupFriendlyName,
          }}
        />
      }
    />
  )
}

export default PickupSummary

```


[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 order-placed/react/components/FormattedPrice.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedNumber } from 'react-intl'

import { useCurrency } from './CurrencyContext'

interface Props {
  value: number
}

const FormattedPrice: FC<Props> = ({ value }) => {
  const currency = useCurrency()

  return (
    <FormattedNumber currency={currency} style="currency" value={value / 100} />
  )
}

export default FormattedPrice

```


[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 order-placed/react/components/SummaryBox.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, ReactNode } from 'react'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'

interface Props {
  type: 'pickup' | 'delivery'
  title: ReactNode
  itemQuantity: ReactNode
  parcelQuantity: ReactNode
  shippingEstimate: unknown
  shippingAddress: ReactNode
}

const CSS_HANDLES = [
  'summaryBox',
  'summaryTitle',
  'summaryContent',
  'summaryItems',
  'summaryShippingSLA',
  'summaryAddress',
]

const SummaryBox: FC<Props> = ({
  type,
  title,
  itemQuantity,
  parcelQuantity,
  shippingEstimate,
  shippingAddress,
}) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div
      data-testid={`summary-${type}`}
      className={`${applyModifiers(
        handles.summaryBox,
        type
      )} ba b--muted-5 bw1 br3`}
    >
      <h5
        className={`${handles.summaryTitle} mv0 pv5 t-heading-5 tc bb b--muted-5 bw1 c-on-base`}
      >
        {title}
      </h5>
      <div className={`${handles.summaryContent} pa6 t-body`}>
        <div className={`${handles.summaryItems} mb4`}>
          <strong>{itemQuantity}</strong>
          {parcelQuantity}
        </div>
        <div className={`${handles.summaryShippingSLA} t-heading-5 mb8`}>
          <TranslateEstimate shippingEstimate={shippingEstimate} />
        </div>
        <div className={`${handles.summaryAddress} c-muted-2 lh-copy`}>
          {shippingAddress}
        </div>
      </div>
    </div>
  )
}

export default SummaryBox

```


[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 order-placed/react/components/OrderGroupContext.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext, useContext } from 'react'

export const OrderGroupContext = createContext({} as OrderGroup)

export function useOrderGroup() {
  return useContext(OrderGroupContext)
}

```


[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 order-placed/react/components/PickUpHeader.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { FormattedMessage } from 'react-intl'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
import { Address } from 'vtex.order-details'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'

interface Props {
  shippingData: Parcel
  index: number
  numPackages: number
}

const CSS_HANDLES = [
  'packageHeader',
  'packageShippingEstimate',
  'packageInfoWrapper',
  'packageAddressWrapper',
  'packageReceiver',
  'packageReceiverName',
  'packageAdditionalInfo',
  'packageAddressTitle',
] as const

const StorePickUpHeader: FC<Props> = ({ shippingData, index, numPackages }) => {
  const handles = useCssHandles(CSS_HANDLES)
  const multiplePickups = numPackages > 1
  const { receiverName } = shippingData.address
  const {
    additionalInfo,
    address,
  } = shippingData.selectedSlaObj.pickupStoreInfo

  return (
    <Fragment>
      <div
        className={`${applyModifiers(
          handles.packageHeader,
          'pickup'
        )} t-heading-4-ns t-heading-5 mb5`}
        data-testid="storepickup-header"
      >
        <FormattedMessage id="store/pickup.header.title" />
        {multiplePickups && (
          <FormattedMessage
            id="store/common.header.counter"
            values={{ index: index + 1, numPackages }}
          />
        )}
        <br />
        <small
          className={`${handles.packageShippingEstimate} c-muted-2 t-small`}
        >
          <TranslateEstimate
            shippingEstimate={shippingData.shippingEstimate}
            scheduled={shippingData.deliveryWindow}
            isPickup
          />
        </small>
      </div>

      <div
        className={`${handles.packageInfoWrapper} flex justify-left-m flex-column-s flex-column-l flex-row-m justify-between-l justify-start-l`}
      >
        <span className={`${handles.packageAddressTitle} dn`}>
          <FormattedMessage id="store/shipping.header.address" />
        </span>
        <div className={`${handles.packageAddressWrapper} mb5 mr10-m`}>
          <Address address={address} pickup={shippingData} />
        </div>
        <div className={`${handles.packageReceiver} c-on-base lh-copy`}>
          <p className={`${handles.packageReceiverName}`}>{receiverName}</p>
          <p className={`${handles.packageAdditionalInfo} c-muted-1`}>
            {additionalInfo}
          </p>
        </div>
      </div>
    </Fragment>
  )
}

export default StorePickUpHeader

```


[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 order-placed/react/components/OrderContext.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext, useContext } from 'react'

export const OrderContext = createContext({} as Order)

export function useOrder() {
  return useContext(OrderContext)
}

```


[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 order-placed/react/__tests__/ProductList.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { orderGroupQuery as serviceWithAttachment } from '../mocks/bundleServiceWithAttachment'
import { orderGroupQuery as serviceWithNoAttachments } from '../mocks/bundleServiceWithNoAttachments'
import { orderGroupQuery as serviceAndAttachment } from '../mocks/serviceAndAttachment'
import { orderGroupQuery as subscription } from '../mocks/subscriptions'
import { orderWithGift } from '../mocks/orderWithGift'
import { renderWithOrderGroup, renderWithIntl } from '../utils/testUtils'
import ProductList from '../components/ProductList'

const getItemsFromOrderGroup = (
  orderGroup: OrderGroup,
  type: 'deliveryParcels' | 'pickUpParcels'
) => orderGroup.orders[0][type][0].items

test('renders Attachment component if product has service or attachment', () => {
  const { queryByText } = renderWithOrderGroup(
    serviceWithNoAttachments.orderGroup,
    <ProductList
      products={getItemsFromOrderGroup(
        serviceWithNoAttachments.orderGroup,
        'deliveryParcels'
      )}
    />
  )

  expect(queryByText('[TESTE QA]')).toBeTruthy()
})

test('renders attachment from bundleItems item', () => {
  const { queryByText } = renderWithOrderGroup(
    serviceWithAttachment.orderGroup,
    <ProductList
      products={getItemsFromOrderGroup(
        serviceWithAttachment.orderGroup,
        'deliveryParcels'
      )}
    />
  )

  expect(queryByText('This is a mock message')).toBeTruthy()
})

test('renders attachments from item and also bundle items', () => {
  const { queryByText } = renderWithOrderGroup(
    serviceAndAttachment.orderGroup,
    <ProductList
      products={getItemsFromOrderGroup(
        serviceAndAttachment.orderGroup,
        'deliveryParcels'
      )}
    />
  )

  expect(queryByText('[TESTE QA]')).toBeTruthy()
  expect(queryByText(/1\ssemana/)).toBeTruthy()
})

test('renders correct information and messages for an item with a subscription', () => {
  const { queryByText } = renderWithOrderGroup(
    subscription.orderGroup,
    <ProductList
      products={getItemsFromOrderGroup(
        subscription.orderGroup,
        'deliveryParcels'
      )}
    />
  )

  expect(queryByText('Subscription')).toBeTruthy()
  expect(queryByText('Every 1 week')).toBeTruthy()
  expect(queryByText('Charged monthly at day 15')).toBeTruthy()
})

test('renders FREE instead of the price for all items that are gifts', async () => {
  const { queryByText } = renderWithIntl(
    <ProductList products={orderWithGift.products} />
  )

  expect(queryByText('Free')).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 order-placed/react/__tests__/OrderPlaced.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { wait } from '@vtex/test-tools/react'
import React from 'react'

import GET_ORDER_GROUP from '../graphql/getOrderGroup.graphql'
import OrderPlaced from '../index'
import requestNotFound from './fixtures/graphql/not-found.json'
import requestForbidden from './fixtures/graphql/forbidden.json'
import { renderWithIntl } from '../utils/testUtils'

const orderGroupId = '123123123'

const requestSample = {
  request: {
    query: GET_ORDER_GROUP,
    name: 'orderGroupQuery',
    variables: { orderGroup: orderGroupId },
  },
}

const { location } = window

beforeAll(() => {
  delete window.location
  window.location = { search: `?og=${orderGroupId}` } as Location
})

afterAll(() => {
  window.location = location
})

beforeEach(() => jest.useFakeTimers())

test('should first render as as skeleton loading', async () => {
  const { container } = renderWithIntl(<OrderPlaced />)

  expect(container.querySelector('.skeleton-shimmer')).toBeTruthy()

  await wait(() => jest.runAllTimers())

  expect(container.querySelector('.skeleton-shimmer')).toBeNull()
})

test('should render an alert for users not logged in', async () => {
  const { queryAllByText } = renderWithIntl(<OrderPlaced />, {
    graphql: {
      mocks: [
        {
          ...requestSample,
          result: requestForbidden,
        },
      ],
    },
  })

  await wait(() => jest.runAllTimers())

  expect(queryAllByText(/permission/)).toBeTruthy()
})

test('should render an alert for invalid orders', async () => {
  const { queryByText } = renderWithIntl(<OrderPlaced />, {
    graphql: {
      mocks: [
        {
          ...requestSample,
          result: requestNotFound,
        },
      ],
    },
  })

  await wait(() => jest.runAllTimers())

  expect(queryByText(/not found/i)).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 order-placed/react/__tests__/DeliveryItems.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { orderGroupQuery as giftRegistry } from '../mocks/giftRegistry'
import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
import { orderGroupQuery as twoDeliveries } from '../mocks/twoDeliveries'
import DeliveryPackages from '../DeliveryPackages'
import { renderWithOrder } from '../utils/testUtils'

test('renders ShippingHeader with shipping estimate', () => {
  const { getByText } = renderWithOrder(
    oneDelivery.orderGroup,
    <DeliveryPackages />
  )

  expect(getByText('Delivery')).toBeDefined()
  expect(getByText('TranslateEstimate')).toBeDefined()
})

test('renders delivery counter when multiple deliveries', () => {
  const { queryAllByText } = renderWithOrder(
    twoDeliveries.orderGroup,
    <DeliveryPackages />
  )

  expect(queryAllByText(/- n˚ \d of \d/)).toHaveLength(2)
})

test("doesn't render delivery counter when there is only one delivery", () => {
  const { queryByText } = renderWithOrder(
    oneDelivery.orderGroup,
    <DeliveryPackages />
  )

  expect(queryByText(/- n˚ \d of \d/)).toBeNull()
})

test('renders product list', () => {
  const { getByText } = renderWithOrder(
    twoDeliveries.orderGroup,
    <DeliveryPackages />
  )

  expect(
    getByText('Delivery entrega agendada e Delivery com várias SLAs Tipo 1')
  ).toBeDefined()
  expect(getByText('Camisa Seleção Brasileira')).toBeDefined()
  expect(getByText('Camisa America Vermelha')).toBeDefined()
})

test('renders correct messsage when order is from a Gift Registry and not render address component', () => {
  const { queryByText, queryByTestId } = renderWithOrder(
    giftRegistry.orderGroup,
    <DeliveryPackages />
  )

  expect(queryByText('Address from: Lista Lucas QA')).toBeDefined()
  expect(queryByTestId('address-component')).toBeNull()
})

```


[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 order-placed/react/__tests__/Subscriptions.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { IntlProvider } from 'react-intl'

import * as defaultStrings from '../../messages/en.json'
import { getSubscriptionInfo } from '../utils'

const {
  state: { intl },
} = new IntlProvider(
  {
    locale: 'en-US',
    messages: defaultStrings,
  },
  {}
)

const mockAttachmentItemNoSubscription = {
  content: {
    anything: false,
    mock: true,
  },
  name: 'testing out',
}

const mockItemSubscriptionNoPurchaseDay = {
  name: 'vtex.subscription._plan1_',
  content: {
    'vtex.subscription.key.frequency': ' 1 week',
    'vtex.subscription.key.purchaseday': '',
    'vtex.subscription.key.validity.begin': '2019-02-13',
    'vtex.subscription.key.validity.end': '2019-10-16',
  },
}

const mockItemSubscriptionComplete = {
  name: 'vtex.subscription._plan1_',
  content: {
    'vtex.subscription.key.frequency': ' 1 week',
    'vtex.subscription.key.purchaseday': '12',
    'vtex.subscription.key.validity.begin': '2019-02-13',
    'vtex.subscription.key.validity.end': '2019-10-16',
  },
}

describe('getSubscriptionInfo function tests', () => {
  it('should return correct object for attachmentItem that is not a subscription', () => {
    const {
      subsFrequency,
      subsPurchaseDay,
      subsValidityBegin,
      subsValidityEnd,
    } = getSubscriptionInfo(mockAttachmentItemNoSubscription, intl)

    expect(subsFrequency).toBeUndefined()
    expect(subsPurchaseDay).toBeUndefined()
    expect(subsValidityBegin).toBeUndefined()
    expect(subsValidityEnd).toBeUndefined()
  })

  it('should return correct object for subscription with no purchaseDay', () => {
    const {
      subsFrequency,
      subsPurchaseDay,
      subsValidityBegin,
      subsValidityEnd,
    } = getSubscriptionInfo(mockItemSubscriptionNoPurchaseDay, intl)

    expect(subsFrequency).toBe('Every 1 week')
    expect(subsPurchaseDay).toBeNull()
    expect(subsValidityBegin).toBe('2019-02-13')
    expect(subsValidityEnd).toBe('2019-10-16')
  })

  it('should return correct object for a complete subscription attachment', () => {
    const {
      subsFrequency,
      subsPurchaseDay,
      subsValidityBegin,
      subsValidityEnd,
    } = getSubscriptionInfo(mockItemSubscriptionComplete, intl)

    expect(subsFrequency).toBe('Every 1 week')
    expect(subsPurchaseDay).toBe('Charged monthly at day 12')
    expect(subsValidityBegin).toBe('2019-02-13')
    expect(subsValidityEnd).toBe('2019-10-16')
  })
})

```


[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 order-placed/react/__tests__/OrderNumber.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
import { renderWithOrder } from '../utils/testUtils'
import OrderNumber from '../OrderNumber'

test('should render correct order number', () => {
  const { getByText } = renderWithOrder(oneDelivery.orderGroup, <OrderNumber />)

  const orderId = 'Order #905691102273-01'

  expect(getByText(orderId)).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 order-placed/react/__tests__/OrderPlacedConfirmation.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import ConfirmationIcon from '../ConfirmationIcon'
import ConfirmationTitle from '../ConfirmationTitle'
import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
import { renderWithOrderGroup } from '../utils/testUtils'

test('should render success icon', () => {
  const { getByTestId } = renderWithOrderGroup(
    oneDelivery.orderGroup,
    <ConfirmationIcon />
  )

  const icon = getByTestId('sucessIcon')
  expect(icon).toBeTruthy()
})

test('should render thank you message', () => {
  const { getByText } = renderWithOrderGroup(
    oneDelivery.orderGroup,
    <ConfirmationTitle />
  )

  const thankYouMessage = getByText(/Thank you for your purchase!/)
  expect(thankYouMessage.textContent).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 order-placed/react/__tests__/Notices.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import OrderPlacedNotices from '../Notices'
import { orderGroupQuery as bankInvoiceDueDate } from '../mocks/bankInvoiceLoggedIn'
import { orderGroupQuery as bankInvoiceNoDueDate } from '../mocks/bankInvoiceNumberLoggedIn'
import { orderGroupQuery as bankInvoiceNotLoggedIn } from '../mocks/bankInvoiceNotLoggedIn'
import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
import { orderGroupQuery as onePickup } from '../mocks/onePickupSimple'
import { orderGroupQuery as splitOrder } from '../mocks/splitOrderTwoSellers'
import { renderWithOrderGroup, queryByTextWithMarkup } from '../utils/testUtils'

test('should render payment confirmation estimate', () => {
  const { getByText } = renderWithOrderGroup(
    oneDelivery.orderGroup,
    <OrderPlacedNotices />
  )

  const paymentApproval = getByText(
    /Payment approval may take from \d minutes up to \d business days/i
  )
  expect(paymentApproval).toBeTruthy()
})

test('should render shipping estimate disclaimers if order has shipping items', () => {
  const { getByText } = renderWithOrderGroup(
    oneDelivery.orderGroup,
    <OrderPlacedNotices />
  )

  const paymentDisclaimer = getByText(
    /The delivery period starts to count from the moment your payment is confirmed/
  )
  const trackingDisclaimer = getByText(
    /A tracking code will be sent to your email when the delivery process begins./
  )

  expect(paymentDisclaimer).toBeTruthy()
  expect(trackingDisclaimer).toBeTruthy()
})

test('should not render shipping estimate disclaimers if order has no shipping items', () => {
  const { queryByText } = renderWithOrderGroup(
    onePickup.orderGroup,
    <OrderPlacedNotices />
  )

  const paymentDisclaimer = queryByText(
    'The delivery period starts to count from the moment your payment is confirmed'
  )
  const trackingDisclaimer = queryByText(
    'A tracking code will be sent to your email when the delivery process begins.'
  )

  expect(paymentDisclaimer).toBeNull()
  expect(trackingDisclaimer).toBeNull()
})

test('should render pickup estimate disclaimer if order has pickup items', () => {
  const { getByText } = renderWithOrderGroup(
    onePickup.orderGroup,
    <OrderPlacedNotices />
  )

  const paymentDisclaimer = getByText(
    /The store pickup period starts from the moment your payment is confirmed/
  )

  expect(paymentDisclaimer).toBeTruthy()
})

test('should not render pickup estimate disclaimers if order has no pickup items', () => {
  const { queryByText } = renderWithOrderGroup(
    oneDelivery.orderGroup,
    <OrderPlacedNotices />
  )

  const paymentDisclaimer = queryByText(
    'The store pickup period starts from the moment your payment is confirmed.'
  )

  expect(paymentDisclaimer).toBeNull()
})

test('should render disclaimer for split orders', () => {
  const { queryByText } = renderWithOrderGroup(
    splitOrder.orderGroup,
    <OrderPlacedNotices />
  )

  const splitOrderDisclaimer = queryByText(
    /Your purchase was split into \d orders as some of the items were sold by partners. But this does not affect shipping estimates/
  )
  expect(splitOrderDisclaimer).toBeTruthy()
})

test('should render notice for bank invoices with due date', () => {
  const { container } = renderWithOrderGroup(
    bankInvoiceDueDate.orderGroup,
    <OrderPlacedNotices />
  )

  const bankInvoiceWarning = queryByTextWithMarkup(
    container,
    /Please make a payment of .*? up to .*? according to the data below/
  )
  expect(bankInvoiceWarning).toBeTruthy()
})

test('should render notice for bank invoices without due date', () => {
  const { container } = renderWithOrderGroup(
    bankInvoiceNoDueDate.orderGroup,
    <OrderPlacedNotices />
  )

  const bankInvoiceWarning = queryByTextWithMarkup(
    container,
    /Please make a payment of .*? up to the due date according to the data below/
  )
  expect(bankInvoiceWarning).toBeTruthy()
})

test('redirects to login if the user is not logged in.', () => {
  const { container } = renderWithOrderGroup(
    bankInvoiceNotLoggedIn.orderGroup,
    <OrderPlacedNotices />
  )

  const printButton = container.querySelector('a[href]') as HTMLAnchorElement
  expect(printButton.href).toContain('login')
})

```


[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 order-placed/react/__tests__/DeliverySummary.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import DeliverySummary from '../components/DeliverySummary'
import { orderGroupQuery as fiftyItemOrder } from '../mocks/fiftyItemOrder'
import { renderWithOrderGroup } from '../utils/testUtils'

test('renders the number of items', () => {
  const { queryByText } = renderWithOrderGroup(
    fiftyItemOrder.orderGroup,
    <DeliverySummary />
  )

  expect(queryByText(/20 items/)).toBeTruthy()
})

test('renders the number of deliveries', () => {
  const { queryByText } = renderWithOrderGroup(
    fiftyItemOrder.orderGroup,
    <DeliverySummary />
  )

  expect(queryByText(/9 deliveries/)).toBeTruthy()
})

test('renders the shipping address', () => {
  const { queryByText } = renderWithOrderGroup(
    fiftyItemOrder.orderGroup,
    <DeliverySummary />
  )

  expect(queryByText(/praia de botafogo, 300/i)).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 order-placed/react/__tests__/BankInvoiceSection.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { orderGroupQuery as bankInvoiceLoggedIn } from '../mocks/bankInvoiceLoggedIn'
import { orderGroupQuery as bankInvoiceNotLoggedIn } from '../mocks/bankInvoiceNotLoggedIn'
import { orderGroupQuery as bankInvoiceNumberLoggedIn } from '../mocks/bankInvoiceNumberLoggedIn'
import { orderGroupQuery as bankInvoiceNumberNotLoggedIn } from '../mocks/bankInvoiceNumberNotLoggedIn'
import { orderGroupQuery as bankInvoiceDisplayNonBankUrlPayment } from '../mocks/bankInvoiceDisplayNonBankUrlPayment'
import BankInvoiceSection from '../BankInvoiceSection'
import { renderWithOrderGroup } from '../utils/testUtils'

test('renders embedded bank invoice for logged in customer, but no number', () => {
  const { getByTestId, queryByTestId } = renderWithOrderGroup(
    bankInvoiceLoggedIn.orderGroup,
    <BankInvoiceSection />
  )

  const bankInvoiceSection = getByTestId('bank-invoice')
  const barCodeNumber = queryByTestId('bank-invoice-barcode')
  const embedded = queryByTestId('embedded-bank-invoice')

  expect(bankInvoiceSection).toBeTruthy()
  expect(barCodeNumber).toBeNull()
  expect(embedded).toBeTruthy()
})

test('renders embedded bank invoice for logged in customer, along with barcode number', () => {
  const { getByTestId, queryByTestId } = renderWithOrderGroup(
    bankInvoiceNumberLoggedIn.orderGroup,
    <BankInvoiceSection />
  )

  const bankInvoiceSection = getByTestId('bank-invoice')
  const barCodeNumber = queryByTestId('bank-invoice-barcode')
  const embedded = queryByTestId('embedded-bank-invoice')

  expect(bankInvoiceSection).toBeTruthy()
  expect(barCodeNumber).toBeTruthy()
  expect(embedded).toBeTruthy()
})

test("doesn't render bank invoice section for customer not logged in", () => {
  const { queryByTestId } = renderWithOrderGroup(
    bankInvoiceNotLoggedIn.orderGroup,
    <BankInvoiceSection />
  )

  const bankInvoiceSection = queryByTestId('bank-invoice')
  const barCodeNumber = queryByTestId('bank-invoice-barcode')
  const embedded = queryByTestId('embedded-bank-invoice')

  expect(bankInvoiceSection).toBeNull()
  expect(barCodeNumber).toBeNull()
  expect(embedded).toBeNull()
})

test('renders bank invoice barcode number for user not logged in', () => {
  const { queryByTestId } = renderWithOrderGroup(
    bankInvoiceNumberNotLoggedIn.orderGroup,
    <BankInvoiceSection />
  )

  const bankInvoiceSection = queryByTestId('bank-invoice')
  const barCodeNumber = queryByTestId('bank-invoice-barcode')
  const embedded = queryByTestId('embedded-bank-invoice')

  expect(bankInvoiceSection).toBeTruthy()
  expect(barCodeNumber).toBeTruthy()
  expect(embedded).toBeNull()
})

test('has the invoice url if the user is logged in.', () => {
  const { container } = renderWithOrderGroup(
    bankInvoiceLoggedIn.orderGroup,
    <BankInvoiceSection />
  )

  const printButton = container.querySelector('a[href]') as HTMLAnchorElement
  expect(printButton.href).not.toContain('login')
})

test('renders embedded for other types of payments besides bank invoice', () => {
  const { queryByTestId } = renderWithOrderGroup(
    bankInvoiceDisplayNonBankUrlPayment.orderGroup,
    <BankInvoiceSection />
  )

  const embedded = queryByTestId('embedded-bank-invoice')

  expect(embedded).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 order-placed/react/__tests__/PickupItems.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { orderGroupQuery as onePickup } from '../mocks/onePickupSimple'
import { orderGroupQuery as twoPickups } from '../mocks/twoPickups'
import { renderWithOrder } from '../utils/testUtils'
import PickupPackages from '../PickupPackages'

test('should render StorePickUpHeader with shipping estimate and receiver info', () => {
  const { getByText } = renderWithOrder(
    onePickup.orderGroup,
    <PickupPackages />
  )

  expect(getByText('Pickup')).toBeDefined()
  expect(getByText('TranslateEstimate')).toBeDefined()
  expect(getByText('Victor Hugo')).toBeDefined()
  expect(getByText('não entre de sunga não entre sem sunga')).toBeDefined()
})

test('should render pickup counter when multiple store pickups', () => {
  const { queryAllByText } = renderWithOrder(
    twoPickups.orderGroup,
    <PickupPackages />
  )

  expect(queryAllByText(/- n˚ \d of \d/)).toHaveLength(2)
})

test('should not pickup counter when there is only one store pickup', () => {
  const { queryByText } = renderWithOrder(
    onePickup.orderGroup,
    <PickupPackages />
  )

  expect(queryByText(/ - n˚ \d of \d/)).toBeNull()
})

test('should render product list', () => {
  const { queryAllByText } = renderWithOrder(
    twoPickups.orderGroup,
    <PickupPackages />
  )

  expect(queryAllByText('Pickup múltiplas SLAs RJ Tipo 1')).toHaveLength(2)
})

```


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

[User] Show me the implementation of order-placed/react/__tests__/PickupSummary.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import PickupSummary from '../components/PickupSummary'
import { orderGroupQuery as fiftyItemOrder } from '../mocks/fiftyItemOrder'
import { renderWithOrderGroup } from '../utils/testUtils'

test('renders the number of items', () => {
  const { queryByText } = renderWithOrderGroup(
    fiftyItemOrder.orderGroup,
    <PickupSummary />
  )

  expect(queryByText(/30 items/)).toBeTruthy()
})

test('renders the number of stores', () => {
  const { queryByText } = renderWithOrderGroup(
    fiftyItemOrder.orderGroup,
    <PickupSummary />
  )

  expect(queryByText(/one store/)).toBeTruthy()
})

test('renders the pickup address', () => {
  const { queryByText } = renderWithOrderGroup(
    fiftyItemOrder.orderGroup,
    <PickupSummary />
  )

  expect(queryByText(/copacabana no rio de janeiro/i)).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 order-placed/react/__tests__/OrderSeller.test.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { orderGroupQuery as splitOrder } from '../mocks/splitOrderTwoSellers'
import { renderWithOrder } from '../utils/testUtils'
import OrderSeller from '../OrderSeller'

test('should render seller name for an order processed by another seller', () => {
  const { getByText } = renderWithOrder(splitOrder.orderGroup, <OrderSeller />)

  const seller = 'Sold and delivered by'
  expect(getByText(seller)).toBeTruthy()
  expect(
    getByText(splitOrder.orderGroup.orders[0].sellers[0].name)
  ).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 order-placed/react/graphql/getOrderGroup.graphql from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getOrderGroup($orderGroup: String) {
  orderGroup(orderGroup: $orderGroup) @context(provider: "vtex.order-placed-graphql") {
    orders {
      allowCancellation
      orderId
      deliveryParcels {
        address {
          addressType
          receiverName
          state
          street
          number
          city
          postalCode
          neighborhood
          complement
          country
        }
        price
        pickupFriendlyName
        seller
        items {
          id
          skuName
          name
          productId
          price
          sellingPrice
          listPrice
          isGift
          parentItemIndex
          quantity
          attachments {
            content
            name
          }
          bundleItems {
            id
            attachments {
              content
              name
            }
            name
            price
            quantity
            imageUrl
            measurementUnit
            unitMultiplier
          }
          seller
          imageUrl
          detailUrl
          measurementUnit
          unitMultiplier
        }
        selectedSla
        selectedSlaObj {
          id
          name
          shippingEstimate
          deliveryWindow {
            endDateUtc
            startDateUtc
          }
          price
          deliveryChannel
          pickupStoreInfo {
            additionalInfo
            address {
              addressId
              addressType
              receiverName
              street
              number
              city
              state
              postalCode
              neighborhood
              complement
              country
            }
            friendlyName
            isPickupStore
          }
        }
        shippingEstimate
        shippingEstimateDate
        deliveryWindow {
          endDateUtc
          startDateUtc
        }
        deliveryChannel
        selectedSlaType
      }
      pickUpParcels {
        address {
          addressType
          receiverName
          state
          street
          number
          city
          postalCode
          neighborhood
          complement
          country
        }
        price
        pickupFriendlyName
        seller
        items {
          id
          skuName
          name
          productId
          price
          sellingPrice
          listPrice
          isGift
          parentItemIndex
          quantity
          attachments {
            content
            name
          }
          bundleItems {
            id
            attachments {
              content
              name
            }
            name
            price
            quantity
            imageUrl
            measurementUnit
            unitMultiplier
          }
          seller
          imageUrl
          detailUrl
          measurementUnit
          unitMultiplier
        }
        selectedSla
        selectedSlaObj {
          id
          name
          shippingEstimate
          deliveryWindow {
            endDateUtc
            startDateUtc
          }
          price
          deliveryChannel
          pickupStoreInfo {
            additionalInfo
            address {
              addressId
              addressType
              receiverName
              street
              number
              city
              state
              postalCode
              neighborhood
              complement
              country
            }
            friendlyName
            isPickupStore
          }
        }
        shippingEstimate
        shippingEstimateDate
        deliveryWindow {
          endDateUtc
          startDateUtc
        }
        deliveryChannel
        selectedSlaType
      }
      takeAwayParcels {
        address {
          addressType
          receiverName
          state
          street
          number
          city
          postalCode
          neighborhood
          complement
          country
        }
        price
        pickupFriendlyName
        seller
        items {
          id
          skuName
          name
          productId
          price
          sellingPrice
          listPrice
          isGift
          parentItemIndex
          quantity
          attachments {
            content
            name
          }
          bundleItems {
            id
            attachments {
              content
              name
            }
            name
            price
            quantity
            imageUrl
            measurementUnit
            unitMultiplier
          }
          seller
          imageUrl
          detailUrl
          measurementUnit
          unitMultiplier
        }
        selectedSla
        selectedSlaObj {
          id
          name
          shippingEstimate
          deliveryWindow {
            endDateUtc
            startDateUtc
          }
          price
          deliveryChannel
          pickupStoreInfo {
            additionalInfo
            address {
              addressId
              addressType
              receiverName
              street
              number
              city
              state
              postalCode
              neighborhood
              complement
              country
            }
            friendlyName
            isPickupStore
          }
        }
        shippingEstimate
        shippingEstimateDate
        deliveryWindow {
          endDateUtc
          startDateUtc
        }
        deliveryChannel
        selectedSlaType
      }
      items {
        id
        skuName
        name
        productId
        price
        sellingPrice
        listPrice
        isGift
        parentItemIndex
        quantity
        attachments {
          content
          name
        }
        bundleItems {
          id
          attachments {
            content
            name
          }
          name
          price
          quantity
          imageUrl
          measurementUnit
          unitMultiplier
        }
        seller
        imageUrl
        detailUrl
        measurementUnit
        unitMultiplier
      }
      sellers {
        id
        name
      }
      totals {
        id
        name
        value
      }
      clientProfileData {
        email
        firstName
        lastName
        document
        documentType
        phone
      }
      paymentData {
        transactions {
          transactionId
          payments {
            id
            paymentSystem
            paymentSystemName
            paymentOrigin
            value
            installments
            lastDigits
            group
            dueDate
            url
            bankIssuedInvoiceBarCodePNG
            bankIssuedInvoiceIdentificationNumber
            connectorResponses
          }
        }
      }
      storePreferencesData {
        countryCode
        currencyCode
      }
      creationDate
      value
    }
    totalPickUpParcels {
      address {
        addressType
        receiverName
        state
        street
        number
        city
        postalCode
        neighborhood
        complement
        country
      }
      price
      pickupFriendlyName
      seller
      items {
        id
        skuName
        name
        productId
        price
        sellingPrice
        listPrice
        isGift
        parentItemIndex
        quantity
        attachments {
          content
          name
        }
        bundleItems {
          id
          attachments {
            content
            name
          }
          name
          price
          quantity
          imageUrl
          measurementUnit
          unitMultiplier
        }
        seller
        imageUrl
        detailUrl
        measurementUnit
        unitMultiplier
      }
      selectedSla
      selectedSlaObj {
        id
        name
        shippingEstimate
        deliveryWindow {
          endDateUtc
          startDateUtc
        }
        price
        deliveryChannel
        pickupStoreInfo {
          additionalInfo
          address {
            addressId
            addressType
            receiverName
            street
            number
            city
            state
            postalCode
            neighborhood
            complement
            country
          }
          friendlyName
          isPickupStore
        }
      }
      shippingEstimate
      shippingEstimateDate
      deliveryWindow {
        endDateUtc
        startDateUtc
      }
      deliveryChannel
      selectedSlaType
    }
    totalDeliveryParcels {
      address {
        addressType
        receiverName
        state
        street
        number
        city
        postalCode
        neighborhood
        complement
        country
      }
      price
      pickupFriendlyName
      seller
      items {
        id
        skuName
        name
        productId
        price
        sellingPrice
        listPrice
        isGift
        parentItemIndex
        quantity
        attachments {
          content
          name
        }
        bundleItems {
          id
          attachments {
            content
            name
          }
          name
          price
          quantity
          imageUrl
          measurementUnit
          unitMultiplier
        }
        seller
        imageUrl
        detailUrl
        measurementUnit
        unitMultiplier
      }
      selectedSla
      selectedSlaObj {
        id
        name
        shippingEstimate
        deliveryWindow {
          endDateUtc
          startDateUtc
        }
        price
        deliveryChannel
        pickupStoreInfo {
          additionalInfo
          address {
            addressId
            addressType
            receiverName
            street
            number
            city
            state
            postalCode
            neighborhood
            complement
            country
          }
          friendlyName
          isPickupStore
        }
      }
      shippingEstimate
      shippingEstimateDate
      deliveryWindow {
        endDateUtc
        startDateUtc
      }
      deliveryChannel
      selectedSlaType
    }
    totalTakeAwayParcels {
      address {
        addressType
        receiverName
        state
        street
        number
        city
        postalCode
        neighborhood
        complement
        country
      }
      price
      pickupFriendlyName
      seller
      items {
        id
        skuName
        name
        productId
        price
        sellingPrice
        listPrice
        isGift
        parentItemIndex
        quantity
        attachments {
          content
          name
        }
        bundleItems {
          id
          attachments {
            content
            name
          }
          name
          price
          quantity
          imageUrl
          measurementUnit
          unitMultiplier
        }
        seller
        imageUrl
        detailUrl
        measurementUnit
        unitMultiplier
      }
      selectedSla
      selectedSlaObj {
        id
        name
        shippingEstimate
        deliveryWindow {
          endDateUtc
          startDateUtc
        }
        price
        deliveryChannel
        pickupStoreInfo {
          additionalInfo
          address {
            addressId
            addressType
            receiverName
            street
            number
            city
            state
            postalCode
            neighborhood
            complement
            country
          }
          friendlyName
          isPickupStore
        }
      }
      shippingEstimate
      shippingEstimateDate
      deliveryWindow {
        endDateUtc
        startDateUtc
      }
      deliveryChannel
      selectedSlaType
    }
    analyticsData
  }
}

```


[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 order-placed/react/Icons/MailIcon.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { calcIconSize } from './utils'

const iconBase = {
  height: 14,
  width: 16,
}

const MailIcon: FC<IconProps> = ({ color = 'currentColor', size = 16 }) => {
  const newSize = calcIconSize(iconBase, size)

  return (
    <svg
      width={newSize.width}
      height={newSize.height}
      viewBox="0 0 16 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M15 0H1C0.4 0 0 0.4 0 1V2.4L8 6.9L16 2.5V1C16 0.4 15.6 0 15 0Z"
        fill={color}
      />
      <path
        d="M7.5 8.90001L0 4.70001V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V4.70001L8.5 8.90001C8.22 9.04001 7.78 9.04001 7.5 8.90001Z"
        fill={color}
      />
    </svg>
  )
}

export default MailIcon

```


[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 order-placed/react/Icons/Info.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const InfoIcon: FC<{ colorToken: string }> = ({ colorToken }) => (
  <svg
    className={`${baseClassname('info')} ${colorToken || ''}`}
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM9 12H7V7H9V12ZM8 6C7.4 6 7 5.6 7 5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5C9 5.6 8.6 6 8 6Z"
      fill="currentColor"
    />
  </svg>
)

export default InfoIcon

```


[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 order-placed/react/Icons/Tooltip.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { baseClassname } from './utils'

const Tooltip: FC<{ colorToken?: string }> = ({ colorToken }) => (
  <svg
    className={`${baseClassname('tooltip')} ${colorToken ?? ''}`}
    width="20"
    height="9"
    viewBox="0 0 20 9"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    style={{ paddingLeft: '7.75rem' }}
  >
    <path
      d="M12.1213 1.12132L20 9L0 9L7.87868 1.12132C9.05025 -0.050251 10.9497 -0.0502493 12.1213 1.12132Z"
      fill="currentColor"
    />
  </svg>
)

export default Tooltip

```


[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 order-placed/react/Icons/DeliveryIcon.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { calcIconSize } from './utils'

const iconBase = {
  height: 22,
  width: 30,
}

export const DeliveryIcon: FC<IconProps> = ({
  color = 'currentColor',
  size = 30,
}) => {
  const newSize = calcIconSize(iconBase, size)

  return (
    <svg
      width={newSize.width}
      height={newSize.height}
      viewBox="0 0 30 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M18.7344 4.80957H26.2004L29.0001 12.4286V18.1428H25.2205"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M19.6624 18.1426H9.86328"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M4.26637 18.1428H1V1H18.7317V11.9523"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M21.9922 8.14258V11.4759H25.2586"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M7.06733 20.9999C8.61359 20.9999 9.86708 19.7207 9.86708 18.1428C9.86708 16.5648 8.61359 15.2856 7.06733 15.2856C5.52107 15.2856 4.26758 16.5648 4.26758 18.1428C4.26758 19.7207 5.52107 20.9999 7.06733 20.9999Z"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M22.4638 20.9999C24.0101 20.9999 25.2636 19.7207 25.2636 18.1428C25.2636 16.5648 24.0101 15.2856 22.4638 15.2856C20.9176 15.2856 19.6641 16.5648 19.6641 18.1428C19.6641 19.7207 20.9176 20.9999 22.4638 20.9999Z"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
    </svg>
  )
}

export default DeliveryIcon

```


[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 order-placed/react/Icons/Forbidden.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

const Forbidden: FC = () => (
  <svg
    width="72"
    height="60"
    viewBox="0 0 72 60"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="72" height="60" rx="4" fill="#F71963" />
    <path
      d="M6 15H66V50C66 52.2091 64.2091 54 62 54H10C7.79086 54 6 52.2091 6 50V15Z"
      fill="white"
    />
    <circle cx="36" cy="34" r="9.5" stroke="#142032" strokeWidth="3" />
    <path d="M42 28L29.2721 40.7279" stroke="#142032" strokeWidth="3" />
    <circle cx="24.5" cy="7.5" r="2.5" fill="#FFE6E6" />
    <circle cx="16.5" cy="7.5" r="2.5" fill="#FFE6E6" />
    <circle cx="8.5" cy="7.5" r="2.5" fill="#FFE6E6" />
  </svg>
)

export default Forbidden

```


[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 order-placed/react/Icons/Success.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { calcIconSize } from './utils'

const iconBase = {
  height: 42,
  width: 42,
}

const SuccessIcon: FC<IconProps> = ({ color = 'currentColor', size = 42 }) => {
  const newSize = calcIconSize(iconBase, size)

  return (
    <svg
      data-testid="sucessIcon"
      width={newSize.width}
      height={newSize.height}
      viewBox="0 0 42 42"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.666 22.333L16.9993 27.6663L30.3327 14.333"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M21 41C32.0457 41 41 32.0457 41 21C41 9.95431 32.0457 1 21 1C9.95431 1 1 9.95431 1 21C1 32.0457 9.95431 41 21 41Z"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
    </svg>
  )
}

export default SuccessIcon

```


[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 order-placed/react/Icons/PickUpIcon.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { calcIconSize } from './utils'

const iconBase = {
  height: 24,
  width: 26,
}

const PickUpIcon: FC<IconProps> = ({ color = 'currentColor', size = 26 }) => {
  const newSize = calcIconSize(iconBase, size)

  return (
    <svg
      width={newSize.width}
      height={newSize.height}
      viewBox="0 0 26 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M21.6575 4.79333H4.17969"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M10.9273 14.276H6.95508V18.0691H10.9273V14.276Z"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M3.38672 13.5171V22.9999H14.5089V16.1723H19.2756V22.9999H22.4534V13.5171"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
      <path
        d="M21.6556 4.79314V1H4.17778V4.79314L1 8.58627C1 10.0527 2.24489 11.2415 3.78056 11.2415C4.66795 11.2415 5.45604 10.8432 5.96528 10.2253C6.47452 10.8432 7.26261 11.2415 8.15 11.2415C9.16331 11.2415 10.0475 10.7222 10.5333 9.94877C11.0191 10.7222 11.9034 11.2415 12.9167 11.2415C13.93 11.2415 14.8142 10.7222 15.3 9.94877C15.7858 10.7222 16.67 11.2415 17.6833 11.2415C18.5707 11.2415 19.3588 10.8432 19.8681 10.2253C20.3773 10.8432 21.1654 11.2415 22.0528 11.2415C23.5884 11.2415 24.8333 10.0527 24.8333 8.58627L21.6556 4.79314Z"
        stroke={color}
        strokeWidth="2"
        strokeMiterlimit="10"
        strokeLinecap="square"
      />
    </svg>
  )
}

export default PickUpIcon

```


[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 order-placed/react/Icons/PrinterIcon.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

import { calcIconSize } from './utils'

const iconBase = {
  height: 16,
  width: 16,
}

const PrinterIcon: FC<IconProps> = ({ color = 'currentColor', size = 16 }) => {
  const newSize = calcIconSize(iconBase, size)

  return (
    <svg
      width={newSize.width}
      height={newSize.height}
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M13 0H3V3H13V0Z" fill={color} />
      <path
        d="M15 5H1C0.4 5 0 5.4 0 6V12C0 12.6 0.4 13 1 13H3V15C3 15.6 3.4 16 4 16H12C12.6 16 13 15.6 13 15V13H15C15.6 13 16 12.6 16 12V6C16 5.4 15.6 5 15 5ZM11 14H5V9H11V14Z"
        fill={color}
      />
    </svg>
  )
}

export default PrinterIcon

```


[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 order-placed/react/Icons/utils.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const calcIconSize = (
  iconBase: { height: number; width: number },
  newSize: number
) => {
  const isHorizontal = iconBase.width >= iconBase.height

  const width = isHorizontal
    ? newSize
    : (newSize * iconBase.width) / iconBase.height

  const height = !isHorizontal
    ? newSize
    : (newSize * iconBase.height) / iconBase.width

  return { width, height }
}

export const baseClassname = (name: string, variation?: string) =>
  `vtex__icon-${name} ${variation ? `vtex__icon-${name}--${variation}` : ''}`

```


[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 order-placed/react/Icons/NotFound.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

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

const NotFound: FC = () => (
  <svg
    width="72"
    height="60"
    viewBox="0 0 72 60"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="72" height="60" rx="4" fill="#F71963" />
    <path
      d="M6 15H66V50C66 52.2091 64.2091 54 62 54H10C7.79086 54 6 52.2091 6 50V15Z"
      fill="white"
    />
    <circle cx="35.5" cy="32.5" r="9" stroke="#142032" strokeWidth="3" />
    <path
      d="M33 30L37.9497 34.9497"
      stroke="#142032"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M43 40L46.8995 43.8995"
      stroke="#142032"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M33 35L37.9497 30.0503"
      stroke="#142032"
      strokeWidth="3"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <circle cx="24.5" cy="7.5" r="2.5" fill="#FFE6E6" />
    <circle cx="16.5" cy="7.5" r="2.5" fill="#FFE6E6" />
    <circle cx="8.5" cy="7.5" r="2.5" fill="#FFE6E6" />
  </svg>
)

export default NotFound

```


[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 order-placed/react/mocks/graphql/forbidden.json from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "data": { "orderGroup": null },
  "errors": [
    {
      "message": "403: Forbidden",
      "path": ["orderGroup"],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "response": {
          "url": "http://storecomponents.vtexcommercestable.com.br/api/checkout/pub/orders/order-group/9842105225286",
          "status": 403,
          "statusText": "Forbidden",
          "body": {
            "Fields": {},
            "operationId": "909a2d07-1033-48a6-b1d4-5f7687f5ef11",
            "error": {
              "code": "1",
              "message": "Order Group 9842105225286 Forbidden",
              "exception": null
            }
          }
        },
        "exception": {
          "message": "403: Forbidden",
          "name": "Error",
          "stack": "Error: 403: Forbidden\n    at OrdersDataSource.<anonymous> (/usr/local/data/service/node_modules/apollo-datasource-rest/src/RESTDataSource.ts:127:15)\n    at Generator.next (<anonymous>)\n    at /usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:7:71\n    at new Promise (<anonymous>)\n    at __awaiter (/usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:3:12)\n    at OrdersDataSource.errorFromResponse (/usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:69:16)\n    at OrdersDataSource.<anonymous> (/usr/local/data/service/node_modules/apollo-datasource-rest/src/RESTDataSource.ts:97:24)\n    at Generator.next (<anonymous>)\n    at /usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:7:71\n    at new Promise (<anonymous>)\n    at __awaiter (/usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:3:12)\n    at OrdersDataSource.didReceiveResponse (/usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:45:16)\n    at OrdersDataSource.<anonymous> (/usr/local/data/service/node_modules/apollo-datasource-rest/src/RESTDataSource.ts:248:29)\n    at Generator.next (<anonymous>)\n    at fulfilled (/usr/local/data/service/node_modules/apollo-datasource-rest/dist/RESTDataSource.js:4:58)\n    at processTicksAndRejections (internal/process/task_queues.js:85:5)",
          "extensions": {
            "code": "E_HTTP_403",
            "response": {
              "status": 403,
              "url": "http://storecomponents.vtexcommercestable.com.br/api/checkout/pub/orders/order-group/9842105225286"
            }
          }
        }
      },
      "name": "GraphQLError",
      "forwardedHost": "kiwi--storecomponents.myvtex.com",
      "forwardedProto": "http",
      "operationId": "107d4ed0-5211-4d15-bff1-ffc347e2c1a4",
      "query": {
        "query": "query getOrderGroup($orderGroup: String) {\n  orderGroup(orderGroup: $orderGroup) {\n    orders {\n      allowCancellation\n      orderId\n      deliveryParcels {\n        address {\n          addressType\n          receiverName\n          state\n          street\n          number\n          city\n          postalCode\n          neighborhood\n          complement\n          country\n          __typename\n        }\n        price\n        pickupFriendlyName\n        seller\n        items {\n          id\n          skuName\n          name\n          price\n          listPrice\n          isGift\n          quantity\n          attachments {\n            content\n            name\n            __typename\n          }\n          bundleItems {\n            id\n            attachments {\n              content\n              name\n              __typename\n            }\n            name\n            price\n            quantity\n            imageUrl\n            measurementUnit\n            unitMultiplier\n            __typename\n          }\n          seller\n          imageUrl\n          detailUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        selectedSla\n        selectedSlaObj {\n          id\n          name\n          shippingEstimate\n          deliveryWindow {\n            endDateUtc\n            startDateUtc\n            __typename\n          }\n          price\n          deliveryChannel\n          pickupStoreInfo {\n            additionalInfo\n            address {\n              addressId\n              addressType\n              receiverName\n              street\n              number\n              city\n              state\n              postalCode\n              neighborhood\n              complement\n              country\n              __typename\n            }\n            friendlyName\n            isPickupStore\n            __typename\n          }\n          __typename\n        }\n        shippingEstimate\n        shippingEstimateDate\n        deliveryWindow {\n          endDateUtc\n          startDateUtc\n          __typename\n        }\n        deliveryChannel\n        selectedSlaType\n        __typename\n      }\n      pickUpParcels {\n        address {\n          addressType\n          receiverName\n          state\n          street\n          number\n          city\n          postalCode\n          neighborhood\n          complement\n          country\n          __typename\n        }\n        price\n        pickupFriendlyName\n        seller\n        items {\n          id\n          skuName\n          name\n          price\n          listPrice\n          isGift\n          quantity\n          attachments {\n            content\n            name\n            __typename\n          }\n          bundleItems {\n            id\n            attachments {\n              content\n              name\n              __typename\n            }\n            name\n            price\n            quantity\n            imageUrl\n            measurementUnit\n            unitMultiplier\n            __typename\n          }\n          seller\n          imageUrl\n          detailUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        selectedSla\n        selectedSlaObj {\n          id\n          name\n          shippingEstimate\n          deliveryWindow {\n            endDateUtc\n            startDateUtc\n            __typename\n          }\n          price\n          deliveryChannel\n          pickupStoreInfo {\n            additionalInfo\n            address {\n              addressId\n              addressType\n              receiverName\n              street\n              number\n              city\n              state\n              postalCode\n              neighborhood\n              complement\n              country\n              __typename\n            }\n            friendlyName\n            isPickupStore\n            __typename\n          }\n          __typename\n        }\n        shippingEstimate\n        shippingEstimateDate\n        deliveryWindow {\n          endDateUtc\n          startDateUtc\n          __typename\n        }\n        deliveryChannel\n        selectedSlaType\n        __typename\n      }\n      takeAwayParcels {\n        address {\n          addressType\n          receiverName\n          state\n          street\n          number\n          city\n          postalCode\n          neighborhood\n          complement\n          country\n          __typename\n        }\n        price\n        pickupFriendlyName\n        seller\n        items {\n          id\n          skuName\n          name\n          price\n          listPrice\n          isGift\n          quantity\n          attachments {\n            content\n            name\n            __typename\n          }\n          bundleItems {\n            id\n            attachments {\n              content\n              name\n              __typename\n            }\n            name\n            price\n            quantity\n            imageUrl\n            measurementUnit\n            unitMultiplier\n            __typename\n          }\n          seller\n          imageUrl\n          detailUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        selectedSla\n        selectedSlaObj {\n          id\n          name\n          shippingEstimate\n          deliveryWindow {\n            endDateUtc\n            startDateUtc\n            __typename\n          }\n          price\n          deliveryChannel\n          pickupStoreInfo {\n            additionalInfo\n            address {\n              addressId\n              addressType\n              receiverName\n              street\n              number\n              city\n              state\n              postalCode\n              neighborhood\n              complement\n              country\n              __typename\n            }\n            friendlyName\n            isPickupStore\n            __typename\n          }\n          __typename\n        }\n        shippingEstimate\n        shippingEstimateDate\n        deliveryWindow {\n          endDateUtc\n          startDateUtc\n          __typename\n        }\n        deliveryChannel\n        selectedSlaType\n        __typename\n      }\n      items {\n        id\n        skuName\n        name\n        price\n        listPrice\n        isGift\n        quantity\n        attachments {\n          content\n          name\n          __typename\n        }\n        bundleItems {\n          id\n          attachments {\n            content\n            name\n            __typename\n          }\n          name\n          price\n          quantity\n          imageUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        seller\n        imageUrl\n        detailUrl\n        measurementUnit\n        unitMultiplier\n        __typename\n      }\n      sellers {\n        id\n        name\n        __typename\n      }\n      totals {\n        id\n        name\n        value\n        __typename\n      }\n      clientProfileData {\n        email\n        firstName\n        lastName\n        document\n        documentType\n        phone\n        __typename\n      }\n      paymentData {\n        transactions {\n          transactionId\n          payments {\n            id\n            paymentSystem\n            paymentSystemName\n            value\n            installments\n            lastDigits\n            group\n            dueDate\n            url\n            bankIssuedInvoiceBarCodePNG\n            bankIssuedInvoiceIdentificationNumber\n            connectorResponses\n            __typename\n          }\n          __typename\n        }\n        __typename\n      }\n      storePreferencesData {\n        countryCode\n        currencyCode\n        __typename\n      }\n      creationDate\n      value\n      __typename\n    }\n    totalPickUpParcels {\n      address {\n        addressType\n        receiverName\n        state\n        street\n        number\n        city\n        postalCode\n        neighborhood\n        complement\n        country\n        __typename\n      }\n      price\n      pickupFriendlyName\n      seller\n      items {\n        id\n        skuName\n        name\n        price\n        listPrice\n        isGift\n        quantity\n        attachments {\n          content\n          name\n          __typename\n        }\n        bundleItems {\n          id\n          attachments {\n            content\n            name\n            __typename\n          }\n          name\n          price\n          quantity\n          imageUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        seller\n        imageUrl\n        detailUrl\n        measurementUnit\n        unitMultiplier\n        __typename\n      }\n      selectedSla\n      selectedSlaObj {\n        id\n        name\n        shippingEstimate\n        deliveryWindow {\n          endDateUtc\n          startDateUtc\n          __typename\n        }\n        price\n        deliveryChannel\n        pickupStoreInfo {\n          additionalInfo\n          address {\n            addressId\n            addressType\n            receiverName\n            street\n            number\n            city\n            state\n            postalCode\n            neighborhood\n            complement\n            country\n            __typename\n          }\n          friendlyName\n          isPickupStore\n          __typename\n        }\n        __typename\n      }\n      shippingEstimate\n      shippingEstimateDate\n      deliveryWindow {\n        endDateUtc\n        startDateUtc\n        __typename\n      }\n      deliveryChannel\n      selectedSlaType\n      __typename\n    }\n    totalDeliveryParcels {\n      address {\n        addressType\n        receiverName\n        state\n        street\n        number\n        city\n        postalCode\n        neighborhood\n        complement\n        country\n        __typename\n      }\n      price\n      pickupFriendlyName\n      seller\n      items {\n        id\n        skuName\n        name\n        price\n        listPrice\n        isGift\n        quantity\n        attachments {\n          content\n          name\n          __typename\n        }\n        bundleItems {\n          id\n          attachments {\n            content\n            name\n            __typename\n          }\n          name\n          price\n          quantity\n          imageUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        seller\n        imageUrl\n        detailUrl\n        measurementUnit\n        unitMultiplier\n        __typename\n      }\n      selectedSla\n      selectedSlaObj {\n        id\n        name\n        shippingEstimate\n        deliveryWindow {\n          endDateUtc\n          startDateUtc\n          __typename\n        }\n        price\n        deliveryChannel\n        pickupStoreInfo {\n          additionalInfo\n          address {\n            addressId\n            addressType\n            receiverName\n            street\n            number\n            city\n            state\n            postalCode\n            neighborhood\n            complement\n            country\n            __typename\n          }\n          friendlyName\n          isPickupStore\n          __typename\n        }\n        __typename\n      }\n      shippingEstimate\n      shippingEstimateDate\n      deliveryWindow {\n        endDateUtc\n        startDateUtc\n        __typename\n      }\n      deliveryChannel\n      selectedSlaType\n      __typename\n    }\n    totalTakeAwayParcels {\n      address {\n        addressType\n        receiverName\n        state\n        street\n        number\n        city\n        postalCode\n        neighborhood\n        complement\n        country\n        __typename\n      }\n      price\n      pickupFriendlyName\n      seller\n      items {\n        id\n        skuName\n        name\n        price\n        listPrice\n        isGift\n        quantity\n        attachments {\n          content\n          name\n          __typename\n        }\n        bundleItems {\n          id\n          attachments {\n            content\n            name\n            __typename\n          }\n          name\n          price\n          quantity\n          imageUrl\n          measurementUnit\n          unitMultiplier\n          __typename\n        }\n        seller\n        imageUrl\n        detailUrl\n        measurementUnit\n        unitMultiplier\n        __typename\n      }\n      selectedSla\n      selectedSlaObj {\n        id\n        name\n        shippingEstimate\n        deliveryWindow {\n          endDateUtc\n          startDateUtc\n          __typename\n        }\n        price\n        deliveryChannel\n        pickupStoreInfo {\n          additionalInfo\n          address {\n            addressId\n            addressType\n            receiverName\n            street\n            number\n            city\n            state\n            postalCode\n            neighborhood\n            complement\n            country\n            __typename\n          }\n          friendlyName\n          isPickupStore\n          __typename\n        }\n        __typename\n      }\n      shippingEstimate\n      shippingEstimateDate\n      deliveryWindow {\n        endDateUtc\n        startDateUtc\n        __typename\n      }\n      deliveryChannel\n      selectedSlaType\n      __typename\n    }\n    analyticsData\n    __typename\n  }\n}\n",
        "variables": "{\"orderGroup\":\"9842105225286\"}",
        "operationName": "getOrderGroup",
        "senderApp": "vtex.order-placed@1.7.1",
        "providerApp": "vtex.order-placed-graphql@1.8.1"
      },
      "requestId": "6f56e4ea49564337a2c791e4177781d2",
      "pathName": "orderGroup"
    }
  ]
}

```