front: adds SendEmailForm and SendEmailButton components

City-of-Helsinki · Jul 9, 2023 · 00dc1f2 · 00dc1f2
1 parent 4746aeb
commit 00dc1f2
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 2 deletions.
diff --git a/frontend/src/common/components/SendEmailButton.tsx 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
@@ -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) => {
+        // Validation & implement sending email still missing
+        // 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
@@ -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"}, // should use real template options
+                        {label: "Mukautettu pohja", value: "1"}, // should 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"}, // should use real template options
+                        {label: "Mukautettu pohja", value: "1"}, // should 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
@@ -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