From b518f84f5f2d87f3b35214c60486f1130255e42a Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Mon, 11 May 2020 21:32:11 -0700
Subject: [PATCH] Added basic pages for template editing BOD-85

---
 bodyshop_translations.babel                   | 122 +++++++++++++++++-
 .../src/components/_test/test.component.jsx   |   2 +-
 .../email-overlay/email-overlay.container.jsx |   2 +-
 ...-template-editor-save-button.component.jsx |  34 +++++
 .../shop-template-editor.component.jsx        |  91 +++++++++++++
 .../shop-template-editor.container.jsx        |  34 +++++
 .../shop-templates-list.container.jsx         |  56 ++++++++
 .../emails/components/fragments.queries.js    |  18 ---
 .../components/header/header.component.jsx    |  23 ----
 .../appointment-confirmation.query.js         |  18 ---
 .../appointment-confirmation.template.jsx     |  42 ------
 .../parts-order/parts-order.email.jsx         |  53 --------
 .../parts-order/parts-order.query.js          |  36 ------
 client/src/graphql/templates.queries.js       |  31 +++++
 .../pages/manage/manage.page.component.jsx    |  16 ++-
 .../shop-templates.container.js               |  41 ++++++
 client/src/translations/en_us/common.json     |  11 ++
 client/src/translations/es/common.json        |  11 ++
 client/src/translations/fr/common.json        |  11 ++
 client/src/{emails => utils}/constants.js     |   0
 20 files changed, 455 insertions(+), 197 deletions(-)
 create mode 100644 client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx
 create mode 100644 client/src/components/shop-template-editor/shop-template-editor.component.jsx
 create mode 100644 client/src/components/shop-template-editor/shop-template-editor.container.jsx
 create mode 100644 client/src/components/shop-templates-list/shop-templates-list.container.jsx
 delete mode 100644 client/src/emails/components/fragments.queries.js
 delete mode 100644 client/src/emails/components/header/header.component.jsx
 delete mode 100644 client/src/emails/templates/appointment-confirmation/appointment-confirmation.query.js
 delete mode 100644 client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx
 delete mode 100644 client/src/emails/templates/parts-order/parts-order.email.jsx
 delete mode 100644 client/src/emails/templates/parts-order/parts-order.query.js
 create mode 100644 client/src/pages/shop-templates/shop-templates.container.js
 rename client/src/{emails => utils}/constants.js (100%)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 2d8e210a1..6e8a8ab4c 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.6.1">
+<babeledit_project be_version="2.6.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -12546,6 +12546,63 @@
                             </folder_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>templates</name>
+                        <children>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <concept_node>
+                                        <name>updating</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>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>successes</name>
+                                <children>
+                                    <concept_node>
+                                        <name>updated</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>
+                                </children>
+                            </folder_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>timetickets</name>
                         <children>
@@ -13202,6 +13259,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>shop</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>shop-templates</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>vehicle-details</name>
                                         <definition_loaded>false</definition_loaded>
@@ -13666,6 +13765,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>shop-templates</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>shop_vendors</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/_test/test.component.jsx b/client/src/components/_test/test.component.jsx
index a686e3147..444b3f60c 100644
--- a/client/src/components/_test/test.component.jsx
+++ b/client/src/components/_test/test.component.jsx
@@ -3,7 +3,7 @@ import axios from "axios";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { EmailSettings } from "../../emails/constants";
+import { EmailSettings } from "../../utils/constants";
 import {
   endLoading,
   startLoading,
diff --git a/client/src/components/email-overlay/email-overlay.container.jsx b/client/src/components/email-overlay/email-overlay.container.jsx
index 4016ca301..0674660a4 100644
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/client/src/components/email-overlay/email-overlay.container.jsx
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { EmailSettings } from "../../emails/constants";
+import { EmailSettings } from "../../utils/constants";
 import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
 import {
   selectEmailConfig,
diff --git a/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx b/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx
new file mode 100644
index 000000000..23542ef09
--- /dev/null
+++ b/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Button, notification } from "antd";
+import { useMutation } from "@apollo/react-hooks";
+import { useTranslation } from "react-i18next";
+import { UPDATE_TEMPLATE } from "../../graphql/templates.queries";
+
+export default function ShopTemplateSaveButton({ templateId, html, gql }) {
+  const { t } = useTranslation();
+  const [updateTemplate] = useMutation(UPDATE_TEMPLATE);
+
+  const handleSave = async () => {
+    const result = await updateTemplate({
+      variables: {
+        templateId: templateId,
+        template: { query: gql, html },
+      },
+    });
+    if (!!!result.errors) {
+      notification["success"]({ message: t("templates.successes.updated") });
+    } else {
+      notification["error"]({
+        message: t("templates.errors.updating", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+  };
+
+  return (
+    <Button disabled={!!!templateId} onClick={handleSave}>
+      {t("general.actions.save")}
+    </Button>
+  );
+}
diff --git a/client/src/components/shop-template-editor/shop-template-editor.component.jsx b/client/src/components/shop-template-editor/shop-template-editor.component.jsx
new file mode 100644
index 000000000..34ea507bd
--- /dev/null
+++ b/client/src/components/shop-template-editor/shop-template-editor.component.jsx
@@ -0,0 +1,91 @@
+import { Editor } from "@tinymce/tinymce-react";
+import React, { useEffect } from "react";
+import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
+
+export default function ShopTemplateEditorComponent({
+  templateId,
+  html,
+  gql,
+  editorState,
+}) {
+  const [editorContent, seteditorContent] = editorState;
+
+  useEffect(() => {
+    console.log("HTML UE");
+    seteditorContent((prevstate) => {
+      return { ...prevstate, html: html };
+    });
+  }, [html, seteditorContent]);
+
+  useEffect(() => {
+    console.log("gql UE");
+    seteditorContent((prevstate) => {
+      return { ...prevstate, gql: gql };
+    });
+  }, [gql, seteditorContent]);
+
+  return (
+    <div>
+      Editor Here. template Editor
+      <ShopTemplateEditorSaveButton
+        templateId={templateId}
+        html={editorContent.html}
+        gql={editorContent.gql}
+      />
+      TEMPLATE
+      <Editor
+        value={editorContent.html}
+        apiKey='f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk' //TODO Pull this into app var
+        init={{
+          height: 500,
+          //menubar: false,
+          encoding: "raw",
+          extended_valid_elements: "span",
+          //entity_encoding: "raw",
+          plugins: [
+            "advlist autolink lists link image charmap print preview anchor",
+            "searchreplace visualblocks code fullscreen",
+            "insertdatetime media table paste code help wordcount",
+          ],
+          toolbar:
+            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+        }}
+        onEditorChange={(text) =>
+          seteditorContent({ ...editorContent, html: text })
+        }
+      />
+      QUERY
+      <Editor
+        value={editorContent.gql}
+        apiKey='f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk' //TODO Pull this into app var
+        init={{
+          height: 500,
+          //menubar: false,
+          encoding: "raw",
+          extended_valid_elements: "span",
+          //entity_encoding: "raw",
+          plugins: [],
+          toolbar: "undo redo",
+        }}
+        onEditorChange={(text) =>
+          seteditorContent({ ...editorContent, gql: text })
+        }
+      />
+    </div>
+  );
+}
+
+// <GraphiQL
+// fetcher={async (graphQLParams) => {
+//   const data = await fetch(process.env.REACT_APP_GRAPHQL_ENDPOINT, {
+//     method: "POST",
+//     headers: {
+//       Accept: "application/json",
+//       "Content-Type": "application/json",
+//     },
+//     body: JSON.stringify(graphQLParams),
+//     credentials: "same-origin",
+//   });
+//   return data.json().catch(() => data.text());
+// }}
+// />
diff --git a/client/src/components/shop-template-editor/shop-template-editor.container.jsx b/client/src/components/shop-template-editor/shop-template-editor.container.jsx
new file mode 100644
index 000000000..bd5d7b44a
--- /dev/null
+++ b/client/src/components/shop-template-editor/shop-template-editor.container.jsx
@@ -0,0 +1,34 @@
+import { useQuery } from "@apollo/react-hooks";
+import queryString from "query-string";
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { QUERY_TEMPLATE_BY_PK } from "../../graphql/templates.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import ShopTemplateEditorComponent from "./shop-template-editor.component";
+
+export default function ShopTemplateEditorContainer() {
+  const search = queryString.parse(useLocation().search);
+  const editorState = useState({ html: "", gql: "" });
+
+  const { loading, error, data } = useQuery(QUERY_TEMPLATE_BY_PK, {
+    variables: {
+      templateId: search.customTemplateId,
+    },
+    skip: !!!search.customTemplateId,
+  });
+
+  if (!!!search.customTemplateId) return <span>No selection.</span>;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return (
+    <LoadingSpinner loading={loading}>
+      <ShopTemplateEditorComponent
+        templateId={search.customTemplateId}
+        html={data ? data.templates_by_pk.html : ""}
+        gql={data ? data.templates_by_pk.query : ""}
+        editorState={editorState}
+      />
+    </LoadingSpinner>
+  );
+}
diff --git a/client/src/components/shop-templates-list/shop-templates-list.container.jsx b/client/src/components/shop-templates-list/shop-templates-list.container.jsx
new file mode 100644
index 000000000..3b3776311
--- /dev/null
+++ b/client/src/components/shop-templates-list/shop-templates-list.container.jsx
@@ -0,0 +1,56 @@
+import { useQuery } from "@apollo/react-hooks";
+import { List, Button } from "antd";
+import React from "react";
+import { QUERY_CUSTOM_TEMPLATES } from "../../graphql/templates.queries";
+import AlertComponent from "../alert/alert.component";
+import Skeleton from "../loading-skeleton/loading-skeleton.component";
+import { useTranslation } from "react-i18next";
+import { useHistory, useLocation } from "react-router-dom";
+import queryString from "query-string";
+
+export default function ShopTemplatesListContainer() {
+  const { loading, error, data } = useQuery(QUERY_CUSTOM_TEMPLATES);
+  const { t } = useTranslation();
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  const handleEdit = (record) => {
+    if (record) {
+      if (record.id) {
+        search.customTemplateId = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.customTemplateId;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  return (
+    <div>
+      <div>CUSTOM TEMPLATES</div>
+      <List
+        loading={loading}
+        itemLayout='horizontal'
+        dataSource={data ? data.templates : []}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <Button onClick={() => handleEdit(item)}>
+                {t("general.actions.edit")}
+              </Button>,
+              <Button>{t("general.actions.delete")}</Button>,
+            ]}>
+            <Skeleton title={false} loading={item.loading} active>
+              <List.Item.Meta
+                title={item.name}
+                description='TODO CROSS MATCH DESCRIPTION'
+              />
+            </Skeleton>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+}
diff --git a/client/src/emails/components/fragments.queries.js b/client/src/emails/components/fragments.queries.js
deleted file mode 100644
index bd2ed3bfc..000000000
--- a/client/src/emails/components/fragments.queries.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import gql from "graphql-tag";
-
-export const shopAttributes = gql`
-  fragment shopData on query_root {
-    bodyshops(where: { associations: { active: { _eq: true } } }) {
-      id
-      address1
-      address2
-      city
-      email
-      federal_tax_id
-      state
-      shopname
-      zip_post
-      logo_img_path
-    }
-  }
-`;
diff --git a/client/src/emails/components/header/header.component.jsx b/client/src/emails/components/header/header.component.jsx
deleted file mode 100644
index ea6aedc29..000000000
--- a/client/src/emails/components/header/header.component.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-
-export default function Header({ bodyshop }) {
-  return (
-    <table>
-      <tr>
-        <td>
-          <img alt="" src={bodyshop.logo_img_path} />
-        </td>
-        <td>
-          <div>
-            <strong>{`${bodyshop.shopname}`}</strong>
-          </div>
-          <div>{`${bodyshop.address1} ${bodyshop.address2} ${bodyshop.city} ${bodyshop.state} ${bodyshop.zip_post}`}</div>
-          <div>
-            <a href={`mailto:${bodyshop.email}`}>{bodyshop.email}</a>
-            {` |  ${bodyshop.ph1}`}
-          </div>
-        </td>
-      </tr>
-    </table>
-  );
-}
diff --git a/client/src/emails/templates/appointment-confirmation/appointment-confirmation.query.js b/client/src/emails/templates/appointment-confirmation/appointment-confirmation.query.js
deleted file mode 100644
index c1f9b569a..000000000
--- a/client/src/emails/templates/appointment-confirmation/appointment-confirmation.query.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import gql from "graphql-tag";
-import { shopAttributes } from "../../components/fragments.queries";
-
-export const EMAIL_APPOINTMENT_CONFIRMATION = gql`
-  query EMAIL_APPOINTMENT_CONFIRMATION($id: uuid!) {
-    appointments_by_pk(id: $id) {
-      start
-      title
-      job {
-        ownr_fn
-        ownr_ln
-        ownr_ea
-      }
-    }
-    ...shopData
-  }
-  ${shopAttributes}
-`;
diff --git a/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx b/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx
deleted file mode 100644
index a329a56b3..000000000
--- a/client/src/emails/templates/appointment-confirmation/appointment-confirmation.template.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Header from "../../components/header/header.component";
-import { DateTimeFormatter } from "../../../utils/DateFormatter";
-
-const D = styled.div`
-  table {
-    font-family: arial, sans-serif;
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  td,
-  th {
-    border: 1px solid #dddddd;
-    text-align: left;
-    padding: 8px;
-  }
-
-  tr:nth-child(even) {
-    background-color: #dddddd;
-  }
-`;
-
-export const Subject = "Appointment Reminder";
-
-export default function AppointmentConfirmationEmail({ data }) {
-  const appointment = data.appointments_by_pk;
-  console.log("appointment", appointment);
-  return (
-    <D>
-      <Header bodyshop={data.bodyshops[0]} />
-      <strong>Appointment Reminder</strong>
-      <p> Dear {`${appointment.job.ownr_fn} ${appointment.job.ownr_ln}`},</p>
-      <p>
-        You have an appointment at {data.bodyshops[0].shopname} on
-        <DateTimeFormatter>{appointment.start}</DateTimeFormatter>.
-      </p>
-      <p>Thank you from the team at {data.bodyshops[0].shopname}</p>
-    </D>
-  );
-}
diff --git a/client/src/emails/templates/parts-order/parts-order.email.jsx b/client/src/emails/templates/parts-order/parts-order.email.jsx
deleted file mode 100644
index 88f0b7d14..000000000
--- a/client/src/emails/templates/parts-order/parts-order.email.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Header from "../../components/header/header.component";
-
-const D = styled.div`
-  table {
-    font-family: arial, sans-serif;
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  td,
-  th {
-    border: 1px solid #dddddd;
-    text-align: left;
-    padding: 8px;
-  }
-
-  tr:nth-child(even) {
-    background-color: #dddddd;
-  }
-`;
-
-export default function PartsOrderEmail({ data }) {
-  const order = data.parts_orders_by_pk;
-  return (
-    <D>
-      <Header bodyshop={data.bodyshops[0]} />
-      <table>
-        <tr>
-          <td>{`Deliver By: ${order.deliver_by}`}</td>
-          <td>{`Ordered By: ${order.user_email}`}</td>
-        </tr>
-      </table>
-      <table>
-        <tr>
-          <th>Line Description</th>
-          <th>Part #</th>
-          <th>Price</th>
-          <th>Line Remarks</th>
-        </tr>
-        {order.parts_order_lines.map(item => (
-          <tr key={item.id}>
-            <td>{item.line_desc}</td>
-            <td>{item.oem_partno}</td>
-            <td>{item.act_price}</td>
-            <td>{item.line_remarks}</td>
-          </tr>
-        ))}
-      </table>
-    </D>
-  );
-}
diff --git a/client/src/emails/templates/parts-order/parts-order.query.js b/client/src/emails/templates/parts-order/parts-order.query.js
deleted file mode 100644
index 43aa898fa..000000000
--- a/client/src/emails/templates/parts-order/parts-order.query.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import gql from "graphql-tag";
-import { shopAttributes } from "../../components/fragments.queries";
-
-export const REPORT_QUERY_PARTS_ORDER_BY_PK = gql`
-  query REPORT_QUERY_PARTS_ORDER_BY_PK($id: uuid!) {
-    parts_orders_by_pk(id: $id) {
-      job {
-        id
-        vehicle {
-          id
-          v_model_desc
-          v_make_desc
-          v_model_yr
-          v_vin
-        }
-        ro_number
-        est_number
-      }
-      id
-      deliver_by
-      parts_order_lines {
-        id
-        db_price
-        act_price
-        line_desc
-        line_remarks
-        oem_partno
-        status
-      }
-      status
-      user_email
-    }
-    ...shopData
-  }
-  ${shopAttributes}
-`;
diff --git a/client/src/graphql/templates.queries.js b/client/src/graphql/templates.queries.js
index 58916522c..c62e2ef73 100644
--- a/client/src/graphql/templates.queries.js
+++ b/client/src/graphql/templates.queries.js
@@ -11,3 +11,34 @@ export const QUERY_TEMPLATES_BY_NAME = gql`
     }
   }
 `;
+
+export const QUERY_CUSTOM_TEMPLATES = gql`
+  query QUERY_CUSTOM_TEMPLATES {
+    templates(where: { bodyshopid: { _is_null: false } }) {
+      id
+      name
+    }
+  }
+`;
+
+export const QUERY_TEMPLATE_BY_PK = gql`
+  query QUERY_TEMPLATE_BY_PK($templateId: uuid!) {
+    templates_by_pk(id: $templateId) {
+      id
+      query
+      html
+    }
+  }
+`;
+export const UPDATE_TEMPLATE = gql`
+  mutation UPDATE_TEMPLATE(
+    $templateId: uuid!
+    $template: templates_set_input!
+  ) {
+    update_templates(where: { id: { _eq: $templateId } }, _set: $template) {
+      returning {
+        id
+      }
+    }
+  }
+`;
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index 10b1e07d0..efe4e97be 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -2,16 +2,16 @@ import { BackTop, Layout } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Route, Switch } from "react-router-dom";
+import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
+import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
+import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
 import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import "./manage.page.styles.scss";
-import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
-import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
-import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
+import "./manage.page.styles.scss";
 const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
 );
@@ -82,6 +82,9 @@ const ProductionListPage = lazy(() =>
 const ProductionBoardPage = lazy(() =>
   import("../production-board/production-board.container")
 );
+const ShopTemplates = lazy(() =>
+  import("../shop-templates/shop-templates.container")
+);
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -218,6 +221,11 @@ export default function Manage({ match }) {
                 component={JobsAvailablePage}
               />
               <Route exact path={`${match.path}/shop/`} component={ShopPage} />
+              <Route
+                exact
+                path={`${match.path}/shop/templates`}
+                component={ShopTemplates}
+              />
               <Route
                 exact
                 path={`${match.path}/shop/vendors`}
diff --git a/client/src/pages/shop-templates/shop-templates.container.js b/client/src/pages/shop-templates/shop-templates.container.js
new file mode 100644
index 000000000..4665d8f47
--- /dev/null
+++ b/client/src/pages/shop-templates/shop-templates.container.js
@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ShopTemplatesListContainer from "../../components/shop-templates-list/shop-templates-list.container";
+import ShopTemplateEditor from "../../components/shop-template-editor/shop-template-editor.container";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.shop-templates");
+    setBreadcrumbs([
+      {
+        link: "/manage/shop",
+        label: t("titles.bc.shop", { shopname: bodyshop.shopname }),
+      },
+      { link: "/manage/shop/templates", label: t("titles.bc.shop-templates") },
+    ]);
+  }, [t, setBreadcrumbs, bodyshop.shopname]);
+
+  return (
+    <div>
+      <ShopTemplatesListContainer />
+      <ShopTemplateEditor />
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShopTemplatesContainer);
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 4f31a6b28..1cc9d6b73 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -808,6 +808,14 @@
 				"state": "Error reading page state. Please refresh."
 			}
 		},
+		"templates": {
+			"errors": {
+				"updating": "Error updating template {{error}}."
+			},
+			"successes": {
+				"updated": "Template updated successfully."
+			}
+		},
 		"timetickets": {
 			"actions": {
 				"enter": "Enter New Time Ticket"
@@ -848,6 +856,8 @@
 				"productionboard": "Production Board",
 				"productionlist": "Production - List",
 				"schedule": "Schedule",
+				"shop": "Manage my Shop ({{shopname}})",
+				"shop-templates": "Shop Templates",
 				"vehicle-details": "Vehicle: {{vehicle}}",
 				"vehicles": "Vehicles"
 			},
@@ -871,6 +881,7 @@
 			"profile": "My Profile | $t(titles.app)",
 			"schedule": "Schedule | $t(titles.app)",
 			"shop": "My Shop | $t(titles.app)",
+			"shop-templates": "Shop Templates | $t(titles.app)",
 			"shop_vendors": "Vendors | $t(titles.app)",
 			"vehicledetail": "Vehicle Details {{vehicle}} | $t(titles.app)",
 			"vehicles": "All Vehicles | $t(titles.app)"
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 05476c5d8..7d3de5e3f 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -808,6 +808,14 @@
 				"state": "Error al leer el estado de la página. Porfavor refresca."
 			}
 		},
+		"templates": {
+			"errors": {
+				"updating": ""
+			},
+			"successes": {
+				"updated": ""
+			}
+		},
 		"timetickets": {
 			"actions": {
 				"enter": ""
@@ -848,6 +856,8 @@
 				"productionboard": "",
 				"productionlist": "",
 				"schedule": "",
+				"shop": "",
+				"shop-templates": "",
 				"vehicle-details": "",
 				"vehicles": ""
 			},
@@ -871,6 +881,7 @@
 			"profile": "Mi perfil | $t(titles.app)",
 			"schedule": "Horario | $t(titles.app)",
 			"shop": "Mi tienda | $t(titles.app)",
+			"shop-templates": "",
 			"shop_vendors": "Vendedores | $t(titles.app)",
 			"vehicledetail": "Detalles del vehículo {{vehicle}} | $t(titles.app)",
 			"vehicles": "Todos los vehiculos | $t(titles.app)"
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 54ba5f8cb..ac36c234d 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -808,6 +808,14 @@
 				"state": "Erreur lors de la lecture de l'état de la page. Rafraichissez, s'il vous plait."
 			}
 		},
+		"templates": {
+			"errors": {
+				"updating": ""
+			},
+			"successes": {
+				"updated": ""
+			}
+		},
 		"timetickets": {
 			"actions": {
 				"enter": ""
@@ -848,6 +856,8 @@
 				"productionboard": "",
 				"productionlist": "",
 				"schedule": "",
+				"shop": "",
+				"shop-templates": "",
 				"vehicle-details": "",
 				"vehicles": ""
 			},
@@ -871,6 +881,7 @@
 			"profile": "Mon profil | $t(titles.app)",
 			"schedule": "Horaire | $t(titles.app)",
 			"shop": "Mon magasin | $t(titles.app)",
+			"shop-templates": "",
 			"shop_vendors": "Vendeurs | $t(titles.app)",
 			"vehicledetail": "Détails du véhicule {{vehicle} | $t(titles.app)",
 			"vehicles": "Tous les véhicules | $t(titles.app)"
diff --git a/client/src/emails/constants.js b/client/src/utils/constants.js
similarity index 100%
rename from client/src/emails/constants.js
rename to client/src/utils/constants.js