Merge branch 'develop' into feat/ranking-categories

packages/admin-ui/ui/src/components/atoms/copy-to-clipboard/index.tsx

@@ -32,14 +32,15 @@ const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
  if (isCopied) {
  notification("Success", "Copied!", "success")
  }
- }, [isCopied])
+ }, [isCopied, notification])
 
  return (
- <div className="flex items-center inter-small-regular text-grey-50 gap-x-xsmall">
+ <div className="inter-small-regular text-grey-50 gap-x-xsmall flex items-center">
  <Button
  variant="ghost"
  size="small"
- className={clsx("p-0 text-grey-50", {
+ type="button"
+ className={clsx("text-grey-50 p-0", {
  ["text-violet-60"]: isCopied,
  })}
  onClick={handleCopy}

packages/admin-ui/ui/src/components/molecules/timeline-events/claim-event/index.tsx

@@ -104,14 +104,14 @@ const Claim = ({ event }: Props) => {
  topNode: Actions,
  children: [
  <Fragment key={event.id}>
- <div className="flex flex-col gap-y-base">
+ <div className="gap-y-base flex flex-col">
  <ClaimStatus event={event} />
  {renderClaimItems(event)}
  {event.claim?.additional_items?.length > 0 &&
  renderReplacementItems(event)}
  {shouldHaveButtonActions && (
- <div className="flex items-center gap-x-xsmall">
- {event.claim.return_order.status === "requested" && (
+ <div className="gap-x-xsmall flex items-center">
+ {event.claim.return_order?.status === "requested" && (
  <Button
  variant="secondary"
  size="small"
@@ -157,7 +157,7 @@ const Claim = ({ event }: Props) => {
 export default Claim
 
 const ClaimStatus = ({ event }: Props) => {
- const divider = <div className="h-11 w-px bg-grey-20" />
+ const divider = <div className="bg-grey-20 h-11 w-px" />
 
  const shouldHaveFulfillment =
  !!event.claim?.fulfillment_status &&
@@ -168,7 +168,7 @@ const ClaimStatus = ({ event }: Props) => {
 
  if (event.claim?.type === "replace") {
  refundStatus =
- event.claim?.return_order.status === "received"
+ event.claim?.return_order?.status === "received"
  ? "refunded"
  : event.claim?.payment_status
  }
@@ -178,15 +178,15 @@ const ClaimStatus = ({ event }: Props) => {
  }
 
  return (
- <div className="inter-small-regular flex items-center gap-x-base">
- <div className="flex flex-col gap-y-2xsmall">
+ <div className="inter-small-regular gap-x-base flex items-center">
+ <div className="gap-y-2xsmall flex flex-col">
  <span className="text-grey-50">Refund:</span>
  <RefundStatus refundStatus={refundStatus} />
  </div>
  {shouldHaveReturnStatus && (
  <>
  {divider}
- <div className="flex flex-col gap-y-2xsmall">
+ <div className="gap-y-2xsmall flex flex-col">
  <span className="text-grey-50">Return:</span>
  <ReturnStatus returnStatus={event.returnStatus} />
  </div>
@@ -195,7 +195,7 @@ const ClaimStatus = ({ event }: Props) => {
  {shouldHaveFulfillment && (
  <>
  {divider}
- <div className="flex flex-col gap-y-2xsmall">
+ <div className="gap-y-2xsmall flex flex-col">
  <span className="text-grey-50">Fulfillment:</span>
  <FulfillmentStatus
  fulfillmentStatus={event.claim?.fulfillment_status}
@@ -209,7 +209,7 @@ const ClaimStatus = ({ event }: Props) => {
 
 const renderClaimItems = (event: ClaimEvent) => {
  return (
- <div className="flex flex-col gap-y-small">
+ <div className="gap-y-small flex flex-col">
  <span className="inter-small-regular text-grey-50">Claim Items</span>
  <div>
  {event.claimItems.map((i, index) => (
@@ -222,7 +222,7 @@ const renderClaimItems = (event: ClaimEvent) => {
 
 const renderReplacementItems = (event: ClaimEvent) => {
  return (
- <div className="flex flex-col gap-y-small">
+ <div className="gap-y-small flex flex-col">
  <span className="inter-small-regular text-grey-50">
  Replacement Items
  </span>
@@ -245,7 +245,7 @@ const renderClaimActions = (
  if (!event.canceledAt && !event.isCanceled) {
  if (
  event.claim.return_order &&
- event.claim.return_order.status === "requested"
+ event.claim.return_order?.status === "requested"
  ) {
  actions.push({
  icon: <TrashIcon size={20} />,

packages/admin-ui/ui/src/domain/orders/components/items-to-receive-form/use-items-to-receive-columns.tsx

@@ -1,6 +1,7 @@
 import { createColumnHelper } from "@tanstack/react-table"
 import React, { ChangeEvent, useCallback, useMemo } from "react"
 import { Controller, useWatch } from "react-hook-form"
+import CopyToClipboard from "../../../../components/atoms/copy-to-clipboard"
 import Thumbnail from "../../../../components/atoms/thumbnail"
 import IndeterminateCheckbox from "../../../../components/molecules/indeterminate-checkbox"
 import { NestedForm } from "../../../../utils/nested-form"
@@ -91,14 +92,27 @@ export const useItemsToReceiveColumns = ({ form, orderCurrency }: Props) => {
  columnHelper.accessor("variant_title", {
  header: "Product",
  cell: ({ getValue, row: { original } }) => {
+ const value = getValue()
+
  return (
- <div className="flex items-center gap-x-base py-xsmall">
+ <div className="gap-x-base py-xsmall flex items-center">
  <div>
  <Thumbnail src={original.thumbnail} />
  </div>
  <div className="inter-small-regular">
- <p>{original.product_title}</p>
- <p className="text-grey-50">{getValue()}</p>
+ <div className="gap-x-2xsmall flex items-center">
+ <p>{original.product_title}</p>
+ {value && <p className="text-grey-50">({value})</p>}
+ </div>
+ {original.sku && (
+ <span>
+ <CopyToClipboard
+ value={original.sku}
+ displayValue={original.sku}
+ iconSize={14}
+ />
+ </span>
+ )}
  </div>
  </div>
  )

packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/index.tsx

@@ -22,6 +22,7 @@ export type ReturnItem = {
  thumbnail?: string | null
  product_title: string
  variant_title: string
+ sku?: string | null
  quantity: number
  original_quantity: number
  total: number
@@ -75,7 +76,7 @@ const ItemsToReturnForm = ({ form, order, isClaim = false }: Props) => {
  })
 
  return (
- <div className="flex flex-col gap-y-base">
+ <div className="gap-y-base flex flex-col">
  <h2 className="inter-base-semibold">
  Items to {isClaim ? "claim" : "return"}
  </h2>

packages/admin-ui/ui/src/domain/orders/components/items-to-return-form/use-return-item-columns.tsx

@@ -2,6 +2,7 @@ import { createColumnHelper } from "@tanstack/react-table"
 import React, { useCallback, useMemo } from "react"
 import { Controller, useWatch } from "react-hook-form"
 import { ItemsToReturnFormType, ReturnItemObject } from "."
+import CopyToClipboard from "../../../../components/atoms/copy-to-clipboard"
 import { Thumbnail } from "../../../../components/atoms/thumbnail/thumbnail"
 import IndeterminateCheckbox from "../../../../components/molecules/indeterminate-checkbox"
 import { NestedForm } from "../../../../utils/nested-form"
@@ -98,14 +99,27 @@ export const useItemsToReturnColumns = ({ form, orderCurrency }: Props) => {
  columnHelper.accessor("variant_title", {
  header: "Product",
  cell: ({ getValue, row: { original } }) => {
+ const value = getValue()
+
  return (
- <div className="flex items-center gap-x-base py-xsmall">
+ <div className="gap-x-base py-xsmall flex items-center">
  <div>
  <Thumbnail src={original.thumbnail} />
  </div>
  <div className="inter-small-regular">
- <p>{original.product_title}</p>
- <p className="text-grey-50">{getValue()}</p>
+ <div className="gap-x-2xsmall flex items-center">
+ <p>{original.product_title}</p>
+ {value && <p className="text-grey-50">({value})</p>}
+ </div>
+ {original.sku && (
+ <span>
+ <CopyToClipboard
+ value={original.sku}
+ displayValue={original.sku}
+ iconSize={14}
+ />
+ </span>
+ )}
  </div>
  </div>
  )

packages/admin-ui/ui/src/domain/orders/components/items-to-send-form/use-additional-items-columns.tsx

@@ -1,5 +1,6 @@
 import { createColumnHelper } from "@tanstack/react-table"
 import { useCallback, useMemo } from "react"
+import CopyToClipboard from "../../../../components/atoms/copy-to-clipboard"
 import Thumbnail from "../../../../components/atoms/thumbnail"
 import Tooltip from "../../../../components/atoms/tooltip"
 import Button from "../../../../components/fundamentals/button"
@@ -45,14 +46,24 @@ export const useAdditionalItemsColumns = ({
  },
  }) => {
  return (
- <div className="flex items-center gap-base">
+ <div className="gap-base flex items-center">
  <Thumbnail src={thumbnail} />
- <div>
- <p>
- {product_title}{" "}
- <span className="text-grey-50">({variant_title})</span>
- </p>
- {sku && <p className="text-grey-50">{sku}</p>}
+ <div className="inter-small-regular">
+ <div className="gap-x-2xsmall flex items-center">
+ <p>{product_title}</p>
+ {variant_title && (
+ <p className="text-grey-50">({variant_title})</p>
+ )}
+ </div>
+ {sku && (
+ <span>
+ <CopyToClipboard
+ value={sku}
+ displayValue={sku}
+ iconSize={14}
+ />
+ </span>
+ )}
  </div>
  </div>
  )
@@ -101,7 +112,7 @@ export const useAdditionalItemsColumns = ({
  content="The price has been overridden in a price list, that is applicable to this order."
  side="top"
  >
- <p className="cursor-default text-grey-40 line-through">
+ <p className="text-grey-40 cursor-default line-through">
  {formatAmountWithSymbol({
  amount: original_price,
  currency: orderCurrency,

packages/admin-ui/ui/src/domain/orders/components/rma-summaries/claim-summary.tsx

@@ -15,11 +15,12 @@ type Props = {
 }
 
 export const ClaimSummary = ({ form, order }: Props) => {
- const { control, getValues } = form
+ const { control } = form
 
  const claimItems = useWatch({
  control: control,
  name: "return_items.items",
+ defaultValue: [],
  })
 
  const selectedClaimItems = useMemo(() => {
@@ -34,6 +35,7 @@ export const ClaimSummary = ({ form, order }: Props) => {
  const replacementItems = useWatch({
  control: control,
  name: "additional_items.items",
+ defaultValue: [],
  })
 
  const replacementItemShipping = useWatch({
@@ -84,6 +86,7 @@ export const ClaimSummary = ({ form, order }: Props) => {
  currencyCode={order.currency_code}
  productTitle={item.product_title}
  quantity={item.quantity}
+ sku={item.sku}
  price={item.total / item.original_quantity}
  total={
  (item.total / item.original_quantity) * item.quantity
@@ -123,6 +126,7 @@ export const ClaimSummary = ({ form, order }: Props) => {
  currencyCode={order.currency_code}
  productTitle={item.product_title}
  quantity={item.quantity}
+ sku={item.sku}
  price={item.price}
  total={item.price * item.quantity}
  variantTitle={item.variant_title}

packages/admin-ui/ui/src/domain/orders/components/rma-summaries/summary-line-item.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx"
+import CopyToClipboard from "../../../../components/atoms/copy-to-clipboard"
 import Thumbnail from "../../../../components/atoms/thumbnail"
 import { formatAmountWithSymbol } from "../../../../utils/prices"
 
@@ -9,6 +10,7 @@ type SummaryLineProps = {
  quantity: number
  price: number
  total: number
+ sku?: string | null
  currencyCode: string
  isFree?: boolean
 }
@@ -17,6 +19,7 @@ export const SummaryLineItem = ({
  thumbnail,
  productTitle,
  variantTitle,
+ sku,
  quantity,
  price,
  total,
@@ -25,16 +28,23 @@ export const SummaryLineItem = ({
 }: SummaryLineProps) => {
  return (
  <div className="flex items-center justify-between">
- <div className="flex items-center gap-x-base">
+ <div className="gap-x-base flex items-center">
  <div>
  <Thumbnail src={thumbnail} />
  </div>
  <div className="inter-small-regular">
- <p>{productTitle}</p>
- <p className="text-grey-50">{variantTitle}</p>
+ <div className="gap-x-2xsmall flex items-center">
+ <p>{productTitle}</p>
+ {variantTitle && <p className="text-grey-50">({variantTitle})</p>}
+ </div>
+ {sku && (
+ <span>
+ <CopyToClipboard value={sku} displayValue={sku} iconSize={14} />
+ </span>
+ )}
  </div>
  </div>
- <div className="inter-small-regular flex items-center gap-x-base">
+ <div className="inter-small-regular gap-x-base flex items-center">
  <p className="text-grey-40">
  {formatAmountWithSymbol({
  amount: price,

packages/admin-ui/ui/src/domain/orders/details/utils/get-default-values.ts

@@ -156,6 +156,7 @@ const getReturnableItemsValues = (order: Order) => {
  thumbnail: item.thumbnail,
  refundable: item.refundable || 0,
  product_title: item.variant.product.title,
+ sku: item.variant.sku,
  variant_title: item.variant.title,
  quantity: returnableQuantity,
  original_quantity: item.quantity,