- 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 key={"BOF2"} value={"BOF2"}>
+            BOF2
           </option>
-          ))}
         </Field>
       </FormGroup>
       <FormGroup>

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

@@ -30,6 +30,22 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
   };
 
   return (
+    <>
+      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
+        <>
+          <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">
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
+              Format coming soon
+            </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>
@@ -103,6 +119,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
+
             {format?.toLowerCase() === "bof2" && (
               <>
                 <div className="border-b border-gray-500 my-3">
@@ -172,6 +189,8 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
           </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>