All files / src/components/Signup/Forms SignupFormProvider.tsx

100% Statements 18/18
57.14% Branches 8/14
100% Functions 5/5
100% Lines 17/17

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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124                                                                                                    483x   483x             44x   44x 44x   44x   44x 44x                                                         44x 44x 1x     44x       9x 9x           44x                 483x 98x  
import { getURL } from "@features/GiveSignup/helpers";
import { isEnterpriseWebsite } from "@hooks/onboarding/utils";
import * as React from "react";
import { useSearchParams } from "react-router-dom";
 
export type FormInput = {
  [key: string]: any;
};
 
export type organizationType =
  | "manage_submerchants"
  | "accept_payments"
  | undefined;
export type MerchantDataType = {
  personalDetails: {
    firstName: string;
    lastName: string;
    email: string;
  };
  organizationDetails: {
    name: string;
    taxId: string;
    termsConditions: boolean;
    logo?: string | File;
    businessType?: string;
    ssn?: string;
    businessPurpose?: string;
  };
  organizationType?: organizationType;
  classification?: {
    name?: string;
    description?: string;
  };
};
 
export type Title =
  | "personalDetails"
  | "organizationDetails"
  | "organizationType"
  | "classification";
 
export type FormContextType = {
  formData: FormInput;
  setFormValues: (
    name: Title,
    values: FormInput | organizationType | string,
  ) => void;
  resetHandler: () => void;
};
 
export const FormContext = React.createContext<FormContextType | null>(null);
 
const SignupFormProvider = ({
  children,
  data,
}: {
  data?: MerchantDataType;
  children: React.ReactNode;
}) => {
  const isEnterprise = isEnterpriseWebsite();
  //if its givepaid, givecause, givecrowd,enterprise-redirected- from signup flow, we get the classification from the params
  const [searchParams] = useSearchParams();
  const { host: nonProfitHostURL } = getURL("non_profit") ?? {};
  const defaultClassification =
    nonProfitHostURL === window.location.host ? "non_profit" : undefined;
 
  const classificationParam = searchParams.get("classification");
  const initialValue: MerchantDataType = {
    personalDetails: data
      ? data.personalDetails
      : {
          firstName: "",
          lastName: "",
          email: "",
        },
 
    organizationType: isEnterprise
      ? ("accept_payments" as organizationType)
      : undefined,
    classification: {
      name: classificationParam ? classificationParam : defaultClassification,
      description: undefined,
    },
    organizationDetails: data
      ? data.organizationDetails
      : {
          name: "",
          taxId: "",
          termsConditions: false,
          logo: "",
          businessType: "",
          ssn: "",
          businessPurpose: "",
        },
  };
  const [formData, setFormData] =
    React.useState<MerchantDataType>(initialValue);
  const resetHandler = () => {
    setFormData(initialValue);
  };
 
  const setFormValues = (
    name: Title,
    values: FormInput | organizationType | string,
  ) => {
    const val = typeof values === "string" ? values : { ...values };
    setFormData((prevValues) => ({
      ...prevValues,
      [name]: val,
    }));
  };
 
  return (
    <FormContext.Provider value={{ formData, setFormValues, resetHandler }}>
      {children}
    </FormContext.Provider>
  );
};
 
export default SignupFormProvider;
 
export const useFormData = () =>
  React.useContext(FormContext) as FormContextType;