Display athletes getting booking emails

eisbuk · Feb 5, 2024 · 879c23a · 879c23a
1 parent 98735a1
commit 879c23a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/packages/client/src/pages/booking_emails/EmailTemplateSettings.tsx b/packages/client/src/pages/booking_emails/EmailTemplateSettings.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useFormikContext } from "formik";
+import { DateTime } from "luxon";
 
 import {
   Button,
@@ -9,7 +10,11 @@ import {
   FormField,
   FormFieldVariant,
 } from "@eisbuk/ui";
-import { MessageTemplateLabel, useTranslation } from "@eisbuk/translations";
+import {
+  ActionButton,
+  MessageTemplateLabel,
+  useTranslation,
+} from "@eisbuk/translations";
 import {
   interpolateText,
   OrganizationData,
@@ -20,7 +25,7 @@ import { ChevronDown } from "@eisbuk/svg";
 import { useClickOutside } from "@eisbuk/shared/ui";
 import { testId } from "@eisbuk/testing/testIds";
 
-import { getCalendarDay, getOrganizationSettings } from "@/store/selectors/app";
+import { getOrganizationSettings } from "@/store/selectors/app";
 
 import { getMonthStr, insertValuePlaceholder } from "@/utils/helpers";
 
@@ -35,22 +40,23 @@ interface EmailTemplateSettingsProps {
   onCheckboxChange: (customer: CustomerFull) => void;
   customers: CustomerFull[];
   selectedCustomerIds: string[];
+  selectedCustomers: CustomerFull[];
   onSelectAll: () => void;
   onClearAll: () => void;
 }
 const EmailTemplateSettings: React.FC<EmailTemplateSettingsProps> = ({
   onCheckboxChange,
   customers,
   selectedCustomerIds,
+  selectedCustomers,
   onSelectAll,
   onClearAll,
 }) => {
   const organization = useSelector(getOrganizationSettings);
 
   const { t } = useTranslation();
 
-  const calendarDay = useSelector(getCalendarDay);
-  const monthStr = getMonthStr(calendarDay, 0);
+  const monthStr = getMonthStr(DateTime.now(), 1);
 
   const { setFieldValue } = useFormikContext<OrganizationData>();
 
@@ -107,6 +113,25 @@ const EmailTemplateSettings: React.FC<EmailTemplateSettingsProps> = ({
                 monthStr={monthStr}
               />
             </div>
+            <div className="flex flex-wrap mt-4 -mx-2">
+              {selectedCustomers.map((cus) => (
+                <div
+                  key={cus.id}
+                  className="flex items-center p-2 border rounded bg-gray-200 mx-2 mb-2"
+                >
+                  <span>
+                    {cus.name} {cus.surname}
+                  </span>
+                  <button
+                    className="ml-2 text-red-500"
+                    type="button"
+                    onClick={() => onCheckboxChange(cus)}
+                  >
+                    {t(ActionButton.Delete)}
+                  </button>
+                </div>
+              ))}
+            </div>
             <div
               key={name}
               className="grid gap-x-10 grid-cols-6 lg:grid-cols-12"

diff --git a/packages/client/src/pages/booking_emails/index.tsx b/packages/client/src/pages/booking_emails/index.tsx
@@ -184,6 +184,7 @@ const SendBookingEmails: React.FC = () => {
                   onCheckboxChange={handleCheckboxChange}
                   customers={nonDeletedCustomers}
                   selectedCustomerIds={selectedCustomerIds}
+                  selectedCustomers={selectedCustomers}
                   onSelectAll={handleSelectAll}
                   onClearAll={handleClearAll}
                 />

diff --git a/packages/e2e/integration/send_bulk_emails_spec.ts b/packages/e2e/integration/send_bulk_emails_spec.ts
@@ -3,7 +3,11 @@ import { PrivateRoutes } from "@eisbuk/shared/ui";
 
 import { customers } from "../__testData__/customers.json";
 import { organization as organizationData } from "../__testData__/organization.json";
-import i18n, { NotificationMessage, Prompt } from "@eisbuk/translations";
+import i18n, {
+  ActionButton,
+  NotificationMessage,
+  Prompt,
+} from "@eisbuk/translations";
 
 describe("Booking emails", () => {
   beforeEach(() => {
@@ -43,6 +47,11 @@ describe("Booking emails", () => {
     cy.getAttrWith("type", "checkbox").eq(8).click();
     cy.getAttrWith("type", "checkbox").eq(2).click();
     cy.getAttrWith("type", "checkbox").eq(3).click();
+    cy.getAttrWith("type", "checkbox").eq(4).click();
+
+    cy.contains(i18n.t(ActionButton.Delete) as string)
+      .first()
+      .click({ force: true });
 
     // click send
     cy.getAttrWith("type", "submit").click({ force: true });