Migrate product variant page (#4209)

Co-authored-by: wojteknowacki <[email protected]>
saleor · Oct 5, 2023 · 29b8740 · 29b8740
1 parent a6a6152
commit 29b8740
Show file tree

Hide file tree

Showing 36 changed files with 532 additions and 506 deletions.
diff --git a/.changeset/honest-toys-decide.md b/.changeset/honest-toys-decide.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Migrate product variant page to new macaw
diff --git a/cypress/support/pages/catalog/products/VariantsPage.js b/cypress/support/pages/catalog/products/VariantsPage.js
@@ -71,7 +71,13 @@ export function fillUpVariantDetails({
   price,
   variantName,
 }) {
+  if (variantName) {
+    cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName, {
+      force: true,
+    });
+  }
   selectAttributeWithType({ attributeType, attributeName });
+
   cy.get(PRICE_LIST.priceInput)
     .each(input => {
       cy.wrap(input).type(price, { force: true });
@@ -80,9 +86,6 @@ export function fillUpVariantDetails({
     .each(input => {
       cy.wrap(input).type(costPrice, { force: true });
     });
-  if (variantName) {
-    cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName);
-  }
   if (sku) {
     cy.get(VARIANTS_SELECTORS.skuTextField).click({ force: true }).type(sku);
   }

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -3177,10 +3177,6 @@
   "KN7zKn": {
     "string": "Error"
   },
-  "KQSONM": {
-    "context": "tabel column header",
-    "string": "Cost"
-  },
   "KRqgfo": {
     "string": "User is out of your permissions scope"
   },
@@ -3460,6 +3456,10 @@
     "context": "customer details, header",
     "string": "{fullName} Details"
   },
+  "MwfSVA": {
+    "context": "input helper text",
+    "string": "Customers can not add quantities to a single cart above the limit when value is provided."
+  },
   "MxhVZv": {
     "string": "Are you sure you want to delete collection's image?"
   },
@@ -7147,10 +7147,6 @@
     "context": "WarehousesSection select field add text",
     "string": "Add New Warehouse"
   },
-  "n3+6w5": {
-    "context": "input helper text",
-    "string": "Your customer won't be allowed to buy bigger quantity per checkout than shown here."
-  },
   "n5vskv": {
     "context": "customer's address book, header",
     "string": "{fullName}'s Address Book"
@@ -8386,6 +8382,9 @@
   "vprU7C": {
     "string": "Select visible order channels"
   },
+  "vuKrlW": {
+    "string": "Stock"
+  },
   "vwMO04": {
     "context": "draft order",
     "string": "Created"

diff --git a/src/components/Datagrid/customCells/Money/MoneyCell.tsx b/src/components/Datagrid/customCells/Money/MoneyCell.tsx
@@ -65,29 +65,29 @@ export const moneyCellRenderer = (
       return true;
     }
 
+    const codeFormatter = new Intl.NumberFormat(locale, {
+      style: "currency",
+      currencyDisplay: "code",
+      currency,
+    });
+
+    const symbolFormatter = new Intl.NumberFormat(locale, {
+      style: "currency",
+      currencyDisplay: "symbol",
+      currency,
+    });
+
+    if (!("formatRangeToParts" in codeFormatter)) {
+      return true;
+    }
+
     const format = isRange
-      ? new Intl.NumberFormat(locale, {
-          style: "currency",
-          currencyDisplay: "code",
-          currency,
-        }).formatRangeToParts(value[0], value[1])
-      : new Intl.NumberFormat(locale, {
-          style: "currency",
-          currencyDisplay: "code",
-          currency,
-        }).formatToParts(displayValue);
+      ? codeFormatter.formatRangeToParts(value[0], value[1])
+      : codeFormatter.formatToParts(displayValue);
 
     const shortFormat = isRange
-      ? new Intl.NumberFormat(locale, {
-          style: "currency",
-          currencyDisplay: "symbol",
-          currency,
-        }).formatRangeToParts(value[0], value[1])
-      : new Intl.NumberFormat(locale, {
-          style: "currency",
-          currencyDisplay: "symbol",
-          currency,
-        }).formatToParts(displayValue);
+      ? symbolFormatter.formatRangeToParts(value[0], value[1])
+      : symbolFormatter.formatToParts(displayValue);
 
     // TODO: replace with macaw-ui theme font weight values
     ctx.font = `550 ${theme.baseFontStyle} ${theme.fontFamily}`;

diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
@@ -0,0 +1,15 @@
+import { Box, BoxProps } from "@saleor/macaw-ui/next";
+import React from "react";
+
+export const Divider = (props: BoxProps) => {
+  return (
+    <Box
+      width="100%"
+      borderBottomStyle="solid"
+      borderBottomWidth={1}
+      borderColor="neutralPlain"
+      height={1}
+      {...props}
+    />
+  );
+};
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
@@ -0,0 +1 @@
+export * from "./Divider";
diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx
@@ -39,8 +39,13 @@ const useStyles = makeStyles(
       top: 0,
       width: 148,
     },
+    disableOverlay: {
+      "&$mediaOverlay": {
+        display: "none !important",
+      },
+    },
     mediaOverlayShadow: {
-      "&mediaOverlay": {
+      $mediaOverlay: {
         alignItems: "center",
         display: "flex",
         justifyContent: "center",
@@ -76,6 +81,7 @@ interface MediaTileBaseProps {
     type?: string;
     oembedData?: string;
   };
+  disableOverlay?: boolean;
   loading?: boolean;
   onDelete?: () => void;
   onEdit?: (event: React.ChangeEvent<any>) => void;
@@ -94,7 +100,14 @@ export type MediaTileProps = MediaTileBaseProps &
   );
 
 const MediaTile: React.FC<MediaTileProps> = props => {
-  const { loading, onDelete, onEdit, editHref, media } = props;
+  const {
+    loading,
+    onDelete,
+    onEdit,
+    editHref,
+    media,
+    disableOverlay = false,
+  } = props;
   const classes = useStyles(props);
   const parsedMediaOembedData = media?.oembedData
     ? JSON.parse(media.oembedData)
@@ -106,6 +119,7 @@ const MediaTile: React.FC<MediaTileProps> = props => {
       <div
         className={clsx(classes.mediaOverlay, {
           [classes.mediaOverlayShadow]: loading,
+          [classes.disableOverlay]: disableOverlay,
         })}
       >
         {loading ? (

diff --git a/src/components/SortableTable/SortableHandle.tsx b/src/components/SortableTable/SortableHandle.tsx
@@ -1,5 +1,6 @@
 import { TableCell } from "@material-ui/core";
-import { DragIcon, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
+import { GripIcon } from "@saleor/macaw-ui/next";
 import React from "react";
 import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
 
@@ -22,7 +23,7 @@ const SortableHandle = SortableHandleHoc(() => {
 
   return (
     <TableCell className={classes.columnDrag}>
-      <DragIcon color="primary" />
+      <GripIcon />
     </TableCell>
   );
 });

diff --git a/src/components/TableCellAvatar/Avatar.tsx b/src/components/TableCellAvatar/Avatar.tsx
@@ -13,6 +13,7 @@ export interface AvatarProps {
   avatarProps?: string;
   children?: React.ReactNode | React.ReactNode[];
   badge?: React.ReactNode;
+  className?: string;
 }
 
 const Avatar: React.FC<AvatarProps> = ({
@@ -22,12 +23,13 @@ const Avatar: React.FC<AvatarProps> = ({
   thumbnail,
   avatarProps,
   badge,
+  className,
 }) => {
   const classes = useAvatarStyles();
 
   return (
     <div
-      className={clsx(classes.content, {
+      className={clsx(classes.content, className, {
         [classes.alignRight]: alignRight,
       })}
     >

diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx
@@ -10,10 +10,11 @@ interface TableCellAvatarProps
   extends TableCellProps,
     Omit<AvatarProps, "children"> {
   className?: string;
+  avatarClassName?: string;
 }
 
 const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
-  const { className, ...rest } = props;
+  const { className, avatarClassName, ...rest } = props;
 
   const classes = useStyles(props);
 
@@ -23,7 +24,7 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
       data-test-id="table-cell-avatar"
       {...rest}
     >
-      <Avatar {...rest} />
+      <Avatar className={avatarClassName} {...rest} />
     </TableCell>
   );
 };

diff --git a/src/fragments/products.ts b/src/fragments/products.ts
@@ -330,7 +330,7 @@ export const fragmentVariant = gql`
         sku
         media {
           id
-          url
+          url(size: 200)
           type
           oembedData
         }

diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
@@ -2589,7 +2589,7 @@ export const ProductVariantFragmentDoc = gql`
       sku
       media {
         id
-        url
+        url(size: 200)
         type
         oembedData
       }

diff --git a/src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx b/src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx
@@ -57,7 +57,7 @@ export const TransactionCard: React.FC<TransactionCardProps> = ({
   const id = useId();
 
   const user = useUser();
-  const isStaffUser = hasPermissions(user?.user?.userPermissions, [
+  const isStaffUser = hasPermissions(user?.user?.userPermissions ?? [], [
     PermissionEnum.MANAGE_STAFF,
   ]);
 

diff --git a/src/orders/views/OrderDetails/OrderDetails.tsx b/src/orders/views/OrderDetails/OrderDetails.tsx
@@ -50,7 +50,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
   const intl = useIntl();
 
   const user = useUser();
-  const isStaffUser = hasPermissions(user?.user?.userPermissions, [
+  const isStaffUser = hasPermissions(user?.user?.userPermissions ?? [], [
     PermissionEnum.MANAGE_STAFF,
   ]);