Merge branch 'master' of github.com:eisbuk/EisBuk into feature/error_…

…boundary

packages/client/package.json

@@ -63,7 +63,7 @@
     "test:triggers": "bash -c '(trap \"kill 0\" SIGINT; ../functions/build_scripts/watch.js & firebase -c ../../firebase-testing.json  emulators:exec --project eisbuk -- \" vitest dataTriggers\")'",
     "test:rules": "bash -c '(trap \"kill 0\" SIGINT; ../functions/build_scripts/watch.js & firebase -c ../../firebase-testing.json  emulators:exec --project eisbuk -- \" vitest firestoreRules\")'",
     "test:integrations": "bash -c '(trap \"kill 0\" SIGINT; ../functions/build_scripts/watch.js & firebase -c ../../firebase-testing.json  emulators:exec --project eisbuk -- \" vitest integrations\")'",
-    "test:emulators:ci": "export CI=true && export VITEST_JUNIT_SUITE_NAME=\"Client tests\" && bash -c '(trap \"kill 0\" SIGINT; ../functions/build_scripts/watch.js & firebase -c ../../firebase-testing.json  emulators:exec --project eisbuk -- \" vitest run --coverage --reporter=junit --reporter=html --outputFile.junit=junit.xml/\")'",
+    "test:emulators:ci": "CI=true VITEST_JUNIT_SUITE_NAME=\"Client tests\" bash -c '(trap \"kill 0\" SIGINT; ../functions/build_scripts/watch.js & firebase -c ../../firebase-testing.json  emulators:exec --project eisbuk -- \" vitest run --coverage --reporter=junit --reporter=html --outputFile.junit=junit.xml/\")' || true # We always exit with code 0: a subsequent CI step will fail if a test fails.",
     "test:quicktest": "echo Running tests with no emulators support && vitest --ui",
     "test": "echo 'Running all tests; using emulators.' && rushx test:emulators:ui",
     "storybook": "storybook dev -p 6006",

packages/client/src/components/atoms/AddToCalendar/AddToCalendar.tsx

@@ -10,6 +10,8 @@ import {
   IconButtonShape,
   IconButtonSize,
 } from "@eisbuk/ui";
+import { testId } from "@eisbuk/testing/testIds";
+
 import { Calendar } from "@eisbuk/svg";
 
 import {
@@ -42,6 +44,7 @@ const AddToCalendar: React.FC = () => {
 
       <IconButton
         aria-label={t(ActionButton.AddToCalendar)}
+        data-testid={testId("add-to-calendar")}
         className="fixed right-6 bottom-8 z-40 bg-cyan-700 text-white shadow-xl md:hidden"
         size={IconButtonSize.XL}
         contentSize={IconButtonContentSize.Loose}

packages/client/src/pages/admin_preferences/index.tsx

@@ -101,14 +101,36 @@ const OrganizationSettings: React.FC = () => {
 
   return (
     <Layout additionalButtons={additionalButtons}>
-      <LayoutContent>
-        <div className="pt-[44px] px-[71px] pb-8 md:pt-[62px]">
-          <Formik
-            {...{ initialValues }}
-            onSubmit={(values, actions) => handleSubmit(values, actions)}
-            validationSchema={OrganizationValidation}
+      <Formik
+        {...{ initialValues }}
+        onSubmit={(values, actions) => handleSubmit(values, actions)}
+        validationSchema={OrganizationValidation}
+      >
+        {({ isSubmitting, isValidating, handleReset }) => (
+          <LayoutContent
+            actionButtons={
+              <div className="py-2 flex justify-end items-center gap-2">
+                <Button
+                  onClick={handleReset}
+                  disabled={isSubmitting || isValidating}
+                  className="!text-cyan-500"
+                  size={ButtonSize.MD}
+                >
+                  {t(ActionButton.Reset)}
+                </Button>
+                <Button
+                  disabled={isSubmitting || isValidating}
+                  color={ButtonColor.Primary}
+                  size={ButtonSize.MD}
+                  aria-label={"save"}
+                  type="submit"
+                >
+                  {t(ActionButton.Save)}
+                </Button>
+              </div>
+            }
           >
-            {({ isSubmitting, isValidating, handleReset }) => (
+            <div className="pt-[44px] px-[71px] pb-8 md:pt-[62px]">
               <div className="md:px-11">
                 {view === Views.GeneralSettings && (
                   <AdminsField currentUser={currentUser} />
@@ -120,32 +142,12 @@ const OrganizationSettings: React.FC = () => {
                   ) : (
                     <GeneralSettings />
                   )}
-
-                  <div className="py-4 flex justify-end items-center gap-2">
-                    <Button
-                      onClick={handleReset}
-                      disabled={isSubmitting || isValidating}
-                      className="!text-cyan-500"
-                      size={ButtonSize.MD}
-                    >
-                      {t(ActionButton.Reset)}
-                    </Button>
-                    <Button
-                      disabled={isSubmitting || isValidating}
-                      color={ButtonColor.Primary}
-                      size={ButtonSize.MD}
-                      aria-label={"save"}
-                      type="submit"
-                    >
-                      {t(ActionButton.Save)}
-                    </Button>
-                  </div>
                 </Form>
               </div>
-            )}
-          </Formik>
-        </div>
-      </LayoutContent>
+            </div>
+          </LayoutContent>
+        )}
+      </Formik>
     </Layout>
   );
 };

packages/client/src/pages/admin_preferences/views/GeneralSettings.tsx

@@ -1,25 +1,59 @@
 import React from "react";
 import { Field, FieldProps } from "formik";
+import { QuestionMarkCircle } from "@eisbuk/svg";
 
 import i18n, { OrganizationLabel } from "@eisbuk/translations";
-import { CountryCodesDropdownFormik, FormSection, TextInput } from "@eisbuk/ui";
+import {
+  CountryCodesDropdownFormik,
+  FormSection,
+  HoverText,
+  TextInput,
+} from "@eisbuk/ui";
+
+const HelpText: React.FC<{ text?: string }> = ({ text }) =>
+  text ? (
+    <HoverText
+      multiline="md"
+      className="h-5 w-5 ml-2.5 text-gray-700"
+      text={text}
+    >
+      <QuestionMarkCircle />
+    </HoverText>
+  ) : null;
 
 const GeneralSettings: React.FC = () => {
   return (
     <>
       <FormSection title="General">
-        {generalFields.map(({ component = TextInput, ...field }) => (
-          <Field key={field.name} component={component} {...field} />
-        ))}
+        {generalFields.map(
+          ({ component = TextInput, description, ...field }) => (
+            <Field
+              key={field.name}
+              component={component}
+              {...field}
+              StartAdornment={<HelpText text={description || ""} />}
+            />
+          )
+        )}
       </FormSection>
       <FormSection title="Email">
-        {emailFields.map(({ component = TextInput, ...field }) => (
-          <Field key={field.name} component={component} {...field} />
+        {emailFields.map(({ component = TextInput, description, ...field }) => (
+          <Field
+            key={field.name}
+            component={component}
+            {...field}
+            StartAdornment={<HelpText text={description || ""} />}
+          />
         ))}
       </FormSection>
       <FormSection title="SMS">
-        {smsFields.map(({ component = TextInput, ...field }) => (
-          <Field key={field.name} component={component} {...field} />
+        {smsFields.map(({ component = TextInput, description, ...field }) => (
+          <Field
+            key={field.name}
+            component={component}
+            {...field}
+            StartAdornment={<HelpText text={description || ""} />}
+          />
         ))}
       </FormSection>
     </>
@@ -29,6 +63,7 @@ const GeneralSettings: React.FC = () => {
 // #region fieldSetup
 interface FormSectionFieldProps {
   name: string;
+  description?: string;
   label: string;
   multiline?: boolean;
   rows?: number;
@@ -39,43 +74,52 @@ const generalFields: FormSectionFieldProps[] = [
   {
     name: "displayName",
     label: i18n.t(OrganizationLabel.DisplayName),
+    description: i18n.t(OrganizationLabel.DisplayNameHelpText),
   },
   {
     name: "location",
     label: i18n.t(OrganizationLabel.Location),
+    description: i18n.t(OrganizationLabel.LocationHelpText),
   },
   {
     name: "registrationCode",
     label: i18n.t(OrganizationLabel.RegistrationCode),
+    description: i18n.t(OrganizationLabel.RegistrationCodeHelpText),
   },
   {
     name: "defaultCountryCode",
     label: i18n.t(OrganizationLabel.CountryCode),
+    description: i18n.t(OrganizationLabel.CountryCodeHelpText),
     component: CountryCodesDropdownFormik,
   },
 ];
 const emailFields: FormSectionFieldProps[] = [
   {
     name: "emailNameFrom",
     label: i18n.t(OrganizationLabel.EmailNameFrom),
+    description: i18n.t(OrganizationLabel.EmailNameFromHelpText),
   },
   {
     name: "emailFrom",
     label: i18n.t(OrganizationLabel.EmailFrom),
+    description: i18n.t(OrganizationLabel.EmailFromHelpText),
   },
   {
     name: "bcc",
     label: i18n.t(OrganizationLabel.BCC),
+    description: i18n.t(OrganizationLabel.BCCHelpText),
   },
 ];
 const smsFields: FormSectionFieldProps[] = [
   {
     name: "smsFrom",
     label: i18n.t(OrganizationLabel.SmsFrom),
+    description: i18n.t(OrganizationLabel.SmsFromHelpText),
   },
   {
     name: "smsTemplate",
     label: i18n.t(OrganizationLabel.SmsTemplate),
+    description: i18n.t(OrganizationLabel.SmsTemplateHelpText),
     multiline: true,
     rows: 6,
   },

packages/client/src/pages/customer_area/index.tsx

@@ -18,8 +18,8 @@ import CalendarView from "./views/Calendar";
 import ProfileView from "./views/Profile";
 import { useSecretKey, useDate } from "./hooks";
 
-import AddToCalendar from "@/components/atoms/AddToCalendar";
 import ErrorBoundary from "@/components/atoms/ErrorBoundary";
+// import AddToCalendar from "@/components/atoms/AddToCalendar";
 
 import Layout from "@/controllers/Layout";
 
@@ -93,7 +93,10 @@ const CustomerArea: React.FC = () => {
       {view !== "ProfileView" && (
         <CalendarNav
           {...calendarNavProps}
-          additionalContent={<AddToCalendar />}
+          // TODO: Reinstate this when the ability to add multiple events is fixed
+          // See: https://github.com/eisbuk/EisBuk/issues/827
+          //
+          // additionalContent={<AddToCalendar />}
           jump="month"
         />
       )}

packages/client/src/pages/debug/index.tsx

@@ -143,6 +143,18 @@ const DebugPage: React.FC = () => {
               Remove Invalid Customer Phones
             </DebugPageButton>
           </div>
+
+          <div className="p-2">
+            <DebugPageButton
+              onClick={createFunctionCaller(
+                functions,
+                CloudFunction.ClearDeletedCustomersRegistrationAndCategories
+              )}
+              color={ButtonColor.Primary}
+            >
+              Clear Deleted Customers Registration And Categories
+            </DebugPageButton>
+          </div>
         </div>
       </LayoutContent>
     </Layout>

packages/client/src/store/actions/__testUtils__/firestore.ts

@@ -8,9 +8,9 @@ import {
   CustomerBookings,
   Customer,
   BookingSubCollection,
-  CustomerLoose,
   sanitizeCustomer,
   SlotAttendnace,
+  CustomerFull,
 } from "@eisbuk/shared";
 
 import { TestEnvFirestore } from "@/__testSetup__/firestore";
@@ -151,7 +151,7 @@ export const setupTestBookings: AdminSetupFunction<{
  * Set up `customers` data entry in emulated store in redux store
  */
 export const setupTestCustomer: AdminSetupFunction<{
-  customer: CustomerLoose;
+  customer: Partial<CustomerFull>;
   organization: string;
 }> = async ({ customer, db, store, organization }) => {
   // id customer id or secretKey not provided, generate locally