All files / src/sections/PayBuilder/Forms/About SweepstakeAbout.tsx

100% Statements 8/8
100% Branches 2/2
100% Functions 3/3
100% Lines 8/8

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                        46x   46x             4x 4x   4x   4x                                                   4x                                             4x                      
import { Box } from "@mui/material";
import About from "./About";
import { Stack } from "@mui/material";
import { ControlledDatePicker } from "../DateAndLocation/components/ControlledDatePicker";
import { ControlledAutoCompleteTime } from "../DateAndLocation/components/Timers/ControlledAutoCompleteTime";
import GiveText from "@shared/Text/GiveText";
import { Controller } from "react-hook-form";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveCheckbox from "@shared/GiveCheckbox/GiveCheckbox";
import HFGiveCustomAmount from "@shared/HFInputs/HFGiveCustomAmount/HFGiveCustomAmount";
import { WithPlaceholder } from "@sections/PayBuilder/components/loaders/WithPlaceholder";
 
const MAX_TARGET = 99999999999999;
 
export const SweepstakeAbout = ({
  isEdit,
  isFromADB,
}: {
  isEdit?: boolean;
  isFromADB?: boolean;
}) => {
  const { methods, isPaymentFormInfosLoading } = usePayBuilderForm();
  const { watch, control } = methods;
 
  const isAddTargetEnabled = watch("About.addTarget");
 
  return (
    <Box pb="20px">
      <About isEdit={isEdit} isFromADB={isFromADB} />
      <Stack spacing={2} marginTop={2}>
        <WithPlaceholder isLoading={isPaymentFormInfosLoading} width="100%">
          <ControlledDatePicker
            label="End Date"
            name="About.sweepstakeEndAtDate"
            disablePast
            useUTCMoment
            isValidateForm
          />
        </WithPlaceholder>
        <Stack gap={1}>
          <WithPlaceholder isLoading={isPaymentFormInfosLoading} width="100%">
            <GiveText fontSize="14px">End Time</GiveText>
            <ControlledAutoCompleteTime name="About.sweepstakeEndAtTime" />
          </WithPlaceholder>
        </Stack>
      </Stack>
      <Stack spacing={2} marginTop={2}>
        <Stack direction="row" spacing={1}>
          <Controller
            control={control}
            name="About.addTarget"
            render={({ field: { onChange, value } }) => {
              return <GiveCheckbox checked={value} onChange={onChange} />;
            }}
          />
          <GiveText color="secondary" variant="bodyS" alignItems="center">
            Add Sweepstakes Goal
          </GiveText>
        </Stack>
        {isAddTargetEnabled && (
          <Box paddingLeft="20px">
            <HFGiveCustomAmount
              label="Goal"
              name="About.targetValue"
              currency="usd"
              bounded
              max={MAX_TARGET}
            />
          </Box>
        )}
        <Stack direction="row" spacing={1}>
          <Controller
            control={control}
            name="About.showHistory"
            render={({ field: { onChange, value } }) => {
              return <GiveCheckbox checked={value} onChange={onChange} />;
            }}
          />
          <GiveText color="secondary" variant="bodyS" alignItems="center">
            Show Participants History
          </GiveText>
        </Stack>
      </Stack>
    </Box>
  );
};