refactor(FE): Refactor ProductForm to fetch constants via SWR

src/components/pages/master-data/product/form/ProductForm.tsx

@@ -38,7 +38,9 @@ import {
 import { cn } from '@/lib/helper';
 
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import { PRODUCT_FLAG_MAPPING } from '@/config/constant';
+import { ConstantsApi } from '@/services/api/constants/constants';
+import type { TransformedConstants } from '@/types/api/constants/constants';
+import useSWR from 'swr';
 
 import { Supplier } from '@/types/api/master-data/supplier';
 import Card from '@/components/Card';
@@ -55,6 +57,11 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
 
   const [productFormErrorMessage, setProductFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const { data: constants, isLoading: isLoadingConstants } = useSWR<
+    TransformedConstants | undefined
+  >('constants', ConstantsApi.fetchTransformedConstants.bind(ConstantsApi));
+
+  const productFlagMapping = constants?.product_flag_mapping ?? null;
 
   const createProductHandler = useCallback(
     async (payload: CreateProductPayload) => {
@@ -205,20 +212,20 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   }, [supplierOptions, formik.values.suppliers]);
 
   const selectedFlagMapping = useMemo(() => {
-    return PRODUCT_FLAG_MAPPING.options.find(
+    return productFlagMapping?.options.find(
       (opt) => opt.flag.value === formik.values.flag
     );
-  }, [formik.values.flag]);
+  }, [formik.values.flag, productFlagMapping]);
 
   const subFlagOptions = useMemo<OptionType[]>(() => {
-    return (selectedFlagMapping?.sub_flags as unknown as OptionType[]) ?? [];
+    return selectedFlagMapping?.sub_flags ?? [];
   }, [selectedFlagMapping]);
 
   const selectedSubFlagValues = useMemo<OptionType[]>(() => {
     return (
-      (selectedFlagMapping?.sub_flags.filter((subFlag) =>
+      selectedFlagMapping?.sub_flags.filter((subFlag) =>
-        formik.values.sub_flags?.includes(subFlag.value)
+        formik.values.sub_flags?.includes(subFlag.value as string)
-      ) as unknown as OptionType[]) ?? []
+      ) ?? []
     );
   }, [selectedFlagMapping, formik.values.sub_flags]);
 
@@ -458,15 +465,16 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 required
                 label='Flags'
                 placeholder='Pilih flags...'
-                value={(
+                value={productFlagMapping?.flags.find(
-                  PRODUCT_FLAG_MAPPING.flags as unknown as OptionType[]
+                  (opt) => opt.value === formik.values.flag
-                ).find((opt) => opt.value === formik.values.flag)}
+                )}
                 onChange={(val) => {
-                  const selectedFlag = (val as OptionType)?.value ?? '';
+                  const selectedFlag = String((val as OptionType)?.value ?? '');
                   formik.setFieldValue('flag', selectedFlag);
                   formik.setFieldValue('sub_flags', []);
                 }}
-                options={PRODUCT_FLAG_MAPPING.flags as unknown as OptionType[]}
+                options={productFlagMapping?.flags ?? []}
+                isLoading={isLoadingConstants}
                 isError={formik.touched.flag && Boolean(formik.errors.flag)}
                 errorMessage={formik.errors.flag as string}
                 isDisabled={type === 'detail'}
@@ -474,8 +482,8 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               />
 
               <SelectInput
-                label='Sub Flags'
+                label='Kategori Flags'
-                placeholder='Pilih sub flags...'
+                placeholder='Pilih kategori flags...'
                 isMulti
                 required={isSubFlagRequired}
                 value={selectedSubFlagValues}
@@ -483,15 +491,17 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                   const arr = Array.isArray(val) ? val : val ? [val] : [];
                   formik.setFieldValue(
                     'sub_flags',
-                    arr.map((v) => (v as OptionType).value)
+                    arr.map((v) => String((v as OptionType).value))
                   );
                 }}
                 options={subFlagOptions}
+                isLoading={isLoadingConstants}
                 isError={
                   formik.touched.sub_flags && Boolean(formik.errors.sub_flags)
                 }
                 errorMessage={formik.errors.sub_flags as string}
                 isDisabled={type === 'detail' || !formik.values.flag}
+                closeMenuOnSelect={false}
                 isClearable
               />
             </div>