[MERX-52] Improve promotion ui alignment (#4670)

* Align rule form and promotion type * Show unknown chips in summary * Add reminder * Add changeset
saleor · Feb 13, 2024 · fe48a01 · fe48a01
1 parent bb2232b
commit fe48a01
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 35 deletions.
diff --git a/.changeset/loud-steaks-perform.md b/.changeset/loud-steaks-perform.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Improve promotion ui aligments
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -2315,6 +2315,9 @@
     "context": "Order summary refunds header",
     "string": "Refunds"
   },
+  "E9E5Eh": {
+    "string": "Please remember that conditions will not be updated when you change the channel."
+  },
   "EA7rjI": {
     "context": "disabled status label",
     "string": "Disabled"
@@ -6012,6 +6015,9 @@
     "context": "order history message",
     "string": "Invoice was requested by {requestedBy}"
   },
+  "ckSjjv": {
+    "string": "Too complex conditions to display, use playground to see details."
+  },
   "cnvyqW": {
     "context": "ChannelsSection select field placeholder",
     "string": "Add Channel"
@@ -6252,6 +6258,9 @@
     "context": "dialog header",
     "string": "Search Collection"
   },
+  "f1Pj99": {
+    "string": "Discount of {value} through the {channel} with {unknown} conditions"
+  },
   "f2F1NJ": {
     "context": "section title",
     "string": "Quick Pick"
@@ -6311,9 +6320,6 @@
     "context": "Amount error message",
     "string": "Amount cannot be bigger than max refund"
   },
-  "feF0lB": {
-    "string": "Too complex conditions to display, use playground to see details"
-  },
   "fehqPs": {
     "context": "order history message",
     "string": "Products were deleted from an order"
@@ -8479,6 +8485,9 @@
   "un+VWt": {
     "string": "Search products"
   },
+  "uo8NOT": {
+    "string": "unknown"
+  },
   "uoKAmI": {
     "string": "Add new order"
   },

diff --git a/src/discounts/components/DiscountGeneralInfo/DiscountGeneralInfo.tsx b/src/discounts/components/DiscountGeneralInfo/DiscountGeneralInfo.tsx
@@ -54,7 +54,18 @@ export const DiscountGeneralInfo = ({
         <FormattedMessage defaultMessage="General information" id="fKrRhF" />
       </DashboardCard.Title>
       <DashboardCard.Content>
-        <Box display="grid" gap={3}>
+        <Box display="grid" __gridTemplateColumns="250px 1fr" gap={3}>
+          <Select
+            {...typeField}
+            size="medium"
+            options={discountTypes}
+            label={intl.formatMessage({
+              defaultMessage: "Discount type",
+              id: "z/2AZY",
+            })}
+            disabled={typeDisabled || typeField.disabled}
+          />
+
           <Input
             {...nameField}
             error={!!error || !!formState.errors?.name}
@@ -66,19 +77,6 @@ export const DiscountGeneralInfo = ({
             })}
             disabled={disabled || nameField.disabled}
           />
-
-          <Box __width={250}>
-            <Select
-              {...typeField}
-              size="medium"
-              options={discountTypes}
-              label={intl.formatMessage({
-                defaultMessage: "Discount type",
-                id: "z/2AZY",
-              })}
-              disabled={typeDisabled || typeField.disabled}
-            />
-          </Box>
         </Box>
       </DashboardCard.Content>
     </DashboardCard>

diff --git a/src/discounts/components/DiscountRules/componenets/RuleForm/RuleForm.tsx b/src/discounts/components/DiscountRules/componenets/RuleForm/RuleForm.tsx
@@ -98,8 +98,8 @@ export const RuleForm = <ErrorCode,>({
     <RichTextContext.Provider value={richText}>
       <Box __width={650} __minHeight={515} __maxHeight="75vh" overflowY="auto">
         <Box display="flex" flexDirection="column" gap={4} marginTop={4}>
-          <Box display="flex" gap={4}>
-            <RuleInputWrapper __flex={1}>
+          <Box display="grid" __gridTemplateColumns="315px 1fr" gap={2}>
+            <RuleInputWrapper>
               <Input
                 {...nameField}
                 disabled={disabled || nameField.disabled}
@@ -110,7 +110,7 @@ export const RuleForm = <ErrorCode,>({
               />
             </RuleInputWrapper>
 
-            <RuleInputWrapper __flex={1}>
+            <RuleInputWrapper>
               <Combobox
                 {...channelfield}
                 onChange={handleChannelChange}

diff --git a/...nents/DiscountRules/componenets/RuleForm/components/RuleConditionRow/RuleConditionRow.tsx b/...nents/DiscountRules/componenets/RuleForm/components/RuleConditionRow/RuleConditionRow.tsx
@@ -23,8 +23,8 @@ export const RuleConditionRow = ({
   return (
     <Box
       display="grid"
-      gap={0.5}
-      __gridTemplateColumns="2fr 1fr 3fr 35px"
+      gap={2}
+      __gridTemplateColumns="200px 106px 1fr 35px"
       placeItems="center"
       alignItems="start"
     >

diff --git a/...DiscountRules/componenets/RuleForm/components/RuleConditionValues/RuleConditionValues.tsx b/...DiscountRules/componenets/RuleForm/components/RuleConditionValues/RuleConditionValues.tsx
@@ -60,7 +60,7 @@ export const RuleConditionValues = ({
 
   if (inputType === "price.range" || inputType === "number.range") {
     return (
-      <Box display="flex" gap={1} alignItems="center">
+      <Box display="flex" gap={2} alignItems="center">
         <RangeInput
           data-test-id={`condition-value-${conditionIndex}`}
           value={condition.value as [string, string]}

diff --git a/...omponents/DiscountRules/componenets/RuleForm/components/RuleConditions/RuleConditions.tsx b/...omponents/DiscountRules/componenets/RuleForm/components/RuleConditions/RuleConditions.tsx
@@ -71,7 +71,7 @@ export const RuleConditions = ({
     <Box display="flex" flexDirection="column" gap={4}>
       <Text>{intl.formatMessage(messages.conditions)}</Text>
 
-      <Box display="flex" flexDirection="column" gap={4}>
+      <Box display="flex" flexDirection="column" gap={2}>
         {fields.map((condition, conditionIndex) => (
           <RuleConditionRow
             isConditionTypeSelected={isConditionNameSelected}

diff --git a/.../components/RuleConditions/components/NestedConditionsWarning/NestedConditionsWarning.tsx b/.../components/RuleConditions/components/NestedConditionsWarning/NestedConditionsWarning.tsx
@@ -21,9 +21,14 @@ export const NestedConditionsWarning = ({
       <Box display="flex" alignItems="center" gap={2}>
         <WarningIcon color="warning1" />
 
-        <Text variant="caption" color="default1">
-          {intl.formatMessage(messages.noHanldedConditions)}
-        </Text>
+        <Box display="flex" flexDirection="column">
+          <Text variant="caption" color="default1">
+            {intl.formatMessage(messages.noHanldedConditions)}
+          </Text>
+          <Text variant="caption" color="default1">
+            {intl.formatMessage(messages.noHandledConditionsReminder)}
+          </Text>
+        </Box>
       </Box>
 
       <Button

diff --git a/...ponents/DiscountRules/componenets/RuleForm/components/RuleDescription/RuleDescription.tsx b/...ponents/DiscountRules/componenets/RuleForm/components/RuleDescription/RuleDescription.tsx
@@ -27,7 +27,7 @@ export const RuleDescription = ({ error = false }: RuleDescriptionProps) => {
 
   return (
     <Box overflow="hidden">
-      <Text marginBottom={2} as="p">
+      <Text marginBottom={4} as="p">
         {intl.formatMessage(commonMessages.description)}
       </Text>
 

diff --git a/...counts/components/DiscountRules/componenets/RuleForm/components/RuleReward/RuleReward.tsx b/...counts/components/DiscountRules/componenets/RuleForm/components/RuleReward/RuleReward.tsx
@@ -23,7 +23,7 @@ export const RuleReward = ({ currencySymbol, error }: RuleRewardProps) => {
   if (discountType === PromotionTypeEnum.ORDER) {
     return (
       <RuleRewardWrapper>
-        <Box display="grid" __gridTemplateColumns="1fr 2fr" gap={4}>
+        <Box display="grid" __gridTemplateColumns="200px 1fr" gap={2}>
           <RuleRewardTypeSelect />
           {rewardType === RewardTypeEnum.GIFT && <RuleRewardGifts />}
           {rewardType === RewardTypeEnum.SUBTOTAL_DISCOUNT && (
@@ -35,7 +35,7 @@ export const RuleReward = ({ currencySymbol, error }: RuleRewardProps) => {
   }
 
   return (
-    <RuleRewardWrapper __width={350}>
+    <RuleRewardWrapper __width={315}>
       <RuleRewardValue currencySymbol={currencySymbol} error={error} />
     </RuleRewardWrapper>
   );
@@ -48,7 +48,7 @@ function RuleRewardWrapper({
   const intl = useIntl();
 
   return (
-    <Box {...props}>
+    <Box display="grid" gap={4} {...props}>
       <Text as="p">{intl.formatMessage(messages.reward)}</Text>
       {children}
     </Box>

diff --git a/...ponents/DiscountRules/componenets/RuleForm/components/RuleRewardValue/RuleRewardValue.tsx b/...ponents/DiscountRules/componenets/RuleForm/components/RuleRewardValue/RuleRewardValue.tsx
@@ -32,7 +32,7 @@ export const RuleRewardValue = ({
   });
 
   return (
-    <Box display="flex" gap={4}>
+    <Box display="flex" gap={2}>
       <DiscountTypeSwitch
         onChange={type => rewardTypeField.onChange(type)}
         selected={discountType}

diff --git a/...nts/components/DiscountRules/componenets/RulesList/components/RuleSummary/RuleSummary.tsx b/...nts/components/DiscountRules/componenets/RulesList/components/RuleSummary/RuleSummary.tsx
@@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl";
 
 import { RuleChannelChips } from "./components/RuleChannelChips";
 import { RuleConditionsChips } from "./components/RuleConditionsChips";
+import { RuleUnknownChips } from "./components/RuleUnknownChips";
 import { RuleValueChips } from "./components/RuleValueChips";
 import { hasNoRuleConditions } from "./utils";
 
@@ -19,7 +20,24 @@ export const RuleSummary = ({ rule, currencySymbol }: RuleSummaryProps) => {
     return null;
   }
 
-  if (hasNoRuleConditions(rule) || rule.hasPredicateNestedConditions) {
+  if (rule.hasPredicateNestedConditions) {
+    return (
+      <Text>
+        <FormattedMessage
+          {...messages.ruleSummaryWithComplexConditions}
+          values={{
+            value: (
+              <RuleValueChips rule={rule} currencySymbol={currencySymbol} />
+            ),
+            unknown: <RuleUnknownChips />,
+            channel: <RuleChannelChips channel={rule.channel} />,
+          }}
+        />
+      </Text>
+    );
+  }
+
+  if (hasNoRuleConditions(rule)) {
     return (
       <Text>
         <FormattedMessage

diff --git a/...onenets/RulesList/components/RuleSummary/components/RuleUnknownChips/RuleUnknownChips.tsx b/...onenets/RulesList/components/RuleSummary/components/RuleUnknownChips/RuleUnknownChips.tsx
@@ -0,0 +1,15 @@
+import { Chip } from "@saleor/macaw-ui-next";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export const RuleUnknownChips = () => {
+  return (
+    <Chip
+      backgroundColor="accent1Pressed"
+      borderColor="accent1"
+      color="default1"
+    >
+      <FormattedMessage defaultMessage="unknown" id="uo8NOT" />
+    </Chip>
+  );
+};
diff --git a/...ntRules/componenets/RulesList/components/RuleSummary/components/RuleUnknownChips/index.ts b/...ntRules/componenets/RulesList/components/RuleSummary/components/RuleUnknownChips/index.ts
@@ -0,0 +1 @@
+export * from "./RuleUnknownChips";
diff --git a/src/discounts/components/DiscountRules/messages.ts b/src/discounts/components/DiscountRules/messages.ts
@@ -58,6 +58,11 @@ export const messages = defineMessages({
     id: "7MUx0T",
     defaultMessage: "Discount of {value} through the {channel}",
   },
+  ruleSummaryWithComplexConditions: {
+    id: "f1Pj99",
+    defaultMessage:
+      "Discount of {value} through the {channel} with {unknown} conditions",
+  },
   ruleSummaryMoreItems: {
     id: "B0fwAj",
     defaultMessage: "and {itemsLength} more",
@@ -87,9 +92,14 @@ export const messages = defineMessages({
     defaultMessage: "No channels selected",
   },
   noHanldedConditions: {
-    id: "feF0lB",
+    id: "ckSjjv",
+    defaultMessage:
+      "Too complex conditions to display, use playground to see details.",
+  },
+  noHandledConditionsReminder: {
+    id: "E9E5Eh",
     defaultMessage:
-      "Too complex conditions to display, use playground to see details",
+      "Please remember that conditions will not be updated when you change the channel.",
   },
   noConditonsCreate: {
     id: "Xu4ST7",