- removed other options

src/components/SettingForms/BearerType/BearerTypeCard.tsx

@@ -2,15 +2,11 @@ import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import BearerTypeFields from "./BearerTypeFields";
 
-type BearerTypeCardProps = {
+const BearerTypeCard = () => {
-  options: string[];
-};
-
-const BearerTypeCard = ({ options }: BearerTypeCardProps) => {
   return (
     <Card className="p-4">
       <CardHeader title="Bearer Type" />
-      <BearerTypeFields options={options} />
+      <BearerTypeFields />
     </Card>
   );
 };

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -3,11 +3,7 @@ import FormToggle from "../components/FormToggle";
 import FormGroup from "../components/FormGroup";
 import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
 
-type BearerTypeFieldsProps = {
+const BearerTypeFields = () => {
-  options: string[];
-};
-
-const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
   useFormikContext<BearerTypeFieldType & InitialValuesForm>();
 
   return (
@@ -20,11 +16,12 @@ const BearerTypeFields = ({ options }: BearerTypeFieldsProps) => {
           id="format"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
         >
-          {options?.map((option: string) => (
+          <option key={"JSON"} value={"JSON"}>
-            <option key={option} value={option}>
+            JSON
-              {option}
+          </option>
-            </option>
+          <option key={"BOF2"} value={"BOF2"}>
-          ))}
+            BOF2
+          </option>
         </Field>
       </FormGroup>
       <FormGroup>

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -31,146 +31,165 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
 
   return (
     <>
-      <div className="flex flex-col space-y-2 px-2">
+      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
-        <FormGroup>
+        <>
-          <label htmlFor="backoffice" className="m-0">
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
-            Back Office URL
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
-          </label>
+              Format coming soon
-
-          <Field
-            name={"backOfficeURL"}
-            type="text"
-            id="backoffice"
-            placeholder="https://www.backoffice.com"
-            className={`p-1.5 border ${
-              errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
-            } rounded-lg w-full md:w-60`}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="username">Username</label>
-          <Field
-            name={"username"}
-            type="text"
-            id="username"
-            placeholder="Back office username"
-            className={`p-1.5 border ${
-              errors.username && touched.username ? "border-red-500" : "border-gray-400 "
-            } rounded-lg w-full md:w-60`}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="password">Password</label>
-          <div className="flex gap-2 items-center relative mb-4">
-            <Field
-              name={"password"}
-              type={showPwd ? "text" : "password"}
-              id="password"
-              placeholder="Back office password"
-              className={`p-1.5 border ${
-                errors.password && touched.password ? "border-red-500" : "border-gray-400 "
-              } rounded-lg w-full md:w-60`}
-            />
-            <FontAwesomeIcon
-              type="button"
-              className="absolute right-5 end-0"
-              onClick={() => setShowPwd((s) => !s)}
-              icon={showPwd ? faEyeSlash : faEye}
-            />
-          </div>
-        </FormGroup>
-
-        <FormGroup>
-          <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
-          <Field
-            name={"connectTimeoutSeconds"}
-            type="number"
-            id="connectTimeoutSeconds"
-            className={`p-1.5 border ${
-              errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-            } rounded-lg w-full md:w-60`}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
-          <Field
-            name={"readTimeoutSeconds"}
-            type="number"
-            id="readTimeoutSeconds"
-            placeholder="https://example.com"
-            className={`p-1.5 border ${
-              errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-            } rounded-lg w-full md:w-60`}
-          />
-        </FormGroup>
-        {format?.toLowerCase() === "bof2" && (
-          <>
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Constants</h2>
             </div>
+
+            <p className="max-w-md text-slate-300">
+              Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
+              <span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
+              updates.
+            </p>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col space-y-2 px-2">
             <FormGroup>
-              <label htmlFor="FFID">Feed ID / Force ID</label>
+              <label htmlFor="backoffice" className="m-0">
+                Back Office URL
+              </label>
+
               <Field
-                name={"FFID"}
+                name={"backOfficeURL"}
                 type="text"
-                id="FFID"
+                id="backoffice"
-                placeholder="ABC123"
+                placeholder="https://www.backoffice.com"
+                className={`p-1.5 border ${
+                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
+                } rounded-lg w-full md:w-60`}
+              />
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="username">Username</label>
+              <Field
+                name={"username"}
+                type="text"
+                id="username"
+                placeholder="Back office username"
+                className={`p-1.5 border ${
+                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
+                } rounded-lg w-full md:w-60`}
+              />
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="password">Password</label>
+              <div className="flex gap-2 items-center relative mb-4">
+                <Field
+                  name={"password"}
+                  type={showPwd ? "text" : "password"}
+                  id="password"
+                  placeholder="Back office password"
+                  className={`p-1.5 border ${
+                    errors.password && touched.password ? "border-red-500" : "border-gray-400 "
+                  } rounded-lg w-full md:w-60`}
+                />
+                <FontAwesomeIcon
+                  type="button"
+                  className="absolute right-5 end-0"
+                  onClick={() => setShowPwd((s) => !s)}
+                  icon={showPwd ? faEyeSlash : faEye}
+                />
+              </div>
+            </FormGroup>
+
+            <FormGroup>
+              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+              <Field
+                name={"connectTimeoutSeconds"}
+                type="number"
+                id="connectTimeoutSeconds"
+                className={`p-1.5 border ${
+                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                } rounded-lg w-full md:w-60`}
+              />
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+              <Field
+                name={"readTimeoutSeconds"}
+                type="number"
+                id="readTimeoutSeconds"
+                placeholder="https://example.com"
                 className={`p-1.5 border ${
                   errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
 
-            <FormGroup>
+            {format?.toLowerCase() === "bof2" && (
-              <label htmlFor="SCID">Source ID / Camera ID</label>
+              <>
-              <Field
+                <div className="border-b border-gray-500 my-3">
-                name={"SCID"}
+                  <h2 className="font-bold">{values.format} Constants</h2>
-                type="text"
+                </div>
-                id="SCID"
+                <FormGroup>
-                placeholder="DEF345"
+                  <label htmlFor="FFID">Feed ID / Force ID</label>
-                className={`p-1.5 border ${
+                  <Field
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    name={"FFID"}
-                } rounded-lg w-full md:w-60`}
+                    type="text"
-              />
+                    id="FFID"
-            </FormGroup>
+                    placeholder="ABC123"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </FormGroup>
 
-            <FormGroup>
+                <FormGroup>
-              <label htmlFor="timestampSource">Timestamp Source</label>
+                  <label htmlFor="SCID">Source ID / Camera ID</label>
-              <Field
+                  <Field
-                name={"timestampSource"}
+                    name={"SCID"}
-                as="select"
+                    type="text"
-                id="timestampSource"
+                    id="SCID"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                    placeholder="DEF345"
-              >
+                    className={`p-1.5 border ${
-                <option value="">-- Select format --</option>
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                <option value={"UTC"}>UTC</option>
+                    } rounded-lg w-full md:w-60`}
-                <option value={"local"}>Local</option>
+                  />
-              </Field>
+                </FormGroup>
-            </FormGroup>
-            <FormGroup>
-              <label htmlFor="GPSFormat">GPS Format</label>
-              <Field
-                name={"GPSFormat"}
-                as="select"
-                id="GPSFormat"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                <option value="">-- Select format --</option>
-                <option value={"Decimal degrees"}>Decimal degrees</option>
-                <option value={"minutes"}>Minutes</option>
-              </Field>
-            </FormGroup>
-          </>
-        )}
-      </div>
 
-      <button
+                <FormGroup>
-        type="submit"
+                  <label htmlFor="timestampSource">Timestamp Source</label>
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+                  <Field
-      >
+                    name={"timestampSource"}
-        {isSubmitting ? "Saving..." : "Save Changes"}
+                    as="select"
-      </button>
+                    id="timestampSource"
-      <ValidationToastOnce />
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value="">-- Select format --</option>
+                    <option value={"UTC"}>UTC</option>
+                    <option value={"local"}>Local</option>
+                  </Field>
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="GPSFormat">GPS Format</label>
+                  <Field
+                    name={"GPSFormat"}
+                    as="select"
+                    id="GPSFormat"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value="">-- Select format --</option>
+                    <option value={"Decimal degrees"}>Decimal degrees</option>
+                    <option value={"minutes"}>Minutes</option>
+                  </Field>
+                </FormGroup>
+              </>
+            )}
+          </div>
+
+          <button
+            type="submit"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+          >
+            {isSubmitting ? "Saving..." : "Save Changes"}
+          </button>
+          <ValidationToastOnce />
+        </>
+      )}
     </>
   );
 };

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -8,7 +8,6 @@ import type {
   InitialValuesFormErrors,
   OptionalBOF2Constants,
 } from "../../../types/types";
-import { cleanArray } from "../../../utils/utils";
 import { useQueryClient } from "@tanstack/react-query";
 import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
 import { useState } from "react";
@@ -21,7 +20,6 @@ const SettingForms = () => {
   const { bof2ConstantsQuery } = useGetDispatcherConfig();
 
   const format = dispatcherQuery?.data?.propFormat?.value;
-  const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
   const enabled = dispatcherQuery?.data?.propEnabled?.value;
 
   const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
@@ -29,8 +27,6 @@ const SettingForms = () => {
   const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
   const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
 
-  const options = cleanArray(rawOptions);
-
   const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
     format: format ?? "JSON",
     enabled: enabled === "true",
@@ -109,7 +105,7 @@ const SettingForms = () => {
       {({ isSubmitting, touched }) => (
         <Form>
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
-            <BearerTypeCard options={options} />
+            <BearerTypeCard />
             <ChannelCard touched={touched} isSubmitting={isSubmitting} />
           </div>
         </Form>