feat(Booking): added hidden field (#67)

Co-authored-by: Daniel Dobkowski <[email protected]>

.vscode/settings.json

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

src/components/forms/TextField.tsx

@@ -37,9 +37,10 @@ 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;
 
@@ -52,7 +53,7 @@ const TextField: React.FC<TextFieldProps> = ({ label, name, multiline = false, p
   );
 
   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/booking/components/BookingCard/BookingCardBottom/BackToServiceButton.tsx

@@ -1,21 +1,21 @@
 import { ContextButton } from "components/ContextButton";
 import { Typography } from "components/Typography";
-import { useLangParam } from "features/i18n/useLangParam";
 import { getPath } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
 import { useTranslation } from "react-i18next";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { bookingAtom } from "state/atoms/booking";
 import { serviceAtom } from "state/atoms/service";
 
 const BackToServiceButton = () => {
   const { t } = useTranslation(["booking"]);
   const navigate = useNavigate();
-  const lang = useLangParam();
   const { PAGES } = useIsEmbeddedPage();
   const setBooking = useSetRecoilState(bookingAtom);
   const service = useRecoilValue(serviceAtom);
+  const [searchParams] = useSearchParams();
+  const urlSearchParams = Object.fromEntries(searchParams.entries());
 
   if (service === undefined) return null;
 
@@ -29,7 +29,7 @@ const BackToServiceButton = () => {
             url: `${PAGES.SERVICE}:query`,
             params: {
               id: service.serviceId,
-              query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
+              query: `?${createSearchParams(urlSearchParams).toString()}`,
             },
           }),
         );

src/features/booking/components/BookingCard/BookingCardBottom/RescheduleBookingButton.tsx

@@ -1,11 +1,10 @@
 import { ContextButton } from "components/ContextButton";
 import { Typography } from "components/Typography";
-import { useLangParam } from "features/i18n/useLangParam";
 import { getPath } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
 import { BOOKING_FORM_TYPES } from "models/service";
 import { useTranslation } from "react-i18next";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { bookingAtom } from "state/atoms/booking";
 import { serviceAtom } from "state/atoms/service";
@@ -14,9 +13,10 @@ export const RescheduleBookingButton = () => {
   const { t } = useTranslation(["booking"]);
   const navigate = useNavigate();
   const bookingValue = useRecoilValue(bookingAtom);
-  const lang = useLangParam();
   const { PAGES } = useIsEmbeddedPage();
   const service = useRecoilValue(serviceAtom);
+  const [searchParams] = useSearchParams();
+  const urlSearchParams = Object.fromEntries(searchParams.entries());
 
   if (bookingValue === undefined || service?.viewConfig?.displayType === BOOKING_FORM_TYPES.PREORDER) return null;
 
@@ -29,7 +29,7 @@ export const RescheduleBookingButton = () => {
             url: `${PAGES.RESCHEDULE}:query`,
             params: {
               id: bookingValue.bookingId,
-              query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
+              query: `?${createSearchParams(urlSearchParams).toString()}`,
             },
           }),
         );

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

@@ -11,7 +11,7 @@ import { getServiceConfigByType } from "helpers/functions";
 import { useLocale } from "helpers/hooks/useLocale";
 import { convertSourceDateTimeToTargetDateTime } from "helpers/timeFormat";
 import _ from "lodash";
-import { FormField, filterFormFields } from "models/formFields";
+import { FormField, filterFormFields, filterHiddenFields } from "models/formFields";
 import { BOOKING_FORM_TYPES } from "models/service";
 import moment from "moment";
 import { useTranslation } from "react-i18next";
@@ -58,6 +58,8 @@ const WrapperCard = styled(Card)`
 
 const getInitialValues = (formFields: Array<FormField>, searchParams: URLSearchParams) => {
   const customFormFields = filterFormFields(formFields, false);
+  const hiddenFields = filterHiddenFields(formFields);
+
   return {
     ...{
       fullName: searchParams.get("fullName") ?? "",
@@ -71,6 +73,9 @@ const getInitialValues = (formFields: Array<FormField>, searchParams: URLSearchP
     },
     ...Object.assign(
       {},
+      ...hiddenFields.map((item) => {
+        return { [item.label]: searchParams.get(item.label) ?? "" };
+      }),
       ...customFormFields.map((item) => {
         if (item.fieldType === "TEXT") return { [item.fieldId]: searchParams.get(item.fieldId) ?? "" };
         if (item.fieldType === "CHECKBOX") return { [item.fieldId]: false };
@@ -164,6 +169,14 @@ const BookService = () => {
       };
     });
 
+    const hiddenFields = filterHiddenFields(formFields).map((item) => {
+      return {
+        [item.fieldId]: value[item.fieldId] as any,
+      };
+    });
+
+    const urlSearchParams = Object.fromEntries(searchParams.entries());
+
     const json = JSON.stringify({
       ...(fullName && { [fullName.fieldId]: value.fullName }),
       ...(quantity && { [quantity.fieldId]: value.quantity }),
@@ -174,6 +187,8 @@ const BookService = () => {
       ...(promoCode && { [promoCode.fieldId]: value.promoCode }),
       ...(guestsList && { [guestsList.fieldId]: value.guestsList }),
       ...Object.assign({}, ...customFormFields),
+      ...Object.assign({}, ...hiddenFields),
+      ...urlSearchParams,
     });
 
     if (serviceType === BOOKING_FORM_TYPES.DAYS && selectedSlotsValue.length) {
@@ -243,16 +258,18 @@ const BookService = () => {
     }
   };
 
-  if (formFields === undefined || formFields.length === 0) return null;
+  if (!service) return null;
 
   return (
     <Box mt={serviceType === BOOKING_FORM_TYPES.PREORDER ? 0 : 1.125}>
       <WrapperCard>
-        <Box mb={2.5}>
-          <Typography typographyType="h3" as="h3" displayType="contents">
-            {t("headers.leave-details")}
-          </Typography>
-        </Box>
+        {formFields && formFields.length > 0 && (
+          <Box mb={2.5}>
+            <Typography typographyType="h3" as="h3" displayType="contents">
+              {t("headers.leave-details")}
+            </Typography>
+          </Box>
+        )}
         <Formik
           initialValues={getInitialValues(formFields, searchParams)}
           validationSchema={generateValidationSchema(t, formFields, false)}

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.label}`} name={"email"} label={label} hidden />;
+    }
     default: {
       return null;
     }

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

@@ -3,15 +3,14 @@ import { Button } from "components/Button";
 import { Card } from "components/Card";
 import { Typography } from "components/Typography";
 import { Box } from "components/layout/Box";
-import { useLangParam } from "features/i18n/useLangParam";
 import { useRescheduleBooking } from "features/service/hooks/useRescheduleBooking";
 import { getPath, getServiceConfigByType } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
 import { useLocale } from "helpers/hooks/useLocale";
 import { convertSourceDateTimeToTargetDateTime } from "helpers/timeFormat";
 import { BOOKING_FORM_TYPES } from "models/service";
 import { useTranslation } from "react-i18next";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { hoursSystemAtom } from "state/atoms";
 import { bookingAtom } from "state/atoms/booking";
@@ -47,7 +46,6 @@ const RescheduleService = () => {
   const locale = useLocale();
   const navigate = useNavigate();
   const bookingValue = useRecoilValue(bookingAtom);
-  const lang = useLangParam();
   const { t } = useTranslation(["forms"]);
   const selectedDateRangeValue = useRecoilValue(selectedDateRange);
   const selectedSlotsValue = useRecoilValue(selectedSlots);
@@ -58,6 +56,8 @@ const RescheduleService = () => {
   const timeZone = useRecoilValue(timeZoneAtom);
   const slots = useRecoilValue(slotsAtom)!;
   const { PAGES } = useIsEmbeddedPage();
+  const [searchParams] = useSearchParams();
+  const urlSearchParams = Object.fromEntries(searchParams.entries());
 
   const serviceType = service?.viewConfig.displayType;
 
@@ -192,7 +192,7 @@ const RescheduleService = () => {
                   url: `${PAGES.BOOKING}:query`,
                   params: {
                     id: bookingValue.bookingId,
-                    query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
+                    query: `?${createSearchParams(urlSearchParams).toString()}`,
                   },
                 }),
               );

src/features/service/hooks/useBookDateRange.ts

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { VERSION } from "enums";
-import { useLangParam } from "features/i18n/useLangParam";
 import { getPath } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { selectedSlot } from "state/atoms/selectedSlot";
 import { slotsFiltersAtom } from "state/atoms/slotsFilters";
@@ -15,8 +14,9 @@ export const useBookDateRange = () => {
   const [filters, setFilters] = useRecoilState(slotsFiltersAtom);
   const setSelectedSlot = useSetRecoilState(selectedSlot);
   const navigate = useNavigate();
-  const lang = useLangParam();
   const { PAGES } = useIsEmbeddedPage();
+  const [searchParams] = useSearchParams();
+  const urlSearchParams = Object.fromEntries(searchParams.entries());
 
   const [bookDateRangeMutation, { data, loading, error }] = useMutation<
     BookDateRangeMutationRespons,
@@ -37,7 +37,7 @@ export const useBookDateRange = () => {
           url: `${PAGES.BOOKING}:query`,
           params: {
             id: data.bookingCreate.bookingId,
-            query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
+            query: `?${createSearchParams(urlSearchParams).toString()}`,
           },
         }),
       );

src/features/service/hooks/useBookSlot.ts

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { VERSION } from "enums";
-import { useLangParam } from "features/i18n/useLangParam";
 import { getPath } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { selectedSlot } from "state/atoms/selectedSlot";
 import { slotsFiltersAtom } from "state/atoms/slotsFilters";
@@ -15,8 +14,9 @@ export const useBookSlot = () => {
   const [filters, setFilters] = useRecoilState(slotsFiltersAtom);
   const setSelectedSlot = useSetRecoilState(selectedSlot);
   const navigate = useNavigate();
-  const lang = useLangParam();
   const { PAGES } = useIsEmbeddedPage();
+  const [searchParams] = useSearchParams();
+  const urlSearchParams = Object.fromEntries(searchParams.entries());
 
   const [bookSlotMutation, { data, loading, error }] = useMutation<BookSlotMutationRespons, BookSlotMutationVariables>(
     BOOK_SLOT,
@@ -37,12 +37,12 @@ export const useBookSlot = () => {
           url: `${PAGES.BOOKING}:query`,
           params: {
             id: data.bookingCreate.bookingId,
-            query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
+            query: `?${createSearchParams(urlSearchParams).toString()}`,
           },
         }),
       );
     }
-  }, [data?.bookingCreate.bookingId, lang, navigate, PAGES]);
+  }, [data?.bookingCreate.bookingId, navigate, PAGES, urlSearchParams]);
 
   useEffect(() => {
     if (error) {

src/features/service/hooks/useRescheduleBooking.ts

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { VERSION } from "enums";
-import { useLangParam } from "features/i18n/useLangParam";
 import { getPath } from "helpers/functions";
 import { useIsEmbeddedPage } from "helpers/hooks/useIsEmbeddedPage";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";
 import { useRecoilState, useSetRecoilState } from "recoil";
 import { selectedSlot } from "state/atoms/selectedSlot";
 import { slotsFiltersAtom } from "state/atoms/slotsFilters";
@@ -15,8 +14,9 @@ export const useRescheduleBooking = () => {
   const [filters, setFilters] = useRecoilState(slotsFiltersAtom);
   const setSelectedSlot = useSetRecoilState(selectedSlot);
   const navigate = useNavigate();
-  const lang = useLangParam();
   const { PAGES } = useIsEmbeddedPage();
+  const [searchParams] = useSearchParams();
+  const urlSearchParams = Object.fromEntries(searchParams.entries());
 
   const [rescheduleBookingMutation, { data, loading, error }] = useMutation<
     RescheduleBookingResponse,
@@ -38,7 +38,7 @@ export const useRescheduleBooking = () => {
           url: `${PAGES.BOOKING}:query`,
           params: {
             id: data.bookingReschedule.bookingId,
-            query: lang ? `?${createSearchParams({ locale: lang }).toString()}` : "",
+            query: `?${createSearchParams(urlSearchParams).toString()}`,
           },
         }),
       );

src/models/formFields.ts

@@ -27,10 +27,18 @@ export const isSystemField = (formField: FormField) => {
   return systemFieldsList.findIndex((item) => item === formField.fieldType) > -1;
 };
 
+export const isHiddenField = (formField: FormField) => {
+  return formField.fieldType === "HIDDEN";
+};
+
 export const filterFormFields = (formFields: Array<FormField>, system = true) => {
   return formFields.filter((item) => isSystemField(item) === system);
 };
 
+export const filterHiddenFields = (formFields: Array<FormField>) => {
+  return formFields.filter((item) => isHiddenField(item));
+};
+
 export interface BaseFormField {
   fieldId: string;
   required: boolean;
@@ -121,6 +129,11 @@ export type FormFieldFileUpload = BaseFormField & {
   multiple: boolean | null;
 };
 
+export type FormFieldHidden = BaseFormField & {
+  fieldType: "HIDDEN";
+  value: string;
+};
+
 export type FormField =
   | FormFieldSystemFullName
   | FormFieldSystemEmailAddress
@@ -134,4 +147,5 @@ export type FormField =
   | FormFieldNumber
   | FormFieldCheckbox
   | FormFieldSelect
-  | FormFieldFileUpload;
+  | FormFieldFileUpload
+  | FormFieldHidden;