From e1dee71731be8fbc2f04839bc346236c14acfc4d Mon Sep 17 00:00:00 2001
From: Mats Eriksson <mats.eriksson@vincit.fi>
Date: Sun, 9 Jul 2023 16:41:50 +0300
Subject: [PATCH] front: adds SendEmailForm and SendEmailButton components

---
 .../src/common/components/SendEmailButton.tsx | 13 +++++
 .../src/common/components/SendEmailForm.tsx   | 52 +++++++++++++++++++
 .../apartment/ApartmentDetailsPage.tsx        | 22 +++++++-
 .../styles/components/_ApartmentDetails.sass  | 10 ++++
 4 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/common/components/SendEmailButton.tsx
 create mode 100644 frontend/src/common/components/SendEmailForm.tsx

diff --git a/frontend/src/common/components/SendEmailButton.tsx b/frontend/src/common/components/SendEmailButton.tsx
new file mode 100644
index 000000000..d0f3cccdf
--- /dev/null
+++ b/frontend/src/common/components/SendEmailButton.tsx
@@ -0,0 +1,13 @@
+import {Button, IconEnvelope} from "hds-react";
+
+const SendEmailButton = ({...rest}) => (
+    <Button
+        theme="black"
+        iconLeft={<IconEnvelope />}
+        {...rest}
+    >
+        Lähetä sähköposti
+    </Button>
+);
+
+export default SendEmailButton;
diff --git a/frontend/src/common/components/SendEmailForm.tsx b/frontend/src/common/components/SendEmailForm.tsx
new file mode 100644
index 000000000..d8d3340b7
--- /dev/null
+++ b/frontend/src/common/components/SendEmailForm.tsx
@@ -0,0 +1,52 @@
+import {useForm} from "react-hook-form";
+import {Select, TextInput} from "./form";
+import SendEmailButton from "./SendEmailButton";
+
+type SendEmailFormProps = {
+    recipient?: string;
+    email: string;
+    options: Array<{value: string; label: string}>;
+};
+
+const SendEmailForm = ({recipient, email = "", options}: SendEmailFormProps) => {
+    const sendEmailForm = useForm({
+        defaultValues: {
+            email: email,
+            template: 0,
+        },
+        mode: "all",
+    });
+    const {handleSubmit} = sendEmailForm;
+    const sendEmail = (data) => {
+        // TODO: Validation & implement sending email
+        // eslint-disable-next-line no-console
+        console.log("Sending email", data);
+    };
+    return (
+        <form
+            className="send-email-form"
+            onSubmit={handleSubmit(sendEmail)}
+        >
+            <TextInput
+                name="email"
+                label={recipient ? recipient + "n sähköpostiosoite" : "Vastaanottajan sähköpostiosoite"}
+                formObject={sendEmailForm}
+                tooltipText="Käyttää oletuksena relevanttia sähköpostiosoitetta."
+                required
+            />
+            <div className="row row--buttons">
+                <Select
+                    label="Sähköpostipohja"
+                    options={options}
+                    defaultValue={options[0]}
+                    name="template"
+                    formObject={sendEmailForm}
+                    required
+                />
+                <SendEmailButton type="submit" />
+            </div>
+        </form>
+    );
+};
+
+export default SendEmailForm;
diff --git a/frontend/src/features/apartment/ApartmentDetailsPage.tsx b/frontend/src/features/apartment/ApartmentDetailsPage.tsx
index 56b100a02..ef7fa40eb 100644
--- a/frontend/src/features/apartment/ApartmentDetailsPage.tsx
+++ b/frontend/src/features/apartment/ApartmentDetailsPage.tsx
@@ -21,6 +21,7 @@ import {
 } from "../../common/components";
 import {DateInput, TextAreaInput} from "../../common/components/form";
 import {propertyManagerMutateFormProps} from "../../common/components/mutateComponents/mutateFormProps";
+import SendEmailForm from "../../common/components/SendEmailForm";
 import {
     IApartmentConditionOfSale,
     IApartmentConfirmedMaximumPrice,
@@ -207,11 +208,12 @@ const ConfirmedPriceDetails = ({confirmed}: {confirmed: IApartmentConfirmedMaxim
 
 interface DownloadModalProps {
     apartment: IApartmentDetails;
+    housingCompany: IHousingCompanyDetails;
     isVisible: boolean;
     setIsVisible;
 }
 
-const UnconfirmedPricesDownloadModal = ({apartment, isVisible, setIsVisible}: DownloadModalProps) => {
+const UnconfirmedPricesDownloadModal = ({apartment, housingCompany, isVisible, setIsVisible}: DownloadModalProps) => {
     const formRef = useRef<HTMLFormElement>(null);
     const downloadForm = useForm({
         defaultValues: {calculation_date: today(), request_date: today(), additional_info: ""},
@@ -271,6 +273,13 @@ const UnconfirmedPricesDownloadModal = ({apartment, isVisible, setIsVisible}: Do
                         required
                     />
                 </form>
+                <SendEmailForm
+                    email={housingCompany?.property_manager ? (housingCompany.property_manager.email as string) : ""}
+                    options={[
+                        {label: "Oletuspohja", value: "0"}, // TODO: use real template options
+                        {label: "Mukautettu pohja", value: "1"}, // TODO: use real template options
+                    ]}
+                />
             </Dialog.Content>
             <Dialog.ActionButtons>
                 <Button
@@ -294,7 +303,7 @@ const UnconfirmedPricesDownloadModal = ({apartment, isVisible, setIsVisible}: Do
     );
 };
 
-const MaximumPriceDownloadModal = ({apartment, isVisible, setIsVisible}: DownloadModalProps) => {
+const MaximumPriceDownloadModal = ({apartment, housingCompany, isVisible, setIsVisible}: DownloadModalProps) => {
     const formRef = useRef<HTMLFormElement>(null);
     const downloadForm = useForm({
         defaultValues: {request_date: today(), additional_info: ""},
@@ -335,6 +344,13 @@ const MaximumPriceDownloadModal = ({apartment, isVisible, setIsVisible}: Downloa
                         required
                     />
                 </form>
+                <SendEmailForm
+                    email={housingCompany?.property_manager ? (housingCompany.property_manager.email as string) : ""}
+                    options={[
+                        {label: "Oletuspohja", value: "0"}, // TODO: use real template options
+                        {label: "Mukautettu pohja", value: "1"}, // TODO: use real template options
+                    ]}
+                />
             </Dialog.Content>
             <Dialog.ActionButtons>
                 <Button
@@ -440,11 +456,13 @@ const ApartmentMaximumPricesCard = ({
 
             <UnconfirmedPricesDownloadModal
                 apartment={apartment}
+                housingCompany={housingCompany}
                 isVisible={isUnconfirmedMaximumPriceModalVisible}
                 setIsVisible={setIsUnconfirmedMaximumPriceModalVisible}
             />
             <MaximumPriceDownloadModal
                 apartment={apartment}
+                housingCompany={housingCompany}
                 isVisible={isMaximumPriceModalVisible}
                 setIsVisible={setIsMaximumPriceModalVisible}
             />
diff --git a/frontend/src/styles/components/_ApartmentDetails.sass b/frontend/src/styles/components/_ApartmentDetails.sass
index 22eadfde2..1fb9fd682 100644
--- a/frontend/src/styles/components/_ApartmentDetails.sass
+++ b/frontend/src/styles/components/_ApartmentDetails.sass
@@ -303,3 +303,13 @@
     display: none
   &:hover > .sell-by-date
     display: inline-block
+
+.send-email-form
+  .row--buttons
+    margin: 0
+    gap: $spacing-layout-s
+    >:first-child
+      flex-grow: 1
+    >button
+      position: relative
+      top: 5px
\ No newline at end of file