Merge branch 'main' into lkostrowski/model-type-icons

Author: lkostrowski

.changeset/discount-rule-reward-decimal.md

@@ -0,0 +1,7 @@
+---
+"saleor-dashboard": patch
+---
+
+Discount rule reward values now keep their decimal part.
+
+Typing `12.55` into a rule's reward value stored `12` — the field parsed input with `parseInt`, so everything after the decimal point was dropped without any feedback. Fractional rewards below `1`, such as a `0.5%` discount, were also rejected with "Rule reward value is required". Both now work, for fixed-amount and percentage rewards alike.

.github/workflows/pr-automation.yml

@@ -143,6 +143,8 @@ jobs:
           IS_CLOUD_INSTANCE: true
           ENABLED_SERVICE_NAME_HEADER: true
           ONBOARDING_USER_JOINED_DATE_THRESHOLD: ${{ vars.STAGING_ONBOARDING_USER_JOINED_DATE_THRESHOLD }}
+          # PR test envs run core unstable/unreleased main, so build against the staging schema
+          FF_USE_STAGING_SCHEMA: true
         run: pnpm run build
 
       - name: Upload Build

src/discounts/components/DiscountRules/componenets/RuleForm/components/RuleRewardValue/RuleRewardValue.test.tsx

@@ -0,0 +1,93 @@
+import { type Rule } from "@dashboard/discounts/models";
+import { PromotionTypeEnum, RewardValueTypeEnum } from "@dashboard/graphql";
+import { ThemeProvider } from "@saleor/macaw-ui-next";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { type ReactNode } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+
+import { DiscountRulesContextProvider } from "../../../../context";
+import { RuleRewardValue } from "./RuleRewardValue";
+
+const defaultValues = {
+  rewardValue: null,
+  rewardValueType: RewardValueTypeEnum.FIXED,
+} as unknown as Rule;
+
+let submittedValue: number | null | undefined;
+
+const Wrapper = ({ children }: { children: ReactNode }) => {
+  const methods = useForm<Rule>({ defaultValues });
+
+  submittedValue = methods.watch("rewardValue");
+
+  return (
+    <ThemeProvider>
+      <DiscountRulesContextProvider
+        discountType={PromotionTypeEnum.CATALOGUE}
+        channels={[]}
+        disabled={false}
+      >
+        <FormProvider {...methods}>{children}</FormProvider>
+      </DiscountRulesContextProvider>
+    </ThemeProvider>
+  );
+};
+
+const renderRewardValue = () =>
+  render(<RuleRewardValue currencySymbol="USD" error={undefined} />, { wrapper: Wrapper });
+
+describe("RuleRewardValue", () => {
+  beforeEach(() => {
+    submittedValue = undefined;
+  });
+
+  it("keeps the fractional part of a decimal reward value", async () => {
+    // Arrange
+    renderRewardValue();
+
+    const input = screen.getByTestId("reward-value-input");
+
+    // Act
+    await userEvent.type(input, "12.55");
+
+    // Assert
+    expect(submittedValue).toBe(12.55);
+  });
+
+  it("keeps a reward value below one", async () => {
+    // Arrange
+    renderRewardValue();
+
+    const input = screen.getByTestId("reward-value-input");
+
+    // Act
+    await userEvent.type(input, "0.5");
+
+    // Assert
+    expect(submittedValue).toBe(0.5);
+  });
+
+  it("clears the reward value when the input is emptied", async () => {
+    // Arrange
+    renderRewardValue();
+
+    const input = screen.getByTestId("reward-value-input");
+
+    await userEvent.type(input, "12");
+
+    // Act
+    await userEvent.clear(input);
+
+    // Assert
+    expect(submittedValue).toBeNull();
+  });
+
+  it("allows decimals to be entered", () => {
+    // Arrange & Act
+    renderRewardValue();
+
+    // Assert
+    expect(screen.getByTestId("reward-value-input")).toHaveAttribute("step", "any");
+  });
+});

src/discounts/components/DiscountRules/componenets/RuleForm/components/RuleRewardValue/RuleRewardValue.tsx

@@ -43,13 +43,14 @@ export const RuleRewardValue = ({ currencySymbol, error }: RuleRewardPriceProps)
             name={rewardValueType.name}
             ref={rewardValueType.ref}
             onChange={e => {
-              const value = parseInt(e.target.value, 10);
+              const value = parseFloat(e.target.value);
 
               rewardValueType.onChange(Number.isNaN(value) ? null : value);
             }}
             error={!!rewardValueError}
             disabled={disabled || rewardValueType.disabled}
             type="number"
+            step="any"
             size="small"
             label={intl.formatMessage(messages.discountValue)}
             data-test-id="reward-value-input"

src/discounts/components/DiscountRules/componenets/RuleFormModal/validationSchema.test.ts

@@ -0,0 +1,77 @@
+import { RewardValueTypeEnum } from "@dashboard/graphql";
+import { testIntlInstance } from "@test/intl";
+
+import { getValidationSchema } from "./validationSchema";
+
+const buildRule = (overrides: Record<string, unknown> = {}) => ({
+  name: "Rule name",
+  description: null,
+  channel: { label: "Default channel", value: "channel-id" },
+  conditions: [],
+  rewardType: null,
+  rewardValueType: RewardValueTypeEnum.FIXED,
+  rewardValue: 10,
+  ...overrides,
+});
+
+const getRewardValueError = (rule: ReturnType<typeof buildRule>) => {
+  const result = getValidationSchema(testIntlInstance).safeParse(rule);
+
+  if (result.success) {
+    return undefined;
+  }
+
+  return result.error.issues.find(issue => issue.path.includes("rewardValue"));
+};
+
+describe("getValidationSchema", () => {
+  it.each([12.55, 0.5, 0.01])("accepts %p as a reward value", rewardValue => {
+    // Arrange
+    const rule = buildRule({ rewardValue });
+
+    // Act
+    const error = getRewardValueError(rule);
+
+    // Assert
+    expect(error).toBeUndefined();
+  });
+
+  it.each([0, -1, null])("rejects %p as a reward value", rewardValue => {
+    // Arrange
+    const rule = buildRule({ rewardValue });
+
+    // Act
+    const error = getRewardValueError(rule);
+
+    // Assert
+    expect(error).toBeDefined();
+  });
+
+  it("rejects a percentage reward value above 100", () => {
+    // Arrange
+    const rule = buildRule({
+      rewardValueType: RewardValueTypeEnum.PERCENTAGE,
+      rewardValue: 100.5,
+    });
+
+    // Act
+    const error = getRewardValueError(rule);
+
+    // Assert
+    expect(error).toBeDefined();
+  });
+
+  it("accepts a fractional percentage reward value", () => {
+    // Arrange
+    const rule = buildRule({
+      rewardValueType: RewardValueTypeEnum.PERCENTAGE,
+      rewardValue: 12.5,
+    });
+
+    // Act
+    const error = getRewardValueError(rule);
+
+    // Assert
+    expect(error).toBeUndefined();
+  });
+});

src/discounts/components/DiscountRules/componenets/RuleFormModal/validationSchema.ts

@@ -31,7 +31,7 @@ const rewardValueRequired = (intl: IntlShape) =>
       required_error: intl.formatMessage(validationMessages.rewardValueRequired),
       invalid_type_error: intl.formatMessage(validationMessages.rewardValueRequired),
     })
-    .min(1, intl.formatMessage(validationMessages.rewardValueRequired));
+    .gt(0, intl.formatMessage(validationMessages.rewardValueRequired));
 const getDefaultSchema = (intl: IntlShape) =>
   z.object({
     id: z.string().optional(),