feat: updated switch field

SnailyCAD · Apr 15, 2023 · e120e4b · e120e4b
1 parent afa0d9c
commit e120e4b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 50 deletions.
diff --git a/apps/client/src/components/citizen/licenses/ManageLicensesFormFields.tsx b/apps/client/src/components/citizen/licenses/ManageLicensesFormFields.tsx
@@ -8,10 +8,9 @@ import { FormField } from "components/form/FormField";
 import { Select } from "components/form/Select";
 import { filterLicenseType, filterLicenseTypes } from "lib/utils";
 import { classNames } from "lib/classNames";
-import { Toggle } from "components/form/Toggle";
 import type { LicenseInitialValues } from "./manage-licenses-modal";
 import { FormRow } from "components/form/FormRow";
-import { DatePickerField } from "@snailycad/ui";
+import { DatePickerField, SwitchField } from "@snailycad/ui";
 import { ValueSelectField } from "components/form/inputs/value-select-field";
 
 export function createDefaultLicensesValues(citizen: Citizen | null): LicenseInitialValues {
@@ -89,14 +88,12 @@ export function ManageLicensesFormFields({ isLeo, allowRemoval, flexType }: Prop
         <section className="w-full">
           {isLeo ? (
             <FormRow>
-              <FormField label={t("Leo.suspendDriversLicense")}>
-                <Toggle
-                  onCheckedChange={handleChange}
-                  name="suspended.driverLicense"
-                  value={values.suspended.driverLicense}
-                  onChange={handleChange}
-                />
-              </FormField>
+              <SwitchField
+                isSelected={values.suspended.driverLicense}
+                onChange={(isSelected) => setFieldValue("suspended.driverLicense", isSelected)}
+              >
+                {t("Leo.suspendDriversLicense")}
+              </SwitchField>
 
               {values.suspended.driverLicense ? (
                 <DatePickerField
@@ -163,14 +160,12 @@ export function ManageLicensesFormFields({ isLeo, allowRemoval, flexType }: Prop
       <section className="w-full">
         {isLeo ? (
           <FormRow>
-            <FormField label={t("Leo.suspendPilotLicense")} checkbox>
-              <Toggle
-                onCheckedChange={handleChange}
-                name="suspended.pilotLicense"
-                value={values.suspended.pilotLicense}
-                onChange={handleChange}
-              />
-            </FormField>
+            <SwitchField
+              isSelected={values.suspended.pilotLicense}
+              onChange={(isSelected) => setFieldValue("suspended.pilotLicense", isSelected)}
+            >
+              {t("Leo.suspendPilotLicense")}
+            </SwitchField>
 
             {values.suspended.pilotLicense ? (
               <DatePickerField
@@ -234,14 +229,12 @@ export function ManageLicensesFormFields({ isLeo, allowRemoval, flexType }: Prop
       <section className="w-full">
         {isLeo ? (
           <FormRow>
-            <FormField label={t("Leo.suspendWaterLicense")} checkbox>
-              <Toggle
-                onCheckedChange={handleChange}
-                name="suspended.waterLicense"
-                value={values.suspended.waterLicense}
-                onChange={handleChange}
-              />
-            </FormField>
+            <SwitchField
+              isSelected={values.suspended.waterLicense}
+              onChange={(isSelected) => setFieldValue("suspended.waterLicense", isSelected)}
+            >
+              {t("Leo.suspendWaterLicense")}
+            </SwitchField>
 
             {values.suspended.waterLicense ? (
               <DatePickerField
@@ -306,14 +299,12 @@ export function ManageLicensesFormFields({ isLeo, allowRemoval, flexType }: Prop
         <section className="w-full">
           {isLeo ? (
             <FormRow>
-              <FormField label={t("Leo.suspendFirearmsLicense")} checkbox>
-                <Toggle
-                  onCheckedChange={handleChange}
-                  name="suspended.firearmsLicense"
-                  value={values.suspended.firearmsLicense}
-                  onChange={handleChange}
-                />
-              </FormField>
+              <SwitchField
+                isSelected={values.suspended.firearmsLicense}
+                onChange={(isSelected) => setFieldValue("suspended.firearmsLicense", isSelected)}
+              >
+                {t("Leo.suspendFirearmsLicense")}
+              </SwitchField>
 
               {values.suspended.firearmsLicense ? (
                 <DatePickerField

diff --git a/apps/client/src/components/citizen/vehicles/modals/register-vehicle-modal.tsx b/apps/client/src/components/citizen/vehicles/modals/register-vehicle-modal.tsx
@@ -9,6 +9,7 @@ import {
   Loader,
   SelectField,
   TextField,
+  SwitchField,
 } from "@snailycad/ui";
 import { FormField } from "components/form/FormField";
 import { Modal } from "components/modal/Modal";
@@ -27,7 +28,6 @@ import { handleValidate } from "lib/handleValidate";
 import { useCitizen } from "context/CitizenContext";
 import { useRouter } from "next/router";
 import { useAuth } from "context/AuthContext";
-import { Toggle } from "components/form/Toggle";
 import { useFeatureEnabled } from "hooks/useFeatureEnabled";
 import { useBusinessState } from "state/business-state";
 import { filterLicenseType, filterLicenseTypes } from "lib/utils";
@@ -301,22 +301,20 @@ export function RegisterVehicleModal({ vehicle, onClose, onCreate, onUpdate }: P
 
             {vehicle ? (
               <FormRow>
-                <FormField errorMessage={errors.reportedStolen} label={tVehicle("reportAsStolen")}>
-                  <Toggle
-                    onCheckedChange={handleChange}
-                    name="reportedStolen"
-                    value={values.reportedStolen}
-                  />
-                </FormField>
+                <SwitchField
+                  isSelected={values.reportedStolen}
+                  onChange={(isSelected) => setFieldValue("reportedStolen", isSelected)}
+                >
+                  {tVehicle("reportAsStolen")}
+                </SwitchField>
 
-                <FormField errorMessage={errors.reApplyForDmv} label={tVehicle("reApplyForDmv")}>
-                  <Toggle
-                    disabled={vehicle.dmvStatus !== WhitelistStatus.DECLINED}
-                    onCheckedChange={handleChange}
-                    name="reApplyForDmv"
-                    value={values.reApplyForDmv ?? false}
-                  />
-                </FormField>
+                <SwitchField
+                  isSelected={values.reApplyForDmv}
+                  onChange={(isSelected) => setFieldValue("reApplyForDmv", isSelected)}
+                  isDisabled={vehicle.dmvStatus !== WhitelistStatus.DECLINED}
+                >
+                  {tVehicle("reApplyForDmv")}
+                </SwitchField>
               </FormRow>
             ) : null}