All files / src/features/Merchants/MerchantSidePanel/Modals/ProviderConfigurationModal GiveProviderConfigurationModal.tsx

100% Statements 7/7
100% Branches 0/0
100% Functions 4/4
100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94                                      3x     224x   224x   224x                                                                                       672x         8064x   2688x                                
import NiceModal from "@ebay/nice-modal-react";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import { Box, Stack } from "@mui/system";
import { FormProvider } from "react-hook-form";
import { useEnterpriseConfiguration } from "./hooks/useEnterpriseConfiguration";
import {
  EnterpriseConfigurationGroups,
  EnterpriseConfigurationList,
} from "./constants/EnterpriseConfiguration.constants";
import GiveText from "@shared/Text/GiveText";
import GiveButton from "@shared/Button/GiveButton";
import GiveProviderConfigurationSwitch from "./components/GiveProviderConfigurationSwitch";
 
type TGiveProviderConfigurationModal = {
  enterpriseId: number;
  data: { [key: string]: boolean };
  onClose?: (data: { [key: string]: boolean }, id?: number) => void;
};
 
const GiveProviderConfigurationModal = NiceModal.create(
  ({ enterpriseId, data, onClose }: TGiveProviderConfigurationModal) => {
    const { open, handleCancel, methods, onSubmit, disabled } =
      useEnterpriseConfiguration({ onClose, enterpriseId, data });
 
    const isCreateMode = !enterpriseId;
 
    return (
      <GiveBaseModal
        data-testid="provider-configuration-modal"
        title="Configuration"
        open={open}
        onClose={handleCancel}
        width="560px"
        buttons={
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              width: "170px",
              gap: "12px",
            }}
          >
            <GiveButton
              label="Cancel"
              size="large"
              variant="ghost"
              onClick={handleCancel}
              data-testid="provider-configuration-cancel-btn"
            />
            <GiveButton
              label="Save"
              size="large"
              variant="filled"
              type="submit"
              form="enterprise-configuration-form"
              data-testid="provider-configuration-save-changes-button"
              disabled={disabled}
            />
          </Box>
        }
      >
        <FormProvider {...methods}>
          <Stack
            component="form"
            id="enterprise-configuration-form"
            onSubmit={methods.handleSubmit(onSubmit)}
            spacing={2}
            data-testid="provider-configuration-form"
          >
            {EnterpriseConfigurationGroups.map((group) => (
              <Stack spacing={2} key={group}>
                <GiveText variant="bodyS" color="secondary">
                  {group}
                </GiveText>
                {EnterpriseConfigurationList.filter(
                  (item) => item.group === group,
                ).map((item) => (
                  <GiveProviderConfigurationSwitch
                    key={item.name}
                    item={item}
                    isCreateMode={isCreateMode}
                  />
                ))}
              </Stack>
            ))}
          </Stack>
        </FormProvider>
      </GiveBaseModal>
    );
  },
);
 
export default GiveProviderConfigurationModal;