Fix zero value in money cell, improve show discount type in order pay…

…ment summary (#4685)

* Display zero value in money cell

* Add promotion type to order payment details

* Fix types

* Add changeset

* Extract messages

* Update src/components/Datagrid/customCells/Money/utils.test.ts

Co-authored-by: Michał Droń <droniu@droniu.dev>

* Improve shipping methods update test

---------

Co-authored-by: Michał Droń <droniu@droniu.dev>

.changeset/itchy-queens-sit.md

@@ -0,0 +1,6 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix showing empty price when value is zero
+Improve showing discount type in order payment details

locale/defaultMessages.json

@@ -4535,6 +4535,10 @@
     "context": "order subtotal price",
     "string": "Subtotal"
   },
+  "TBdxTP": {
+    "context": "promotion type order discount",
+    "string": "Promotion"
+  },
   "TBftMD": {
     "context": "button. form submit, grant refund edit",
     "string": "Edit granted refund"

playwright/pages/shippingMethodsPage.ts

@@ -77,10 +77,12 @@ export class ShippingMethodsPage extends BasePage {
       `Navigates to existing shipping method page: ${existingShippingMethodUrl}`,
     );
     await this.page.goto(existingShippingMethodUrl);
-    await this.shippingZoneNameInput.waitFor({
-      state: "visible",
-      timeout: 10000,
-    });
+    await this.rightSideDetailsPage.channelSection
+      .locator(this.page.getByTestId("selected-options"))
+      .waitFor({
+        state: "visible",
+        timeout: 10000,
+      });
   }
 
   async gotoExistingShippingRate(shippingMethodId: string, shippingRateId: string) {

src/components/Datagrid/customCells/Money/MoneyCell.tsx

@@ -9,6 +9,7 @@ import {
 import React from "react";
 
 import { usePriceField } from "../../../PriceField/usePriceField";
+import { hasDiscountValue } from "./utils";
 
 interface MoneyCellProps {
   readonly kind: "money-cell";
@@ -61,7 +62,7 @@ export const moneyCellRenderer = (
     const isRange = Array.isArray(value);
     const displayValue = isRange ? value[0] : value;
 
-    if (!displayValue || !currency) {
+    if (!hasDiscountValue(displayValue) || !currency) {
       return true;
     }
 

src/components/Datagrid/customCells/Money/utils.test.ts

@@ -0,0 +1,12 @@
+import { hasDiscountValue } from "./utils";
+
+describe("MoneyCell utils", () => {
+  describe("hasDiscountValue", () => {
+    it("should return true if value is not undefined, null", () => {
+      expect(hasDiscountValue(0)).toBe(true);
+      expect(hasDiscountValue(144)).toBe(true);
+      expect(hasDiscountValue(undefined)).toBe(false);
+      expect(hasDiscountValue(null)).toBe(false);
+    });
+  });
+});

src/components/Datagrid/customCells/Money/utils.ts

@@ -71,3 +71,9 @@ export function getFormattedMoney(
 
   return placeholder;
 }
+
+export function hasDiscountValue(
+  value: number | null | undefined,
+): value is number {
+  return value !== undefined && value !== null;
+}

src/orders/components/OrderPayment/OrderPayment.tsx

@@ -9,7 +9,6 @@ import { giftCardPath } from "@dashboard/giftCards/urls";
 import {
   OrderAction,
   OrderDetailsFragment,
-  OrderDiscountType,
   OrderStatus,
 } from "@dashboard/graphql";
 import { Card, CardContent } from "@material-ui/core";
@@ -24,6 +23,7 @@ import { useStyles } from "./styles";
 import {
   extractOrderGiftCardUsedAmount,
   extractRefundedAmount,
+  getDiscountTypeLabel,
   obtainUsedGifrcard,
 } from "./utils";
 
@@ -136,11 +136,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
               <FormattedMessage {...orderPaymentMessages.discount} />
               <HorizontalSpacer spacing={4} />
               <span className={classes.supportText}>
-                {discount.type === OrderDiscountType.MANUAL ? (
-                  <FormattedMessage {...orderPaymentMessages.staffAdded} />
-                ) : (
-                  <FormattedMessage {...orderPaymentMessages.voucher} />
-                )}
+                <FormattedMessage {...getDiscountTypeLabel(discount.type)} />
               </span>
               <span
                 className={clsx(

src/orders/components/OrderPayment/messages.ts

@@ -65,6 +65,11 @@ export const orderPaymentMessages = defineMessages({
     defaultMessage: "Voucher",
     description: "voucher type order discount",
   },
+  promotion: {
+    id: "TBdxTP",
+    defaultMessage: "Promotion",
+    description: "promotion type order discount",
+  },
   total: {
     id: "zb4eBO",
     defaultMessage: "Total",

src/orders/components/OrderPayment/utils.ts

@@ -3,10 +3,14 @@ import { subtractMoney } from "@dashboard/components/Money";
 import {
   GiftCardEventsEnum,
   OrderDetailsFragment,
+  OrderDiscountType,
   PaymentChargeStatusEnum,
 } from "@dashboard/graphql";
 import { IMoney } from "@dashboard/utils/intl";
 import compact from "lodash/compact";
+import { MessageDescriptor } from "react-intl";
+
+import { orderPaymentMessages } from "./messages";
 
 export const obtainUsedGifrcard = (order?: OrderDetailsFragment) => {
   if (!order) return null;
@@ -72,3 +76,17 @@ export const extractRefundedAmount = (order: OrderDetailsFragment): IMoney => {
     }
   );
 };
+
+export const getDiscountTypeLabel = (
+  discountType: OrderDiscountType,
+): MessageDescriptor => {
+  switch (discountType) {
+    case OrderDiscountType.MANUAL:
+      return orderPaymentMessages.staffAdded;
+    case OrderDiscountType.PROMOTION:
+    case OrderDiscountType.ORDER_PROMOTION:
+      return orderPaymentMessages.promotion;
+    default:
+      return orderPaymentMessages.voucher;
+  }
+};