feat(Booking): added hidden field

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "i18n-ally.localesPaths": [
+        "public/locales",
+        "src/features/i18n"
+    ]
+}

src/components/forms/TextField.tsx

@@ -37,22 +37,23 @@ interface TextFieldProps {
   name: string;
   multiline?: boolean;
   placeholder?: string;
+  hidden?: boolean;
 }
 
-const TextField: React.FC<TextFieldProps> = ({ label, name, multiline = false, placeholder }) => {
+const TextField: React.FC<TextFieldProps> = ({ label, name, multiline = false, placeholder, hidden }) => {
   const { t } = useTranslation(["forms"]);
   const labelToDisplay = label === undefined ? t(`${name}Field`) : label;
 
   const [field, meta] = useField({ name });
-
+  console.log("field", field);
   const input = multiline ? (
     <StyledTextArea id={name} placeholder={placeholder} rows={2} {...field} />
   ) : (
     <StyledInput id={name} placeholder={placeholder} {...field} />
   );
 
   return (
-    <Column ai="stretch">
+    <Column ai="stretch" hidden={hidden}>
       <StyledLabel htmlFor={name}>{labelToDisplay}</StyledLabel>
       {input}
       <Box h="13px" mt={0.5} mb={1}>

src/components/layout/Column.tsx

@@ -5,10 +5,11 @@ import styled from "styled-components";
 export interface ColumnProps extends BoxProps {
   jc?: JustifyContent;
   ai?: AlignItems;
+  hidden?: boolean;
 }
 
 export const Column = styled(Box)<ColumnProps>`
-  display: flex;
+  display: ${({ hidden }) => (hidden ? "none" : "flex")};
   flex-direction: column;
   justify-content: ${({ jc }) => jc ?? "space-between"};
   align-items: ${({ ai }) => ai ?? "center"};

src/features/service/api/queries/queries.ts

@@ -328,6 +328,11 @@ export const GET_SERVICE = gql`
           order
           required
         }
+        ... on FormFieldHidden {
+          fieldId
+          fieldType
+          label
+        }
       }
     }
   }

src/features/service/components/Service/BookService/BookService.tsx

@@ -244,7 +244,6 @@ const BookService = () => {
   };
 
   if (formFields === undefined || formFields.length === 0) return null;
-
   return (
     <Box mt={serviceType === BOOKING_FORM_TYPES.PREORDER ? 0 : 1.125}>
       <WrapperCard>

src/features/service/components/Service/BookingServiceFormContent/FormComponent.tsx

@@ -128,6 +128,9 @@ const FormComponent = ({ config }: FormComponentProps) => {
     case "FILE_UPLOAD": {
       return <FileUpload key={`booking-form-field-FILE_UPLOAD-${config.fieldId}`} {...config} label={label} />;
     }
+    case "HIDDEN": {
+      return <TextField key={`booking-form-field-${config.fieldId}`} name={config.label} label={label} hidden />;
+    }
     default: {
       return null;
     }

src/models/formFields.ts

@@ -121,6 +121,11 @@ export type FormFieldFileUpload = BaseFormField & {
   multiple: boolean | null;
 };
 
+export type FormFieldHidden = BaseFormField & {
+  fieldType: "HIDDEN";
+  value: string;
+};
+
 export type FormField =
   | FormFieldSystemFullName
   | FormFieldSystemEmailAddress
@@ -134,4 +139,5 @@ export type FormField =
   | FormFieldNumber
   | FormFieldCheckbox
   | FormFieldSelect
-  | FormFieldFileUpload;
+  | FormFieldFileUpload
+  | FormFieldHidden;