[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/not-found.json from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "data": { "orderGroup": null },
  "errors": [
    {
      "message": "404: Not Found",
      "path": ["orderGroup"],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "response": {
          "url": "http://storecomponents.vtexcommercestable.com.br/api/checkout/pub/orders/order-group/9842105225286",
          "status": 404,
          "statusText": "Not Found",
          "body": {
            "Fields": {},
            "operationId": "909a2d07-1033-48a6-b1d4-5f7687f5ef11",
            "error": {
              "code": "1",
              "message": "Order Group 9842105225286 not found",
              "exception": null
            }
          }
        },
        "exception": {
          "message": "404: Not Found",
          "name": "Error",
          "stack": "Error: 404: Not Found\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_404",
            "response": {
              "status": 404,
              "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"
    }
  ]
}

```


[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/BankInvoice/Embedded.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { ButtonWithIcon, IconCaretDown, IconCaretUp } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

interface Props {
  url: string
}

const CSS_HANDLES = [
  'bankInvoiceEmbedWrapper',
  'bankInvoiceEmbedBackground',
  'bankInvoiceEmbed',
]

const Embedded: FC<Props> = ({ url }) => {
  const handles = useCssHandles(CSS_HANDLES)
  const [isOpen, setIsOpen] = useState(false)

  const toggle = () => setIsOpen(!isOpen)

  return (
    <div className={`${handles.bankInvoiceEmbedWrapper} b--muted-4 ba br3 bw1`}>
      <div className={`${handles.bankInvoiceEmbedBackground} bg-muted-1`}>
        <embed
          width="80%"
          height={isOpen ? 900 : 300}
          src={url}
          data-testid="embedded-bank-invoice"
          className={`${handles.bankInvoiceEmbed} db center`}
        />
      </div>
      {isOpen ? (
        <ButtonWithIcon
          icon={<IconCaretUp />}
          variation="tertiary"
          onClick={toggle}
          block
        >
          <FormattedMessage id="store/header.bankinvoice.embeded.collapse" />
        </ButtonWithIcon>
      ) : (
        <ButtonWithIcon
          icon={<IconCaretDown />}
          variation="tertiary"
          onClick={toggle}
          block
        >
          <FormattedMessage id="store/header.bankinvoice.embeded.expand" />
        </ButtonWithIcon>
      )}
    </div>
  )
}

export default Embedded

```


[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/BankInvoice/BarCode.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import Clipboard from 'react-clipboard.js'
import { FormattedMessage } from 'react-intl'
import { Button } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

import { getLoginUrl } from '../../utils'

interface Props {
  barCodeNumber: string
}

const CSS_HANDLES = [
  'barCodeWrapper',
  'barCodeNumber',
  'barCodeCopyButtonWrapper',
]

const BarCode: FC<Props> = ({ barCodeNumber }) => {
  const handles = useCssHandles(CSS_HANDLES)
  const isEncrypted = barCodeNumber.includes('*')

  return (
    <div
      data-testid="bank-invoice-barcode"
      className={`${handles.barCodeWrapper} flex-l b--muted-4 ba br3 bw1`}
    >
      <div
        className={`${handles.barCodeNumber} tc ph7 ph9-m pv4 lh-copy c-on-base`}
      >
        {barCodeNumber}
      </div>
      {isEncrypted ? (
        <div
          className={`${handles.barCodeCopyButtonWrapper} b--muted-4 bl-l bt bt-0-l bw1 flex flex-row-l flex-column`}
        >
          <Button variation="tertiary" href={getLoginUrl()} target="_blank">
            <FormattedMessage id="store/header.bankinvoice.copy" />
          </Button>
        </div>
      ) : (
        <Clipboard
          component="div"
          data-clipboard-text={barCodeNumber}
          className={`${handles.barCodeCopyButtonWrapper} b--muted-4 bl-l bt bt-0-l bw1 flex flex-row-l flex-column`}
        >
          <Button variation="tertiary">
            <FormattedMessage id="store/header.bankinvoice.copy" />
          </Button>
        </Clipboard>
      )}
    </div>
  )
}

export default BarCode

```


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

[Assistant]
Here's the implementation:

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

import BundleInfo from './BundleItems'
import Attachment from './Attachments'
import Product from './Product'

interface Props {
  products: OrderItem[]
}

const CSS_HANDLES = ['productList', 'productListItem']

const ProductList: FC<Props> = ({ products }) => {
  const handles = useCssHandles(CSS_HANDLES)
  return (
    <ul className={`${handles.productList} w-60-l w-100 list pl0`}>
      {products.map((product) => (
        <li
          key={product.id}
          className={`${handles.productListItem} db bb b--muted-4 mb7 pb7`}
        >
          <Product product={product} />
          <BundleInfo product={product} />
          <Attachment product={product} />
        </li>
      ))}
    </ul>
  )
}

export default ProductList

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { ProductImage } from 'vtex.order-details'
import { useCssHandles } from 'vtex.css-handles'
import { Link } from 'vtex.render-runtime'

import FormattedPrice from '../FormattedPrice'

interface Props {
  product: OrderItem
}

const CSS_HANDLES = [
  'productWrapper',
  'productImageColumn',
  'productImageWrapper',
  'productInfoColumn',
  'productName',
  'productMeasurementUnit',
  'productQuantity',
  'productPrice',
]

const Product: FC<Props> = ({ product }) => {
  const {
    detailUrl,
    imageUrl,
    measurementUnit,
    name,
    sellingPrice,
    quantity,
    unitMultiplier,
    isGift,
  } = product
  const handles = useCssHandles(CSS_HANDLES)
  const showMeasurementUnit = unitMultiplier !== 1 || measurementUnit !== 'un'
  const productSubtotal = sellingPrice * quantity

  return (
    <div className={`${handles.productWrapper} w-100 flex-m tc tl-m`}>
      <div className={`${handles.productImageColumn} mr6-m mb6-s mb0-m`}>
        <div className={`${handles.productImageWrapper} w4 h4 center`}>
          <ProductImage url={imageUrl} alt={name} />
        </div>
      </div>
      <div
        className={`${handles.productInfoColumn} flex-m flex-column justify-between lh-copy`}
      >
        <Link
          to={detailUrl}
          className={`${handles.productName} t-body c-muted-1 no-underline`}
          target="_blank"
          rel="noopener noreferrer"
        >
          {name}
          {showMeasurementUnit && (
            <small
              className={`${handles.productMeasurementUnit} db mt3 t-mini c-on-base`}
            >
              {`${unitMultiplier} ${measurementUnit}`}
            </small>
          )}
        </Link>
        <small
          className={`${handles.productQuantity} t-mini c-muted-1 mt3 mt0-m`}
        >
          <FormattedMessage
            id="store/products.quantity"
            values={{ quantity }}
          />
        </small>
      </div>
      <div className={`${handles.productPrice} ml-auto mt3 mt0-m`}>
        {isGift ? (
          <FormattedMessage id="store/products.isGift" />
        ) : (
          <FormattedPrice value={productSubtotal} />
        )}
      </div>
    </div>
  )
}

export default Product

```


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

[User] Show me the implementation of order-placed/react/components/ProductList/BundleItems.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { ProductImage } from 'vtex.order-details'

import FormattedPrice from '../FormattedPrice'
import AttachmentAccordion from './AttachmentAccordion'

interface Props {
  product: OrderItem
}

const BundleItems: FC<Props> = ({ product }) => {
  const { bundleItems } = product

  if (!bundleItems?.length) {
    return null
  }

  return (
    <Fragment>
      {bundleItems.map((bundleItem) => {
        const isMessage = bundleItem?.attachments?.[0]?.name === 'message'
        const content = isMessage
          ? [bundleItem.attachments[0].content.text]
          : ([] as string[]).concat(
              ...bundleItem.attachments.map((attachmentItem) => {
                return Object.keys(attachmentItem.content).map(
                  (key) => `${key}: ${attachmentItem.content[key]}`
                )
              })
            )

        return (
          <AttachmentAccordion
            key={bundleItem.id}
            beforeTitleLabel={
              bundleItem.imageUrl && (
                <ProductImage url={bundleItem.imageUrl} alt={bundleItem.name} />
              )
            }
            titleLabel={bundleItem.name}
            toggleLabel={<FormattedPrice value={bundleItem.price} />}
            content={content}
          />
        )
      })}
    </Fragment>
  )
}

export default BundleItems

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useState, ReactNode } from 'react'
import { IconCaretDown, IconCaretUp } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

interface Props {
  content: ReactNode[]
  beforeTitleLabel?: ReactNode
  titleLabel: ReactNode
  toggleLabel?: ReactNode
}

const CSS_HANDLES = [
  'attachmentWrapper',
  'attachmentHeader',
  'attachmentTitle',
  'attachmentToggleWrapper',
  'attachmentToggleButton',
  'attachmentToggleLabel',
  'attachmentContent',
  'attachmentContentItem',
]

const AttachmentAccordion: FC<Props> = ({
  beforeTitleLabel,
  titleLabel,
  toggleLabel,
  content,
}) => {
  const handles = useCssHandles(CSS_HANDLES)
  const [isOpen, setIsOpen] = useState(false)

  const filteredContent = content.filter(Boolean)
  const hasContent = filteredContent.length > 0

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key !== ' ' && e.key !== 'Enter') {
      return
    }
    e.preventDefault()
    setIsOpen(!isOpen)
  }

  const attachmentWrapperClass = `${handles.attachmentWrapper} mt7 bg-muted-5 br2`
  const attachmentHeaderClass = `${handles.attachmentHeader} flex pa5 justify-between items-center`
  const attachmentTitleClass = `${handles.attachmentTitle} c-on-base`
  const attachmentToggleWrapperClass = `${handles.attachmentToggleWrapper} flex items-center`
  const attachmentToggleLabelClass = `${handles.attachmentToggleLabel}`
  const attachmentToggleButtonClass = `${handles.attachmentToggleButton} c-action-primary ml5`
  const attachmentContentClass = `${handles.attachmentContent} ph5 pv3`
  const attachmentContentItemClass = `${handles.attachmentContentItem} mb4 c-muted-1`

  // if it has no attachment content, no accordion is needed
  if (!hasContent) {
    return (
      <div className={attachmentWrapperClass}>
        <div className={attachmentHeaderClass}>
          {beforeTitleLabel}
          <span className={attachmentTitleClass}>{titleLabel}</span>
          <div className={attachmentToggleWrapperClass}>
            <div className={attachmentToggleLabelClass}>{toggleLabel}</div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className={attachmentWrapperClass} aria-expanded={isOpen}>
      <div
        className={attachmentHeaderClass}
        role="button"
        tabIndex={0}
        onKeyDown={handleKeyDown}
        onClick={() => setIsOpen(!isOpen)}
      >
        {beforeTitleLabel}
        <span className={attachmentTitleClass}>{titleLabel}</span>
        <div className={attachmentToggleWrapperClass}>
          <div className={attachmentToggleLabelClass}>{toggleLabel}</div>
          {hasContent && (
            <div className={attachmentToggleButtonClass}>
              {isOpen ? <IconCaretUp /> : <IconCaretDown />}
            </div>
          )}
        </div>
      </div>
      {hasContent && (
        <div hidden={!isOpen} className={attachmentContentClass}>
          {filteredContent.map((line, i) => (
            <div key={i} className={attachmentContentItemClass}>
              {line}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export default AttachmentAccordion

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment, ReactNode } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'

import { isSubscription, getSubscriptionInfo } from '../../utils'
import AttachmentAccordion from './AttachmentAccordion'

interface Props {
  product: OrderItem
}

const ProductAttachment: FC<Props> = ({ product }) => {
  const intl = useIntl()
  const { attachments } = product

  if (!attachments?.length) {
    return null
  }

  return (
    <Fragment>
      {attachments.map((attachmentItem) => {
        let content: string[]
        let titleLabel: string | ReactNode
        let toggleLabel: string | ReactNode

        if (isSubscription(attachmentItem)) {
          const { subsFrequency, subsPurchaseDay } = getSubscriptionInfo(
            attachmentItem,
            intl
          )
          titleLabel = (
            <FormattedMessage id="store/items.attachments.subscription" />
          )
          content = [subsFrequency, subsPurchaseDay]
        } else {
          titleLabel = attachmentItem.name
          toggleLabel = <FormattedMessage id="store/order.totals.pickup.free" />
          content = Object.keys(attachmentItem.content).map(
            (key) => `${key}: ${attachmentItem.content[key]}`
          )
        }

        return (
          <AttachmentAccordion
            key={attachmentItem.name}
            titleLabel={titleLabel}
            toggleLabel={toggleLabel}
            content={content}
          />
        )
      })}
    </Fragment>
  )
}

export default ProductAttachment

```


[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/Errors/ForbiddenError.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { Button } from 'vtex.styleguide'
import React, { FC } from 'react'
import { FormattedMessage, defineMessages } from 'react-intl'
import { Link } from 'vtex.render-runtime'

import ForbiddenIcon from '../../Icons/Forbidden'
import ErrorMessage from './ErrorMessage'

const messages = defineMessages({
  notLoggedInTitle: {
    id: 'store/order.error.not-logged-in.title',
    defaultMessage: '',
  },
  notLoggedInMessage: {
    id: 'store/order.error.not-logged-in.message',
    defaultMessage: '',
  },
})

const ForbiddenError: FC = () => {
  return (
    <ErrorMessage
      icon={<ForbiddenIcon />}
      errorId={messages.notLoggedInTitle.id}
      messageId={messages.notLoggedInMessage.id}
    >
      <Link to={`/login?returnUrl=${window.location.href}`}>
        <Button>
          <FormattedMessage id="store/go-to-login" />
        </Button>
      </Link>
    </ErrorMessage>
  )
}

export default ForbiddenError

```


[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/Errors/ErrorMessage.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactNode, FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

interface Props {
  errorId: string
  messageId?: string
  children?: ReactNode
  icon: ReactNode
}

const CSS_HANDLES = ['errorWrapper', 'errorTitle', 'errorMessage']

const ErrorMessage: FC<Props> = ({ icon, errorId, messageId, children }) => {
  const handles = useCssHandles(CSS_HANDLES)
  return (
    <div className={`${handles.errorWrapper} tc`}>
      <main>
        {icon}
        <h2 className={`${handles.errorTitle} f2`}>
          <FormattedMessage id={errorId} />
        </h2>
        {typeof messageId === 'string' && (
          <p className={`${handles.errorMessage} center mb7 c-muted-1 lh-copy`}>
            <FormattedMessage id={messageId} />
          </p>
        )}
        {children}
      </main>
    </div>
  )
}

export default ErrorMessage

```


[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/Errors/InvalidError.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage, defineMessages } from 'react-intl'
import { Button } from 'vtex.styleguide'
import { Link } from 'vtex.render-runtime'

import ErrorMessage from './ErrorMessage'
import NotFound from '../../Icons/NotFound'

const messages = defineMessages({
  invalidTitle: {
    id: 'store/order.error.invalid.title',
    defaultMessage: '',
  },
  invalidMessage: {
    id: 'store/order.error.invalid.message',
    defaultMessage: '',
  },
})

const InvalidError: FC = () => {
  return (
    <ErrorMessage
      icon={<NotFound />}
      errorId={messages.invalidTitle.id}
      messageId={messages.invalidMessage.id}
    >
      <Link to="/">
        <Button>
          <FormattedMessage id="store/go-to-home" />
        </Button>
      </Link>
    </ErrorMessage>
  )
}

export default InvalidError

```


[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__/fixtures/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"
    }
  ]
}

```


[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__/fixtures/graphql/not-found.json from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "data": { "orderGroup": null },
  "errors": [
    {
      "message": "404: Not Found",
      "path": ["orderGroup"],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "response": {
          "url": "http://storecomponents.vtexcommercestable.com.br/api/checkout/pub/orders/order-group/9842105225286",
          "status": 404,
          "statusText": "Not Found",
          "body": {
            "Fields": {},
            "operationId": "909a2d07-1033-48a6-b1d4-5f7687f5ef11",
            "error": {
              "code": "1",
              "message": "Order Group 9842105225286 not found",
              "exception": null
            }
          }
        },
        "exception": {
          "message": "404: Not Found",
          "name": "Error",
          "stack": "Error: 404: Not Found\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_404",
            "response": {
              "status": 404,
              "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"
    }
  ]
}

```


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

[Assistant]
Here's the implementation:

```markdown
![plot](./assets/github-banner-1.png)

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

<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

## How it works

The **VTEX Speedy** app optimizes your store's performance by:

* Managing third-party scripts: delaying their execution or running them in web workers via Partytown integration.
* Pre-connecting and fetching the DNS reducing the time to connect to 3rd-party domains
* Prefetching pages, enhancing navigation for product listing pages (PLPs) and category views.

Moreover, **Speedy** leverages LCP (Largest Contentful Paint) and FCP (First Contentful Paint) metrics to ensure that third-party scripts do not impact page loading times.

### Speedy 3rd-party handling

![plot](./assets/speedy-workers1.png)

## Web Vitals

### Total Blocking Time

Delaying and running scripts on web workers reduces execution on the main thread, enhancing performance:

1) Each project should be carefully analyzed and configured based on specific needs.
2) Although third-party scripts can affect loading times, their impact must be precisely calibrated.

**Speedy offers the flexibility to customize the delay timing for each third-party script by domain.**

### Interaction to Next Paint

**Speedy** enhances the INP by proactively caching pages according to predefined rules

![plot](./assets/speedy-prefetch.png)

Initially, **Speedy** is set up to prefetch and preload Product Detail Page (PDP) URLs on Product Listing Page (PLP) views. However, this functionality can be extended to any hyperlink by assigning the "**speedy**" class to `<a></a>` tags or by adjusting the settings on the configuration page.

**Prefetch:** **Speedy** optimizes loading times by prefetching the SPA URL, thus caching the target URL in advance;
**Preload:** Taking a cue from Next.js, **Speedy** enhances navigation efficiency by preloading "next URLs," thereby signaling the browser to prioritize the target URL.

Example

```html
...
```

*It will recognize whatever string includes "speedy"*

## Integrations

### Partytown

[Partytown](https://github.com/BuilderIO/partytown) library is built into **Speedy** and that has been optimized to function flawlessly and to fully utilize its capability to execute scripts in service workers without any issues.

**To enable the integration you should check the flag in the App Management.**

### Pixel Server & Pixel Server UI

These enhancements boost **Speedy's** flexibility by allowing modifications such as configuring pixel apps to "text/partytown" for processing in web workers. This setup enables the orderly organization and rearrangement of pixel apps as needed.

## Settings

### TTFB, LCP & FCP improvement

While **Speedy** does not directly impact these metrics, we strongly recommend taking certain steps to enhance its performance:

You should change the overwrite cache settings:

1. Make sure the app are installed correctly:
* ```vtex-rewriter: >= 1.62.0```
* ```vtex.render-server:  >= 8.171.0```

```ssh
# List the apps or deps

vtex deps ls | grep render-server
vtex deps ls | grep rewriter

# Installing

vtex install vtex-rewriter@1.62.0
vtex install vtex.render-server@8.171.0

```
2. Enable the flag overwrite cache control settings on these apps and set the values like the image below:

**vtex.render-server**
![plot](./assets/vtex-render-server.jpg)
**vtex-rewriter**
![plot](./assets/vtex-rewriter.jpg)

**Example:**
* **Max-Age**: 300 (5 minutes) - VTEX default - we don't recommend modifying it;
* **Stale Revalidate overwrite**: 86400 (24 hours) - this metric is pretty subjective once you MUST calibrate it according to your needs;

By implementing these modifications, we will enhance the cache CDN by maintaining a version of the content for 24 hours. During this period, the `Max-Age` header will specify that the content can be served from the cache without revalidation for up to 24 hours. Concurrently, the `Stale-While-Revalidate` header will allow the CDN to serve stale content while it asynchronously fetches new content from the source (VTEX). This approach ensures that users receive content quickly while the most recent updates are being retrieved and stored.

❗**Make sure the 86400 seconds works, otherwise, lower values can be applicable**

### Potential Side Effects

❗ Using a long stale-cache if revalidate can bring some side effects like:
  - Delaying on price update (PLP and PDP)
  - Google Shopping mismatch prices

## Installing Speedy

1. Access the **Apps** section in your account's admin page and look for the **Speedy** box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and fill the additional information in the settings area
4. Click on **Save**.

**VTEX CLI**

```vtex install vtex.speedy@0.x```

## Setting up

You must need to set up speed to ensure that everything is running smoothly
After installing **Speedy**, follow this steps:

### 1) Partytown scripts (TBT)

1. Identify the 3rd-party scripts that are running into your site, we strongly recommend to use [Webpage Test](https://www.webpagetest.org/);
2. Once you get it, open the Pixel Render UI by accessing this URL: **/admin/pixel-server-ui/**
3. ❗❗❗Select **CAREFULLY** the Pixel Apps you want to run through *Speedy/Partytown*❗❗❗
4. Move the speedy to the top and DON'T check it as partytown

![plot](./assets/pixel-server.jpg)

4. Click on Save Button and test it

### 2) Speedy App Setup

Currently **Speedy** doesn't have a friendly UI to setup the config, the only way is to access the Settings on App Management:

```Access Admin > My Apps (App Management) > Type Speedy on the search```

**You need the Admin Access to save these settings**

![plot](./assets/speedy-config3.jpg)

### Time in seconds to push the 3rd-party
By the default, **Speedy** **delays 5s** when it identifies a 3rd script that could affect loading, here you can modify this option;

### List of 3rd-party to push

In this field you can provide a custom list of the domains that you want to push, or adding **0** the **Speedy** will only wait the LCP and FCP to run them.

***Pattern: domain,time-in-seconds;***
```
googletagmanager,0;onetrust.com,0;3rdparty.com,10;
```

We strongly recommend to let Google Tag Manager and Onetrust(or similar) with 0

### [PRECONNECT] List of domains to preconnect
List of 3rd-party domains to preconnect, by adding the domains here, **Speedy** will add the `<link ref="preconnect">` and `<link ref="dns-prefetch">` in order to speed up the loading time of all requested connections.

***Pattern: domain;domain;...***
```
googletagmanager;onetrust.com;3rdparty2.com;
```
### Enable Partytown Integration
Enables the partytown integration by providing the partytown global config

### Partytown Forward
The list of forward events that partytown handles, see [the documentation](https://partytown.builder.io/forwarding-events) for more details.

**Use comma to separate the values:** value1,value2...

### [BLACKLIST] List of domains to block
Speedy provides a feature to block the domains for testing purpose.

***Pattern: domain;domain;...***
```
googletagmanager;onetrust.com;3rdparty2.com;
```

### Prefetch Anchors

This flag enables or disables the **Prefetching Feature**.

### Queue Delay

This configuration impacts on the **Prefetching Feature**. The queue delay is the time in seconds for each element will take to process (prefetch and preload).

### Prefetch Rule

That's the rule that will check if the anchors should be cached, by default it's product-summary for the PLPs.

## Debugging

Passing `{{domain}}?speedDebug=true` or accessing the site through `{{account}}.myvtex.com` the **Speedy** Debug will be enabled and you can check the logs in the `Console`.

## Contributors ✨

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

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

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

```


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

[User] Show me the implementation of speedy/pixel/speedy_bundle.js from the speedy VTEX app.

[Assistant]
Here's the implementation:

```javascript
(()=>{function e(t){
return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e
}:function(e){
return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e
},e(t)}var t,n,r
function o(e,t){var n=Object.keys(e)
if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e)
t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),
n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){
var n=null!=arguments[t]?arguments[t]:{}
t%2?o(Object(n),!0).forEach((function(t){var r,o,i
r=e,o=t,i=n[t],(o=l(o))in r?Object.defineProperty(r,o,{"value":i,"enumerable":!0,"configurable":!0,
"writable":!0}):r[o]=i
})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){
Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t){
return function(e){if(Array.isArray(e)){return e}}(e)||function(e,t){
var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]
if(null!=n){var r,o,i,a,c=[],l=!0,u=!1
try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n){return}l=!1}else{
for(;!(l=(r=i.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0){}}}catch(e){u=!0,o=e}finally{try{
if(!l&&null!=n["return"]&&(a=n["return"](),Object(a)!==a)){return}}finally{if(u){throw o}}}return c}
}(e,t)||s(e,t)||function(){
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}()}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n]
r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)
}}function l(t){var n=function(t,n){if("object"!=e(t)||!t){return t}var r=t[Symbol.toPrimitive]
if(void 0!==r){var o=r.call(t,n||"default")
if("object"!=e(o)){return o}throw new TypeError("@@toPrimitive must return a primitive value.")}
return("string"===n?String:Number)(t)}(t,"string")
return"symbol"==e(n)?n:n+""}function u(e,t){
var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]
if(!n){if(Array.isArray(e)||(n=s(e))||t&&e&&"number"==typeof e.length){n&&(e=n)
var r=0,o=function(){}
return{"s":o,"n":function(){return r>=e.length?{"done":!0}:{"done":!1,"value":e[r++]}},
"e":function(e){throw e},"f":o}}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}var i,a=!0,c=!1
return{"s":function(){n=n.call(e)},"n":function(){var e=n.next()
return a=e.done,e},"e":function(e){c=!0,i=e},"f":function(){try{a||null==n["return"]||n["return"]()
}finally{if(c){throw i}}}}}function s(e,t){if(e){if("string"==typeof e){return f(e,t)}
var n=Object.prototype.toString.call(e).slice(8,-1)
return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0
}}function f(e,t){(null==t||t>e.length)&&(t=e.length)
for(var n=0,r=Array(t);n<t;n++){r[n]=e[n]}return r}
var d,p=!!(null!==(t=localStorage)&&void 0!==t&&t.getItem("speedyDebug")||window.location.search.includes("speedyDebug")||window.location.host.includes("myvtex")),y=!!(null!==(n=localStorage)&&void 0!==n&&n.getItem("linked")||window.location.search.includes("linked")),h=null===(r=window)||void 0===r||null===(r=r.location)||void 0===r?void 0:r.search.includes("gtm_debug")
if("{{settings.enablePartytown}}"=="true"){
var b=decodeURIComponent("{{settings.partytownForward}}").split(",")
window.partytown={"forward":b,"debug":p,"loadScriptsOnMainThread":(d=h?[/googletagmanager/g]:[],
function(e){if(Array.isArray(e)){return f(e)}}(d)||function(e){
if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"]){return Array.from(e)
}}(d)||s(d)||function(){
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}()),
"lib":y?"/_v/private/assets/v1/linked//vtex.speedy@".concat(window.speedy_version,"/public/~partytown/"):"/_v/public/assets/v1/published/vtex.speedy@".concat(window.speedy_version,"/public/~partytown/")
}}p&&localStorage.setItem("speedyDebug","true"),y&&localStorage.setItem("linked","true")
var g={"timeFromSettings":"{{settings.timeToPush3rdParty}}",
"block3rdParty":"{{settings.block3rdParty}}","customTimeToPush":"{{settings.customTimeToPush}}",
"blacklist":"{{settings.blacklist}}","preconnect":"{{settings.preconnect}}","account":"{{account}}",
"enableGA":"{{settings.enableGA}}","googleAnalyticsID":"{{settings.googleAnalyticsID}}",
"queueDelay":"{{settings.queueDelay}}","prefetchAnchors":"{{settings.prefetchAnchors}}",
"prefetchAnchorsDesktop":"{{settings.prefetchAnchorsDesktop}}",
"prefetchAnchorsMobile":"{{settings.prefetchAnchorsMobile}}",
"prefetchRule":"{{settings.prefetchRule}}","get":function(e,t){return g[e]?g[e]:t},
"logDebug":function(e){
console.debug.call(console,"%cSpeedy 🏃♂","background: #42b883; color: white; padding: 2px 3px; border-radius: 2px; font-size: 1em;",e)
},"debug":p},m=g.get("googleAnalyticsID","")
!function(){function e(){dataLayer.push(arguments)}if("true"===g.get("enableGA","false")){
var t=document.createElement("script")
g.logDebug("Google Analytics enabled"),t.src="https://www.googletagmanager.com/gtag/js?id=".concat(m),
t.setAttribute("defer",""),document.head.appendChild(t),window.dataLayer=window.dataLayer||[],
e("js",new Date),e("config",m)}}(),function(){
var e=10,t=g.get("timeToPush3rdParty",""),n=t.length>0?1e3*+t:1e3*e,r=!!g.get("block3rdParty","").length,o=g.get("customTimeToPush",""),i=g.get("blacklist",""),a=g.get("preconnect",""),c=new Set(decodeURIComponent(a).split(";")),l=function(){
return i.length?decodeURIComponent(i).split(";"):[]},s=[]
o.length>0&&(s=decodeURIComponent(o).split(";").map((function(e){var t=e.split(",")
return{"domain":t[0],"seconds":t[1]?1e3*t[1]:null}})))
var f,d=u(c)
try{for(d.s();!(f=d.n()).done;){var p=f.value
if(p.length>0){p=p.replace("https://","")
var y=document.createElement("link")
y.rel="preconnect",y.href="https://".concat(p)
var h=document.createElement("link")
h.rel="dns-prefetch",h.href="https://".concat(p),document.head.appendChild(y),document.head.appendChild(h)
}}}catch(e){d.e(e)}finally{d.f()}g.logDebug(["Pre Connect",c])
var b=["*.vtexassets.com","vtex.com","*.myvtex.com"]
function v(e,t,o,i){if("SCRIPT"===e.tagName&&(e.src&&e.src.length>0&&(e.setAttribute("defer",""),
e.removeAttribute("async")),e.src&&!function(e){
var t=e.match(/^(?:https?:\/\/)?(?:www\.)?([^/:?#]+)(?:[/:?#]|$)/i)
if(t&&t[1]){var n,r=u(b.map((function(e){
return RegExp("^".concat(e.replace(/\./g,"\\.").replace(/\*/g,".*"),"$"))})))
try{for(r.s();!(n=r.n()).done;){if(n.value.test(t)){return!0}}}catch(e){r.e(e)}finally{r.f()}
return!1}}(e.src))){var a,c,f=s.length>0&&null!==(a=null===(c=s.find((function(t){
return e.src.includes(t.domain)
})))||void 0===c?void 0:c.seconds)&&void 0!==a?a:n,d="true"===g.get("enableGA","false")&&m.length&&e.src.includes(m),p=l().find((function(t){
return e.src.includes(t)}))&&d
return g.logDebug("[3rd party] delaying ".concat(e.src," for ").concat(f/1e3,"s")),
setTimeout((function(){if(!r&&!p){if(SPEEDY.lcpLoaded){return t.call(o,e,i)}
var n=setInterval((function(){
SPEEDY.lcpLoaded&&(clearInterval(n),g.logDebug("[3rd party] ".concat(e.src," executed")),
t.call(o,e,i))}),50)}}),f)}return t.call(o,e,i)}window.SPEEDY={"DEFAULT_TIME_TO_PUSH":e,
"timeToPush":n,"whiteList":b,"timeFromSettings":t,"block3rdParty":r,"customTimeToPush":s,
"blacklist":l(),"preConnectData":a,"preConnectList":c,"lcpLoaded":!1,"fcpLoaded":!1,
"googleAnalyticsID":m}
var w=Element.prototype.appendChild,O=Element.prototype.insertBefore
Element.prototype.appendChild=function(e){return v(e,w,this)
},Element.prototype.insertBefore=function(e,t){return v(e,O,this,t)}}(),function(){
if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)){return SPEEDY.lcpLoaded=!0,
void(SPEEDY.fcpLoaded=!0)}new PerformanceObserver((function(e){
var t=e.getEntries("largest-contentful-paint"),n=e.getEntries("first-contentful-paint")
t&&(SPEEDY.lcpLoaded=!0),n&&(SPEEDY.fcpLoaded=!0)})).observe({
"entryTypes":["paint","largest-contentful-paint"]})}(),function(){
var e=window.history,t=e.pushState,n=e.replaceState
function r(e,t,n){var r=new CustomEvent("routeChange",{"detail":{"state":e,"title":t,"url":n}})
window.dispatchEvent(r)}e.pushState=function(e,n,o){t.apply(this,arguments),r(e,n,o)},
e.replaceState=function(e,t,o){n.apply(this,arguments),r(e,t,o)}}(),function(){
var e=1e3*parseFloat(g.get("queueDelay","1.5")),t=new(function(){function t(){!function(e,t){
if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}(this,t),
this.queue=[],this.running=!1}var n,r,o
return n=t,(r=[{"key":"add","value":function(e){this.queue.push(e),this.start()}},{"key":"start",
"value":function(){!this.running&&this.queue.length>0&&(this.running=!0,this.process())}},{
"key":"clear","value":function(){this.queue=[]}},{"key":"process","value":function(){var t=this
0!==this.queue.length?(this.queue.shift()(),setTimeout((function(){t.process()}),e)):this.running=!1
}}])&&c(n.prototype,r),o&&c(n,o),Object.defineProperty(n,"prototype",{"writable":!1}),t
}()),n=["appsEtag","blocks","blocksTree","components","contentMap","extensions","messages","page","pages","query","queryData","route","runtimeMeta","settings"].join(",")
function r(){var e=navigator.userAgent.toLowerCase()
return/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/.test(e)||window.innerWidth<=767?"phone":"desktop"
}function o(e){var o=decodeURIComponent(g.get("prefetchRule","product-summary")).split(",")
!g.get("prefetchAnchors","false")||"desktop"===r()&&"false"===g.get("prefetchAnchorsDesktop","false")||"phone"===r()&&"false"===g.get("prefetchAnchorsMobile","false")||Array.from(e.classList).find((function(e){
return o.some((function(t){return e.includes(t)}))||e.includes("speedy")}))&&t.add((function(){
var t=document.createElement("link")
t.rel="prefetch",t.href=e.href
var o=document.createElement("link")
o.rel="preload",o.as="fetch"
var c,l,u,s,f,d,p=(c="workspace",new URLSearchParams(window.location.search).get(c))
o.href=(l={"path":e.href,"query":i(i({},p?{"workspace":p}:{}),{},{"__pickRuntime":n,"__device":r()})
},
u=l.path,s=l.query,f=window.location.origin,(d=new URL(u,f)).search="",Object.entries(s).forEach((function(e){
var t=a(e,2),n=t[0],r=t[1]
void 0!==r&&d.searchParams.set(n,r)})),d.href.slice(f.length)),document.head.appendChild(t),
document.head.appendChild(o),g.logDebug("Prefetching ".concat(e.href))}))}
window.addEventListener("routeChange",(function(){t.clear()}))
var l=new MutationObserver((function(e){e.forEach((function(e){e.addedNodes.forEach((function(e){
1===e.nodeType&&"A"===e.tagName&&o(e),
1===e.nodeType&&e.querySelectorAll&&e.querySelectorAll("a").forEach((function(e){o(e)}))}))}))
})),u={"childList":!0,"subtree":!0}
document.addEventListener("DOMContentLoaded",(function(){l.observe(document.body,u),
document.body.querySelectorAll("a").forEach((function(e){o(e)}))}))}()})(),void(()=>{function e(t){
return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e
}:function(e){
return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e
},e(t)}function t(e,t){var n=Object.keys(e)
if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e)
t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),
n.push.apply(n,r)}return n}function n(e){for(var n=1;n<arguments.length;n++){
var o=null!=arguments[n]?arguments[n]:{}
n%2?t(Object(o),!0).forEach((function(t){r(e,t,o[t])
})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach((function(t){
Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function r(t,n,r){
return n=function(t){var n=function(t,n){if("object"!=e(t)||!t){return t}var r=t[Symbol.toPrimitive]
if(void 0!==r){var o=r.call(t,n||"default")
if("object"!=e(o)){return o}throw new TypeError("@@toPrimitive must return a primitive value.")}
return("string"===n?String:Number)(t)}(t,"string")
return"symbol"==e(n)?n:n+""}(n),n in t?Object.defineProperty(t,n,{"value":r,"enumerable":!0,
"configurable":!0,"writable":!0}):t[n]=r,t}function o(e,t){return function(e){if(Array.isArray(e)){
return e}}(e)||function(e,t){
var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]
if(null!=n){var r,o,i,a,c=[],l=!0,u=!1
try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n){return}l=!1}else{
for(;!(l=(r=i.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0){}}}catch(e){u=!0,o=e}finally{try{
if(!l&&null!=n["return"]&&(a=n["return"](),Object(a)!==a)){return}}finally{if(u){throw o}}}return c}
}(e,t)||function(e,t){if(e){if("string"==typeof e){return i(e,t)}
var n=Object.prototype.toString.call(e).slice(8,-1)
return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0
}}(e,t)||function(){
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}()}function i(e,t){(null==t||t>e.length)&&(t=e.length)
for(var n=0,r=Array(t);n<t;n++){r[n]=e[n]}return r}var a={"preserveBehavior":!1},c=function(e){
if("string"==typeof e){return[e,a]}var t=o(e,2),r=t[0],i=t[1],c=void 0===i?a:i
return[r,n(n({},a),c)]},l=Object.freeze(function(e){var t=new Set,n=[]
do{Object.getOwnPropertyNames(n).forEach((function(e){"function"==typeof n[e]&&t.add(e)}))
}while((n=Object.getPrototypeOf(n))!==Object.prototype)
return Array.from(t)}())
!function(e,t,n,r,i,a,u,s,f,d){
var p=arguments.length>10&&void 0!==arguments[10]?arguments[10]:e,y=arguments.length>11?arguments[11]:void 0
function h(){
y||(y=1,"/"==(u=(a.lib||"/~partytown/")+(a.debug?"debug/":""))[0]&&(f=t.querySelectorAll('script[type="text/partytown"]'),
r!=e?r.dispatchEvent(new CustomEvent("pt1",{"detail":e})):(s=setTimeout(g,999999999),
t.addEventListener("pt0",m),
i?b(1):n.serviceWorker?n.serviceWorker.register(u+(a.swPath||"partytown-sw.js"),{"scope":u
}).then((function(e){
e.active?b():e.installing&&e.installing.addEventListener("statechange",(function(e){
"activated"==e.target.state&&b()}))}),console.error):g())))}function b(n){
d=t.createElement(n?"script":"iframe"),e._pttab=Date.now(),n||(d.style.display="block",
d.style.width="0",d.style.height="0",d.style.border="0",d.style.visibility="hidden",
d.setAttribute("aria-hidden",!0)),
d.src=u+"partytown-"+(n?"atomics.js?v=0.10.1-dev1715631211675":"sandbox-sw.html?"+e._pttab),
t.querySelector(a.sandboxParent||"body").appendChild(d)}function g(n,i){for(m(),
r==e&&(a.forward||[]).map((function(t){var n=o(c(t),1)[0]
delete e[n.split(".")[0]]})),n=0;n<f.length;n++){
(i=t.createElement("script")).innerHTML=f[n].innerHTML,i.nonce=a.nonce,t.head.appendChild(i)}
d&&d.parentNode.removeChild(d)}function m(){clearTimeout(s)}
a=e.partytown||{},r==e&&(a.forward||[]).map((function(t){
var n=o(c(t),2),r=n[0],i=n[1].preserveBehavior
p=e,r.split(".").map((function(t,n,r){var o
p=p[r[n]]=n+1<r.length?p[r[n]]||(o=r[n+1],l.includes(o)?[]:{}):function(){var t=null
if(i){var n=function(e,t){for(var n=e,r=0;r<t.length-1;r+=1){n=n[t[r]]}return{"thisObject":n,
"methodOrProperty":t.length>0?n[t[t.length-1]]:void 0}}(e,r),o=n.methodOrProperty,a=n.thisObject
"function"==typeof o&&(t=function(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++){
t[n]=arguments[n]}return o.apply.apply(o,[a].concat(t))})}return function(){var n
return t&&(n=t(arguments)),(e._ptf=e._ptf||[]).push(r,arguments),n}}()}))
})),"complete"==t.readyState?h():(e.addEventListener("DOMContentLoaded",h),
e.addEventListener("load",h))}(window,document,navigator,top,window.crossOriginIsolated)})()

```