[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 return-app/react/admin/ReturnDetails/components/VerifyItems/VerifyItemsPage.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import {
  FloatingActionBar,
  ModalDialog,
  Table,
  Tooltip,
  IconInfo,
} from 'vtex.styleguide'
import { FormattedMessage, FormattedNumber } from 'react-intl'
import type { RefundItemInput } from 'vtex.return-app'

import { useReturnDetails } from '../../../../common/hooks/useReturnDetails'
import { VerifyItemsTable } from './VerifyItemsTable'
import { VerifyTotalsTable } from './VerifyTotalsTable'
import { useUpdateRequestStatus } from '../../../hooks/useUpdateRequestStatus'
import { verifyItemsModalSchema } from './verifyItemsModalSchema'

export type RefundItemMap = Map<
  number,
  { quantity: number; restockFee: number }
>

export type UpdateItemsChange = (args: {
  orderItemIndex: number
  restockFee?: number
  quantity?: number
}) => void

export type UpdateRefundShipping = (shippingToRefundInput: number) => void

interface Props {
  onViewVerifyItems: () => void
}

export const VerifyItemsPage = ({ onViewVerifyItems }: Props) => {
  const { data } = useReturnDetails()
  const { submitting, handleStatusUpdate } = useUpdateRequestStatus()

  const [refundItemsInput, setRefundItemsInput] = useState<RefundItemMap>(
    new Map()
  )

  const [isModalOpen, setIsModalOpen] = useState(false)
  const [shippingToRefund, setShippingToRefund] = useState(0)

  if (!data) return null

  const {
    id: requestId,
    items = [],
    refundableAmountTotals = [],
    cultureInfoData,
  } = data?.returnRequestDetails

  const handleItemChanges = ({
    orderItemIndex,
    restockFee,
    quantity,
  }: {
    orderItemIndex: number
    restockFee?: number
    quantity?: number
  }) => {
    const updatedRefundItemMap = new Map(refundItemsInput)
    const item = updatedRefundItemMap.get(orderItemIndex)
    const itemQuantity = quantity ?? item?.quantity ?? 0
    const itemRestockFee = restockFee ?? item?.restockFee ?? 0

    updatedRefundItemMap.set(orderItemIndex, {
      quantity: itemQuantity,
      restockFee: itemQuantity === 0 ? 0 : itemRestockFee,
    })

    setRefundItemsInput(updatedRefundItemMap)
  }

  const handleShippingChanges = (shippingToRefundInput: number) => {
    setShippingToRefund(shippingToRefundInput)
  }

  const onSave = async () => {
    if (!requestId || submitting) return

    const itemsToRefund: RefundItemInput[] = []

    for (const [
      orderItemIndex,
      { quantity, restockFee },
    ] of refundItemsInput.entries()) {
      itemsToRefund.push({
        orderItemIndex,
        quantity,
        restockFee,
      })
    }

    handleStatusUpdate({
      status: 'packageVerified',
      id: requestId,
      refundData: {
        refundedShippingValue: shippingToRefund,
        items: itemsToRefund,
      },
      cleanUp: onViewVerifyItems,
    })
  }

  const refundableShipping =
    refundableAmountTotals.find(({ id }) => id === 'shipping')?.value ?? 0

  const totalRefundItems = items.reduce((total, item) => {
    const { orderItemIndex, sellingPrice, tax } = item
    const returningItem = refundItemsInput.get(orderItemIndex)
    const { quantity = 0, restockFee = 0 } = returningItem ?? {}
    const itemTotal = (sellingPrice + tax) * quantity - restockFee

    return total + itemTotal
  }, 0)

  return (
    <>
      <section>
        <h2>
          <FormattedMessage id="admin/return-app.return-request-details.verify-items.title" />
        </h2>
        <VerifyItemsTable
          items={items}
          refundItemsInput={refundItemsInput}
          onItemChange={handleItemChanges}
        />
        <VerifyTotalsTable
          refundableShipping={refundableShipping}
          shippingToRefund={shippingToRefund}
          totalRefundItems={totalRefundItems}
          onRefundShippingChange={handleShippingChanges}
        />
      </section>
      <FloatingActionBar
        save={{
          label: (
            <FormattedMessage id="admin/return-app.return-request-details.verify-items.action.confirm" />
          ),
          isLoading: submitting,
          onClick: () => setIsModalOpen(true),
        }}
        cancel={{
          label: (
            <FormattedMessage id="admin/return-app.return-request-details.verify-items.action.cancel" />
          ),
          onClick: onViewVerifyItems,
        }}
      />
      <ModalDialog
        centered
        confirmation={{
          onClick: onSave,
          label: totalRefundItems ? (
            <FormattedMessage id="admin/return-app.return-request-details.verify-items.modal.button-verify" />
          ) : (
            <FormattedMessage id="admin/return-app.return-request-details.verify-items.modal.button-deny" />
          ),
        }}
        cancelation={{
          onClick: () => setIsModalOpen(false),
          label: 'Cancel',
        }}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      >
        <div>
          <p className="f3 f3-ns fw6">
            <FormattedMessage id="admin/return-app.return-request-details.verify-items.modal.title" />
          </p>
          <div>
            <Table
              fullWidth
              schema={verifyItemsModalSchema(refundItemsInput, cultureInfoData)}
              items={items}
            />
          </div>

          {totalRefundItems ? (
            <>
              <div className="flex mt5 justify-end">
                <p className="f6 mr5 gray">
                  <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.shipping-to-refund" />
                  :
                </p>
                <p className="f6 ">
                  <FormattedNumber
                    value={Number(shippingToRefund) / 100}
                    currency={cultureInfoData.currencyCode}
                    style="currency"
                  />
                </p>
              </div>
              <div className="flex justify-end">
                <p className="f6 mr5 gray">
                  <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.total-refund-items" />
                  :
                </p>
                <p className="f6 ">
                  <FormattedNumber
                    value={Number(totalRefundItems) / 100}
                    currency={cultureInfoData.currencyCode}
                    style="currency"
                  />
                </p>
              </div>
              <div className="flex justify-end">
                <p className="f6 mr5 gray b">
                  <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.total-refund" />
                  :
                </p>
                <p className="f6">
                  <FormattedNumber
                    value={
                      (Number(shippingToRefund) + Number(totalRefundItems)) /
                      100
                    }
                    currency={cultureInfoData.currencyCode}
                    style="currency"
                  />
                </p>
              </div>
            </>
          ) : (
            <div className="flex items-center justify-end mt7">
              <Tooltip
                label={
                  <FormattedMessage id="admin/return-app.return-request-details.verify-items.modal.tooltip" />
                }
              >
                <span className="yellow pointer mr3 flex">
                  <IconInfo />
                </span>
              </Tooltip>
              <span className="i-s">
                <FormattedMessage id="admin/return-app.return-request-details.verify-items.modal.deny-message" />
              </span>
            </div>
          )}
        </div>
      </ModalDialog>
    </>
  )
}

```


[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 return-app/react/admin/ReturnDetails/components/VerifyItems/VerifyItemsTable.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { Table } from 'vtex.styleguide'
import type { ReturnRequestItem } from 'vtex.return-app'

import { verifyItemsTableSchema } from './verifyItemsTableSchema'
import type { RefundItemMap, UpdateItemsChange } from './VerifyItemsPage'
import { useReturnDetails } from '../../../../common/hooks/useReturnDetails'

interface Props {
  items: ReturnRequestItem[]
  refundItemsInput: RefundItemMap
  onItemChange: UpdateItemsChange
}

export const VerifyItemsTable = ({
  items,
  refundItemsInput,
  onItemChange,
}: Props) => {
  const { data } = useReturnDetails()

  if (!data) return null

  const { cultureInfoData } = data.returnRequestDetails

  return (
    <div>
      <h3>
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.title.items" />
      </h3>
      <Table
        fullWidth
        fixFirstColumn
        schema={verifyItemsTableSchema(
          refundItemsInput,
          onItemChange,
          cultureInfoData
        )}
        items={items}
      />
    </div>
  )
}

```


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

[User] Show me the implementation of return-app/react/admin/ReturnDetails/components/VerifyItems/verifyTotalsTableSchema.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ChangeEvent } from 'react'
import React from 'react'
import { FormattedMessage, FormattedNumber } from 'react-intl'
import { InputCurrency } from 'vtex.styleguide'
import type { CultureInfoData } from 'vtex.return-app'

import { AlignItemRight } from '../AlignItemRight'

export const verifyTotalsTableSchema = (
  handleShippingChanges: (shippingToRefundInput: number) => void,
  cultureInfoData: CultureInfoData
) => ({
  properties: {
    refundableShipping: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.refundable-shipping" />
      ),
      headerRight: true,
      cellRenderer: function RefundableShippingHeader({
        cellData,
      }: {
        cellData: number
      }) {
        return (
          <AlignItemRight>
            <FormattedNumber
              value={cellData / 100}
              style="currency"
              currency={cultureInfoData.currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
    shippingToRefund: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.shipping-to-refund" />
      ),
      headerRight: true,
      cellRenderer: function ShippingToRefundHeader({
        cellData,
        rowData,
      }: {
        cellData: number
        rowData: { refundableShipping: number }
      }) {
        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
          const { refundableShipping } = rowData
          const { value } = event.target
          const shippingToRefundInput = Number(value)

          const shippingToRefundParsed = Number.isNaN(shippingToRefundInput)
            ? 0
            : shippingToRefundInput * 100

          const shippingToRefundChecked =
            shippingToRefundParsed > refundableShipping
              ? refundableShipping
              : shippingToRefundParsed

          handleShippingChanges(shippingToRefundChecked)
        }

        return (
          <AlignItemRight>
            <InputCurrency
              value={cellData / 100}
              currencyCode={cultureInfoData.currencyCode}
              locale={cultureInfoData.locale}
              onChange={handleChange}
            />
          </AlignItemRight>
        )
      },
    },
    totalRefundItems: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.total-refund-items" />
      ),
      headerRight: true,
      cellRenderer: function TotalRefundItemsHeader({
        cellData,
      }: {
        cellData: number
      }) {
        return (
          <AlignItemRight>
            <FormattedNumber
              value={cellData / 100}
              style="currency"
              currency={cultureInfoData.currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
    totalRefund: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.total-refund" />
      ),
      headerRight: true,
      cellRenderer: function TotalRefundHeader({
        cellData,
      }: {
        cellData: number
      }) {
        return (
          <AlignItemRight>
            <FormattedNumber
              value={cellData / 100}
              style="currency"
              currency={cultureInfoData.currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
  },
})

```


[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 return-app/react/admin/ReturnDetails/components/VerifyItems/verifyItemsModalSchema.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage, FormattedNumber } from 'react-intl'
import type { ReturnRequestItem, CultureInfoData } from 'vtex.return-app'

import type { RefundItemMap } from './VerifyItemsPage'
import { AlignItemRight } from '../AlignItemRight'
import { ProductActionStatus } from './ProductActionStatus'

export const verifyItemsModalSchema = (
  refundItemMap: RefundItemMap,
  cultureInfoData: CultureInfoData
) => ({
  properties: {
    name: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.product" />
      ),
      minWidth: 320,
    },
    sellingPrice: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.price" />
      ),
      width: 90,
      headerRight: true,
      cellRenderer: function SellingPriceHeader({
        cellData,
      }: {
        rowData: ReturnRequestItem
        cellData: ReturnRequestItem['sellingPrice']
      }) {
        return (
          <AlignItemRight>
            <FormattedNumber
              value={cellData / 100}
              style="currency"
              currency={cultureInfoData.currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
    quantity: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.quantity" />
      ),
      width: 80,
      cellRenderer: function QuantityHeader({
        rowData,
      }: {
        rowData: ReturnRequestItem
        // cellData: ReturnRequestItem['quantity']
      }) {
        const { orderItemIndex } = rowData
        const selectedQuantity =
          refundItemMap.get(orderItemIndex)?.quantity ?? 0

        return (
          <span className="w-100 flex justify-center">{selectedQuantity}</span>
        )
      },
    },
    action: {
      title: (
        <FormattedMessage id="admin/return-app.return-request-details.verify-items.table.header.action" />
      ),
      cellRenderer: function VerifyActionHeader({
        rowData,
      }: {
        rowData: ReturnRequestItem
      }) {
        const { quantity, orderItemIndex } = rowData

        const selectedQuantity =
          refundItemMap.get(orderItemIndex)?.quantity ?? 0

        return (
          <ProductActionStatus
            quantity={quantity}
            selectedQuantity={selectedQuantity}
          />
        )
      },
    },
  },
})

```


[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 return-app/react/common/constants/returnsRequest.ts from the return-app VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { IntlFormatters } from 'react-intl'

import { defaultReturnReasonsMessages } from '../../store/utils/defaultReturnReasonsMessages'

export function getReasonOptions(
  formatMessage: IntlFormatters['formatMessage']
) {
  const reasonAccidentalOrder = formatMessage(
    defaultReturnReasonsMessages.reasonAccidentalOrder
  )

  const reasonBetterPrice = formatMessage(
    defaultReturnReasonsMessages.reasonBetterPrice
  )

  const reasonPerformance = formatMessage(
    defaultReturnReasonsMessages.reasonPerformance
  )

  const reasonItemDamaged = formatMessage(
    defaultReturnReasonsMessages.reasonItemDamaged
  )

  const reasonIncompatible = formatMessage(
    defaultReturnReasonsMessages.reasonIncompatible
  )

  const reasonMissedDelivery = formatMessage(
    defaultReturnReasonsMessages.reasonMissedDelivery
  )

  const reasonMissingParts = formatMessage(
    defaultReturnReasonsMessages.reasonMissingParts
  )

  const reasonBoxDamaged = formatMessage(
    defaultReturnReasonsMessages.reasonBoxDamaged
  )

  const reasonDifferentProduct = formatMessage(
    defaultReturnReasonsMessages.reasonDifferentProduct
  )

  const reasonDefective = formatMessage(
    defaultReturnReasonsMessages.reasonDefective
  )

  const reasonArrivedInAddition = formatMessage(
    defaultReturnReasonsMessages.reasonArrivedInAddition
  )

  const reasonNoLongerNeeded = formatMessage(
    defaultReturnReasonsMessages.reasonNoLongerNeeded
  )

  const reasonUnauthorizedPurchase = formatMessage(
    defaultReturnReasonsMessages.reasonUnauthorizedPurchase
  )

  const reasonDifferentFromWebsite = formatMessage(
    defaultReturnReasonsMessages.reasonDifferentFromWebsite
  )

  return [
    {
      value: reasonAccidentalOrder,
      label: reasonAccidentalOrder,
    },
    {
      value: reasonBetterPrice,
      label: reasonBetterPrice,
    },
    {
      value: reasonPerformance,
      label: reasonPerformance,
    },
    {
      value: reasonIncompatible,
      label: reasonIncompatible,
    },
    {
      value: reasonItemDamaged,
      label: reasonItemDamaged,
    },
    {
      value: reasonMissedDelivery,
      label: reasonMissedDelivery,
    },
    {
      value: reasonMissingParts,
      label: reasonMissingParts,
    },
    {
      value: reasonBoxDamaged,
      label: reasonBoxDamaged,
    },
    {
      value: reasonDifferentProduct,
      label: reasonDifferentProduct,
    },
    {
      value: reasonDefective,
      label: reasonDefective,
    },
    {
      value: reasonArrivedInAddition,
      label: reasonArrivedInAddition,
    },
    {
      value: reasonNoLongerNeeded,
      label: reasonNoLongerNeeded,
    },
    {
      value: reasonUnauthorizedPurchase,
      label: reasonUnauthorizedPurchase,
    },
    {
      value: reasonDifferentFromWebsite,
      label: reasonDifferentFromWebsite,
    },
  ]
}

```


[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 return-app/react/common/provider/ReturnDetailsProvider.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { createContext } from 'react'
import type { ApolloError } from 'apollo-client'
import { useQuery } from 'react-apollo'
import type {
  ReturnRequestResponse,
  QueryReturnRequestArgs,
} from 'vtex.return-app'

import GET_REQUEST_DETAILS from '../graphql/getRequestDetails.gql'

interface ReturnDetailsSetupInterface {
  data?: { returnRequestDetails: ReturnRequestResponse }
  loading: boolean
  error?: ApolloError
  _handleUpdateQuery: (returnRequestDetails: ReturnRequestResponse) => void
}

export interface CustomRouteProps {
  requestId: string
}

export const ReturnDetailsContext = createContext<ReturnDetailsSetupInterface>(
  {} as ReturnDetailsSetupInterface
)

export const ReturnDetailsProvider: FC<CustomRouteProps> = ({
  requestId,
  children,
}) => {
  const { data, loading, error, updateQuery } = useQuery<
    { returnRequestDetails: ReturnRequestResponse },
    QueryReturnRequestArgs
  >(GET_REQUEST_DETAILS, {
    variables: {
      requestId,
    },
    skip: !requestId,
  })

  const _handleUpdateQuery = (returnRequestDetails: ReturnRequestResponse) => {
    updateQuery(() => ({
      returnRequestDetails,
    }))
  }

  return (
    <ReturnDetailsContext.Provider
      value={{
        data,
        loading,
        error,
        _handleUpdateQuery,
      }}
    >
      {children}
    </ReturnDetailsContext.Provider>
  )
}

```


[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 return-app/react/common/utils/defaultReturnConditionsMessages.ts from the return-app VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { defineMessages } from 'react-intl'

export const defaultReturnConditionsMessages = defineMessages({
  newWithBox: {
    id: 'store/return-app.return-order-details.conditions.new-with-box',
  },
  newWithoutBox: {
    id: 'store/return-app.return-order-details.conditions.new-without-box',
  },
  usedWithBox: {
    id: 'store/return-app.return-order-details.conditions.used-with-box',
  },
  usedWithoutBox: {
    id: 'store/return-app.return-order-details.conditions.used-without-box',
  },
  selectCondition: {
    id: 'store/return-app.return-order-details.dropdown-conditions.placeholder.select-condition',
  },
})

```


[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 return-app/react/common/components/RenderStatus.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import type { Status } from 'vtex.return-app'
import { FormattedMessage } from 'react-intl'
import {
  IconClock,
  IconFailure,
  IconVisibilityOn,
  IconCheck,
  IconSuccess,
  IconExternalLinkMini,
} from 'vtex.styleguide'

const status = {
  new: 'new',
  processing: 'processing',
  picked: 'pickedUpFromClient',
  pendingVerification: 'pendingVerification',
  verified: 'packageVerified',
  denied: 'denied',
  refunded: 'amountRefunded',
  cancelled: 'cancelled',
} as const

/**
 * Renders the status with an icon and color
 */
export function renderStatus(requestStatus: Status) {
  switch (requestStatus) {
    case status.verified:
      return (
        <div className="green flex items-center">
          <span className="mr2 flex">
            <IconSuccess size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.package-verified" />
        </div>
      )

    case status.denied:
      return (
        <div className="red flex items-center">
          <span className="mr2 flex">
            <IconFailure size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.denied" />
        </div>
      )

    case status.cancelled:
      return (
        <div className="red flex items-center">
          <span className="mr2 flex">
            <IconFailure size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.cancelled" />
        </div>
      )

    case status.pendingVerification:
      return (
        <div className="yellow flex items-center">
          <span className="mr2 flex">
            <IconClock size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.pending-verification" />
        </div>
      )

    case status.processing:
      return (
        <div className="yellow flex items-center">
          <span className="mr2 flex">
            <IconClock size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.processing" />
        </div>
      )

    case status.refunded:
      return (
        <div className="green flex items-center">
          <span className="mr2 flex">
            <IconCheck size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.refunded" />
        </div>
      )

    case status.picked:
      return (
        <div className="flex items-center">
          <span className="mr2 flex">
            <IconExternalLinkMini size={11} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.pickedup-from-client" />
        </div>
      )

    default:
      return (
        <div className="green flex items-center">
          <span className="mr2 flex">
            <IconVisibilityOn size={14} />
          </span>
          <FormattedMessage id="store/return-app.return-request-list.table.status.new" />
        </div>
      )
  }
}

```


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

[User] Show me the implementation of return-app/react/common/components/ContactDetails.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

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

import { useReturnDetails } from '../hooks/useReturnDetails'

const CSS_HANDLES = ['contactDetailsCommonContainer'] as const

export const ContactDetails = () => {
  const handles = useCssHandles(CSS_HANDLES)

  const { data } = useReturnDetails()

  if (!data) return null

  const {
    returnRequestDetails: {
      customerProfileData: { name, email, phoneNumber },
    },
  } = data

  const messagesRoute = 'store/return-app.return-request-details.contact-details'

  return (
    <section
      className={`${handles.contactDetailsCommonContainer} flex-ns flex-wrap flex-auto flex-column pt4 pb4`}
    >
      <h3>
        <FormattedMessage id={`${messagesRoute}.title`} />
      </h3>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage id={`${messagesRoute}.name`} />: {name}
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage id={`${messagesRoute}.email`} />: {email}
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage id={`${messagesRoute}.phone`} />: {phoneNumber}
        </p>
      </div>
    </section>
  )
}

```


[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 return-app/react/common/graphql/getRequestDetails.gql from the return-app VTEX app.

[Assistant]
Here's the implementation:

```graphql
#import './returnDetailsFragment.gql'

query getRequestDetails($requestId: ID!) {
  returnRequestDetails: returnRequest(requestId: $requestId)
    @context(provider: "vtex.return-app") {
    ...ReturnDetailsAdminFragment
  }
}

```


[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 return-app/react/common/graphql/returnDetailsFragment.gql from the return-app VTEX app.

[Assistant]
Here's the implementation:

```graphql
fragment ReturnDetailsAdminFragment on ReturnRequestResponse {
  id
  status
  orderId
  refundableAmount
  items {
    orderItemIndex
    name
    localizedName
    sellingPrice
    tax
    quantity
    imageUrl
    sellerName
    refId
    condition
    returnReason {
      reason
      otherReason
    }
  }
  refundableAmountTotals {
    id
    value
  }
  refundData {
    refundedShippingValue
    invoiceValue
    items {
      orderItemIndex
      quantity
      price
      restockFee
    }
  }
  customerProfileData {
    name
    email
    phoneNumber
  }
  pickupReturnData {
    country
    city
    address
    state
    zipCode
    addressType
  }
  refundPaymentData {
    refundPaymentMethod
    iban
    accountHolderName
    automaticallyRefundPaymentMethod
  }
  refundData {
    invoiceNumber
    invoiceValue
    giftCard {
      id
      redemptionCode
    }
  }
  refundStatusData {
    status
    submittedBy
    createdAt
    comments {
      comment
      createdAt
      visibleForCustomer
      submittedBy
      role
    }
  }
  cultureInfoData {
    currencyCode
    locale
  }
}

```


[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 return-app/react/common/hooks/useReturnDetails.ts from the return-app VTEX app.

[Assistant]
Here's the implementation:

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

import { ReturnDetailsContext } from '../provider/ReturnDetailsProvider'

export const useReturnDetails = () => useContext(ReturnDetailsContext)

```


[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 return-app/react/common/helpers/timelineActiveStatus.ts from the return-app VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { requestsStatuses } from '../utils'

type Status = typeof requestsStatuses[keyof typeof requestsStatuses]

type Request = {
  status: Status
}
type StepStatusDictionary = {
  [key in Status]: number
}

/**
 * get current step status as number of step.
 * @param param.status - status of request ("New" , "Processing" , "Picked up from client" , "Pending verification" , "Approved" , "Partially approved" , "Denied" , "Refunded").
 * @returns 1 if status is "New" , 2 if status is "Processing" , 3 if status is "Picked up from client" , 4 if status is "Pending verification" , 5 if status is "Approved" , 5 if status is "Partially approved" , 5 if status is "Denied" , 6 if status is "Refunded".
 */
const getCurrentStep = ({ status }: Request): number => {
  const stepStatusDictionary: StepStatusDictionary = {
    New: 1,
    Processing: 2,
    'Picked up from client': 3,
    'Pending verification': 4,
    'Partially approved': 5,
    Approved: 5,
    Denied: 5,
    Refunded: 6,
  } as const

  return stepStatusDictionary[status]
}

/**
 *
 * @param param.status - status of request ("New" , "Processing" , "Picked up from client" , "Pending verification" , "Approved" , "Partially approved" , "Denied" , "Refunded").
 * @param param.step - current step of request.
 * @returns 1 | 0
 */
const isCurrentStepActive = ({
  status,
  step,
}: Request & { step: number }): 1 | 0 => {
  return getCurrentStep({ status }) >= step ? 1 : 0
}

export default isCurrentStepActive

```


[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 return-app/react/common/components/GridCard/index.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable jsx-a11y/img-redundant-alt */
import React, { useMemo } from 'react'
import { FormattedMessage, FormattedDate } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
import { useRuntime } from 'vtex.render-runtime/'

import { renderStatus } from '../RenderStatus'

import './styles.css'

interface GridCardProps {
  cardTypeByPage?: 'my-returns' | 'request-return'
  item: any
}

const CSS_HANDLES = [
  'returnListItem',
  'returnListItemHeader',
  'returnListItemImage',
  'returnListItemInfo',
  'returnListItemInfoDate',
  'returnListItemInfoIdContainer',
  'returnListItemInfoStatus',
] as const

export const GridCard = ({
  cardTypeByPage = 'my-returns',
  item,
}: GridCardProps) => {
  const handles = useCssHandles(CSS_HANDLES)
  const { navigate } = useRuntime()

  const navigateToCorrectReturnPage = () => {
    if (cardTypeByPage === 'request-return') {
      navigate({
        to: `#/my-returns/add/${item?.orderId ?? ''}`,
      })
    } else {
      navigate({
        to: `#/my-returns/details/${item?.id ?? ''}`,
      })
    }
  }

  const availableItemsToReturnCount = useMemo(() => {
    return (
      (item?.invoicedItems?.length ?? 0) - (item?.processedItems?.length ?? 0)
    )
  }, [item])

  let itemImage =
    cardTypeByPage === 'request-return'
      ? item?.invoicedItems?.[0]?.imageUrl ?? ''
      : item?.items?.[0]?.imageUrl ?? ''

  /**
   * Matches the id of an image and captures the width and height
   * @example ids/167082-880-880/ -> -880-880
   */
  const replaceImageSize = itemImage?.match(/ids\/[^-]*(.*)\//)

  itemImage = replaceImageSize
    ? itemImage.replace(replaceImageSize[1], `-200-200`)
    : itemImage

  return (
    <div
      onClick={navigateToCorrectReturnPage}
      className={handles.returnListItem}
      aria-hidden="true"
    >
      {cardTypeByPage === 'my-returns' && (
        <div className={handles.returnListItemHeader}>
          <span>
            <FormattedMessage id="store/return-app.request-return.page.card.sequential-number" />
          </span>
          <span>{item?.sequenceNumber ?? '123456-7'}</span>
        </div>
      )}

      {cardTypeByPage === 'request-return' && (
        <div className={handles.returnListItemHeader}>
          <span>ID:</span>
          <span>{item?.orderId ?? ''}</span>
        </div>
      )}

      <div className={handles.returnListItemImage}>
        <img src={itemImage ?? '#'} alt="order image" />
      </div>

      <div className={handles.returnListItemInfo}>
        <span className={handles.returnListItemInfoDate}>
          <FormattedDate
            value={item?.creationDate ?? new Date()}
            day="2-digit"
            month="2-digit"
            year="numeric"
          />
        </span>

        {cardTypeByPage === 'my-returns' && (
          <>
            <div className={handles.returnListItemInfoIdContainer}>
              <span>ID:</span>
              <span>{item?.orderId ?? ''}</span>
            </div>
            <div className={handles.returnListItemInfoStatus}>
              <span>
                <FormattedMessage id="store/return-app.return-request-details.status-timeline.header" />
                :
              </span>
              {!!item?.status && <span>{renderStatus(item.status)}</span>}
            </div>
          </>
        )}

        {cardTypeByPage === 'request-return' && (
          <div className={handles.returnListItemInfoStatus}>
            <span>
              <FormattedMessage id="store/return-app.request-return.page.card.return-text" />
            </span>
            <span>
              {availableItemsToReturnCount ?? 0}/
              {item?.invoicedItems?.length ?? 0}
            </span>
          </div>
        )}
      </div>
    </div>
  )
}

```


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

[User] Show me the implementation of return-app/react/common/components/GridCard/styles.css from the return-app VTEX app.

[Assistant]
Here's the implementation:

```css
.returnListItem{
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 0px;
  gap: 12px;

  border-radius: 6px;

  background: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

  border: none;
}

.returnListItemHeader{
  display: flex;
  align-items: center;

  gap: 6px;

  padding-left: 2px;
}

.returnListItemHeader > span {
  font-size: .75rem;
  color: #464646;
  text-align: left;
}

.returnListItemImage {
  width: 100%;
  height: 100%;
  max-height: 162px;
}

.returnListItemImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.returnListItemInfo {
  display: flex;
  flex-direction: column;

  gap: 12px;
  padding: 0 10px;
}

.returnListItemInfoDate {
  font-size: .75rem;
  color: #464646;
  font-weight: 400;
}

.returnListItemInfoIdContainer {
  display: flex;
  align-items: center;

  gap: 10px;
}

.returnListItemInfoIdContainer > span {
  font-size: .875rem;
  color: #464646;
  font-weight: 400;
  text-align: left;
}

.returnListItemInfoIdContainer > span:first-child {
  font-weight: 500;
  text-align: left;
}

.returnListItemInfoStatus {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 10px;
}

.returnListItemInfoStatus > span {
  font-size: .75rem;
  color: #464646;
  font-weight: 400;
  text-align: left;
}

.returnListItemInfoStatus > span:first-child {
  font-weight: 500;
}

.returnListItemInfoStatus > span:last-child {
  min-width: 20px;
  text-align: right;
}
```


[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 return-app/react/common/components/ReturnDetails/PickupAddress.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

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

import { useReturnDetails } from '../../hooks/useReturnDetails'

const CSS_HANDLES = ['commonPickupContainer'] as const

export const PickupAddress = () => {
  const { data } = useReturnDetails()
  const handles = useCssHandles(CSS_HANDLES)

  if (!data) return null

  const {
    returnRequestDetails: {
      pickupReturnData: { country, state, address, zipCode, city, addressType },
    },
  } = data

  const pickupAddressMessageRoute =
    'store/return-app.return-request-details.pickup-address'

  return (
    <section
      className={`${handles.commonPickupContainer} flex-ns flex-wrap flex-auto flex-column pt4 pb4`}
    >
      <h3>
        <FormattedMessage id={`${pickupAddressMessageRoute}.title`} />
      </h3>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage id={`${pickupAddressMessageRoute}.pickup-type`} />:{' '}
          {addressType === 'PICKUP_POINT' ? (
            <FormattedMessage
              id={`${pickupAddressMessageRoute}.pickup-type.pickup-point`}
            />
          ) : (
            <FormattedMessage
              id={`${pickupAddressMessageRoute}.pickup-type.customer-address`}
            />
          )}
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage
            id={`${pickupAddressMessageRoute}.country`}
            values={{
              country,
            }}
          />
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage
            id={`${pickupAddressMessageRoute}.locality`}
            values={{
              city,
            }}
          />
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage
            id={`${pickupAddressMessageRoute}.address`}
            values={{
              address,
            }}
          />
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage
            id={`${pickupAddressMessageRoute}.state`}
            values={{
              state,
            }}
          />
        </p>
      </div>
      <div className="mb5">
        <p className="ma0">
          <FormattedMessage
            id={`${pickupAddressMessageRoute}.zip`}
            values={{
              zipCode,
            }}
          />
        </p>
      </div>
    </section>
  )
}

```


[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 return-app/react/common/components/ReturnDetails/RefundMethodDetail.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage, FormattedNumber } from 'react-intl'
import type { GiftCard, Maybe, RefundPaymentData } from 'vtex.return-app'
import { useCssHandles } from 'vtex.css-handles'
import { useRuntime } from 'vtex.render-runtime'

import { useReturnDetails } from '../../hooks/useReturnDetails'

const CSS_HANDLES = ['refundMethodDetailContainer'] as const

const messageId =
  'store/return-app.return-request-details.payent-method.refund-option'

interface RefundMethodProps {
  refundPaymentData: RefundPaymentData
  giftCard: Maybe<GiftCard> | undefined
  refundValue: Maybe<number> | undefined
  currency: string
}

const RefundPayment = (props: RefundMethodProps) => {
  const handles = useCssHandles(CSS_HANDLES)
  const {
    route: { domain },
  } = useRuntime()

  const { refundPaymentData, giftCard, refundValue, currency } = props

  const {
    refundPaymentMethod,
    iban,
    accountHolderName,
    automaticallyRefundPaymentMethod,
  } = refundPaymentData

  if (refundPaymentMethod === 'giftCard') {
    return (
      <div className={handles.refundMethodDetailContainer}>
        <p>
          <FormattedMessage
            id={`${messageId}.refund-method`}
            values={{
              refundMethod: <FormattedMessage id={`${messageId}.gift-card`} />,
            }}
          />
        </p>
        {giftCard && refundValue ? (
          <>
            <p>
              <FormattedMessage
                id={`${messageId}.gift-card-code`}
                values={{
                  code: giftCard.redemptionCode,
                }}
              />
            </p>

            <p>
              <FormattedMessage
                id={`${messageId}.gift-card-value`}
                values={{
                  value: (
                    <FormattedNumber
                      value={refundValue / 100}
                      style="currency"
                      currency={currency}
                    />
                  ),
                }}
              />
            </p>
          </>
        ) : (
          <></>
        )}
      </div>
    )
  }

  if (refundPaymentMethod === 'bank') {
    return (
      <div>
        <p>
          <FormattedMessage
            id={`${messageId}.refund-method`}
            values={{
              refundMethod: <FormattedMessage id={`${messageId}.bank`} />,
            }}
          />
        </p>
        <p>
          <FormattedMessage
            id={`${messageId}.iban`}
            values={{
              iban,
            }}
          />
        </p>
        <p>
          <FormattedMessage
            id={`${messageId}.account-holder`}
            values={{ accountHolderName }}
          />
        </p>
      </div>
    )
  }

  if (refundPaymentMethod === 'card') {
    return (
      <div>
        <p>
          <FormattedMessage
            id={`${messageId}.refund-method`}
            values={{
              refundMethod: <FormattedMessage id={`${messageId}.card`} />,
            }}
          />
        </p>
      </div>
    )
  }

  if (refundPaymentMethod === 'sameAsPurchase') {
    return (
      <div>
        <p>
          <FormattedMessage
            id={`${messageId}.refund-method`}
            values={{
              refundMethod: (
                <FormattedMessage id={`${messageId}.same-as-purchase`} />
              ),
            }}
          />
        </p>
        {domain !== 'admin' ? null : (
          <FormattedMessage
            id="store/return-app.return-request-details.payent-method.refund-option.refund-process"
            values={{ automaticallyRefundPaymentMethod }}
          />
        )}
      </div>
    )
  }

  return null
}

export const RefundMethodDetail = () => {
  const { data } = useReturnDetails()

  if (!data) return null

  const {
    returnRequestDetails: { refundPaymentData, refundData, cultureInfoData },
  } = data

  if (!refundPaymentData) return null

  return (
    <section>
      <h3>
        <FormattedMessage id="store/return-app.return-request-details.payent-method.title" />
      </h3>
      <RefundPayment
        refundPaymentData={refundPaymentData}
        giftCard={refundData?.giftCard}
        refundValue={refundData?.invoiceValue}
        currency={cultureInfoData.currencyCode}
      />
    </section>
  )
}

```


[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 return-app/react/common/components/ReturnDetails/RequestCancellation.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'
import type { FormEvent, ReactElement } from 'react'
import { utils, Button, EXPERIMENTAL_Modal as Modal } from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'

import { useReturnDetails } from '../../hooks/useReturnDetails'
import { useUpdateRequestStatus } from '../../../admin/hooks/useUpdateRequestStatus'

type CancellationMessage =
  | 'adminAllow'
  | 'adminRefuse'
  | 'storeAllow'
  | 'storeRefuse'

export const messages = defineMessages({
  adminAllow: {
    id: 'store/return-app.return-request-details.cancellation.modal.adminAllow',
  },
  adminRefuse: {
    id: 'store/return-app.return-request-details.cancellation.modal.adminRefuse',
  },
  storeAllow: {
    id: 'store/return-app.return-request-details.cancellation.modal.storeAllow',
  },
  storeRefuse: {
    id: 'store/return-app.return-request-details.cancellation.modal.storeRefuse',
  },
})

const ParagraphChunk = (chunks: ReactElement) => <p>{chunks}</p>

const RequestCancellation = () => {
  const { isOpen, onOpen, onClose } = utils.useDisclosure()
  const { data } = useReturnDetails()
  const {
    route: { domain },
    hints: { phone },
  } = useRuntime()

  const { formatMessage } = useIntl()

  const { submitting, handleStatusUpdate } = useUpdateRequestStatus()

  if (!data) return null

  const { status, id } = data.returnRequestDetails

  const isDisabled = ['denied', 'cancelled'].includes(status)

  if (isDisabled) {
    return (
      <Button variation="danger" size="small" disabled>
        <FormattedMessage id="store/return-app.return-request-details.cancellation.cta" />
      </Button>
    )
  }

  const isAdmin = domain === 'admin'

  // Both the user and the admin have different rules and messages
  let messageKey: CancellationMessage

  if (isAdmin) {
    messageKey =
      status === 'new' || status === 'processing' ? 'adminAllow' : 'adminRefuse'
  } else {
    messageKey = status === 'new' ? 'storeAllow' : 'storeRefuse'
  }

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    if (submitting) {
      return
    }

    handleStatusUpdate({
      id,
      status: 'cancelled',
      cleanUp: () => {
        onClose()
      },
    })
  }

  return (
    <>
      <div className={phone ? 'mt4' : ''}>
        <Button
          variation="danger"
          size="small"
          onClick={onOpen}
          disabled={isDisabled}
        >
          <FormattedMessage id="store/return-app.return-request-details.cancellation.cta" />
        </Button>
      </div>

      <Modal
        size="small"
        isOpen={isOpen}
        onClose={onClose}
        bottomBar={
          <div className="nowrap">
            <span className="mr4">
              <Button
                size="small"
                variation="tertiary"
                onClick={onClose}
                disabled={submitting}
              >
                <FormattedMessage id="store/return-app.return-request-details.cancellation.modal.close" />
              </Button>
            </span>
            <span>
              <Button
                size="small"
                disabled={['adminRefuse', 'storeRefuse'].includes(messageKey)}
                variation="danger"
                onClick={handleSubmit}
                isLoading={submitting}
              >
                <FormattedMessage id="store/return-app.return-request-details.cancellation.modal.accept" />
              </Button>
            </span>
          </div>
        }
      >
        <div>
          {formatMessage(messages[messageKey], {
            p: ParagraphChunk,
          })}
        </div>
      </Modal>
    </>
  )
}

export default RequestCancellation

```


[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 return-app/react/common/components/ReturnDetails/StatusHistory.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Table } from 'vtex.styleguide'
import type { IntlFormatters } from 'react-intl'
import { FormattedDate, useIntl, FormattedMessage } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'
import { useCssHandles } from 'vtex.css-handles'

import { useReturnDetails } from '../../hooks/useReturnDetails'
import {
  createStatusTimeline,
  statusMessageIdAdmin,
} from '../../../utils/requestStatus'

const CSS_HANDLES = ['statusHistoryContainer'] as const

const statusHistorySchema = (
  formatMessage: IntlFormatters['formatMessage'],
  isAdmin: boolean
) => ({
  properties: {
    createdAt: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.status-history.header.created-at" />
      ),
      minWidth: 120,
      cellRenderer: function CreatedAt({ cellData }) {
        return (
          <FormattedDate
            value={cellData}
            day="2-digit"
            month="2-digit"
            year="numeric"
            hour="numeric"
            minute="numeric"
            second="numeric"
          />
        )
      },
    },
    status: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.status-history.header.status" />
      ),
      minWidth: 150,
      cellRenderer: function Status({ cellData }) {
        return formatMessage(statusMessageIdAdmin[cellData])
      },
    },
    ...(isAdmin
      ? {
          submittedBy: {
            title: (
              <FormattedMessage id="store/return-app.return-request-details.table.status-history.header.submitted-by" />
            ),
          },
        }
      : null),
  },
})

export const StatusHistory = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const { data } = useReturnDetails()
  const { formatMessage } = useIntl()
  const {
    route: { domain },
  } = useRuntime()

  const isAdmin = domain === 'admin'

  if (!data) return null

  const { status, refundStatusData } = data.returnRequestDetails

  const timeline = createStatusTimeline(status, refundStatusData).filter(
    ({ visited }) => visited
  )

  return (
    <section className={`${handles.statusHistoryContainer} mv4`}>
      <h3>
        <FormattedMessage id="store/return-app.return-request-details.status-history.title" />
      </h3>
      <Table
        fullWidth
        schema={statusHistorySchema(formatMessage, isAdmin)}
        items={timeline}
      />
    </section>
  )
}

```


[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 return-app/react/common/components/ReturnDetails/CurrentRequestStatus.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ReactElement } from 'react'
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useReturnDetails } from '../../hooks/useReturnDetails'
import { renderStatus } from '../RenderStatus'

const CSS_HANDLES = ['currentRequestStatusContainer'] as const
const renderChunks = (chunks: ReactElement) => <b>{chunks}</b>

export const CurrentRequestStatus = () => {
  const handles = useCssHandles(CSS_HANDLES)

  const { data } = useReturnDetails()

  if (!data) return null

  const { id, status } = data.returnRequestDetails

  return (
    <div className={`${handles.currentRequestStatusContainer} mv4`}>
      <div className="mb4">
        <FormattedMessage
          id="store/return-app.return-request-details.current-status.request-id"
          values={{ id, b: renderChunks }}
        />
      </div>
      <div className="flex">
        <span className="mr2">
          <FormattedMessage
            id="store/return-app.return-request-details.current-status.status"
            values={{
              b: renderChunks,
            }}
          />
        </span>
        {renderStatus(status)}
      </div>
    </div>
  )
}

```


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

[User] Show me the implementation of return-app/react/common/components/ReturnDetails/OrderLink.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Link } from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import { FormattedMessage } from 'react-intl'

import { useReturnDetails } from '../../hooks/useReturnDetails'

export const OrderLink = () => {
  const { data } = useReturnDetails()
  const {
    route: { domain },
  } = useRuntime()

  if (!data) return null

  const isAdmin = domain === 'admin'
  const { orderId } = data.returnRequestDetails

  const targetHref = isAdmin
    ? `/admin/checkout/#/orders/${orderId}`
    : `/account/#/orders/${orderId}`

  return (
    <Link href={targetHref} target="_blank">
      <FormattedMessage
        id="store/return-app.return-request-details.order-id.link"
        values={{ orderId }}
      />
    </Link>
  )
}

```


[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 return-app/react/common/components/returnList/ListTable.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { Table, EmptyState, Spinner } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'
import { useRuntime } from 'vtex.render-runtime'
import type { ReturnRequestResponse } from 'vtex.return-app'

import ReturnListSchema from './ListTableSchema'
import JumpToPage from './JumpToPage'
import ListTableFilter from './ListTableFilter'
import MobileList from './MobileList'
import { useReturnRequestList } from '../../../hooks/useReturnRequestList'

const CSS_HANDLES = [
  'listTableContainer',
  'loadingDataSpinnerContainer',
] as const

const ListTable = () => {
  const [mobileOrdersList, setMobileOrdersList] = useState<
    ReturnRequestResponse[]
  >([])

  const {
    returnRequestData: { data, loading, error, refetch },
  } = useReturnRequestList()

  const {
    route: { domain },
    hints: { mobile, phone },
  } = useRuntime()

  const isAdmin = domain === 'admin'

  const handles = useCssHandles(CSS_HANDLES)

  const { returnRequestList } = data ?? {}
  const { list, paging } = returnRequestList ?? {}

  let pageItemFrom = 0
  let pageItemTo = 0

  if (paging && list?.length) {
    const { currentPage, total, perPage, pages } = paging

    pageItemFrom = currentPage === 1 ? 1 : (currentPage - 1) * perPage + 1
    pageItemTo = currentPage === pages ? total : currentPage * perPage
  }

  const handleNextPage = () => {
    if (!paging) return

    const { currentPage, pages } = paging

    if (currentPage === pages) return

    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
    refetch({ page: currentPage + 1 })
  }

  const handlePrevPage = () => {
    if (!paging) return

    const { currentPage } = paging

    if (currentPage === 1) return

    refetch({ page: currentPage - 1 })
  }

  const handleJumpToPage = (desiredPage: number) => {
    desiredPage && refetch({ page: desiredPage })
  }

  const returnsListSchema = useMemo(() => ReturnListSchema(), [])

  const fetchMoreItems = useCallback(async () => {
    const currentPage = paging?.currentPage ?? 1
    const maxPage = paging?.pages ?? 1

    if (currentPage < maxPage) {
      await refetch({ page: currentPage + 1 })
    }
  }, [paging?.currentPage, paging?.pages, refetch])

  const handleScroll = useCallback(async () => {
    const { scrollHeight } = document.documentElement
    const { scrollTop } = document.documentElement
    const { clientHeight } = document.documentElement

    const userReachedEndOfPage = scrollTop + clientHeight === scrollHeight

    if (!userReachedEndOfPage) return

    try {
      await fetchMoreItems()
    } catch (err) {
      console.error('Error while fetching more items', err)
    }
  }, [fetchMoreItems])

  const verifyIfItemAlreadyExists = (
    array: ReturnRequestResponse[],
    item: ReturnRequestResponse | null | undefined
  ) => {
    if (!item) return false

    return (
      array.findIndex((arrayItem) => arrayItem?.orderId === item?.orderId) !==
      -1
    )
  }

  useEffect(() => {
    if (list) {
      setMobileOrdersList((current) => {
        const alreadyExist = verifyIfItemAlreadyExists(current, list[0])

        if (alreadyExist) return current

        return [...current, ...list]
      })
    }
  }, [list])

  useEffect(() => {
    if (!phone) return

    if (window) {
      window.addEventListener('scroll', handleScroll)
    }

    return () => {
      if (window) {
        window.removeEventListener('scroll', handleScroll)
      }
    }
  }, [phone, handleScroll])

  if (error) {
    return (
      <EmptyState
        title={
          <FormattedMessage id="store/return-app.return-request-list.error.title" />
        }
      >
        <FormattedMessage id="store/return-app.return-request-list.error.description" />
      </EmptyState>
    )
  }

  return (
    <div className={handles.listTableContainer}>
      {mobile && !isAdmin ? null : (
        <ListTableFilter
          refetch={refetch}
          loading={loading}
          isDisabled={!list?.length}
        />
      )}

      {phone ? (
        <>
          <MobileList items={mobileOrdersList ?? []} />
          {loading && list?.length ? (
            <div
              className={`flex justify-center items-center mt6 mb6 ${handles.loadingDataSpinnerContainer}`}
            >
              <Spinner size={20} color="#dedede" />
            </div>
          ) : null}
        </>
      ) : (
        <Table
          fullWidth
          loading={loading}
          items={list}
          emptyStateLabel={
            <FormattedMessage id="store/return-app.return-request-list.table.emptyState" />
          }
          emptyStateChildren={
            <p>
              <FormattedMessage id="store/return-app.return-request-list.table.emptyState-children" />
            </p>
          }
          schema={returnsListSchema}
          pagination={{
            textOf: (
              <FormattedMessage id="store/return-app.return-request-list.table-pagination.textOf" />
            ),
            onNextClick: handleNextPage,
            onPrevClick: handlePrevPage,
            currentItemFrom: pageItemFrom,
            currentItemTo: pageItemTo,
            totalItems: paging?.total,
          }}
        />
      )}
      {!phone && paging && list?.length && !loading ? (
        <JumpToPage
          handleJumpToPage={handleJumpToPage}
          currentPage={paging.currentPage}
          maxPage={paging.pages}
        />
      ) : null}
    </div>
  )
}

export default ListTable

```


[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 return-app/react/common/components/returnList/StatusActionMenu.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, useIntl } from 'react-intl'
import type { Status } from 'vtex.return-app'
import { ActionMenu } from 'vtex.styleguide'

import type { FilterKeys } from './ListTableFilter'

interface Props {
  handleOnChange: (key: FilterKeys, value: string) => void
  status: Status | ''
  disabled: boolean
}

const allStatusKey = 'allStatus'

const keyedStatusMessages = defineMessages({
  [allStatusKey]: {
    id: 'store/return-app.return-request-list.table.status.allStatus',
  },
  new: {
    id: 'store/return-app.return-request-list.table.status.new',
  },
  processing: {
    id: 'store/return-app.return-request-list.table.status.processing',
  },
  pickedUpFromClient: {
    id: 'store/return-app.return-request-list.table.status.pickedup-from-client',
  },
  pendingVerification: {
    id: 'store/return-app.return-request-list.table.status.pending-verification',
  },
  packageVerified: {
    id: 'store/return-app.return-request-list.table.status.package-verified',
  },
  denied: {
    id: 'store/return-app.return-request-list.table.status.denied',
  },
  cancelled: {
    id: 'store/return-app.return-request-list.table.status.cancelled',
  },
  amountRefunded: {
    id: 'store/return-app.return-request-list.table.status.refunded',
  },
})

const StatusActionMenu = (props: Props) => {
  const { handleOnChange, status, disabled } = props

  const { formatMessage } = useIntl()

  const optionList = Object.keys(keyedStatusMessages).map((key) => {
    const keyName = key === allStatusKey ? '' : key

    return {
      label: formatMessage({ id: keyedStatusMessages[key].id }),
      onClick: () => handleOnChange('status', keyName),
    }
  })

  return (
    <ActionMenu
      label={
        status
          ? formatMessage(keyedStatusMessages[status])
          : formatMessage(keyedStatusMessages[allStatusKey])
      }
      align="right"
      buttonProps={{
        variation: 'secondary',
        size: 'small',
        disabled,
      }}
      options={optionList}
    />
  )
}

export { StatusActionMenu }

```


[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 return-app/react/common/components/returnList/JumpToPage.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FormEvent } from 'react'
import React, { useEffect, useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { Input, Button } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['jumpToPageContainer'] as const

interface Props {
  handleJumpToPage: (page: number) => void
  currentPage: number
  maxPage: number
}

const JumpToPage = (props: Props) => {
  const handles = useCssHandles(CSS_HANDLES)

  const { handleJumpToPage, currentPage, maxPage } = props

  const [desiredPage, setDesiredPage] = useState(currentPage)
  const [canSubmit, setEnableSubmit] = useState(true)

  useEffect(() => {
    if (desiredPage > maxPage || desiredPage <= 0) {
      setEnableSubmit(false)

      return
    }

    setEnableSubmit(true)
  }, [desiredPage, maxPage])

  const handleOnChange = (page: number) => {
    setDesiredPage(page)
  }

  const handleSubmit = () => {
    handleJumpToPage(desiredPage)
  }

  return (
    <div className={`${handles.jumpToPageContainer} relative w-100`}>
      <div
        className="absolute flex items-center"
        style={{ right: '50%', top: '-2rem' }}
      >
        <div className="mr3">
          <span className="c-muted-2 t-small">
            <FormattedMessage id="store/return-app.return-request-list.table-jumpToPage.pageText" />{' '}
            {`${currentPage} - ${maxPage}`}
          </span>
        </div>
        <div style={{ width: '5rem' }}>
          <Input
            type="number"
            min={1}
            max={maxPage}
            size="small"
            value={desiredPage || null}
            onChange={(e: FormEvent<HTMLInputElement>) =>
              handleOnChange(Number(e.currentTarget.value))
            }
          />
        </div>
        <div className="ml3">
          <Button
            variation="secondary"
            size="small"
            onClick={handleSubmit}
            disabled={!desiredPage || !canSubmit}
          >
            <FormattedMessage id="store/return-app.return-request-list.table-jumpToPage.cta" />
          </Button>
        </div>
      </div>
    </div>
  )
}

export default JumpToPage

```


[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 return-app/react/common/components/returnList/ListTableSchema.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedDate, FormattedMessage } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'
import { IconInfo, ButtonPlain, Tooltip } from 'vtex.styleguide'

import { renderStatus } from '../RenderStatus'

const ReturnListSchema = () => {
  const {
    navigate,
    route: { domain },
  } = useRuntime()

  const isAdmin = domain === 'admin'

  const navigateToRequest = (id: string) => {
    const page = isAdmin
      ? `/admin/app/returns/${id}/details/`
      : `#/my-returns/details/${id}`

    navigate({
      to: page,
    })
  }

  return {
    properties: {
      ...(isAdmin && {
        id: {
          title: (
            <FormattedMessage id="store/return-app.return-request-list.table-data.requestId" />
          ),
          headerRenderer({ title }) {
            return (
              <div className="flex items-center">
                {title}
                <Tooltip
                  label={
                    <FormattedMessage id="admin/return-app.return-request-list.table-data.requestId.tooltip" />
                  }
                >
                  <span className="yellow pointer ml3 flex">
                    <IconInfo />
                  </span>
                </Tooltip>
              </div>
            )
          },
          minWidth: 310,
          cellRenderer({ cellData }) {
            return (
              <ButtonPlain
                size="small"
                onClick={() => navigateToRequest(cellData)}
              >
                {cellData}
              </ButtonPlain>
            )
          },
        },
      }),
      sequenceNumber: {
        title: (
          <FormattedMessage id="store/return-app.return-request-list.table-data.sequenceNumber" />
        ),
        minWidth: 100,
        ...(!isAdmin && {
          cellRenderer({ cellData, rowData }) {
            return (
              <ButtonPlain onClick={() => navigateToRequest(rowData.id)}>
                {cellData}
              </ButtonPlain>
            )
          },
        }),
      },
      orderId: {
        title: (
          <FormattedMessage id="store/return-app.return-request-list.table-data.orderId" />
        ),
        minWidth: 160,
      },
      createdIn: {
        title: (
          <FormattedMessage id="store/return-app.return-request-list.table-data.createdDate" />
        ),
        cellRenderer({ cellData }) {
          return (
            <FormattedDate
              value={cellData}
              day="2-digit"
              month="2-digit"
              year="numeric"
            />
          )
        },
        minWidth: 110,
      },
      status: {
        title: (
          <FormattedMessage id="store/return-app.return-request-list.table-data.status" />
        ),
        minWidth: 250,
        cellRenderer({ cellData }) {
          return renderStatus(cellData)
        },
      },
    },
  }
}

export default ReturnListSchema

```


[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 return-app/react/common/components/returnList/ListTableFilter.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FormEvent } from 'react'
import React, { useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { Input, DatePicker, Button } from 'vtex.styleguide'
import type {
  QueryReturnRequestListArgs,
  ReturnRequestList,
  Status,
} from 'vtex.return-app'
import type { ApolloQueryResult } from 'apollo-client'
import { useRuntime } from 'vtex.render-runtime'
import { useCssHandles } from 'vtex.css-handles'

import { StatusActionMenu } from './StatusActionMenu'

const CSS_HANDLES = ['listTableFilterContainer'] as const

interface Props {
  refetch: (variables?: QueryReturnRequestListArgs | undefined) => Promise<
    ApolloQueryResult<{
      returnRequestList: ReturnRequestList
    }>
  >
  loading: boolean
  isDisabled: boolean
}

interface FilterDates {
  from: string
  to: string
}
interface Filters {
  status: Status | ''
  sequenceNumber: string
  id: string
  createdIn: FilterDates | undefined
  orderId: string
}

type Keys = keyof Filters | keyof FilterDates
export type FilterKeys = Exclude<Keys, 'createdIn'>

const initialFilters = {
  status: '',
  sequenceNumber: '',
  id: '',
  createdIn: undefined,
  orderId: '',
} as Filters

const ListTableFilter = (props: Props) => {
  const handles = useCssHandles(CSS_HANDLES)

  const { refetch, loading, isDisabled } = props

  const { route } = useRuntime()
  const [isFiltering, setIsFiltering] = useState(false)
  const [filters, setFilters] = useState(initialFilters)

  const { createdIn } = filters
  const fromDate = createdIn ? new Date(createdIn.from) : ''
  const toDate = createdIn ? new Date(createdIn.to) : ''

  // Used solely for refetch's variables
  const selectedFilters = Object.keys(filters)
    .filter((key) => filters[key])
    .reduce((newFilters, key) => {
      newFilters[key] = filters[key]

      return newFilters
    }, {})

  const hasSelectedFilters = Object.keys(selectedFilters).length > 0

  const handleSubmitFilters = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsFiltering(true)
    refetch({ filter: selectedFilters, page: 1 })
  }

  const handleResetFilters = () => {
    setIsFiltering(false)
    setFilters(initialFilters)
    refetch({ filter: undefined, page: 1 })
  }

  const handleOnChange = (key: FilterKeys, value: string) => {
    /* Both dates are non nullable */
    if (key === 'to' || key === 'from') {
      const filterDates = {
        ...filters.createdIn,
        [key]: value,
      } as FilterDates

      if (!filterDates.to) {
        filterDates.to = new Date().toISOString()
      }

      if (!filterDates.from) {
        filterDates.from = new Date(filterDates.to).toISOString()
      }

      setFilters({
        ...filters,
        createdIn: filterDates,
      })

      return
    }

    setFilters({
      ...filters,
      [key]: value,
    })
  }

  return (
    <form onSubmit={handleSubmitFilters}>
      <div className={`${handles.listTableFilterContainer} flex items-center`}>
        {route.domain === 'admin' ? (
          <div className="mr2">
            <FormattedMessage id="store/return-app.return-request-list.table-data.requestId">
              {(formattedMessage) => (
                <Input
                  placeholder={formattedMessage}
                  size="small"
                  value={filters.id}
                  onChange={(e: FormEvent<HTMLInputElement>) =>
                    handleOnChange('id', e.currentTarget.value)
                  }
                  readOnly={isDisabled && !isFiltering}
                />
              )}
            </FormattedMessage>
          </div>
        ) : null}
        <div className="mh2">
          <FormattedMessage id="store/return-app.return-request-list.table-data.sequenceNumber">
            {(formattedMessage) => (
              <Input
                placeholder={formattedMessage}
                size="small"
                value={filters.sequenceNumber}
                onChange={(e: FormEvent<HTMLInputElement>) =>
                  handleOnChange('sequenceNumber', e.currentTarget.value)
                }
                readOnly={isDisabled && !isFiltering}
              />
            )}
          </FormattedMessage>
        </div>
        <div className="mh2">
          <FormattedMessage id="store/return-app.return-request-list.table-data.orderId">
            {(formattedMessage) => (
              <Input
                placeholder={formattedMessage}
                size="small"
                value={filters.orderId}
                onChange={(e: FormEvent<HTMLInputElement>) =>
                  handleOnChange('orderId', e.currentTarget.value)
                }
                readOnly={isDisabled && !isFiltering}
              />
            )}
          </FormattedMessage>
        </div>
        <div className="mh2">
          <FormattedMessage id="store/return-app.return-request-list.table-filters.fromDate">
            {(formattedMessage) => (
              <DatePicker
                maxDate={new Date()}
                placeholder={formattedMessage}
                locale="en-GB"
                size="small"
                onChange={(date: Date) =>
                  handleOnChange('from', new Date(date).toISOString())
                }
                value={fromDate}
                disabled={isDisabled && !isFiltering}
              />
            )}
          </FormattedMessage>
        </div>
        <div className="mh2">
          <FormattedMessage id="store/return-app.return-request-list.table-filters.toDate">
            {(formattedMessage) => (
              <DatePicker
                maxDate={new Date()}
                placeholder={formattedMessage}
                locale="en-GB"
                size="small"
                onChange={(date: Date) =>
                  handleOnChange('to', new Date(date).toISOString())
                }
                value={toDate}
                disabled={isDisabled && !isFiltering}
              />
            )}
          </FormattedMessage>
        </div>
        <div className="mh2">
          <StatusActionMenu
            handleOnChange={handleOnChange}
            status={filters.status}
            disabled={isDisabled && !isFiltering}
          />
        </div>
        <div className="mh2">
          <Button
            size="small"
            type="submit"
            disabled={!hasSelectedFilters || loading}
          >
            <FormattedMessage id="store/return-app.return-request-list.table-filters.apply-filters" />
          </Button>
        </div>
        <div className="mh2">
          <Button
            size="small"
            onClick={handleResetFilters}
            disabled={!isFiltering || loading}
            variation="danger"
          >
            <FormattedMessage id="store/return-app.return-request-list.table-filters.clear-filters" />
          </Button>
        </div>
      </div>
    </form>
  )
}

export default ListTableFilter

```


[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 return-app/react/common/components/ReturnDetails/StatusTimeline/StatusTag.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import type { Status } from 'vtex.return-app'
import { IconSuccess, IconClear } from 'vtex.styleguide'
import { useIntl } from 'react-intl'

import { timelineStatusMessageId } from '../../../../utils/requestStatus'

interface Props {
  status: Status
  visited: boolean
  createdAt?: string
}
export const StatusTag = ({ status, visited, createdAt }: Props) => {
  const { formatMessage } = useIntl()

  const invalid = ['denied', 'cancelled'].includes(status)

  return (
    <span className="flex items-center">
      {visited ? (
        <span className="flex status-icon">
          {invalid ? (
            <IconClear size={30} color="#f21515" />
          ) : (
            <IconSuccess size={30} color="#134cd8" />
          )}
        </span>
      ) : (
        <span className="status-icon-not-visited" />
      )}
      <p>
        {formatMessage(
          timelineStatusMessageId[status],
          createdAt
            ? {
                ts: new Date(createdAt),
              }
            : {}
        )}
      </p>
    </span>
  )
}

```


[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 return-app/react/common/components/ReturnDetails/StatusTimeline/CommentList.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import type { RefundStatusComment, UserRole } from 'vtex.return-app'
import { useRuntime } from 'vtex.render-runtime'
import { FormattedMessage } from 'react-intl'
import { Tag } from 'vtex.styleguide'

interface Props {
  comments: RefundStatusComment[]
  isLast: boolean
}

interface UserCommentTagProps {
  userRole: UserRole
}

const UserCommentTag = ({ userRole }: UserCommentTagProps) => {
  return userRole === 'storeUser' ? (
    <Tag bgColor="#57bf96">Customer</Tag>
  ) : (
    <Tag bgColor="#3e60bd">Admin</Tag>
  )
}

export const CommentList = ({ comments, isLast }: Props) => {
  const {
    route: { domain },
  } = useRuntime()

  const contextDomain: 'store' | 'admin' = domain

  return (
    <ul className={`status ${isLast && comments?.length ? '' : 'last-of'}`}>
      {comments?.map((comment) => (
        <li key={comment.createdAt}>
          {contextDomain === 'admin' ? (
            <div className="pa2">
              <span className="mr3">
                <FormattedMessage
                  id="admin/return-app.return-request-details.status-timeline.comment"
                  values={{
                    ts: new Date(comment.createdAt),
                    comment: comment.comment,
                    submittedBy: comment.submittedBy,
                  }}
                />
              </span>
              <UserCommentTag userRole={comment.role} />
            </div>
          ) : null}
          {contextDomain === 'store' ? (
            <FormattedMessage
              id="store/return-app.return-request-details.status-timeline.comment"
              values={{
                ts: new Date(comment.createdAt),
                comment: comment.comment,
              }}
            />
          ) : null}
        </li>
      ))}
    </ul>
  )
}

```


[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 return-app/react/common/components/ReturnDetails/StatusTimeline/StatusTimeline.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'

import { useReturnDetails } from '../../../hooks/useReturnDetails'
import { createStatusTimeline } from '../../../../utils/requestStatus'
import { StatusTag } from './StatusTag'
import { CommentList } from './CommentList'

export const StatusTimeline = () => {
  const { data } = useReturnDetails()

  if (!data) return null

  const { status, refundStatusData } = data.returnRequestDetails

  const timeline = createStatusTimeline(status, refundStatusData)

  return (
    <section className="mv8">
      <h3>
        <FormattedMessage id="store/return-app.return-request-details.status-timeline.header" />
      </h3>
      <div className="mb5">
        {timeline.map((statusDetails, index) => (
          <div className="timeline" key={statusDetails.status}>
            <StatusTag
              status={statusDetails.status}
              visited={statusDetails.visited}
              createdAt={statusDetails.createdAt}
            />
            <CommentList
              comments={statusDetails?.comments ?? []}
              isLast={index === timeline.length - 1}
            />
          </div>
        ))}
      </div>
    </section>
  )
}

```


[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 return-app/react/common/components/ReturnDetails/ItemDetails/ItemName.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { Tooltip, IconInfo } from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'

interface Props {
  name: string
  localizedName?: string | null
}

const ItemName = (props: Props) => {
  const { name, localizedName } = props

  const {
    route: { domain },
  } = useRuntime()

  const isAdmin = domain === 'admin'

  if (isAdmin) {
    return (
      <>
        {localizedName ? (
          <>
            <div className="flex items-center">
              <span>{name}</span>
              <Tooltip
                label={
                  <FormattedMessage id="admin/return-app.return-request-details.localized-product-name.tooltip" />
                }
              >
                <span className="pointer ml3 flex gray">
                  <IconInfo />
                </span>
              </Tooltip>
            </div>
            <span className="t-small c-muted-2 mt2">{localizedName}</span>
          </>
        ) : (
          <span>{name}</span>
        )}
      </>
    )
  }

  return <span>{localizedName ?? name}</span>
}

export default ItemName

```


[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 return-app/react/common/components/ReturnDetails/ItemDetails/ItemDetailsCard.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ReactElement } from 'react'
import React from 'react'
import { Box } from 'vtex.styleguide'
import type { ReturnRequestItem } from 'vtex.return-app'
import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { defaultReturnConditionsMessages } from '../../../utils/defaultReturnConditionsMessages'
import type { ItemStatusInterface } from './ItemDetailsList'
import { ItemVerificationStatus } from './ItemVerificationStatus'

const SpanChunk = (chunks: ReactElement) => <span>{chunks}</span>

const CSS_HANDLES = [
  'cardWrapper',
  'statusWrapper',
  'productImageWrapper',
  'productImage',
  'productDetailsWrapper',
  'productNameWrapper',
  'productName',
  'productRefWrapper',
  'productReasonWrapper',
  'productConditionWrapper',
  'productSellerWrapper',
  'productQuantityWrapper',
  'productSellingPriceWrapper',
  'productTaxWrapper',
  'productTotalWrapper',
  'productKey',
  'productValue',
] as const

type Props = {
  item: ReturnRequestItem
  currencyCode: string
  itemsVerificationStatus: Map<number, ItemStatusInterface>
}

export const ItemDetailsCard = ({
  item,
  itemsVerificationStatus,
  currencyCode,
}: Props) => {
  const handles = useCssHandles(CSS_HANDLES)
  const { formatMessage } = useIntl()
  const {
    name,
    localizedName,
    orderItemIndex,
    sellingPrice,
    tax,
    quantity,
    refId,
    returnReason,
    condition,
    sellerName,
  } = item

  const itemStatus = itemsVerificationStatus.get(orderItemIndex)

  return (
    <div className={`${handles.cardWrapper} mb4 relative`}>
      <Box>
        <div className={`${handles.statusWrapper} absolute top-1 right-1`}>
          {itemStatus && <ItemVerificationStatus {...itemStatus} />}
        </div>
        <div className={`${handles.productImageWrapper} flex`}>
          <img
            className={`${handles.productImage}`}
            src={item.imageUrl}
            alt="product"
          />
        </div>
        <div className={`${handles.productDetailsWrapper} flex flex-column`}>
          <div className={`${handles.productNameWrapper} mb4`}>
            <span className={`${handles.productName}`}>
              {localizedName ?? name}
            </span>
          </div>

          {!refId ? null : (
            <div className={`${handles.productRefWrapper} mb2`}>
              <FormattedMessage
                id="store/return-app.return-request-details.table.product-info.ref-id"
                values={{
                  refId,
                  b: SpanChunk,
                }}
              />
            </div>
          )}

          <div className={`${handles.productReasonWrapper} mb2`}>
            <FormattedMessage
              id="store/return-app.return-request-details.table.product-info.reason"
              values={{
                reason: returnReason.otherReason ?? returnReason.reason,
                b: SpanChunk,
              }}
            />
          </div>

          {condition === 'unspecified' ? null : (
            <div className={`${handles.productConditionWrapper} mb2`}>
              <FormattedMessage
                id="store/return-app.return-request-details.table.product-info.condition"
                values={{
                  condition: formatMessage(
                    defaultReturnConditionsMessages[condition]
                  ),
                  b: SpanChunk,
                }}
              />
            </div>
          )}

          {!sellerName ? null : (
            <div className={`${handles.productSellerWrapper} mb2`}>
              <FormattedMessage
                id="store/return-app.return-request-details.table.product-info.sold-by"
                values={{
                  seller: sellerName,
                  b: SpanChunk,
                }}
              />
            </div>
          )}

          <div className={`${handles.productQuantityWrapper} mb2`}>
            <span className={`${handles.productKey} mr2`}>
              <FormattedMessage id="store/return-app.return-request-details.table.header.quantity" />
              :
            </span>
            <span className={`${handles.productValue}`}>{quantity}</span>
          </div>

          <div className={`${handles.productSellingPriceWrapper} mb2`}>
            <span className={`${handles.productKey} mr2`}>
              <FormattedMessage id="store/return-app.return-request-details.table.header.unit-price" />
              :
            </span>
            <span className={`${handles.productValue}`}>
              <FormattedNumber
                value={sellingPrice / 100}
                style="currency"
                currency={currencyCode}
              />
            </span>
          </div>

          <div className={`${handles.productTaxWrapper} mb2`}>
            <span className={`${handles.productKey} mr2`}>
              <FormattedMessage id="store/return-app.return-request-details.table.header.tax" />
              :
            </span>

            <span className={`${handles.productValue}`}>
              <FormattedNumber
                value={tax / 100}
                style="currency"
                currency={currencyCode}
              />
            </span>
          </div>

          <div className={`${handles.productTotalWrapper}`}>
            <span className={`${handles.productKey} mr2`}>
              <FormattedMessage id="store/return-app.return-request-details.table.header.total-price" />
              :
            </span>

            <span className={`${handles.productValue}`}>
              <FormattedNumber
                value={((sellingPrice + tax) * quantity) / 100}
                style="currency"
                currency={currencyCode}
              />
            </span>
          </div>
        </div>
      </Box>
    </div>
  )
}

export default ItemDetailsCard

```


[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 return-app/react/common/components/ReturnDetails/ItemDetails/itemDetailsSchema.tsx from the return-app VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ReactElement } from 'react'
import React from 'react'
import type { IntlFormatters } from 'react-intl'
import { FormattedMessage, FormattedNumber } from 'react-intl'
import type { ReturnRequestItem } from 'vtex.return-app'

import type { ItemStatusInterface } from './ItemDetailsList'
import { AlignItemRight } from '../../../../admin/ReturnDetails/components/AlignItemRight'
import { ItemVerificationStatus } from './ItemVerificationStatus'
import ItemName from './ItemName'
import { defaultReturnConditionsMessages } from '../../../utils/defaultReturnConditionsMessages'

const StrongChunk = (chunks: ReactElement) => <b>{chunks}</b>

interface Props {
  itemsVerificationStatus: Map<number, ItemStatusInterface>
  currencyCode: string
  formatMessage: IntlFormatters['formatMessage']
  isSmallScreen: boolean
}

export const itemDetailsSchema = ({
  itemsVerificationStatus,
  currencyCode,
  formatMessage,
  isSmallScreen,
}: Props) => {
  const properties = {
    imageUrl: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.product" />
      ),
      width: 80,
      cellRenderer: function ProductImage({
        cellData,
        rowData,
      }: {
        cellData: ReturnRequestItem['imageUrl']
        rowData: ReturnRequestItem
      }) {
        return <img src={cellData} alt={rowData.name} />
      },
    },
    name: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.product-info" />
      ),
      minWidth: 500,
      cellRenderer: function ProductName({
        cellData,
        rowData,
      }: {
        cellData: ReturnRequestItem['name']
        rowData: ReturnRequestItem
      }) {
        const { refId, returnReason, sellerName, localizedName, condition } =
          rowData

        return (
          <div className="mv4">
            <div className="mv2 flex flex-column">
              <ItemName name={cellData} localizedName={localizedName} />
            </div>
            {!refId ? null : (
              <div className="mv2">
                <FormattedMessage
                  id="store/return-app.return-request-details.table.product-info.ref-id"
                  values={{
                    refId,
                    b: StrongChunk,
                  }}
                />
              </div>
            )}
            <div className="mv2">
              <FormattedMessage
                id="store/return-app.return-request-details.table.product-info.reason"
                values={{
                  reason: returnReason.otherReason ?? returnReason.reason,
                  b: StrongChunk,
                }}
              />
            </div>
            {condition === 'unspecified' ? null : (
              <div className="mv2">
                <FormattedMessage
                  id="store/return-app.return-request-details.table.product-info.condition"
                  values={{
                    condition: formatMessage(
                      defaultReturnConditionsMessages[condition]
                    ),
                    b: StrongChunk,
                  }}
                />
              </div>
            )}
            {!sellerName ? null : (
              <div className="mv2">
                <FormattedMessage
                  id="store/return-app.return-request-details.table.product-info.sold-by"
                  values={{
                    seller: sellerName,
                    b: StrongChunk,
                  }}
                />
              </div>
            )}
          </div>
        )
      },
    },
    quantity: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.quantity" />
      ),
      width: 80,
    },
    sellingPrice: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.unit-price" />
      ),
      width: 120,
      headerRight: true,
      cellRenderer: function UnitPrice({
        cellData,
      }: {
        cellData: ReturnRequestItem['sellingPrice']
      }) {
        return (
          <AlignItemRight>
            <FormattedNumber
              value={cellData / 100}
              style="currency"
              currency={currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
    tax: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.tax" />
      ),
      width: 120,
      headerRight: true,
      cellRenderer: function Tax({
        cellData,
      }: {
        cellData: ReturnRequestItem['tax']
      }) {
        return (
          <AlignItemRight>
            <FormattedNumber
              value={cellData / 100}
              style="currency"
              currency={currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
    totalItems: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.total-price" />
      ),
      width: 120,
      headerRight: true,
      cellRenderer: function TotalPrice({
        rowData,
      }: {
        rowData: ReturnRequestItem
      }) {
        const { sellingPrice, tax, quantity } = rowData

        return (
          <AlignItemRight>
            <FormattedNumber
              value={((sellingPrice + tax) * quantity) / 100}
              style="currency"
              currency={currencyCode}
            />
          </AlignItemRight>
        )
      },
    },
    verificationStatus: {
      title: (
        <FormattedMessage id="store/return-app.return-request-details.table.header.verification-status" />
      ),
      minWidth: 150,
      cellRenderer: function VerificationStatus({
        rowData,
      }: {
        rowData: ReturnRequestItem
      }) {
        const { orderItemIndex } = rowData
        const itemStatus = itemsVerificationStatus.get(orderItemIndex)

        if (!itemStatus) return null

        return <ItemVerificationStatus {...itemStatus} />
      },
    },
  }

  const mobileOrder = {
    imageUrl: null,
    name: null,
    verificationStatus: null,
  }

  return {
    properties: isSmallScreen
      ? Object.assign(mobileOrder, properties)
      : properties,
  }
}

```