IO-1949 Add additional buttons to email overlay.

bodyshop_translations.babel

@@ -15416,6 +15416,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>send</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>senderrortosupport</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/email-overlay/email-overlay.container.jsx

@@ -1,4 +1,4 @@
-import { Divider, Form, Modal, notification } from "antd";
+import { Button, Divider, Form, Modal, notification, Space } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -180,8 +180,10 @@ export function EmailOverlayContainer({
       onCancel={() => {
         toggleEmailOverlayVisible();
       }}
+      okText={t("general.actions.send")}
       okButtonProps={{
         loading: sending,
+
         disabled:
           selectedMedia &&
           (selectedMedia
@@ -191,21 +193,56 @@ export function EmailOverlayContainer({
             selectedMedia.filter((s) => s.isSelected).length > 10),
       }}
     >
-      <Form layout="vertical" form={form} onFinish={handleFinish}>
+      <div>
-        {loading && (
+        <div
-          <div>
+          style={{
-            <LoadingSkeleton />
+            marginTop: "1rem",
-            <Divider>{t("emails.labels.preview")}</Divider>
+            display: "flex",
-            <LoadingSpinner message={t("emails.labels.generatingemail")} />
+            justifyContent: "flex-end",
-          </div>
+          }}
-        )}
+        >
-        {!loading && (
+          <Space style={{ alignSelf: "flex-end" }} align="right">
-          <EmailOverlayComponent
+            <Button
-            form={form}
+              onClick={() => {
-            selectedMediaState={[selectedMedia, setSelectedMedia]}
+                toggleEmailOverlayVisible();
-          />
+              }}
-        )}
+            >
-      </Form>
+              {t("general.actions.cancel")}
+            </Button>
+            <Button
+              loading={sending}
+              onClick={() => form.submit()}
+              disabled={
+                selectedMedia &&
+                (selectedMedia
+                  .filter((s) => s.isSelected)
+                  .reduce((acc, val) => (acc = acc + val.size), 0) >=
+                  10485760 - new Blob([form.getFieldValue("html")]).size ||
+                  selectedMedia.filter((s) => s.isSelected).length > 10)
+              }
+              type="primary"
+            >
+              {t("general.actions.send")}
+            </Button>
+          </Space>
+        </div>
+        <Form layout="vertical" form={form} onFinish={handleFinish}>
+          {loading && (
+            <div>
+              <LoadingSkeleton />
+              <Divider>{t("emails.labels.preview")}</Divider>
+              <LoadingSpinner message={t("emails.labels.generatingemail")} />
+            </div>
+          )}
+
+          {!loading && (
+            <EmailOverlayComponent
+              form={form}
+              selectedMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+        </Form>
+      </div>
     </Modal>
   );
 }

client/src/translations/en_us/common.json

@@ -964,6 +964,7 @@
 				"save": "Save",
 				"saveandnew": "Save and New",
 				"selectall": "Select All",
+				"send": "Send",
 				"senderrortosupport": "Send Error to Support",
 				"submit": "Submit",
 				"tryagain": "Try Again",

client/src/translations/es/common.json

@@ -964,6 +964,7 @@
 				"save": "Salvar",
 				"saveandnew": "",
 				"selectall": "",
+				"send": "",
 				"senderrortosupport": "",
 				"submit": "",
 				"tryagain": "",

client/src/translations/fr/common.json

@@ -964,6 +964,7 @@
 				"save": "sauvegarder",
 				"saveandnew": "",
 				"selectall": "",
+				"send": "",
 				"senderrortosupport": "",
 				"submit": "",
 				"tryagain": "",