[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 b2b-orders-history/react/components/Order/Totals.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { FormattedMessage } from 'react-intl'

import FinalPrice from '../commons/FinalPrice'
import Total from './Total'

const Totals = props => {
  const { totals, currencyCode, transactions } = props
  let interest = {
    id: 'Interest',
    name: 'Interest',
    value: 0,
  }

  transactions.forEach(transaction => {
    if (transaction.isActive) {
      interest = transaction.payments.reduce((totalInterest, pay) => {
        // It is possible that referenceValue might come as zero
        // That is an issue of some orders created by Subscription
        // See thread https://vtex.slack.com/archives/C1FRE8V9A/p1547055180021100
        // Because of that, we should do not consider referenceValue that are zero
        const referenceValue =
          pay.referenceValue === 0 ? pay.value : pay.referenceValue
        totalInterest.value += pay.value - referenceValue
        return totalInterest
      }, interest)
    }
  })

  const newTotals = interest.value > 0 ? [...totals, interest] : totals

  return (
    <article className="w-100 fl w-third-m mb5">
      <section className="pa5 ba bw1 b--muted-5 overflow-y-scroll bg-base h4-plus">
        <h3 className="c-on-base mt2 mb5 tracked-mega lh-solid ttu f6">
          <FormattedMessage id="order.summary.title" />
        </h3>
        {newTotals &&
          newTotals.map(
            total =>
              !!(total.name && total.value) && (
                <Total
                  key={total.name}
                  total={total}
                  currencyCode={currencyCode}
                />
              )
          )}
        <div className="cf w-100 mb7">
          <div className="dib fl f6 fw5 c-on-base w-50">
            <FormattedMessage id="order.summary.total" />
          </div>
          <div className="dib fr f6 fw5 c-on-base w-50 tr">
            <FinalPrice totals={newTotals} currencyCode={currencyCode} />
          </div>
        </div>
      </section>
    </article>
  )
}

Totals.propTypes = {
  totals: PropTypes.arrayOf(PropTypes.object).isRequired,
  currencyCode: PropTypes.string.isRequired,
  transactions: PropTypes.arrayOf(PropTypes.object).isRequired,
}

export default Totals

```


[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 b2b-orders-history/react/components/Order/OrderActions.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.my-account-commons/Router'
import { withCssHandles } from 'vtex.css-handles'
import { ExtensionPoint } from 'vtex.render-runtime'

import { OrderUtils, addBaseURL } from '../../utils'
import { getCustomerEmail } from '../../actions/utils'
import OrderAction from './OrderAction'

const CSS_HANDLES = [
  'invoiceBtn',
  'reorderBtn',
  'editBtn',
  'cancelBtn',
  'detailsBtn',
]

class OrderActions extends Component {
  constructor(props) {
    super(props)
    this.state = { loggedInEmail: '' }
  }

  async componentDidMount() {
    const loggedInEmail = await getCustomerEmail()

    this.setState({ loggedInEmail })
  }

  handleOrderAgainClick = () => {
    const {
      order: { orderGroup },
    } = this.props

    return window.open(
      addBaseURL(`/checkout/orderform/createBy/${orderGroup}`),
      '_self'
    )
  }

  render() {
    const { cssHandles, order, allowSAC } = this.props
    const {
      orderId,
      allowEdition,
      allowCancellation,
      clientProfileData: { email },
      paymentData: { transactions },
    } = order

    const isOwner = email === this.state.loggedInEmail
    const showEditOrderButton = allowSAC && allowEdition && isOwner
    const showCancelOrderButton = allowCancellation
    const bankInvoiceUrl = OrderUtils.getBankInvoiceUrl(transactions)

    const showPrintBankInvoiceButton = allowCancellation && bankInvoiceUrl

    return (
      <div className="cf fr db w-100 w-30-ns pt0-xl pt5">
        {showPrintBankInvoiceButton && (
          <OrderAction
            classID={`${cssHandles.invoiceBtn} myo-invoice-btn`}
            labelID="order.printBankInvoice"
            route={bankInvoiceUrl}
          >
            <g>
              <rect width="2" height="16" />{' '}
              <rect x="14" width="2" height="16" />{' '}
              <rect data-color="color-2" x="3" width="2" height="16" />{' '}
              <rect data-color="color-2" x="11" width="2" height="16" />{' '}
              <polygon points="10,16 6,16 6,0 10,0 10,0" />
            </g>
          </OrderAction>
        )}
        {!showPrintBankInvoiceButton && isOwner && (
          <OrderAction
            classID={`${cssHandles.reorderBtn} myo-reorder-btn`}
            labelID="order.orderAgain"
            onClick={this.handleOrderAgainClick}
          >
            <g>
              <circle cx="3.5" cy="12.5" r="2.5" />
              <path d="M8,1C6.127,1,4.35,1.758,3.052,3.052L0.9,0.9L0.2,7.3l6.4-0.7L4.465,4.465C5.393,3.542,6.662,3,8,3 c2.757,0,5,2.243,5,5s-2.243,5-5,5v2c3.859,0,7-3.14,7-7S11.859,1,8,1z" />
            </g>
          </OrderAction>
        )}
        {showEditOrderButton && (
          <OrderAction
            classID={`${cssHandles.editBtn} myo-edit-btn`}
            labelID="order.changeOrder"
            route={`/orders-history/${orderId}/edit`}
            isInternalRoute
          >
            <g>
              <rect y="14" width="16" height="2" />{' '}
              <path d="M11.7,3.3c0.4-0.4,0.4-1,0-1.4l-1.6-1.6c-0.4-0.4-1-0.4-1.4,0L0,9v3h3L11.7,3.3z" />
            </g>
          </OrderAction>
        )}
        {showCancelOrderButton && (
          <OrderAction
            classID={`${cssHandles.cancelBtn} myo-cancel-btn`}
            labelID="order.cancelOrder"
            warning="true"
            route={`/orders-history/${orderId}/cancel`}
            isInternalRoute
          >
            <path d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M11.5,10.1l-1.4,1.4L8,9.4l-2.1,2.1l-1.4-1.4L6.6,8 L4.5,5.9l1.4-1.4L8,6.6l2.1-2.1l1.4,1.4L9.4,8L11.5,10.1z" />
          </OrderAction>
        )}
        <Link
          to={`/orders-history/${orderId}`}
          className={`${cssHandles.detailsBtn} myo-details-btn db tc pv3 ph5 br2 w-100 f6 fw4 link bg-action-secondary c-on-action-secondary hover-action-secondary mt5`}
        >
          <span className="db pv2">
            <FormattedMessage id="order.goToOrderDetails" />
          </span>
        </Link>
        <ExtensionPoint
          id="my-orders-extra-actions-container"
          orderId={orderId}
        />
      </div>
    )
  }
}

OrderActions.propTypes = {
  order: PropTypes.object.isRequired,
  allowSAC: PropTypes.bool,
  cssHandles: PropTypes.object,
}

export default withCssHandles(CSS_HANDLES)(OrderActions)

```


[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 b2b-orders-history/react/components/Order/OrderAction.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.my-account-commons/Router'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['font']

const OrderAction = ({
  children,
  classID,
  labelID,
  warning,
  onClick,
  route,
  isInternalRoute,
}) => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  const style = `${classID} ${
    warning ? 'c-danger hover-c-danger' : 'c-link hover-c-link'
  } pa0 bg-transparent bn cf db link tl w5 f6 fw4 flex items-center mb5`

  const text = (
    <span className={`ml3 ${cssHandles.font} myo-font no-underline`}>
      <FormattedMessage id={labelID} />
    </span>
  )

  const icon = (
    <svg
      className=""
      fill={warning ? '#FF4C4C' : '#134CD8'}
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      x="0px"
      y="0px"
      viewBox="0 0 16 16"
      width="16"
      height="16"
    >
      <title>
        <FormattedMessage id={labelID} />
      </title>
      {children}
    </svg>
  )

  if (route) {
    if (isInternalRoute) {
      return (
        <Link to={route} className={style}>
          {icon} {text}
        </Link>
      )
    }
    return (
      <a
        href={route}
        rel="noopener noreferrer"
        target="_blank"
        className={style}
      >
        {icon} {text}
      </a>
    )
  }
  return (
    <button onClick={onClick} className={`pointer ${style}`}>
      {icon} {text}
    </button>
  )
}

OrderAction.propTypes = {
  classID: PropTypes.string.isRequired,
  labelID: PropTypes.string.isRequired,
  warning: PropTypes.string,
  onClick: PropTypes.func,
  route: PropTypes.string,
  children: PropTypes.object,
  isInternalRoute: PropTypes.bool,
}

export default OrderAction

```


[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 b2b-orders-history/react/components/Order/Total.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import TranslateTotalizer from 'vtex.totalizer-translator/TranslateTotalizer'

import Price from '../commons/FormattedPrice'

const Total = ({ total, currencyCode }) => {
  return (
    <div className="cf w-100" key={total.name}>
      <div className="dib f6 fw4 c-on-base w-60">
        <TranslateTotalizer id={total.id} totalizer={total} />
      </div>
      <div className="dib f6 fw4 c-on-base w-40 tr">
        <Price value={total.value} currency={currencyCode} />
      </div>
      <hr className="bt-0 bb bw1 b--muted-5 w-100 mb2 mt2" />
    </div>
  )
}

Total.propTypes = {
  total: PropTypes.object.isRequired,
  currencyCode: PropTypes.string.isRequired,
}

export default Total

```


[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 b2b-orders-history/react/components/Order/Estimate.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { Component } from 'react'
import PropTypes from 'prop-types'
import { injectIntl, intlShape } from 'react-intl'
import { utils } from 'vtex.my-account-commons'

const { estimateShipping } = utils

class Estimate extends Component {
  render() {
    const shippingEstimate = estimateShipping({
      shippingEstimate: this.props.shippingEstimate,
      shippingEstimateDate: this.props.shippingEstimateDate,
    })

    if (!shippingEstimate) {
      return null
    }

    return (
      (shippingEstimate && shippingEstimate.label) ||
      (shippingEstimate.isEstimateInHoursOrMinutes
        ? this.props.intl.formatMessage(
            {
              id: 'order.shippingEstimate.withTime',
            },
            {
              // IMPORTANT: shippingEstimateDate should be displayed with the
              // the current browser timezone. NOT UTC!
              date: this.props.intl.formatDate(shippingEstimate.date),
              hour: this.props.intl.formatTime(shippingEstimate.date),
            }
          )
        : this.props.intl.formatMessage(
            { id: 'order.shippingEstimate.noTime' },
            {
              date: this.props.intl.formatDate(shippingEstimate.date, {
                timeZone: 'UTC',
              }),
            }
          ))
    )
  }
}

Estimate.propTypes = {
  intl: intlShape,
  shippingEstimate: PropTypes.string,
  shippingEstimateDate: PropTypes.string,
}

export default injectIntl(Estimate)

```


[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 b2b-orders-history/react/components/commons/UnitPrice.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

import Price from './FormattedPrice'

const UnitPrice = ({ value, currency, measurementUnit, unitMultiplier }) => {
  const hasFloatUnitMultiplier = !!(unitMultiplier % 1)
  const unitValue = hasFloatUnitMultiplier ? value / unitMultiplier : value

  return (
    <>
      <Price value={unitValue} currency={currency} />
      {hasFloatUnitMultiplier && ` / ${measurementUnit}`}
    </>
  )
}

UnitPrice.propTypes = {
  value: PropTypes.number,
  currency: PropTypes.string,
  measurementUnit: PropTypes.string,
  unitMultiplier: PropTypes.number,
}

export default UnitPrice

```


[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 b2b-orders-history/react/components/commons/Greeting.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

import LocationUtils from '../../utils/LocationUtils'

class Greeting extends React.Component {
  state = {
    isActive:
      window &&
      window.location &&
      window.location.search.indexOf(this.props.param) !== -1,
  }

  handleDismiss = () => {
    window.location.search = ''

    this.setState({
      isActive: false,
    })
  }

  getVariationStyle(variation) {
    const style = 'f5 ph7 pv5 br3 pointer mb5'

    switch (variation) {
      case 'success':
        return `${style} c-on-sucess--faded bg-success--faded`
      case 'error':
        return `${style} bg-danger--faded c-on-danger--faded`
      case 'alert':
        return `${style} bg-warning--faded c-on-warning--faded`
      case 'primary':
        return `${style} bg-base--inverted c-on-base--inverted`
      default:
        return `${style} bg-base--inverted c-on-base--inverted`
    }
  }

  render() {
    const { isActive } = this.state
    const { param, variation, greetingId } = this.props

    if (!isActive) {
      return null
    }

    const paramValue = LocationUtils.getSearchParam(param)
    const style = this.getVariationStyle(variation)

    return (
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
      <div className={style} onClick={this.handleDismiss}>
        <FormattedMessage id={greetingId} values={{ value: paramValue }} />
        <svg
          className="fr hh1 w1 pt2"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <title>Fechar</title>
          <path
            fill="rgba(0, 0, 0, 0.3)"
            d="M0 10c0 5.523 4.478 10 10 10 5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10C4.478 0 0 4.478 0 10zm13.702 2.246c.397.398.397 1.044 0 1.442-.413.41-1.058.41-1.456.014l-2.164-2.164c-.046-.046-.12-.046-.164 0l-2.164 2.164c-.398.397-1.043.397-1.44 0-.413-.413-.413-1.058-.015-1.456l2.16-2.164c.044-.045.044-.12 0-.163L6.3 7.75c-.4-.398-.4-1.043 0-1.44.412-.413 1.057-.413 1.454-.016L9.918 8.46c.045.046.118.046.164 0l2.164-2.164c.398-.397 1.044-.397 1.442.002.41.41.41 1.055.014 1.453l-2.164 2.17c-.045.044-.045.118 0 .163l2.164 2.164z"
            fillRule="evenodd"
          />
        </svg>
      </div>
    )
  }
}

Greeting.propTypes = {
  param: PropTypes.string.isRequired,
  variation: PropTypes.string,
  greetingId: PropTypes.string.isRequired,
}

export default Greeting

```


[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 b2b-orders-history/react/components/commons/PaymentFlagIcon.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

import PaymentFlagsSprite from '../../images/payment-flags.png'
import * as g from '../../constants/paymentGroups'

const PaymentFlagIcon = ({ type, size, group, alignFix }) => {
  if (!type) {
    return null
  }

  let slug
  switch (group) {
    case g.BANK_INVOICE:
      slug = 'bankinvoice'
      break
    case g.PAYPAL:
      slug = 'paypal'
      break
    case g.GIFT_CARD:
      slug = 'giftcard'
      break
    case g.DEBIT_CARD:
      slug = 'cash'
      break
    default:
      slug = type.toLowerCase().split(' ')[0]
      break
  }

  const originalSize = 560 /* In pixel */
  const ratio = size ? size / originalSize : originalSize

  const positions = {
    visa: 0,
    mastercard: -40 * ratio,
    diners: -80 * ratio,
    american: -120 * ratio,
    hipercard: -160 * ratio,
    discover: -200 * ratio,
    aura: -280 * ratio,
    banricompras: -240 * ratio,
    elo: -320 * ratio,
    jcb: -360 * ratio,
    bankinvoice: -400 * ratio,
    paypal: -440 * ratio,
    giftcard: -480 * ratio,
    cash: -520 * ratio,
  }

  const position =
    positions[slug] || positions[slug] === 0 ? positions[slug] : -1

  if (position === -1) {
    return null
  }

  return (
    <span
      className={`fl dib overflow-hidden mr3 w-29px h-22px ${
        alignFix ? 'mt2' : ''
      }`}
    >
      <img
        alt={type}
        src={PaymentFlagsSprite}
        style={{ maxWidth: `${size}px`, marginLeft: position }}
      />
    </span>
  )
}

PaymentFlagIcon.defaultProps = {
  alignFix: false,
}

PaymentFlagIcon.propTypes = {
  alignFix: PropTypes.bool,
  type: PropTypes.string,
  size: PropTypes.number,
  group: PropTypes.string,
}

export default PaymentFlagIcon

```


[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 b2b-orders-history/react/components/commons/TrackingDataSpoiler.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

const TrackingDataSpoiler = ({ trackingUrl, trackingNumber }) => {
  return (
    <div>
      {trackingUrl && (
        <a
          className="f6 link no-underline c-link hover-c-link"
          target="_blank"
          rel="noopener noreferrer"
          href={
            trackingUrl.trim().indexOf('http') === 0
              ? trackingUrl
              : `https://${trackingUrl}`
          }
        >
          <FormattedMessage id="order.trackingData.clickHereToGoToExternalPage" />
        </a>
      )}
      {trackingNumber && (
        <p>
          <FormattedMessage
            id="order.trackingData.shipping"
            values={{ trackingNumber }}
          />
        </p>
      )}
    </div>
  )
}

TrackingDataSpoiler.propTypes = {
  trackingUrl: PropTypes.string,
  trackingNumber: PropTypes.string,
}

export default TrackingDataSpoiler

```


[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 b2b-orders-history/react/components/commons/PaymentConnectorResponses.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['font']

const getInnerPath = isOpen =>
  isOpen
    ? 'M73 158.497V123.58h136.078v34.917'
    : 'M123.98 209.078v-50.58H73V123.58h50.98V73h33.986v50.58h51.112v34.917h-51.112v50.58'

const PaymentConnectorResponses = ({ data = {}, isOpen, onClick }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  return (
    <section>
      <button
        type="button"
        onClick={onClick}
        className={`${
          isOpen ? 'mb5' : ''
        } dt mv3 pl0 bw0 bg-transparent input-reset c-muted-1 lh-solid f7 fw6`}
      >
        <svg
          className="dtr v-mid mr2 h-15px w-15px"
          viewBox="0 0 283 283"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g fill="currentColor" fillRule="evenodd">
            <circle className="c-muted-1" cx="141.5" cy="141.5" r="141.5" />
            <path fill="#FFF" d={getInnerPath(isOpen)} />
          </g>
        </svg>
        <span className={`dtr ${cssHandles.font} myo-font`}>
          <FormattedMessage id={'paymentData.additionalInfo'} />
        </span>
      </button>

      <ul
        className={`${
          isOpen ? 'o-100 max-h-999' : 'o-0 max-h-0'
        } pl0 ma0 transition-opacity-06s transition-max-height-06s list c-muted-1 overflow-y-hidden`}
      >
        {Object.keys(data).map(
          (key, index) =>
            data[key] &&
            data[key].length && (
              <li className={`${isOpen ? 'mb2' : ''} f7`} key={index}>
                <span className="mr3 fw5">{key}:</span>
                <span>{data[key]}</span>
              </li>
            )
        )}
      </ul>
    </section>
  )
}
PaymentConnectorResponses.propTypes = {
  data: PropTypes.object,
  isOpen: PropTypes.bool,
  onClick: PropTypes.func,
}

export default PaymentConnectorResponses

```


[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 b2b-orders-history/react/components/commons/FormattedDate.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedDate } from 'react-intl'

const CustomDate = ({ date, style = '' }) => {
  let settings

  switch (style.toLowerCase()) {
    case 'short':
      settings = {}
      break
    default:
      settings = {
        year: 'numeric',
        month: 'long',
        day: '2-digit',
      }
  }

  return <FormattedDate value={date} {...settings} />
}

CustomDate.propTypes = {
  date: PropTypes.any.isRequired,
  style: PropTypes.string,
}

export default CustomDate

```


[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 b2b-orders-history/react/components/commons/OrderSummary.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import Price from './FormattedPrice'
import OrderSummaryHeader from './OrderSummaryHeader'
import ProductQuantity from './ProductQuantity'
import UnitPrice from './UnitPrice'

const CSS_HANDLES = [
  'summary',
  'summaryProduct',
  'summaryProductQuantity',
  'summaryProductValue',
  'summaryProductName',
  'summaryProductQuantityValue',
]

const OrderSummary = ({ order }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)

  if (!order || !order.orderId) {
    return null
  }

  const {
    value,
    totals,
    items,
    storePreferencesData: { currencyCode },
    shippingData: { address },
  } = order

  return (
    <article
      className={`${cssHandles.summary} myo-summary w-100 mv5 ba bw1 b--muted-5 overflow-hidden`}
    >
      <OrderSummaryHeader order={order} />
      <div className="pt3 bg-base bt-0">
        {items.map((item, index) => (
          <div
            className={`${cssHandles.summaryProduct} myo-summary-product ph5 pv3 w-100 cf`}
            key={index}
          >
            <div className="dib h-auto w-25 fl">
              <img src={item.imageUrl} alt="Imagem do Produto" />
            </div>
            <div className="dib c-on-base w-75 fr pl2">
              <h4
                className={`${cssHandles.summaryProductName} db c-on-base mb0 fw4 f6 mt0`}
              >
                {item.name}
              </h4>
              <p
                className={`${cssHandles.summaryProductQuantityValue} db mt0 fw4`}
              >
                <span className={`${cssHandles.summaryProductQuantity} pr3`}>
                  <ProductQuantity
                    unitMultiplier={item.unitMultiplier}
                    quantity={item.quantity}
                    measurementUnit={item.measurementUnit}
                  />
                </span>
                <span className={cssHandles.summaryProductValue}>
                  <UnitPrice
                    currency={currencyCode}
                    value={item.sellingPrice}
                    unitMultiplier={item.unitMultiplier}
                    measurementUnit={item.measurementUnit}
                  />
                </span>
              </p>
            </div>
          </div>
        ))}

        <div className="bt bw1 b--muted-5 w-100">
          <div className="pa5">
            <div className="w-100 f6 fw4 c-on-base mb2 ttu">
              <FormattedMessage id="order.shipsTo" />
            </div>
            <div className="w-100 f6 fw6 c-on-base">{address.receiverName}</div>
            <div className="w-100 f6 fw4 c-on-base">
              {address.street}, {address.number}
            </div>
            <div className="w-100 f6 fw4 c-on-base">
              {address.city} - {address.state}
            </div>
            <div className="w-100 f6 fw4 c-on-base">{address.postalCode}</div>
          </div>
        </div>
        <div className="bt bw1 b--muted-5 w-100">
          <div className="pa5">
            <div className="w-100 f6 fw4 c-on-base mb2 ttu">
              <FormattedMessage id="order.total" />
            </div>

            {totals
              .filter(
                total => total.name && total.value !== 0 && total.value !== null
              )
              .map((total, index) => (
                <div className="cf w-100" key={index}>
                  <div className="dib f6 fw4 c-on-base w-60">{total.name}</div>
                  <div className="dib f6 fw4 c-on-base w-40 tr">
                    <Price value={total.value} currency={currencyCode} />
                  </div>
                  <hr className="bt-0 bb bw1 b--muted-5 w-100 mb2 mt2" />
                </div>
              ))}

            <div className="cf w-100 mb7">
              <div className="dib fl f6 fw5 c-on-base w-50">
                <FormattedMessage id="order.total" />
              </div>
              <div className="dib fr f6 fw5 c-on-base w-50 tr">
                <Price value={value} currency={currencyCode} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  )
}

OrderSummary.propTypes = {
  order: PropTypes.object.isRequired,
}

export default OrderSummary

```


[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 b2b-orders-history/react/components/commons/ProductQuantity.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { FormattedNumber, FormattedMessage } from 'react-intl'

const ProductQuantity = ({ quantity, unitMultiplier, measurementUnit }) => {
  const qtd = (quantity || 0) * (unitMultiplier || 1)
  const showMeasurementUnit = measurementUnit !== 'un'

  return (
    <>
      {showMeasurementUnit ? (
        <>
          <FormattedNumber value={qtd} maximumFractionDigits={3} />{' '}
          {measurementUnit}
        </>
      ) : (
        <>
          <FormattedNumber value={qtd} maximumFractionDigits={3} />{' '}
          <FormattedMessage id="product.quantity" values={{ qtd }} />
        </>
      )}
    </>
  )
}

ProductQuantity.propTypes = {
  quantity: PropTypes.number,
  unitMultiplier: PropTypes.number,
  measurementUnit: PropTypes.string,
}

export default ProductQuantity

```


[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 b2b-orders-history/react/components/commons/TrackingProgress.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import MediaQuery from 'react-responsive'
import { FormattedDate, FormattedTime, intlShape, injectIntl } from 'react-intl'
import orderBy from 'lodash/orderBy'

const PAGE_SIZE = 3

class TrackingProgress extends Component {
  constructor(props) {
    super(props)

    this.state = {
      visible: PAGE_SIZE,
    }
  }

  handleViewMore = () => {
    this.setState(prevState => ({ visible: prevState.visible + PAGE_SIZE }))
  }

  render() {
    const { courierStatus } = this.props
    const data = orderBy(
      courierStatus.data,
      date => new Date(date.lastChange),
      ['desc']
    )
    const visibleColumns = data.slice(0, this.state.visible)
    const isViewMoreVisible = this.state.visible < data.length

    if (courierStatus == null || data.length === 0) return null

    return (
      <div className="pv5 f6">
        <MediaQuery minWidth={640}>
          <table
            className="pa3 ba b--muted-5 bw1 w-100 collapse"
            style={{ borderCollapse: 'collapse', borderSpacing: 0 }}
          >
            <thead>
              <tr>
                <th className="pa3 tl">
                  <span className="pl3 ttu">
                    {this.props.intl.formatMessage({
                      id: 'order.tracking.date',
                    })}
                  </span>
                </th>
                <th className="pa3 tl ttu">
                  {this.props.intl.formatMessage({ id: 'order.tracking.time' })}
                </th>
                <th className="pa3 tl ttu">
                  {this.props.intl.formatMessage({
                    id: 'order.tracking.status',
                  })}
                </th>
              </tr>
            </thead>
            <tbody>
              {visibleColumns.map(info => {
                return (
                  <tr className="pa3 bt b--muted-5 bw1" key={info.date}>
                    <td className="pa3 w-10">
                      <span className="pl3">
                        {this.props.intl.formatDate(info.lastChange, {
                          timeZone: 'UTC',
                          day: 'numeric',
                          month: 'short',
                          year: 'numeric',
                        })}
                      </span>
                    </td>
                    <td className="pa3 w-10">
                      <FormattedTime value={info.lastChange} timeZone="UTC" />
                    </td>
                    <td className="pa3 w-20">{info.description}</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </MediaQuery>
        <MediaQuery maxWidth={639}>
          <table className="pa3 ba b--muted-5 bw1 w-100 collapse">
            <thead>
              <tr>
                <th className="pa3 tl">
                  <span className="pl3 ttu">
                    {this.props.intl.formatMessage({
                      id: 'order.tracking.date',
                    })}
                  </span>
                </th>
                <th className="pa3 tl">
                  <span className="ttu">
                    {this.props.intl.formatMessage({
                      id: 'order.tracking.status',
                    })}
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              {visibleColumns.map(info => {
                return (
                  <tr key={info.date} className="pa3 bt b--muted-5 bw1">
                    <td className="pa3 w-20">
                      <div className="flex flex-column">
                        <FormattedDate value={info.lastChange} timeZone="UTC" />
                        <div className="f7">
                          <FormattedTime
                            value={info.lastChange}
                            timeZone="UTC"
                          />
                        </div>
                      </div>
                    </td>
                    <td className="pa3">{info.description}</td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </MediaQuery>
        {isViewMoreVisible && (
          <div
            onClick={this.handleViewMore}
            className="pa3 pointer bl br bb b--muted-5 bw1 flex justify-center"
          >
            <span className="c-on-action-secondary">
              {this.props.intl.formatMessage({ id: 'order.tracking.showMore' })}
            </span>
          </div>
        )}
      </div>
    )
  }
}

TrackingProgress.propTypes = {
  courierStatus: PropTypes.object,
  intl: intlShape.isRequired,
}

export default injectIntl(TrackingProgress)

```


[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 b2b-orders-history/react/components/commons/Address.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { AddressSummary, AddressRules } from 'vtex.address-form'

const Address = ({ address }) => {
  return (
    <div className="lh-copy f6">
      <strong>{address.receiverName}</strong>
      <br />
      <AddressRules country={address.country} shouldUseIOFetching>
        <AddressSummary address={address} />
      </AddressRules>
    </div>
  )
}

Address.propTypes = {
  address: PropTypes.object.isRequired,
}

export default Address

```


[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 b2b-orders-history/react/components/commons/Error.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

class Error extends Component {
  getI18nStr = id => this.props.intl.formatMessage({ id })

  render() {
    const { error } = this.props
    const status = error && error.status

    return (
      <div className="tc pt5 mw6 center">
        <div className="pa5 br2 bg-danger--faded">
          <div>
            <span className="ml3">
              {error && status === 401
                ? this.getI18nStr('global.loginNeeded')
                : error && status === 403
                ? this.getI18nStr('global.unauthorized')
                : error && status === 404
                ? this.getI18nStr('global.notFound')
                : this.getI18nStr('global.unknownError')}
            </span>
          </div>
        </div>
      </div>
    )
  }
}

Error.propTypes = {
  error: PropTypes.object,
  intl: intlShape.isRequired,
}

export default injectIntl(Error)

```


[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 b2b-orders-history/react/components/commons/FinalPrice.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

import Price from './FormattedPrice'

const FinalPrice = props => {
  const { totals, currencyCode } = props

  const fullPrice = totals.reduce((price, total) => price + total.value, 0)

  return <Price value={fullPrice} currency={currencyCode} />
}

FinalPrice.propTypes = {
  totals: PropTypes.arrayOf(PropTypes.object),
  currencyCode: PropTypes.string,
  transactions: PropTypes.arrayOf(PropTypes.object),
}

export default FinalPrice

```


[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 b2b-orders-history/react/components/commons/Panel.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['optionDisclaimer']

const Panel = ({ children }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  return (
    <section
      className={`${cssHandles.optionDisclaimer} myo-option-disclaimer br2 mv3 pv5 ph7 bg-muted-5 c-on-muted-5`}
    >
      {children}
    </section>
  )
}
Panel.propTypes = {
  children: PropTypes.any,
}

export default Panel

```


[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 b2b-orders-history/react/components/commons/OrderSummaryHeader.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { useCssHandles } from 'vtex.css-handles'

import { OrderUtils } from '../../utils'
import FormattedDate from './FormattedDate'
import StatusBadge from './StatusBadge'

const CSS_HANDLES = ['summaryHeader']

const OrderSummaryHeader = ({ order }) => {
  const { status, creationDate } = order
  const cssHandles = useCssHandles(CSS_HANDLES)

  const isActive = OrderUtils.isOrderActive(status)
  const activeClasses = isActive ? 'o-100' : 'o-50'

  return (
    <div
      className={`${cssHandles.summaryHeader} myo-summary-header cf pa5 bw1 b--muted-5 bb bg-muted-5 ${activeClasses}`}
    >
      <div className="dib mt2 fl max-w-30 f6 fw5 c-on-muted-5">
        <FormattedDate date={creationDate} style="short" />
      </div>

      <div className="dib v-mid fr max-w-70">
        <StatusBadge order={order} />
      </div>
    </div>
  )
}

OrderSummaryHeader.propTypes = {
  order: PropTypes.object.isRequired,
  isActive: PropTypes.bool,
}

export default OrderSummaryHeader

```


[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 b2b-orders-history/react/components/commons/StatusColor.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

const StatusColor = ({ state, status }) => {
  let styles

  const orderState = state || 'unknown'

  switch (status) {
    case 'normal':
      styles = ' bg-muted-1 c-on-muted-1 '
      break
    case 'cancelled':
      styles = ' bg-danger c-on-danger '
      break
    case 'pending':
      styles = ' bg-warning c-on-warning '
      break
    case 'disabled':
      styles = ' bg-muted-2 c-on-muted-2 '
      break
    default:
      styles = ' bg-muted-2 c-on-muted-2 '
  }

  return (
    <span className={`dib br2 pv2 ph3 f7 f6-xl nowrap ${styles}`}>
      <FormattedMessage id={`order.state.${orderState}`} />
    </span>
  )
}

StatusColor.propTypes = {
  state: PropTypes.string.isRequired,
  status: PropTypes.string,
}

export default StatusColor

```


[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 b2b-orders-history/react/components/commons/FormattedPrice.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedNumber } from 'react-intl'

const Price = ({ value, currency }) => (
  <FormattedNumber currency={currency} style="currency" value={value / 100} />
)

Price.propTypes = {
  value: PropTypes.number,
  currency: PropTypes.string,
}

export default Price

```


[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 b2b-orders-history/react/components/commons/Popover.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

const Popover = ({ children, isOpen }) => {
  const opacityStyle = isOpen ? ' o-100 ' : ' o-0 '

  return (
    <div
      className={`absolute top-2-ns z-5 db ba-ns bb-ns br2 mt3 mt5-ns pa5 f6 b--muted-5 bg-base c-on-base ${opacityStyle}`}
      style={{
        boxShadow: '0px 0px 15px -5px rgba(0,0,0,0.20)',
        transition: 'opacity 0.1s ease-in',
      }}
    >
      {children}
    </div>
  )
}

Popover.propTypes = {
  children: PropTypes.element.isRequired,
  isOpen: PropTypes.bool.isRequired,
}

export default Popover

```


[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 b2b-orders-history/react/components/commons/ViewAllOrderProductsButton.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.my-account-commons/Router'

const ViewAllOrderProductsButton = ({ orderId }) => (
  <Link to={`/orders-history/${orderId}`}>
    <FormattedMessage id="order.viewAllItems" />
  </Link>
)

ViewAllOrderProductsButton.propTypes = {
  orderId: PropTypes.any.isRequired,
}

export default ViewAllOrderProductsButton

```


[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 b2b-orders-history/react/components/commons/Button.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

import Loader from './Loader'

const Button = ({ children, onClick, color, isLoading }) => {
  const bgColor = `bg-${color}`

  return (
    <button
      className={`dim f7 mv3 pv3 ph5 br2 tc c-on-success ${bgColor}`}
      onClick={onClick}
    >
      {children}
      {isLoading && (
        <span>

          <Loader size="small" invert />
        </span>
      )}
    </button>
  )
}

Button.propTypes = {
  children: PropTypes.any,
  color: PropTypes.string,
  onClick: PropTypes.func,
  isLoading: PropTypes.bool,
}

Button.defaultProps = {
  color: 'success',
  isLoading: false,
}

export default Button

```


[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 b2b-orders-history/react/components/commons/StatusBadge.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { FormattedMessage } from 'react-intl'
import packagify from '@vtex/delivery-packages'
import { ProgressBarBundle } from 'vtex.my-account-commons'

import { OrderUtils } from '../../utils'
import { OrderShape } from '../../types'

const StatusBadge = ({ order }) => {
  let orderState = 'unknown'
  const orderRawStatusPrefix = 'order.state.'
  const isPickup = OrderUtils.isOrderPickUp(order)
  // The order object shape may vary depending on where StatusBadge is called.
  // If it's called from the listing page, the isOrderDelivered function won't work properly.
  // So, we need to rely on the isAllDelivered property.
  const wasDelivered =
    OrderUtils.isOrderDelivered(order) || order.isAllDelivered
  const isReadyToPickup =
    OrderUtils.isOrderPickUp(order) && OrderUtils.isOrderReadyToPickUp(order)
  const {
    utils: { getCurrentProgressBarState },
  } = ProgressBarBundle

  const packages = order.packageAttachment != null ? packagify(order) : null
  const currentProgressBarState = getCurrentProgressBarState(
    order.status,
    packages
  )
  const { status: normalizedStatus } = OrderUtils.getFullState(order.status)

  if (order.status) {
    orderState =
      currentProgressBarState || `${orderRawStatusPrefix}${order.status}`
    if (
      isPickup &&
      [
        'window-to-cancel',
        'approve-payment',
        'ready-for-handling',
        'handling',
        'release-to-fulfillment',
      ].includes(order.status)
    ) {
      orderState = `${orderRawStatusPrefix}handlingPickup`
    } else if (normalizedStatus === 'success') {
      if (isPickup) {
        if (wasDelivered) {
          orderState = `${orderRawStatusPrefix}pickedUp`
        } else if (isReadyToPickup) {
          orderState = `${orderRawStatusPrefix}ready-for-pickup`
        } else {
          orderState = `${orderRawStatusPrefix}handlingPickup`
        }
      } else if (wasDelivered) {
        orderState = `${orderRawStatusPrefix}delivered`
      }
    }
  }

  let styles
  let textStyle

  switch (normalizedStatus) {
    case 'normal':
      styles = 'bg-muted-1'
      textStyle = 'c-on-muted-1'
      break

    case 'cancelled':
      styles = 'bg-danger'
      textStyle = 'c-on-danger'
      break

    case 'pending':
      styles = 'bg-warning'
      break

    case 'disabled':
      styles = 'bg-muted-2'
      textStyle = 'c-on-muted-2'
      break

    case 'success':
      styles = 'bg-success'
      textStyle = 'c-on-success'
      break

    default:
      styles = 'bg-muted-2'
      textStyle = 'c-on-muted-2'
  }

  return (
    <div className={`dib br2 pv2 ph3 f7 fw5 tc ${styles}`}>
      <span className={textStyle || 'c-on-base'}>
        <FormattedMessage id={orderState} />
      </span>
    </div>
  )
}

StatusBadge.propTypes = {
  order: OrderShape,
}

export default StatusBadge

```


[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 b2b-orders-history/react/components/commons/ProductImage.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { utils } from 'vtex.my-account-commons'

const { fixImageUrl } = utils

function ProductImage({ className, url, alt }) {
  return <img className={className} src={fixImageUrl(url)} alt={alt} />
}

ProductImage.propTypes = {
  className: PropTypes.string,
  url: PropTypes.string,
  alt: PropTypes.string,
}

export default ProductImage

```


[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 b2b-orders-history/react/components/commons/ProductPrice.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

import Price from './FormattedPrice'

const ProductPrice = ({ value, isGift, currency }) => {
  if (isGift) {
    return (
      <small className="ttu">
        <FormattedMessage id="commons.free" />
      </small>
    )
  }

  return <Price value={value} currency={currency} />
}

ProductPrice.propTypes = {
  value: PropTypes.number,
  isGift: PropTypes.bool,
  currency: PropTypes.string,
}

export default ProductPrice

```


[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 b2b-orders-history/react/components/commons/InvoiceDataSpoiler.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

const InvoiceDataSpoiler = ({ invoiceUrl, intl }) => {
  return (
    <div className="pt1">
      <a
        className="f6 link no-underline c-link"
        target="_blank"
        rel="noopener noreferrer"
        href={
          invoiceUrl.trim().indexOf('http') === 0
            ? invoiceUrl
            : `http://${invoiceUrl}`
        }
      >
        {intl.formatMessage({ id: 'order.seeInvoice' })}
      </a>
    </div>
  )
}

InvoiceDataSpoiler.propTypes = {
  invoiceUrl: PropTypes.string,
  intl: intlShape.isRequired,
}

export default injectIntl(InvoiceDataSpoiler)

```


[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 b2b-orders-history/react/components/commons/Loader.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

import loaderSVG from '../../images/loader.svg'
import loaderInvertSVG from '../../images/loaderInvert.svg'

export default function Loader({ children, size, display, invert }) {
  let style
  let sizeNumber
  const svgLoader = invert ? loaderInvertSVG : loaderSVG

  display = children ? 'block' : display

  if (display === 'inline') style = 'dib mh2'
  if (display === 'block') style = 'db center tc'

  if (size === 'small') sizeNumber = 16
  if (size === 'default') sizeNumber = 32
  if (size === 'big') sizeNumber = 64

  return (
    <div className={style}>
      <img
        src={svgLoader}
        height={sizeNumber}
        width={sizeNumber}
        alt="loader"
      />
      {children ? (
        <span className="db f6 bg-muted-1 mt3">{children}</span>
      ) : null}
    </div>
  )
}

Loader.propTypes = {
  children: PropTypes.string,
  size: PropTypes.oneOf(['small', 'default', 'big']),
  display: PropTypes.oneOf(['inline', 'block']),
  invert: PropTypes.bool,
}

Loader.defaultProps = {
  children: '',
  size: 'default',
  display: 'inline',
}

```


[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 b2b-orders-history/react/components/EditOrder/OptionGroupDisclaimer.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

const OptionGroupDisclaimer = ({ group: { description } }) => (
  <div>
    <strong className="pt3 db">{description.title}</strong>
    <ul className="pb0 mt3 ml0 mb0 pl5">
      {description.disclaimers.map((disclaimer, i) => (
        <li className="pb3" key={`disclaimer_${i}`}>
          {disclaimer}
        </li>
      ))}
    </ul>
  </div>
)

OptionGroupDisclaimer.propTypes = {
  group: PropTypes.object.isRequired,
}

export default OptionGroupDisclaimer

```


[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 b2b-orders-history/react/components/EditOrder/Option.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import kebabCase from 'lodash/kebabCase'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['option', 'optionInput']

const Option = ({ id, option, groupName, onChange, disabled }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  const handleChange = () => onChange(option, groupName)
  const inputId = kebabCase(id)
  return (
    <li className={`${cssHandles.option} myo-option pv5 bb bw1 b--muted-5`}>
      <span className="dtc v-mid">
        <input
          disabled={disabled}
          type="radio"
          name="sacForm"
          id={inputId}
          value={option.value}
          onChange={handleChange}
          className={`${cssHandles.optionInput} myo-option-input relative input-reset br-100 ba bb bw1 b--muted-3 dib ma0 option`}
          style={{ width: '1.3rem', height: '1.3rem', minHeight: '1.3rem' }}
        />
      </span>
      <label
        className={`w-100 dtc f5 fw4 pl5 lh-copy c-on-base ${
          disabled ? 'cursor-not-allowed o-80' : ''
        }`}
        style={{
          fontSize:
            '1rem' /* Same size as f5 -- used here to override bootstrap */,
        }}
        htmlFor={inputId}
      >
        {option.label.i18n ? (
          <FormattedMessage id={option.label.i18n} />
        ) : (
          option.label
        )}
      </label>
    </li>
  )
}

Option.defaultProps = {
  id: '00',
}

Option.propTypes = {
  id: PropTypes.string,
  option: PropTypes.object.isRequired,
  groupName: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
}

export default Option

```


[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 b2b-orders-history/react/components/EditOrder/OptionGroup.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['optionHeading']

const OptionGroup = ({ name = 'Opções', children }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  return (
    <section className="mv7">
      <h5
        className={`${cssHandles.optionHeading} myo-option-heading f7 tracked c-muted-1 ttu`}
      >
        {name}
      </h5>
      <ul className="list pa0 ma0">{children}</ul>
    </section>
  )
}

OptionGroup.propTypes = {
  name: PropTypes.string,
  children: PropTypes.any.isRequired,
}

export default OptionGroup

```


[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 b2b-orders-history/react/components/ViewOrder/OrderButtons.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.my-account-commons/Router'

import iconOptions from '../../images/options.svg'
import DropdownButton from './Dropdown'
import { addBaseURL } from '../../utils'
import { getCustomerEmail } from '../../actions/utils'

const OrderActions = ({ order, allowSAC }) => {
  const {
    orderId,
    orderGroup,
    allowEdition,
    allowCancellation,
    clientProfileData: { email: clientEmail },
  } = order

  const [loggedInEmail, setLoggedInEmail] = useState('')

  const handleOrderAgainClick = () => {
    return window.open(
      addBaseURL(`/checkout/orderform/createBy/${orderGroup}`),
      '_self'
    )
  }

  const fetchLoggedInEmail = async () => {
    return getCustomerEmail()
  }

  useEffect(() => {
    fetchLoggedInEmail()
      .then(email => {
        setLoggedInEmail(email)
      })
      .catch(error => console.error(error))

    return () => {
      setLoggedInEmail('')
    }
  }, [setLoggedInEmail])

  const isOwner = clientEmail === loggedInEmail
  const showEditOrderButton = allowSAC && allowEdition && isOwner
  const showCancelOrderButton = allowCancellation

  const CancelOrderButton = showCancelOrderButton ? (
    <Link className="no-underline" to={`/orders-history/${orderId}/cancel`}>
      <span className="db pv2 c-link hover-c-link link">
        <FormattedMessage id="order.cancelOrder" />
      </span>
    </Link>
  ) : null

  const EditOrderButton = showEditOrderButton ? (
    <Link className="no-underline" to={`/orders-history/${orderId}/edit`}>
      <span className="db pv2 c-link hover-c-link link">
        <FormattedMessage id="order.changeOrder" />
      </span>
    </Link>
  ) : null

  const OrderAgainButton = (
    // eslint-disable-next-line jsx-a11y/anchor-is-valid
    <a
      // eslint-disable-next-line no-script-url
      href="javascript:void(0)"
      onClick={handleOrderAgainClick}
      className="f6 link underline c-link hover-c-link relative"
    >
      <svg
        className="hh1 w1 absolute top-0"
        fill="#134CD8"
        viewBox="0 0 14 16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7.01 1.467V.32c0-.263-.304-.414-.515-.255L2.98 2.71c-.32.238-.32.714-.002.954l3.516 2.654c.212.16.515.01.515-.256V5.006c0-.375.34-.656.71-.6 2.56.395 4.44 2.862 3.85 5.632-.37 1.756-1.793 3.174-3.554 3.544-3.03.638-5.704-1.65-5.704-4.562 0-.955.293-1.84.79-2.575.346-.513.21-1.208-.298-1.563l-.02-.014c-.516-.36-1.246-.255-1.598.265C.196 6.607-.258 8.48.146 10.466c.548 2.705 2.74 4.877 5.46 5.4C10.084 16.726 14 13.33 14 9.02c0-3.658-2.822-6.658-6.414-6.955-.322-.027-.577-.277-.577-.598"
          fillRule="evenodd"
        />
      </svg>

      <span className="dib" style={{ marginLeft: '20px' }}>
        <FormattedMessage id="order.orderAgain" />
      </span>
    </a>
  )

  const availableOptions = [CancelOrderButton, EditOrderButton].filter(
    option => option !== null
  )
  const options =
    availableOptions.length > 1 ? (
      <DropdownButton icon={iconOptions} label="order.moreOptions">
        {EditOrderButton}
        {CancelOrderButton}
      </DropdownButton>
    ) : (
      availableOptions[0]
    )

  return (
    <ul className="list tl tr-ns ma0 pa0-s">
      {isOwner && (
        <li className="db dib-ns mr7-ns mb5 mb0-ns">{OrderAgainButton}</li>
      )}
      <li className="db dib-ns mb5 mb0-ns">{options}</li>
    </ul>
  )
}

OrderActions.propTypes = {
  order: PropTypes.object.isRequired,
  allowSAC: PropTypes.bool,
}

export default OrderActions

```


[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 b2b-orders-history/react/components/ViewOrder/OrderFlow.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

import checkIcon from '../../images/check.svg'

const OrderFlow = ({ step }) => {
  const status = [
    'order.stepsFlow.placed', // 'Pedido Realizado',
    'order.stepsFlow.approved', // 'Pedido Aprovado',
    'order.stepsFlow.sent', // 'Pedido Enviado',
    'order.stepsFlow.shipping', // 'Pedido à caminho',
    'order.stepsFlow.finished', // 'Pedido Concluído',
  ]

  /* if (!pos) {
    return (
      <p className="dn">
        <FormattedMessage id="order.stepsFlow.cancelled" />
      </p>
    )
  } */

  return (
    <ul className="list overflow-hidden ma0">
      {status.map((label, index) => {
        const activeOpacity = index >= step ? 'o-40' : ''
        const activeStyle = index >= step ? 'ba b--muted-5 br-100' : ''
        const activeImg =
          index >= step ? '' : <img src={checkIcon} alt="check" />

        return (
          <li
            className={`fl w-20-ns w-100 mb7 mb0-ns fw6 lh-copy ${activeOpacity}`}
            key={index}
          >
            <span
              className={`mr3 fl db ${activeStyle}`}
              style={{ width: '25px', height: '25px' }}
            >
              {activeImg}
            </span>
            <FormattedMessage id={label} />
          </li>
        )
      })}
    </ul>
  )
}

OrderFlow.propTypes = {
  step: PropTypes.number,
}

export default OrderFlow

```


[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 b2b-orders-history/react/components/ViewOrder/ReplacementHistory.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { Link } from 'vtex.my-account-commons/Router'

import StatusColor from '../commons/StatusColor'
import FormattedDate from '../commons/FormattedDate'

const ReplacementHistory = ({ history }) => (
  <table className="table w-100">
    <tbody>
      {history.map((order, index) => (
        <tr
          className={`${order.isCurrent ? 'bg-muted-5' : 'bg-base'}`}
          key={index}
        >
          <td className="pa2 w-25 pb3 tl v-mid">
            <FormattedDate date={order.creationDate} />
          </td>
          <td className="pa0 w-35 pb3 tl mid">
            {order.commercialConditionData && (
              <strong>
                <FormattedMessage
                  id={`reasons.${order.commercialConditionData.reason}`}
                />
              </strong>
            )}
          </td>
          <td className="pa0 w-20 pb3 tc v-mid">
            <StatusColor state={order.status} status={order.stateStatus} />
          </td>
          <td className="pa0 w-20 pb3 tr v-mid">
            {!order.isCurrent && (
              <Link to={`/orders-history/${order.orderId}`}>
                <FormattedMessage id="seeOrder" />
              </Link>
            )}
          </td>
        </tr>
      ))}
    </tbody>
  </table>
)

ReplacementHistory.propTypes = {
  history: PropTypes.array.isRequired,
}

export default ReplacementHistory

```


[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 b2b-orders-history/react/components/ViewOrder/Dropdown.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { injectIntl, intlShape } from 'react-intl'

class DropdownButton extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isOpen: false,
    }

    this.wrapperRef = React.createRef()
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleCloseDropdown)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleCloseDropdown)
  }

  handleOpenDropdown = () => this.setState({ isOpen: true })

  handleCloseDropdown = event => {
    // Only close when clicking outside the Dropdown...
    if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
      this.setState({ isOpen: false })
    }
  }

  render() {
    const isOpenStyle = this.state.isOpen ? 'db' : 'dn'
    const label = this.props.intl.formatMessage({ id: 'order.moreOptions' })

    return (
      <div
        className="pointer dib f6 link underline c-link hover-c-link relative"
        onClick={this.handleOpenDropdown}
        ref={this.wrapperRef}
      >
        <img
          src={this.props.icon}
          className="hh1 w1 top-0"
          style={{ verticalAlign: 'sub' }}
          alt=""
        />
        <span className="dib" style={{ marginLeft: '8px' }}>
          {label}
        </span>
        <div
          className={`tl ph5 pv3 left-0 absolute overflow-hidden ma0 ba br2 bg-base b--muted-5 mw4 ${isOpenStyle}`}
          style={{
            boxShadow: '0px 0px 15px -5px rgba(0,0,0,0.20)',
            top: '110%',
            left: '0',
          }}
        >
          {this.props.children}
        </div>
      </div>
    )
  }
}

DropdownButton.propTypes = {
  icon: PropTypes.any,
  label: PropTypes.string,
  children: PropTypes.node,
  intl: intlShape,
}

export default injectIntl(DropdownButton)

```


[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 b2b-orders-history/react/components/Orders/index.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

const Orders = ({ children }) => <section className="ph0">{children}</section>

Orders.propTypes = {
  children: PropTypes.any,
}

export default Orders

```


[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 b2b-orders-history/react/components/Orders/EmptyState.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { intlShape, injectIntl } from 'react-intl'
import { EmptyState } from 'vtex.styleguide'

const EmptyOrders = ({ ongoing, finished, intl }) => {
  let messageId = 'orders.notFound'

  if (finished) {
    messageId = 'orders.finishedNotFound'
  } else if (ongoing) {
    messageId = 'orders.ongoingNotFound'
  }

  return (
    <EmptyState
      title={
        <span className="c-on-base">
          {intl.formatMessage({ id: messageId })}
        </span>
      }
    />
  )
}

EmptyOrders.propTypes = {
  ongoing: PropTypes.bool,
  finished: PropTypes.bool,
  intl: intlShape.isRequired,
}

export default injectIntl(EmptyOrders)

```


[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 b2b-orders-history/react/components/Order/Products/BundleItem.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

import ProductPrice from '../../commons/ProductPrice'

const CSS_HANDLES = ['bundleItem']

const BundleItem = props => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  const { name, price, currencyCode, quantity, isGift } = props
  return (
    <tr
      className={`${cssHandles.bundleItem} myo-bundle-item bt bw1 b--muted-5`}
    >
      <td className="tl v-top pv3 v-mid overflow-hidden">
        <div className="ml3 fl overflow-hidden w-80-ns">
          <p className="fw7 f6 mb0">{name}</p>
        </div>
      </td>
      <td className="pv3 tl v-top dn dtc-ns" />
      <td />
      <td className="pl1 pt3 tl v-top v-mid">
        <ProductPrice
          value={price * quantity}
          currency={currencyCode}
          isGift={isGift}
        />
      </td>
    </tr>
  )
}

BundleItem.propTypes = {
  name: PropTypes.string,
  price: PropTypes.number,
  currencyCode: PropTypes.string,
  quantity: PropTypes.number,
  isGift: PropTypes.bool,
}

export default BundleItem

```


[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 b2b-orders-history/react/components/Order/Products/index.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { utils } from 'vtex.my-account-commons'
import { useCssHandles } from 'vtex.css-handles'

import Product from './Product'
import BundleItem from './BundleItem'
import Attachment from './Attachment'

const { reduceBundleItems } = utils

const CSS_HANDLES = ['productTable']

const Products = props => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  const { items, currencyCode, sellers } = props
  const itemsWithBundleItems = reduceBundleItems(items)

  return (
    <table
      className={`${cssHandles.productTable} myo-product-table table w-100 mt7`}
    >
      <thead>
        <tr className="tl">
          <th className="pa0 w-60 w-50-ns pb3">
            <FormattedMessage id="order.package.product" />
          </th>
          <th className="pa0 w-20 pl2 pr2 pb3 dn dtc-ns">
            <FormattedMessage id="order.package.price" />
          </th>
          <th className="pa0 w-20 pl2 pr2 pb3">
            <FormattedMessage id="order.package.quantity" />
          </th>
          <th className="pa0 w-30 w-20-ns pb3">
            <FormattedMessage id="order.package.total" />
          </th>
        </tr>
      </thead>
      <tbody>
        {itemsWithBundleItems.map((product, index) => {
          const seller = sellers.find(({ id }) => id === product.seller)
          const sellerName = seller ? seller.name : ''

          if (product.isBundleItem) {
            return (
              <BundleItem
                key={index}
                currencyCode={currencyCode}
                name={product.name}
                price={product.sellingPrice}
                quantity={product.parentItemQuantity * product.quantity}
                isGift={product.isGift}
                attachments={product.attachments}
              />
            )
          }

          if (product.isAttachment) {
            return (
              <Attachment
                key={index}
                name={product.name}
                content={product.content}
              />
            )
          }

          return (
            <Product
              key={index}
              id={product.productId}
              sellerName={sellerName}
              currencyCode={currencyCode}
              name={product.name}
              sellingPrice={product.sellingPrice}
              imageUrl={product.imageUrl}
              detailUrl={product.detailUrl}
              quantity={product.quantity}
              measurementUnit={product.measurementUnit}
              unitMultiplier={product.unitMultiplier}
              isGift={product.isGift}
              trackingUrl={
                product.logisticsInfo && product.logisticsInfo.trackingUrl
              }
              trackingNumber={
                product.logisticsInfo && product.logisticsInfo.trackingNumber
              }
            />
          )
        })}
      </tbody>
    </table>
  )
}

Products.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object),
  currencyCode: PropTypes.string,
  sellers: PropTypes.arrayOf(PropTypes.object),
}

export default Products

```


[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 b2b-orders-history/react/components/Order/Products/Attachment.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import map from 'lodash/map'
import {
  FormattedMessage,
  FormattedDate,
  injectIntl,
  intlShape,
} from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
import { translations } from 'vtex.subscriptions-commons'

import arrow from '../../../assets/arrow-up.svg'
import slugify from '../../../utils/slugify'

const ATTACHMENT_DATE_VALUES = [
  'vtex.subscription.key.validity.begin',
  'vtex.subscription.key.validity.end',
]

const CSS_HANDLES = [
  'attachment',
  'attachmentGiftWrap',
  'attachmentInfo',
  'attachmentKey',
  'attachmentValue',
  'attachmentName',
]

function getFormattedSubscriptionKey(key) {
  return (
    <FormattedMessage
      id="order.subscription.key.frequency"
      defaultMessage={key}
    />
  )
}

function getFormattedSubscriptionValue(key, value, intl) {
  if (ATTACHMENT_DATE_VALUES.includes(key)) {
    return <FormattedDate value={new Date(value)} />
  }

  const valueParts = value.trim().split(' ')
  let [interval, periodicity] = valueParts

  if (!periodicity || !interval) return ''

  switch (periodicity) {
    case 'day':
      periodicity = 'DAILY'
      break

    default:
      periodicity = `${periodicity}ly`.toUpperCase()
      break
  }

  return translations.translatePeriodicity(intl, `${periodicity}`, interval)
}

const Attachment = ({ name, content, intl }) => {
  const slugName = slugify(name)
  const cssHandles = useCssHandles(CSS_HANDLES)

  const isGiftWrap = name === 'message' && content.text
  if (isGiftWrap) {
    return (
      <tr
        className={`${cssHandles.attachment} ${cssHandles.attachmentGiftWrap} myo-attachment-gift-wrap`}
        slug={slugName}
      >
        <td className="pa0 pv5 v-mid overflow-hidden">
          <div className="ml3 fl overflow-hidden w-80-ns">
            <blockquote className="gift-message">{content.text}</blockquote>
          </div>
        </td>
        <td className="dn dtc-ns" />
        <td />
        <td className="pa0 pv5 v-mid" />
      </tr>
    )
  }

  const isSubscription = name.indexOf('vtex.subscription') === 0

  const attachmentTitle = isSubscription ? (
    <FormattedMessage id="order.subscription" />
  ) : (
    name
  )

  const attachmentInfo = map(content, (value, key) => {
    const elementKey = `${key}-${value}-${name}`
    const shouldNotDisplay = isSubscription && !value

    if (shouldNotDisplay) {
      return <div key={elementKey} className="dn" />
    }

    let formattedKey = key
    let formattedValue = value

    if (isSubscription) {
      formattedKey = getFormattedSubscriptionKey(key)
      formattedValue = getFormattedSubscriptionValue(key, value, intl)
    }

    // for compatibility
    const mainClassName = `myo-attachment-${slugify(name)}-${slugify(key)}`
    return (
      <div
        key={elementKey}
        className={`${cssHandles.attachmentInfo} ${mainClassName} myo-attachment-info pb2`}
        name={slugify(name)}
      >
        <span className={`${cssHandles.attachmentKey} myo-attachment-key fw7`}>
          {formattedKey}:
        </span>
        <span className={`${cssHandles.attachmentValue} myo-attachment-value`}>
          {formattedValue}
        </span>
      </div>
    )
  })

  return (
    <tr
      className={`${cssHandles.attachment} myo-attachment bg-muted-5`}
      slug={slugName}
    >
      <td className="pv3 tl v-top v-mid relative">
        <div className="ml9-ns mt3 fl w-80-ns">
          <img
            src={arrow}
            alt=""
            className="absolute"
            style={{ top: '-1px' }}
          />
          <p
            className={`${cssHandles.attachmentName} myo-attachment-${slugName} myo-attachment-name f5 mb0`}
          >
            {attachmentTitle}
          </p>
          <div className="pt5">{attachmentInfo}</div>
        </div>
      </td>
      <td className="pv3 tl v-top dn dtc-ns" />
      <td />
      <td className="pv3 tl v-top v-mid" />
    </tr>
  )
}

Attachment.propTypes = {
  name: PropTypes.string,
  content: PropTypes.object,
  intl: intlShape.isRequired,
}

export default injectIntl(Attachment)

```


[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 b2b-orders-history/react/components/Order/Products/Product.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'
import { Link } from 'vtex.render-runtime'

import ProductPrice from '../../commons/ProductPrice'
import ProductImage from '../../commons/ProductImage'
import UnitPrice from '../../commons/UnitPrice'
import ProductQuantity from '../../commons/ProductQuantity'
import ProductName from '../../commons/ProductName'

const CSS_HANDLES = [
  'productRow',
  'productInfo',
  'productImage',
  'productName',
  'sellerName',
  'productPrice',
  'productQuantity',
  'productTotalPrice',
]

const Product = ({
  id,
  imageUrl,
  detailUrl,
  name,
  sellerName,
  currencyCode,
  quantity,
  measurementUnit,
  unitMultiplier,
  isGift,
  sellingPrice,
}) => {
  const cssHandles = useCssHandles(CSS_HANDLES)

  return (
    <tr
      className={`${cssHandles.productRow} myo-product-row bt b--muted-5 bw1`}
    >
      <td
        className={`${cssHandles.productInfo} myo-product-info pv3 tl v-top overflow-hidden`}
      >
        <ProductImage
          className={`${cssHandles.productImage} myo-product-image mw4-ns fl mr5`}
          url={imageUrl}
          alt={name}
        />
        <div className="fl overflow-hidden w-80-ns lh-copy">
          <Link
            to={detailUrl}
            className={`${cssHandles.productName} myo-product-name fw7 f6 mb0 mt0`}
            // eslint-disable-next-line react/jsx-no-target-blank
            target="_blank"
            rel="noreferrer"
          >
            <ProductName productId={id} name={name} />
          </Link>
          <span
            className={`${cssHandles.sellerName} myo-seller-name f7 c-muted-1 db`}
          >
            {sellerName}
          </span>
        </div>
      </td>
      <td
        className={`${cssHandles.productPrice} myo-product-price pl2-ns pt3 tl v-top dn dtc-ns`}
      >
        <UnitPrice
          value={sellingPrice}
          currency={currencyCode}
          measurementUnit={measurementUnit}
          unitMultiplier={unitMultiplier}
        />
      </td>
      <td
        className={`${cssHandles.productQuantity} myo-product-quantity pl2-ns pt3 tl v-top`}
      >
        <ProductQuantity
          unitMultiplier={unitMultiplier}
          quantity={quantity}
          measurementUnit={measurementUnit}
        />
      </td>
      <td
        className={`${cssHandles.productTotalPrice} myo-product-total-price pl1-l pt3 tl v-top`}
      >
        <ProductPrice
          value={sellingPrice * quantity}
          isGift={isGift}
          currency={currencyCode}
        />
      </td>
    </tr>
  )
}

Product.propTypes = {
  id: PropTypes.string,
  imageUrl: PropTypes.string,
  detailUrl: PropTypes.string,
  name: PropTypes.string,
  sellerName: PropTypes.string,
  sellingPrice: PropTypes.number,
  currencyCode: PropTypes.string,
  quantity: PropTypes.number,
  unitMultiplier: PropTypes.number,
  measurementUnit: PropTypes.string,
  isGift: PropTypes.bool,
  attachments: PropTypes.array,
}

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 b2b-orders-history/react/components/commons/ProductName/Product.gql from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Product($values: [ID!]!) {
  productsByIdentifier(field: id, values: $values)
    @context(provider: "vtex.search-graphql@0.x") {
    productName
    productId
    items {
      itemId
      name
      variations {
        name
        values
      }
    }
  }
}

```


[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 b2b-orders-history/react/components/commons/ProductName/index.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { useQuery } from 'react-apollo'

import PRODUCT_QUERY from './Product.gql'

function ProductName({ productId, name }) {
  const { data: { productsByIdentifier } = {} } = useQuery(PRODUCT_QUERY, {
    variables: { values: [productId] },
  })

  return <>{productsByIdentifier?.[0].productName ?? name}</>
}

ProductName.propTypes = {
  productId: PropTypes.string,
  name: PropTypes.string,
}

export default ProductName

```


[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 b2b-orders-history/react/components/ViewOrder/ChangesHistory/ChangeItems.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

import ProductImage from '../../commons/ProductImage'
import ProductPrice from '../../commons/ProductPrice'
import ProductQuantity from '../../commons/ProductQuantity'

const ChangeItems = ({ items, currencyCode }) => (
  <div className="ba br2 b--muted-4 w-100">
    {items.map((item, i) => {
      const {
        id,
        imageUrl,
        measurementUnit,
        quantity,
        sellingPrice,
        price,
        name,
        unitMultiplier,
      } = item
      const showDivider = i + 1 < items.length

      return (
        <div
          key={id}
          className={`pa6 flex w-100 ${showDivider ? 'bb b--muted-4' : ''}`}
        >
          <div className="w-20">
            {imageUrl && <ProductImage url={imageUrl} />}
          </div>
          <div className="w-80 f6">
            <div className="fw6">{name}</div>
            <div className="pt5">
              {measurementUnit ? (
                <ProductQuantity
                  quantity={quantity}
                  unitMultiplier={unitMultiplier}
                  measurementUnit={measurementUnit}
                />
              ) : (
                <FormattedMessage
                  id="order.change.quantity"
                  values={{ quantity }}
                />
              )}
            </div>
            <div className="pt4 fw6">
              <ProductPrice
                value={sellingPrice || price}
                currency={currencyCode}
              />
            </div>
          </div>
        </div>
      )
    })}
  </div>
)

ChangeItems.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
  currencyCode: PropTypes.string.isRequired,
}

export default ChangeItems

```


[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 b2b-orders-history/react/components/ViewOrder/ChangesHistory/index.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'

import ArrowIcon from './ArrowIcon'
import ChangeOrderHeader from './ChangeOrderHeader'
import ChangedItems from './ChangeItems'

const ITEMS_TOTAL = 'items'
const CHANGE_TOTAL = 'change'

const ChangesHistory = ({
  items,
  totals,
  creationDate,
  changes,
  currencyCode,
}) => {
  const itemsAdded = changes.reduce(
    (all, { itemsAdded: added }) => all.concat(added),
    []
  )
  const itemsRemoved = changes.reduce(
    (all, { itemsRemoved: removed }) => all.concat(removed),
    []
  )

  const original = {
    items,
    totals: totals.filter(({ id }) => id.toLowerCase() === ITEMS_TOTAL),
    date: creationDate,
  }

  const changed = {
    items: items.slice(),
    totals: totals.filter(({ id }) =>
      [ITEMS_TOTAL, CHANGE_TOTAL].includes(id.toLowerCase())
    ),
    date: changes[changes.length - 1].receipt.date,
  }

  if (itemsAdded) {
    itemsAdded.forEach(itemAdded => {
      const itemIndex = changed.items.findIndex(({ id }) => id === itemAdded.id)
      if (itemIndex > -1) {
        changed.items[itemIndex] = {
          ...changed.items[itemIndex],
          quantity: changed.items[itemIndex].quantity + itemAdded.quantity,
        }
      } else {
        changed.items.push(itemAdded)
      }
    })
  }

  if (itemsRemoved) {
    itemsRemoved.forEach(itemRemoved => {
      const itemIndex = changed.items.findIndex(
        ({ id }) => id === itemRemoved.id
      )
      if (itemIndex > -1) {
        changed.items[itemIndex] = {
          ...changed.items[itemIndex],
          quantity: changed.items[itemIndex].quantity - itemRemoved.quantity,
        }
      }
    })

    changed.items = changed.items.filter(({ quantity }) => quantity > 0)
  }

  return (
    <div className="mt6">
      <div className="w-100 flex justify-between">
        <div className="w-45">
          <ChangeOrderHeader
            title={<FormattedMessage id="order.change.originalOrder" />}
            date={original.date}
            totals={original.totals}
            currencyCode={currencyCode}
          />
        </div>
        <div className="w-45">
          <ChangeOrderHeader
            title={<FormattedMessage id="order.change.currentOrder" />}
            date={changed.date}
            totals={changed.totals}
            currencyCode={currencyCode}
          />
        </div>
      </div>
      <div className="w-100 flex mt8">
        <div className="w-45">
          <ChangedItems items={original.items} currencyCode={currencyCode} />
        </div>
        <div className="w-10 flex items-center justify-center">
          <ArrowIcon />
        </div>
        <div className="w-45">
          <ChangedItems items={changed.items} currencyCode={currencyCode} />
        </div>
      </div>
    </div>
  )
}

ChangesHistory.propTypes = {
  changes: PropTypes.arrayOf(PropTypes.object).isRequired,
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
  totals: PropTypes.arrayOf(PropTypes.object).isRequired,
  currencyCode: PropTypes.string.isRequired,
  creationDate: PropTypes.string.isRequired,
  arrow: PropTypes.bool,
}

export default ChangesHistory

```


[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 b2b-orders-history/react/components/ViewOrder/ChangesHistory/ChangeOrderHeader.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

import FinalPrice from '../../commons/FinalPrice'

const ChangeOrderHeader = ({
  title,
  date,
  totals,
  currencyCode,
  intl: { formatDate, formatTime },
}) => (
  <div className="w-100">
    <div className="t-heading-4 mb3">{title}</div>
    <div className="t-small c-muted-1">
      <FormattedMessage
        id="order.change.date"
        values={{
          date: formatDate(date, {
            timeZone: 'UTC',
            day: '2-digit',
            month: 'long',
            year: 'numeric',
          }),
          hour: formatTime(date, {
            timeZone: 'UTC',
          }),
        }}
      />
    </div>
    <div className="t-body c-on-base mt5">
      <FinalPrice totals={totals} currencyCode={currencyCode} />
    </div>
  </div>
)

ChangeOrderHeader.propTypes = {
  title: PropTypes.element.isRequired,
  totals: PropTypes.arrayOf(PropTypes.object).isRequired,
  currencyCode: PropTypes.string.isRequired,
  date: PropTypes.string.isRequired,
  intl: intlShape.isRequired,
}

export default injectIntl(ChangeOrderHeader)

```


[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 b2b-orders-history/react/components/ViewOrder/ChangesHistory/ArrowIcon.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

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

class ArrowIcon extends PureComponent {
  render() {
    return (
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16 8C16 7.625 15.8667 7.375 15.6 7.125L8 6.03983e-07L6.13333 1.75L11.4667 6.75L-4.0433e-07 6.75L-2.95052e-07 9.25L11.4667 9.25L6.13333 14.25L8 16L15.6 8.875C15.8667 8.625 16 8.375 16 8Z"
          fill="#3F3F40"
        />
      </svg>
    )
  }
}

export default ArrowIcon

```


[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 b2b-orders-history/react/actions/utils/index.js from the b2b-orders-history VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Cookies from 'js-cookie'
import axiosRetry from '@vtex/axios-concurrent-retry'

import axios from '../../utils/customAxios'
import { addBaseURL } from '../../utils'

let session

function getSession() {
  axiosRetry(axios, {
    retries: 3,
    retryTimeout: 1,
    retryDelay: axiosRetry.exponentialDelay,
  })

  return axios
    .get(addBaseURL('/api/sessions/?items=*'))
    .then(({ data }) => data)
}

function getImpersonatedCustomerEmail() {
  return Cookies.get('vtex-impersonated-customer-email')
}

export async function retrieveSession() {
  // eslint-disable-next-line require-atomic-updates
  session = session || (await getSession())

  return session
}

async function getImpersonatedCustomerFromSessionOrCookie() {
  // eslint-disable-next-line require-atomic-updates
  const currentSession = await retrieveSession()

  if (currentSession) {
    return (
      (currentSession.namespaces &&
        currentSession.namespaces.impersonate &&
        currentSession.namespaces.impersonate.storeUserEmail &&
        currentSession.namespaces.impersonate.storeUserEmail.value) ||
      null
    )
  }

  return getImpersonatedCustomerEmail()
}

export async function getCustomerEmail() {
  const currentSession = await retrieveSession()

  const storeUserEmail =
    currentSession &&
    currentSession.namespaces &&
    currentSession.namespaces.profile &&
    currentSession.namespaces.profile.email &&
    currentSession.namespaces.profile.email.value

  return storeUserEmail || getImpersonatedCustomerFromSessionOrCookie()
}

export async function checkB2B(baseUrl) {
  const currentSession = await retrieveSession()

  return currentSession?.namespaces['storefront-permissions']?.organization
    ?.value
    ? baseUrl.replace(/api/gi, '_v/private/b2b')
    : baseUrl
}

export async function getOrdersURL(baseUrl, page = '1') {
  session = null

  const customerEmail = await getImpersonatedCustomerFromSessionOrCookie()
  const b2bUrl = await checkB2B(baseUrl)

  return customerEmail
    ? `${b2bUrl}?clientEmail=${customerEmail}&page=${page}`
    : `${b2bUrl}?page=${page}`
}

export async function getOrderDetailURL(baseUrl) {
  const customerEmail = await getImpersonatedCustomerFromSessionOrCookie()
  const b2bUrl = await checkB2B(baseUrl)

  return customerEmail ? `${b2bUrl}?clientEmail=${customerEmail}` : b2bUrl
}

export const parseJSON = response => {
  return response.json()
}

export const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response
  }

  throw response
}

export async function getCallCenterEmail() {
  const currentSession = await retrieveSession()

  const email =
    currentSession &&
    currentSession.namespaces &&
    currentSession.namespaces.authentication &&
    currentSession.namespaces.authentication.adminUserEmail &&
    currentSession.namespaces.authentication.adminUserEmail.value

  return email
}

export const OPERATION_ID_HEADER = 'x-vtex-operation-id'

export function getResponseOperationId(response) {
  return response && response.headers.get(OPERATION_ID_HEADER)
}

```


[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 wish-list-v2/messages/pt.json from the wish-list-v2 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste",
  "store/favorite-list.search-product-by-sku": "Search products by SKU"
}

```


[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 wish-list-v2/messages/en.json from the wish-list-v2 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "test",
  "store/test": "test",
  "store/favorite-list.search-product-by-sku": "Search products by SKU"
}

```


[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 wish-list-v2/messages/es.json from the wish-list-v2 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste",
  "store/favorite-list.search-product-by-sku": "Search products by SKU"
}

```