Merge remote-tracking branch 'origin/trunk' into feat/promotions-mile…

…stone-2

src/components/TextField/InputWithLabel.tsx

@@ -22,8 +22,9 @@ export const InputWithLabel = forwardRef((
     InputProps,
     inputProps,
     placeholder,
-    name
-  }: TextFieldProps,
+    name,
+    ariaLabel
+  }: TextFieldProps & {ariaLabel?: string},
   ref
 ) => {
   const labelId = useRef(uniqueId("label")).current;
@@ -45,7 +46,7 @@ export const InputWithLabel = forwardRef((
         error={error}
         disabled={disabled}
         ref={ref}
-        inputProps={{ ...inputProps, "aria-labelledby": labelId }}
+        inputProps={{ ...inputProps, "aria-labelledby": labelId, "aria-label": ariaLabel }}
         placeholder={placeholder}
         name={name}
         {...InputProps}

src/graphql/generates.ts

@@ -9066,6 +9066,13 @@ export type GetViewerQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetViewerQuery = { __typename?: 'Query', viewer?: { __typename?: 'Account', _id: string, firstName?: string | null, language?: string | null, lastName?: string | null, name?: string | null, primaryEmailAddress: any, adminUIShops?: Array<{ __typename?: 'Shop', _id: string, name: string, slug?: string | null, shopType?: string | null, language: string, brandAssets?: { __typename?: 'ShopBrandAssets', navbarBrandImage?: { __typename?: 'ImageSizes', large?: string | null } | null } | null, storefrontUrls?: { __typename?: 'StorefrontUrls', storefrontHomeUrl?: string | null } | null, shopLogoUrls?: { __typename?: 'ShopLogoUrls', primaryShopLogoUrl?: string | null } | null, currency: { __typename?: 'Currency', _id: string, code: string, format: string, symbol: string } } | null> | null, groups?: { __typename?: 'GroupConnection', nodes?: Array<{ __typename?: 'Group', _id: string, name: string, permissions?: Array<string | null> | null } | null> | null } | null } | null };
 
+export type GetIntrospectSchemaQueryVariables = Exact<{
+  schemaName: Scalars['String'];
+}>;
+
+
+export type GetIntrospectSchemaQuery = { __typename?: 'Query', introspectSchema: { __typename?: 'IntrospectSchemaPayload', schemaName: string, schema?: any | null } };
+
 export type CreateShopMutationVariables = Exact<{
   input: CreateShopInput;
 }>;
@@ -9644,6 +9651,28 @@ export const useGetViewerQuery = <
       fetcher<GetViewerQuery, GetViewerQueryVariables>(client, GetViewerDocument, variables, headers),
       options
     );
+export const GetIntrospectSchemaDocument = `
+    query getIntrospectSchema($schemaName: String!) {
+  introspectSchema(schemaName: $schemaName) {
+    schemaName
+    schema
+  }
+}
+    `;
+export const useGetIntrospectSchemaQuery = <
+      TData = GetIntrospectSchemaQuery,
+      TError = unknown
+    >(
+      client: GraphQLClient,
+      variables: GetIntrospectSchemaQueryVariables,
+      options?: UseQueryOptions<GetIntrospectSchemaQuery, TError, TData>,
+      headers?: RequestInit['headers']
+    ) =>
+    useQuery<GetIntrospectSchemaQuery, TError, TData>(
+      ['getIntrospectSchema', variables],
+      fetcher<GetIntrospectSchemaQuery, GetIntrospectSchemaQueryVariables>(client, GetIntrospectSchemaDocument, variables, headers),
+      options
+    );
 export const CreateShopDocument = `
     mutation createShop($input: CreateShopInput!) {
   createShop(input: $input) {

src/hooks/useIntrospectSchema/index.ts

@@ -0,0 +1,43 @@
+import { startCase } from "lodash-es";
+import { useMemo } from "react";
+
+import { SelectOptionType } from "types/common";
+import { useGetIntrospectSchemaQuery } from "@graphql/generates";
+import { client } from "@graphql/graphql-request-client";
+import { FieldProperty, SchemaProperties, Type } from "types/schema";
+
+export type FieldPropertySelectOption = SelectOptionType & FieldProperty
+
+export const isObjectType = (fieldProperty: FieldProperty): fieldProperty is FieldProperty<Type.Object> => fieldProperty.type === Type.Object;
+
+export const isArrayType = (fieldProperty: FieldProperty): fieldProperty is FieldProperty<Type.Array> => fieldProperty.type === Type.Array;
+
+const normalizeSchemaProperties = ({ schemaProperties = {}, filterFn, prependFieldName }:
+  { schemaProperties?: SchemaProperties,
+    filterFn?: (property: FieldPropertySelectOption) => boolean,
+    prependFieldName?: string
+  }) : FieldPropertySelectOption[] => {
+  const normalizedResults = Object.entries(schemaProperties).flatMap(([field, fieldProperty]) => {
+    if (isObjectType(fieldProperty) && Object.keys(fieldProperty.properties).length) {
+      return normalizeSchemaProperties({ schemaProperties: fieldProperty.properties, filterFn, prependFieldName: field });
+    }
+    if (isArrayType(fieldProperty) && isObjectType(fieldProperty.items[0])) {
+      return normalizeSchemaProperties({ schemaProperties: fieldProperty.items[0].properties, filterFn, prependFieldName: field });
+    }
+    return [{ label: startCase(prependFieldName ? `${prependFieldName} ${field}` : field), value: fieldProperty.path, ...fieldProperty }];
+  });
+
+  return filterFn ? normalizedResults.filter(filterFn) : normalizedResults;
+};
+
+export const useIntrospectSchema = ({ schemaName, filterFn, enabled }:
+  {schemaName: string, filterFn?: (property: FieldProperty) => boolean, enabled: boolean}) => {
+  const { data, isLoading } = useGetIntrospectSchemaQuery(client, { schemaName }, { enabled });
+
+  const schemaProperties = useMemo(() => {
+    const properties = data?.introspectSchema.schema.properties;
+    return normalizeSchemaProperties({ schemaProperties: properties, filterFn });
+  }, [data, filterFn]);
+
+  return { schemaProperties, originalSchema: data?.introspectSchema.schema.properties, isLoading };
+};

src/hooks/useIntrospectSchema/introspectSchema.graphql

@@ -0,0 +1,6 @@
+query getIntrospectSchema($schemaName: String!) {
+  introspectSchema(schemaName: $schemaName) {
+    schemaName
+    schema
+  }
+}

src/hooks/useIntrospectSchema/useIntrospectSchema.test.tsx

@@ -0,0 +1,26 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { cartItemProperties } from "@mocks/handlers/introspectSchemaHandlers";
+
+import { renderHook, waitFor } from "@utils/testUtils";
+
+import { useIntrospectSchema } from ".";
+
+const client = new QueryClient();
+const wrapper = ({ children }: {children: JSX.Element}) => <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+
+describe("useIntrospectSchema", () => {
+  it("should return normalize schema data", async () => {
+    const { result } = renderHook(() => useIntrospectSchema({ schemaName: "CartItem", enabled: true }), { wrapper });
+    await waitFor(() => {
+      expect(result.current.schemaProperties).toEqual([
+        { label: "Product Id", value: "$.productId", ...cartItemProperties.productId },
+        { label: "Price Type", value: "$.priceType", ...cartItemProperties.priceType },
+        { label: "Product Tag Ids", value: "$.productTagIds", ...cartItemProperties.productTagIds },
+        { label: "Parcel Containers", value: "$.parcel.containers", ...cartItemProperties.parcel.properties.containers },
+        { label: "Parcel Length", value: "$.parcel.length", ...cartItemProperties.parcel.properties.length },
+        { label: "Attributes Label", value: "$.attributes.[0].label", ...cartItemProperties.attributes.items[0].properties.label },
+        { label: "Attributes Value", value: "$.attributes.[0].value", ...cartItemProperties.attributes.items[0].properties.value }
+      ]);
+    });
+  });
+});

src/mocks/handlers/index.ts

@@ -6,8 +6,9 @@ import { handlers as transactionalEmailHandlers } from "./transactionalEmailHand
 import { handlers as checkoutSettingsHandlers } from "./checkoutSettingsHandlers";
 import { handlers as customersHandlersHandlers } from "./customersHandlers";
 import { handlers as promotionsHandlersHandlers } from "./promotionsHandlers";
+import { handlers as introspectSchemaHandlers } from "./introspectSchemaHandlers";
 
 export const handlers = [
   ...shippingMethodsHandlers, ...accountHandlers, ...userHandlers, ...shopSettingsHandlers, ...transactionalEmailHandlers, ...checkoutSettingsHandlers,
-  ...customersHandlersHandlers, ...promotionsHandlersHandlers
+  ...customersHandlersHandlers, ...promotionsHandlersHandlers, ...introspectSchemaHandlers
 ];

src/mocks/handlers/introspectSchemaHandlers.ts

@@ -0,0 +1,83 @@
+import { graphql } from "msw";
+
+export const mockCartItemSchema = {
+  schema: {
+    properties: {
+      productId: {
+        type: "string",
+        path: "$.productId"
+      },
+      priceType: {
+        type: "string",
+        enum: [
+          "full",
+          "clearance",
+          "sale"
+        ],
+        path: "$.priceType"
+      },
+      productTagIds: {
+        type: "array",
+        items: [
+          {
+            type: "string",
+            path: "$.productTagIds.[0]"
+          }
+        ],
+        additionalItems: false,
+        path: "$.productTagIds"
+      },
+      parcel: {
+        type: "object",
+        properties: {
+          containers: {
+            type: "string",
+            path: "$.parcel.containers"
+          },
+          length: {
+            type: "number",
+            path: "$.parcel.length"
+          }
+        },
+        required: [],
+        additionalProperties: false,
+        path: "$.parcel"
+      },
+      attributes: {
+        type: "array",
+        items: [
+          {
+            type: "object",
+            properties: {
+              label: {
+                type: "string",
+                path: "$.attributes.[0].label"
+              },
+              value: {
+                type: "string",
+                path: "$.attributes.[0].value"
+              }
+            },
+            required: [
+              "label"
+            ],
+            additionalProperties: false,
+            path: "$.attributes.[0]"
+          }
+        ],
+        additionalItems: false,
+        path: "$.attributes"
+      }
+    }
+  },
+  schemaName: "CartItem"
+};
+
+export const cartItemProperties = mockCartItemSchema.schema.properties;
+const getIntrospectSchemaHandler = graphql.query("getIntrospectSchema", (req, res, ctx) =>
+  res(ctx.data({ introspectSchema: mockCartItemSchema })));
+
+
+export const handlers = [
+  getIntrospectSchemaHandler
+];

src/pages/Promotions/Details/ConditionField.tsx

@@ -1,37 +1,92 @@
 import Stack from "@mui/material/Stack";
-import { FastField } from "formik";
+import { FastField, Field, getIn, useFormikContext } from "formik";
 import { AutocompleteRenderInputParams } from "@mui/material/Autocomplete";
 import Typography from "@mui/material/Typography";
-import { memo } from "react";
+import { SyntheticEvent, useRef } from "react";
+import * as Yup from "yup";
 
 import { SelectField } from "@components/SelectField";
-import { CONDITION_OPERATORS, CONDITION_PROPERTIES_OPTIONS, OPERATOR_OPTIONS } from "../constants";
+import { CONDITION_OPERATORS, OPERATOR_OPTIONS } from "../constants";
 import { InputWithLabel } from "@components/TextField";
 import { AutocompleteField } from "@components/AutocompleteField";
+import { FieldPropertySelectOption } from "@hooks/useIntrospectSchema";
+import { Promotion } from "types/promotions";
+import { SelectOptionType } from "types/common";
+import { Type } from "types/schema";
 
 type ConditionFieldProps = {
   name: string
   index: number
   operator: string
+  schemaProperties: FieldPropertySelectOption[]
+  isLoadingSchema: boolean
 }
 
-export const ConditionField = memo(({ name, index, operator }: ConditionFieldProps) =>
-  (
+
+export const ConditionField = ({ name, index, operator, isLoadingSchema, schemaProperties }: ConditionFieldProps) => {
+  const { setFieldValue, values } = useFormikContext<Promotion>();
+
+  const selectedProperty = useRef(schemaProperties.find((option) => option.value === getIn(values, `${name}.path`)) || null);
+  const availableValueOptions = useRef<string[]>([]);
+
+  const onPathChange = (_: SyntheticEvent, selectedOption: FieldPropertySelectOption | null) => {
+    setFieldValue(`${name}.path`, selectedOption ? selectedOption.value : null);
+    selectedProperty.current = selectedOption;
+
+    if (selectedOption?.type === Type.Boolean) {
+      availableValueOptions.current = ["true", "false"];
+    } else if (selectedOption?.enum) {
+      availableValueOptions.current = selectedOption.enum;
+    }
+  };
+
+  const getOptionLabel = (optionValue: string | FieldPropertySelectOption) => {
+    if (typeof optionValue === "string") return schemaProperties.find((option) => option.value === optionValue)?.label || "";
+    return optionValue.label;
+  };
+
+  const validateConditionValue = (selectedValues: string[]) => {
+    let error;
+    if (selectedProperty.current?.type === Type.Number || selectedProperty.current?.type === Type.Integer) {
+      if (selectedValues.some((value) => !Yup.number().isValidSync(value))) {
+        error = "Please enter number values";
+      }
+      if (typeof selectedProperty.current?.minimum !== "undefined"
+      && selectedValues.some((value) => !Yup.number().min(Number(selectedProperty.current?.minimum)).isValidSync(value))) {
+        error = `All values must be greater than or equal to ${selectedProperty.current.minimum}`;
+      }
+    }
+    if (selectedProperty.current?.format === Type.DateTime && selectedValues.some((value) => !Yup.date().isValidSync(value))) {
+      error = "Please enter valid date time values";
+    }
+    return error;
+  };
+
+  return (
     <Stack direction="row" gap={1} alignItems="center" pl={1}>
       <Stack flexBasis="30px">
         {index > 0 ? <Typography color="grey.700" variant="caption">
           {CONDITION_OPERATORS[operator]?.fieldPrefix?.toUpperCase()}
         </Typography> : null}
       </Stack>
       <Stack sx={{ flexDirection: { sm: "column", md: "row" }, gap: { sm: 0, md: 3 } }} flexGrow={1}>
-        <FastField
-          component={SelectField}
+        <Field
           name={`${name}.path`}
-          placeholder="Property"
-          ariaLabel="Property"
-          hiddenLabel
-          options={CONDITION_PROPERTIES_OPTIONS}
-          displayEmpty
+          component={AutocompleteField}
+          options={schemaProperties}
+          loading={isLoadingSchema}
+          isOptionEqualToValue={(option: SelectOptionType, value: string) => (value ? option.value === value : false)}
+          onChange={onPathChange}
+          getOptionLabel={getOptionLabel}
+          renderInput={(params: AutocompleteRenderInputParams) => (
+            <InputWithLabel
+              {...params}
+              name={`${name}.path`}
+              placeholder="Property"
+              ariaLabel="Property"
+              hiddenLabel
+            />
+          )}
         />
         <FastField
           component={SelectField}
@@ -42,23 +97,24 @@ export const ConditionField = memo(({ name, index, operator }: ConditionFieldPro
           placeholder="Operator"
           displayEmpty
         />
-        <FastField
+        <Field
           component={AutocompleteField}
+          validate={validateConditionValue}
           name={`${name}.value`}
-          freeSolo
+          freeSolo={!availableValueOptions.current.length}
           multiple
-          options={[]}
+          options={availableValueOptions.current}
           autoSelect
           renderInput={(params: AutocompleteRenderInputParams) => (
             <InputWithLabel
               {...params}
-              name="value"
+              name={`${name}.value`}
               placeholder="Enter Values"
               hiddenLabel
             />
           )}
         />
       </Stack>
     </Stack>
-  ));
-
+  );
+};