From 33765f15a77a6d4a194110a81e1a86b8346f63b2 Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Sat, 15 Apr 2023 15:41:24 +0200
Subject: [PATCH] feat: updated switch field

---
 .../citizen/weapons/register-weapon-modal.tsx | 21 ++++----
 .../Manage911Call/add-unit-to-call-modal.tsx  | 20 ++++---
 .../dispatch/modals/tones-modal.tsx           | 30 ++++++-----
 .../leo/incidents/manage-incident-modal.tsx   | 53 +++++++++----------
 .../manage-record/manage-record-modal.tsx     | 27 +++++-----
 .../manage-seized-items-modal.tsx             | 15 +++---
 .../business/[id]/[employeeId]/manage.tsx     |  2 +-
 .../ui/src/components/fields/switch-field.tsx |  8 ++-
 8 files changed, 87 insertions(+), 89 deletions(-)

diff --git a/apps/client/src/components/citizen/weapons/register-weapon-modal.tsx b/apps/client/src/components/citizen/weapons/register-weapon-modal.tsx
index a9b5946bd..d927f3a62 100644
--- a/apps/client/src/components/citizen/weapons/register-weapon-modal.tsx
+++ b/apps/client/src/components/citizen/weapons/register-weapon-modal.tsx
@@ -3,7 +3,7 @@ import { Form, Formik, FormikHelpers } from "formik";
 import { useRouter } from "next/router";
 import { WEAPON_SCHEMA } from "@snailycad/schemas";
 import { FormField } from "components/form/FormField";
-import { Loader, Input, Button, Item, AsyncListSearchField } from "@snailycad/ui";
+import { Loader, Input, Button, Item, AsyncListSearchField, SwitchField } from "@snailycad/ui";
 import { Modal } from "components/modal/Modal";
 import useFetch from "lib/useFetch";
 import { useValues } from "src/context/ValuesContext";
@@ -23,7 +23,6 @@ import { filterLicenseType, filterLicenseTypes } from "lib/utils";
 import { toastMessage } from "lib/toastMessage";
 import { CitizenSuggestionsField } from "components/shared/CitizenSuggestionsField";
 import type { PostCitizenWeaponData, PutCitizenWeaponData } from "@snailycad/types/api";
-import { Toggle } from "components/form/Toggle";
 import { ValueSelectField } from "components/form/inputs/value-select-field";
 
 interface Props {
@@ -111,7 +110,7 @@ export function RegisterWeaponModal({ weapon, onClose, onCreate, onUpdate }: Pro
       className="w-[600px]"
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, setValues, errors, values, isValid }) => (
+        {({ handleChange, setFieldValue, setValues, errors, values, isValid }) => (
           <Form>
             {CUSTOM_TEXTFIELD_VALUES ? (
               <FormField errorMessage={errors.model} label={tVehicle("model")}>
@@ -174,14 +173,14 @@ export function RegisterWeaponModal({ weapon, onClose, onCreate, onUpdate }: Pro
             </FormField>
 
             {weapon ? (
-              <FormField errorMessage={errors.reApplyForDmv} label={tVehicle("reApplyForDmv")}>
-                <Toggle
-                  disabled={weapon.bofStatus !== WhitelistStatus.DECLINED}
-                  onCheckedChange={handleChange}
-                  name="reApplyForDmv"
-                  value={values.reApplyForDmv ?? false}
-                />
-              </FormField>
+              <SwitchField
+                className="mt-3"
+                isSelected={values.reApplyForDmv ?? false}
+                onChange={(isSelected) => setFieldValue("reApplyForDmv", isSelected)}
+                isDisabled={weapon.bofStatus !== WhitelistStatus.DECLINED}
+              >
+                {tVehicle("reApplyForDmv")}
+              </SwitchField>
             ) : null}
 
             <footer className="flex justify-end mt-5">
diff --git a/apps/client/src/components/dispatch/modals/Manage911Call/add-unit-to-call-modal.tsx b/apps/client/src/components/dispatch/modals/Manage911Call/add-unit-to-call-modal.tsx
index a50f83882..88c9983cb 100644
--- a/apps/client/src/components/dispatch/modals/Manage911Call/add-unit-to-call-modal.tsx
+++ b/apps/client/src/components/dispatch/modals/Manage911Call/add-unit-to-call-modal.tsx
@@ -1,15 +1,13 @@
 import { useTranslations } from "use-intl";
-import { Loader, Button, AsyncListSearchField, Item } from "@snailycad/ui";
+import { Loader, Button, AsyncListSearchField, Item, SwitchField } from "@snailycad/ui";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "state/modalState";
 import { ModalIds } from "types/ModalIds";
 import { Form, Formik } from "formik";
-import { FormField } from "components/form/FormField";
 import useFetch from "lib/useFetch";
 import { makeUnitName, yesOrNoText } from "lib/utils";
 import { isUnitCombined, isUnitCombinedEmsFd } from "@snailycad/utils";
 import { useGenerateCallsign } from "hooks/useGenerateCallsign";
-import { Toggle } from "components/form/Toggle";
 import type { Put911CallByIdData } from "@snailycad/types/api";
 import { useCall911State } from "state/dispatch/call-911-state";
 import type { CombinedEmsFdUnit, CombinedLeoUnit, EmsFdDeputy, Officer } from "@snailycad/types";
@@ -135,7 +133,7 @@ export function AddUnitToCallModal({ onClose }: Props) {
       className="w-[600px]"
     >
       <Formik onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, setValues, values, errors }) => (
+        {({ setFieldValue, setValues, values, errors }) => (
           <Form>
             <div className="border border-secondary rounded-md p-4 mt-5">
               <AsyncListSearchField<Officer | EmsFdDeputy | CombinedLeoUnit | CombinedEmsFdUnit>
@@ -194,13 +192,13 @@ export function AddUnitToCallModal({ onClose }: Props) {
               </AsyncListSearchField>
 
               <FormRow flexLike className="items-center">
-                <FormField className="mt-3" checkbox label={t("primaryUnit")}>
-                  <Toggle
-                    onCheckedChange={handleChange}
-                    value={values.isPrimary}
-                    name="isPrimary"
-                  />
-                </FormField>
+                <SwitchField
+                  className="mt-3"
+                  isSelected={values.isPrimary}
+                  onChange={(isSelected) => setFieldValue("isPrimary", isSelected)}
+                >
+                  {t("primaryUnit")}
+                </SwitchField>
 
                 <Button
                   type="button"
diff --git a/apps/client/src/components/dispatch/modals/tones-modal.tsx b/apps/client/src/components/dispatch/modals/tones-modal.tsx
index 0ffdc951c..7156c519d 100644
--- a/apps/client/src/components/dispatch/modals/tones-modal.tsx
+++ b/apps/client/src/components/dispatch/modals/tones-modal.tsx
@@ -1,12 +1,10 @@
-import { Loader, Button, TextField } from "@snailycad/ui";
-import { FormField } from "components/form/FormField";
+import { Loader, Button, TextField, SwitchField } from "@snailycad/ui";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "state/modalState";
 import { Form, Formik, FormikHelpers } from "formik";
 import useFetch from "lib/useFetch";
 import { ModalIds } from "types/ModalIds";
 import { useTranslations } from "use-intl";
-import { Toggle } from "components/form/Toggle";
 import { FormRow } from "components/form/FormRow";
 import { handleValidate } from "lib/handleValidate";
 import { TONES_SCHEMA } from "@snailycad/schemas";
@@ -97,25 +95,29 @@ export function TonesModal({ types }: Props) {
       className="w-[600px]"
     >
       <Formik validate={validate} onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, setFieldValue, setValues, resetForm, values, errors, isValid }) => (
+        {({ setFieldValue, setValues, resetForm, values, errors, isValid }) => (
           <Form>
             <p className="my-3 text-neutral-700 dark:text-gray-400">{t("notesInfo")}</p>
 
             <FormRow>
               {types.includes(ActiveToneType.EMS_FD) ? (
-                <FormField errorMessage={errors.emsFdTone} label={t("emsFdTone")}>
-                  <Toggle
-                    name="emsFdTone"
-                    onCheckedChange={handleChange}
-                    value={values.emsFdTone}
-                  />
-                </FormField>
+                <SwitchField
+                  className="mt-3"
+                  isSelected={values.emsFdTone}
+                  onChange={(isSelected) => setFieldValue("emsFdTone", isSelected)}
+                >
+                  {t("emsFdTone")}
+                </SwitchField>
               ) : null}
 
               {types.includes(ActiveToneType.LEO) ? (
-                <FormField errorMessage={errors.leoTone} label={t("leoTone")}>
-                  <Toggle name="leoTone" onCheckedChange={handleChange} value={values.leoTone} />
-                </FormField>
+                <SwitchField
+                  className="mt-3"
+                  isSelected={values.leoTone}
+                  onChange={(isSelected) => setFieldValue("leoTone", isSelected)}
+                >
+                  {t("leoTone")}
+                </SwitchField>
               ) : null}
             </FormRow>
 
diff --git a/apps/client/src/components/leo/incidents/manage-incident-modal.tsx b/apps/client/src/components/leo/incidents/manage-incident-modal.tsx
index 35f669fb7..2a9787c81 100644
--- a/apps/client/src/components/leo/incidents/manage-incident-modal.tsx
+++ b/apps/client/src/components/leo/incidents/manage-incident-modal.tsx
@@ -1,5 +1,5 @@
 import { LEO_INCIDENT_SCHEMA } from "@snailycad/schemas";
-import { Loader, Button, Input } from "@snailycad/ui";
+import { Loader, Button, Input, SwitchField } from "@snailycad/ui";
 import { FormField } from "components/form/FormField";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "state/modalState";
@@ -8,7 +8,6 @@ import { handleValidate } from "lib/handleValidate";
 import useFetch from "lib/useFetch";
 import { ModalIds } from "types/ModalIds";
 import { useTranslations } from "use-intl";
-import { Toggle } from "components/form/Toggle";
 import { FormRow } from "components/form/FormRow";
 import { useRouter } from "next/router";
 import { dataToSlate, Editor } from "components/editor/editor";
@@ -134,7 +133,7 @@ export function ManageIncidentModal<T extends LeoIncident | EmsFdIncident>({
           initialValues={INITIAL_VALUES}
           onSubmit={onSubmit}
         >
-          {({ handleChange, setFieldValue, errors, values, isValid }) => (
+          {({ setFieldValue, errors, values, isValid }) => (
             <Form className="w-full flex flex-col justify-between">
               {incident ? (
                 <header className="mb-4 flex flex-wrap flex-row max-w-[1050px]">
@@ -154,33 +153,29 @@ export function ManageIncidentModal<T extends LeoIncident | EmsFdIncident>({
 
               <div>
                 <FormRow>
-                  <FormField errorMessage={errors.firearmsInvolved} label={t("firearmsInvolved")}>
-                    <Toggle
-                      disabled={areFieldsDisabled}
-                      value={values.firearmsInvolved}
-                      name="firearmsInvolved"
-                      onCheckedChange={handleChange}
-                    />
-                  </FormField>
-                  <FormField
-                    errorMessage={errors.injuriesOrFatalities}
-                    label={t("injuriesOrFatalities")}
+                  <SwitchField
+                    isDisabled={areFieldsDisabled}
+                    isSelected={values.firearmsInvolved}
+                    onChange={(isSelected) => setFieldValue("firearmsInvolved", isSelected)}
                   >
-                    <Toggle
-                      disabled={areFieldsDisabled}
-                      value={values.injuriesOrFatalities}
-                      name="injuriesOrFatalities"
-                      onCheckedChange={handleChange}
-                    />
-                  </FormField>
-                  <FormField errorMessage={errors.arrestsMade} label={t("arrestsMade")}>
-                    <Toggle
-                      disabled={areFieldsDisabled}
-                      value={values.arrestsMade}
-                      name="arrestsMade"
-                      onCheckedChange={handleChange}
-                    />
-                  </FormField>
+                    {t("firearmsInvolved")}
+                  </SwitchField>
+
+                  <SwitchField
+                    isDisabled={areFieldsDisabled}
+                    isSelected={values.injuriesOrFatalities}
+                    onChange={(isSelected) => setFieldValue("injuriesOrFatalities", isSelected)}
+                  >
+                    {t("injuriesOrFatalities")}
+                  </SwitchField>
+
+                  <SwitchField
+                    isDisabled={areFieldsDisabled}
+                    isSelected={values.arrestsMade}
+                    onChange={(isSelected) => setFieldValue("arrestsMade", isSelected)}
+                  >
+                    {t("arrestsMade")}
+                  </SwitchField>
                 </FormRow>
 
                 <FormField errorMessage={errors.description} label={common("description")}>
diff --git a/apps/client/src/components/leo/modals/manage-record/manage-record-modal.tsx b/apps/client/src/components/leo/modals/manage-record/manage-record-modal.tsx
index f0c4ae162..1c8b81e9a 100644
--- a/apps/client/src/components/leo/modals/manage-record/manage-record-modal.tsx
+++ b/apps/client/src/components/leo/modals/manage-record/manage-record-modal.tsx
@@ -8,6 +8,7 @@ import {
   Item,
   TabList,
   TabsContent,
+  SwitchField,
 } from "@snailycad/ui";
 import { FormField } from "components/form/FormField";
 import type { SelectValue } from "components/form/Select";
@@ -23,7 +24,6 @@ import { RecordType, type PenalCode, type Record, PaymentStatus } from "@snailyc
 import { toastMessage } from "lib/toastMessage";
 import { useFeatureEnabled } from "hooks/useFeatureEnabled";
 import type { PostRecordsData, PutRecordsByIdData } from "@snailycad/types/api";
-import { Toggle } from "components/form/Toggle";
 import { AddressPostalSelect } from "components/form/select/PostalSelect";
 import { CitizenSuggestionsField } from "components/shared/CitizenSuggestionsField";
 import { FullDate } from "components/shared/FullDate";
@@ -345,19 +345,18 @@ export function ManageRecordModal(props: Props) {
                   onChange={(value) => setFieldValue("notes", value)}
                 />
 
-                <FormField optional errorMessage={errors.paymentStatus} label={t("recordPaid")}>
-                  <Toggle
-                    disabled={props.isReadOnly}
-                    value={values.paymentStatus === PaymentStatus.PAID}
-                    name="paymentStatus"
-                    onCheckedChange={(event) => {
-                      setFieldValue(
-                        "paymentStatus",
-                        event.target.value ? PaymentStatus.PAID : PaymentStatus.UNPAID,
-                      );
-                    }}
-                  />
-                </FormField>
+                <SwitchField
+                  isDisabled={props.isReadOnly}
+                  isSelected={values.paymentStatus === PaymentStatus.PAID}
+                  onChange={(isSelected) => {
+                    setFieldValue(
+                      "paymentStatus",
+                      isSelected ? PaymentStatus.PAID : PaymentStatus.UNPAID,
+                    );
+                  }}
+                >
+                  {t("recordPaid")}
+                </SwitchField>
               </TabsContent>
 
               <SeizedItemsTab isReadOnly={props.isReadOnly} />
diff --git a/apps/client/src/components/leo/modals/manage-record/tabs/seized-items-tab/manage-seized-items-modal.tsx b/apps/client/src/components/leo/modals/manage-record/tabs/seized-items-tab/manage-seized-items-modal.tsx
index f5f5d4397..a96f63d41 100644
--- a/apps/client/src/components/leo/modals/manage-record/tabs/seized-items-tab/manage-seized-items-modal.tsx
+++ b/apps/client/src/components/leo/modals/manage-record/tabs/seized-items-tab/manage-seized-items-modal.tsx
@@ -1,12 +1,10 @@
 import { Form, Formik, useFormikContext } from "formik";
 import { useTranslations } from "use-intl";
-import { Button, TextField } from "@snailycad/ui";
-import { FormField } from "components/form/FormField";
+import { Button, SwitchField, TextField } from "@snailycad/ui";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "state/modalState";
 import { ModalIds } from "types/ModalIds";
 import type { SeizedItem } from "@snailycad/types";
-import { Toggle } from "components/form/Toggle";
 import { v4 } from "uuid";
 
 interface Props {
@@ -60,7 +58,7 @@ export function ManageSeizedItemsModal({ item, onClose }: Props) {
       className="w-[600px]"
     >
       <Formik onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, setFieldValue, values, errors, isValid }) => (
+        {({ setFieldValue, values, isValid }) => (
           <Form autoComplete="off">
             <TextField
               autoFocus
@@ -80,9 +78,12 @@ export function ManageSeizedItemsModal({ item, onClose }: Props) {
               value={String(values.quantity)}
             />
 
-            <FormField className="mt-1" checkbox errorMessage={errors.illegal} label={t("illegal")}>
-              <Toggle name="illegal" onCheckedChange={handleChange} value={values.illegal} />
-            </FormField>
+            <SwitchField
+              isSelected={values.illegal}
+              onChange={(isSelected) => setFieldValue("illegal", isSelected)}
+            >
+              {t("illegal")}
+            </SwitchField>
 
             <footer className="flex justify-end mt-5">
               <Button type="reset" onPress={handleClose} variant="cancel">
diff --git a/apps/client/src/pages/business/[id]/[employeeId]/manage.tsx b/apps/client/src/pages/business/[id]/[employeeId]/manage.tsx
index b8d2ec986..059b07a84 100644
--- a/apps/client/src/pages/business/[id]/[employeeId]/manage.tsx
+++ b/apps/client/src/pages/business/[id]/[employeeId]/manage.tsx
@@ -69,7 +69,7 @@ export default function BusinessId(props: Props) {
 
   const isBusinessOwner = currentEmployee.role?.as === EmployeeAsEnum.OWNER;
   const hasManagePermissions =
-    currentEmployee.canManageEmployees || currentEmployee.canManageVehicles || !isBusinessOwner;
+    isBusinessOwner || currentEmployee.canManageEmployees || currentEmployee.canManageVehicles;
 
   if (!hasManagePermissions) {
     return (
diff --git a/packages/ui/src/components/fields/switch-field.tsx b/packages/ui/src/components/fields/switch-field.tsx
index 50091838b..2c7dc856a 100644
--- a/packages/ui/src/components/fields/switch-field.tsx
+++ b/packages/ui/src/components/fields/switch-field.tsx
@@ -4,17 +4,21 @@ import { useToggleState } from "@react-stately/toggle";
 import * as React from "react";
 import { classNames } from "../../utils/classNames";
 
-export function SwitchField(props: AriaSwitchProps) {
+interface SwitchFieldProps extends AriaSwitchProps {
+  className?: string;
+}
+
+export function SwitchField(props: SwitchFieldProps) {
   const state = useToggleState(props);
   const ref = React.useRef(null);
   const { inputProps } = useSwitch(props, state, ref);
-  // let { isFocusVisible, focusProps } = useFocusRing();
 
   return (
     <label
       className={classNames(
         "flex items-center mb-3 gap-1.5 font-medium",
         props.isDisabled || (props.isReadOnly && "opacity-50 cursor-not-allowed"),
+        props.className,
       )}
     >
       <VisuallyHidden>