Merge branch 'main' into merx-791-migrate-dialogs

saleor · Aug 12, 2024 · efedfe3 · efedfe3
2 parents c45a9a2 + d6fd63b
commit efedfe3
Show file tree

Hide file tree

Showing 51 changed files with 494 additions and 194 deletions.
diff --git a/.changeset/brown-carrots-search.md b/.changeset/brown-carrots-search.md
diff --git a/.changeset/dull-pens-matter.md b/.changeset/dull-pens-matter.md
diff --git a/.changeset/five-oranges-crash.md b/.changeset/five-oranges-crash.md
diff --git a/.changeset/fresh-bikes-crash.md b/.changeset/fresh-bikes-crash.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now see a message instead of a loading animation when there are no categories, collections, products or variants assigned in Discounts
diff --git a/.changeset/good-plums-push.md b/.changeset/good-plums-push.md
diff --git a/.changeset/honest-donuts-tap.md b/.changeset/honest-donuts-tap.md
diff --git a/.changeset/khaki-spies-protect.md b/.changeset/khaki-spies-protect.md
diff --git a/.changeset/large-carrots-jog.md b/.changeset/large-carrots-jog.md
diff --git a/.changeset/nice-humans-add.md b/.changeset/nice-humans-add.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Gift card details page and customer details page no longer crash when you have only some required permissions. This means that you can now view gift card details page if you have only gift card permissions and customer details page if you have only customer permissions.
diff --git a/.changeset/nine-steaks-build.md b/.changeset/nine-steaks-build.md
diff --git a/.changeset/ninety-dogs-mate.md b/.changeset/ninety-dogs-mate.md
diff --git a/.changeset/shaggy-spoons-explode.md b/.changeset/shaggy-spoons-explode.md
diff --git a/.changeset/silver-spies-obey.md b/.changeset/silver-spies-obey.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can click save button on voucher creation page to trigger validation
diff --git a/.changeset/thin-elephants-join.md b/.changeset/thin-elephants-join.md
diff --git a/.changeset/violet-teachers-live.md b/.changeset/violet-teachers-live.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now update quantity per checkout in site settings
diff --git a/.changeset/wet-ties-perform.md b/.changeset/wet-ties-perform.md
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -2605,6 +2605,10 @@
   "FTYkgw": {
     "string": "Delete collections"
   },
+  "FWaL+x": {
+    "context": "gift card history message",
+    "string": "Gift card balance was reset"
+  },
   "FWbv/u": {
     "context": "page header",
     "string": "Create Discount"

diff --git a/playwright/pages/siteSettingsPage.ts b/playwright/pages/siteSettingsPage.ts
@@ -17,7 +17,12 @@ export class SiteSettingsPage extends BasePage {
     readonly addressLine2Input = page.getByTestId("company-address-line-2-input").locator("input"),
     readonly city = page.getByTestId("company-city-input").locator("input"),
     readonly countryInput = page.getByTestId("address-edit-country-select-field"),
-    readonly autocompleteDropdown = page.getByTestId("autocomplete-dropdown"),
+    readonly autocompleteDropdownCountry = page.locator(
+      '[data-portal-for="autocomplete-dropdown-country"]',
+    ),
+    readonly autocompleteDropdownCountryArea = page.locator(
+      '[data-portal-for="autocomplete-dropdown-country-area"]',
+    ),
     readonly countryAreaDropdown = page.getByTestId("address-edit-country-area-field"),
     readonly zipInput = page.getByTestId("company-zip-input").locator("input"),
     readonly phoneInput = page.getByTestId("company-phone-input").locator("input"),
@@ -58,9 +63,11 @@ export class SiteSettingsPage extends BasePage {
     await this.addressLine2Input.fill(addressLine2);
     await this.city.fill(city);
     await this.countryInput.click();
-    await this.autocompleteDropdown.getByText(country, { exact: true }).click();
+    await this.autocompleteDropdownCountry.getByText(country, { exact: true }).click();
+    await this.autocompleteDropdownCountry.blur();
     await this.countryAreaDropdown.fill(countryArea);
-    await this.autocompleteDropdown.getByText(countryArea, { exact: true }).click();
+    await this.autocompleteDropdownCountryArea.getByText(countryArea, { exact: true }).click();
+    await this.autocompleteDropdownCountryArea.blur();
     await this.zipInput.fill(zip);
     await this.phoneInput.fill(phone);
   }

diff --git a/playwright/tests/siteSettings.spec.ts b/playwright/tests/siteSettings.spec.ts
@@ -9,7 +9,7 @@ let siteSettingsPage: SiteSettingsPage;
 test.beforeEach(({ page }) => {
   siteSettingsPage = new SiteSettingsPage(page);
 });
-test("TC: SALEOR_132 Should be able to update site settings", async () => {
+test("TC: SALEOR_132 Should be able to update site settings @e2e", async () => {
   const companyName = faker.company.companyName();
 
   await siteSettingsPage.gotoSiteSettings();

diff --git a/src/components/CompanyAddressInput/CompanyAddressForm.tsx b/src/components/CompanyAddressInput/CompanyAddressForm.tsx
@@ -170,6 +170,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
       <FormSpacer />
       <Grid>
         <Combobox
+          id="autocomplete-dropdown-country"
           data-test-id="address-edit-country-select-field"
           autoComplete="off"
           spellCheck={false}
@@ -192,6 +193,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
 
         {isFieldAllowed("countryArea") && (
           <Combobox
+            id="autocomplete-dropdown-country-area"
             data-test-id="address-edit-country-area-field"
             autoComplete="off"
             spellCheck={false}

diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
@@ -1,4 +1,4 @@
-import { GiftCardEventFragment, OrderEventFragment } from "@dashboard/graphql";
+import { GiftCardEventsQuery, OrderEventFragment } from "@dashboard/graphql";
 import { getUserInitials, getUserName } from "@dashboard/misc";
 import { makeStyles } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui-next";
@@ -31,11 +31,15 @@ const useStyles = makeStyles(
   { name: "TimelineNote" },
 );
 
+type TimelineAppType =
+  | NonNullable<GiftCardEventsQuery["giftCard"]>["events"][0]["app"]
+  | OrderEventFragment["app"];
+
 interface TimelineNoteProps {
   date: string;
   message: string | null;
   user: OrderEventFragment["user"];
-  app: OrderEventFragment["app"] | GiftCardEventFragment["app"];
+  app: TimelineAppType;
   hasPlainDate?: boolean;
 }
 
@@ -61,7 +65,7 @@ const TimelineAvatar = ({
   className,
 }: {
   user: OrderEventFragment["user"];
-  app: OrderEventFragment["app"] | GiftCardEventFragment["app"];
+  app: TimelineAppType;
   className: string;
 }) => {
   if (user) {

diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
@@ -70,7 +70,9 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
     lastName: customer?.lastName || "",
     metadata: customer?.metadata.map(mapMetadataItemToInput),
     note: customer?.note || "",
-    privateMetadata: customer?.privateMetadata.map(mapMetadataItemToInput),
+    privateMetadata: customer?.privateMetadata
+      ? customer?.privateMetadata.map(mapMetadataItemToInput)
+      : [],
   };
   const { makeChangeHandler: makeMetadataChangeHandler } = useMetadataChangeTrigger();
   const { CUSTOMER_DETAILS_MORE_ACTIONS } = useExtensions(extensionMountPoints.CUSTOMER_DETAILS);

diff --git a/src/customers/queries.ts b/src/customers/queries.ts
@@ -37,9 +37,19 @@ export const customerList = gql`
 `;
 
 export const customerDetails = gql`
-  query CustomerDetails($id: ID!, $PERMISSION_MANAGE_ORDERS: Boolean!) {
+  query CustomerDetails(
+    $id: ID!
+    $PERMISSION_MANAGE_ORDERS: Boolean!
+    $PERMISSION_MANAGE_STAFF: Boolean!
+  ) {
     user(id: $id) {
       ...CustomerDetails
+      metadata {
+        ...MetadataItem
+      }
+      privateMetadata @include(if: $PERMISSION_MANAGE_STAFF) {
+        ...MetadataItem
+      }
       orders(last: 5) @include(if: $PERMISSION_MANAGE_ORDERS) {
         edges {
           node {

diff --git a/src/customers/views/CustomerDetails.tsx b/src/customers/views/CustomerDetails.tsx
@@ -87,7 +87,10 @@ const CustomerDetailsViewInner: React.FC<CustomerDetailsViewProps> = ({ id, para
     );
 
   const handleSubmit = createMetadataUpdateHandler(
-    user,
+    {
+      ...user,
+      privateMetadata: user?.privateMetadata || [],
+    },
     updateData,
     variables => updateMetadata({ variables }),
     variables => updatePrivateMetadata({ variables }),

diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx
@@ -9,14 +9,14 @@ import TableHead from "@dashboard/components/TableHead";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { SaleDetailsFragment, VoucherDetailsFragment } from "@dashboard/graphql";
-import { mapEdgesToItems } from "@dashboard/utils/maps";
+import { getLoadableList, mapEdgesToItems } from "@dashboard/utils/maps";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { Skeleton } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe, renderCollection } from "../../../misc";
+import { renderCollection } from "../../../misc";
 import { ListActions, ListProps } from "../../../types";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
@@ -87,7 +87,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
         </TableFooter>
         <TableBody data-test-id="assigned-specific-products-table">
           {renderCollection(
-            mapEdgesToItems(discount?.categories),
+            getLoadableList(discount?.categories),
             category => {
               const isSelected = category ? isChecked(category.id) : false;
 
@@ -108,10 +108,8 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
                       onChange={() => toggle(category.id)}
                     />
                   </TableCell>
-                  <TableCell>{maybe<React.ReactNode>(() => category.name, <Skeleton />)}</TableCell>
-                  <TableCell className={classes.colProducts}>
-                    {maybe<React.ReactNode>(() => category.products.totalCount, <Skeleton />)}
-                  </TableCell>
+                  <TableCell>{category ? category.name : <Skeleton />}</TableCell>
+                  <TableCell>{category ? category.products.totalCount : <Skeleton />}</TableCell>
                   <TableCell className={classes.colActions}>
                     <TableButtonWrapper>
                       <IconButton

diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx
@@ -9,14 +9,14 @@ import TableHead from "@dashboard/components/TableHead";
 import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { SaleDetailsFragment, VoucherDetailsFragment } from "@dashboard/graphql";
-import { mapEdgesToItems } from "@dashboard/utils/maps";
+import { getLoadableList, mapEdgesToItems } from "@dashboard/utils/maps";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { Skeleton } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe, renderCollection } from "../../../misc";
+import { renderCollection } from "../../../misc";
 import { ListActions, ListProps } from "../../../types";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
@@ -85,7 +85,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
         </TableFooter>
         <TableBody data-test-id="assigned-specific-products-table">
           {renderCollection(
-            mapEdgesToItems(sale?.collections),
+            getLoadableList(sale?.collections),
             collection => {
               const isSelected = collection ? isChecked(collection.id) : false;
 
@@ -107,10 +107,10 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
                     />
                   </TableCell>
                   <TableCell className={classes.colName}>
-                    {maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
+                    {collection ? collection.name : <Skeleton />}
                   </TableCell>
                   <TableCell className={classes.colProducts}>
-                    {maybe<React.ReactNode>(() => collection.products.totalCount, <Skeleton />)}
+                    {collection ? collection.products.totalCount : <Skeleton />}
                   </TableCell>
                   <TableCell className={classes.colActions}>
                     <TableButtonWrapper>

diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx
@@ -11,29 +11,28 @@ import { TablePaginationWithContext } from "@dashboard/components/TablePaginatio
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { SaleDetailsFragment, VoucherDetailsFragment } from "@dashboard/graphql";
 import { productUrl } from "@dashboard/products/urls";
+import { getLoadableList, mapEdgesToItems } from "@dashboard/utils/maps";
 import { TableBody, TableCell, TableFooter } from "@material-ui/core";
 import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { Skeleton } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { maybe, renderCollection } from "../../../misc";
-import { ListActions, ListProps, RelayToFlat } from "../../../types";
+import { ListActions, ListProps } from "../../../types";
 import { messages } from "./messages";
 import { useStyles } from "./styles";
 
 export interface SaleProductsProps extends ListProps, ListActions {
-  products:
-    | RelayToFlat<SaleDetailsFragment["products"]>
-    | RelayToFlat<VoucherDetailsFragment["products"]>;
+  discount: SaleDetailsFragment | VoucherDetailsFragment;
   onProductAssign: () => void;
   onProductUnassign: (id: string) => void;
 }
 
 const numberOfColumns = 5;
 const DiscountProducts: React.FC<SaleProductsProps> = props => {
   const {
-    products,
+    discount,
     disabled,
     onProductAssign,
     onProductUnassign,
@@ -46,6 +45,8 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
 
+  const productsList = mapEdgesToItems(discount?.products);
+
   return (
     <DashboardCard data-test-id="assign-product-section">
       <DashboardCard.Header>
@@ -71,12 +72,12 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
           colSpan={numberOfColumns}
           selected={selected}
           disabled={disabled}
-          items={products}
+          items={productsList}
           toggleAll={toggleAll}
           toolbar={toolbar}
         >
           <TableCell className={classes.colName}>
-            <span className={products?.length > 0 && classes.colNameLabel}>
+            <span className={productsList?.length > 0 && classes.colNameLabel}>
               <FormattedMessage {...messages.discountProductsTableProductHeader} />
             </span>
           </TableCell>
@@ -95,7 +96,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
         </TableFooter>
         <TableBody data-test-id="assigned-specific-products-table">
           {renderCollection(
-            products,
+            getLoadableList(discount?.products),
             product => {
               const isSelected = product ? isChecked(product.id) : false;