cds-snc · pcraig3 · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022 · Nov 16, 2022
diff --git a/components/form-builder/layout/Header.tsx b/components/form-builder/layout/Header.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useTemplateStore } from "../store/useTemplateStore";
 import LanguageToggle from "../../globals/LanguageToggle";
-import { DownloadFileButton } from "./DownloadFileButton";
 import LoginMenu from "../../auth/LoginMenu";
 import { useSession } from "next-auth/react";
 import { useNavigationStore } from "../store/useNavigationStore";
@@ -51,8 +50,7 @@ export const Header = () => {
     }
   };
 
-  const ButtonWithMessage = withMessage(Button, t("saveDraftMessage"));
-  const DownloadFileButtonWithMessage = withMessage(DownloadFileButton, t("saveDownloadMessage"));
+  const ButtonWithMessage = withMessage(Button, t("saveDraftMessage", { ns: "form-builder" }));
 
   return (
     <header className="border-b-3 border-blue-dark my-10">
@@ -63,17 +61,13 @@ export const Header = () => {
             onClick={handleClick("start")}
             className="inline-block mr-10 text-h2 mb-6 font-bold font-sans"
           >
-            {t("title")}
+            {t("title", { ns: "common" })}
           </button>
-          {currentTab !== "start" &&
-            isSaveable() &&
-            (status === "authenticated" ? (
-              <ButtonWithMessage className="ml-4" onClick={handlePublish}>
-                {t("save")}
-              </ButtonWithMessage>
-            ) : (
-              <DownloadFileButtonWithMessage className="!py-1 !px-4" />
-            ))}
+          {currentTab !== "start" && isSaveable() && status === "authenticated" && (
+            <ButtonWithMessage className="ml-4" onClick={handlePublish}>
+              {t("save", { ns: "form-builder" })}
+            </ButtonWithMessage>
+          )}
         </div>
         <div className="inline-flex gap-4">
           <div className="md:text-small_base text-base font-normal not-italic">

diff --git a/components/form-builder/layout/Layout.tsx b/components/form-builder/layout/Layout.tsx
@@ -17,6 +17,7 @@ import { Publish } from "./Publish";
 import { Published } from "./Published";
 import { Settings } from "./Settings";
 import { TestDataDelivery } from "./TestDataDelivery";
+import { Save } from "./Save";
 
 export const Layout = () => {
   const { status } = useSession();
@@ -145,6 +146,20 @@ export const Layout = () => {
             </main>
           </div>
         );
+      case "save":
+        return (
+          <div className="col-start-4 col-span-9">
+            <Head>
+              <title>
+                {t("gcFormsSave")} — {t("gcForms")}
+              </title>
+            </Head>
+            <main id="content">
+              <h1 className="border-b-0 mb-8">{t("saveYourProgress")}</h1>
+              <Save />
+            </main>
+          </div>
+        );
       case "publish":
         return (
           <main id="content" className="col-start-4 col-span-9">

diff --git a/components/form-builder/layout/LeftNavigation.tsx b/components/form-builder/layout/LeftNavigation.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 import { useTranslation } from "next-i18next";
-import { DesignIcon, PreviewIcon, ShareIcon, PublishIcon } from "../icons";
+import { DesignIcon, PreviewIcon, ShareIcon, PublishIcon, SaveIcon } from "../icons";
+import { useSession } from "next-auth/react";
 
 function Button({
   children,
@@ -34,6 +35,7 @@ export const LeftNavigation = ({
   handleClick: (tabName: string) => (evt: React.MouseEvent<HTMLElement>) => void;
 }) => {
   const { t } = useTranslation("form-builder");
+  const { status } = useSession();
 
   const iconClassname =
     "inline-block group-hover:fill-blue-hover group-focus:fill-white-default group-active:fill-white-default mr-2 -mt-1";
@@ -61,6 +63,15 @@ export const LeftNavigation = ({
       >
         {t("share")}
       </Button>
+      {status !== "authenticated" && (
+        <Button
+          isCurrentTab={currentTab === "save"}
+          icon={<SaveIcon className={iconClassname} />}
+          handleClick={handleClick("save")}
+        >
+          {t("save")}
+        </Button>
+      )}
       <Button
         isCurrentTab={currentTab === "publish"}
         icon={<PublishIcon className={iconClassname} />}

diff --git a/public/static/locales/en/form-builder.json b/public/static/locales/en/form-builder.json
@@ -38,25 +38,26 @@
   "formatBulletList": "Format bullet list",
   "formatH2": "Format H2",
   "formatH3": "Format H3",
-  "formInvalidProperty": "Invalid: {{property}}",
-  "formMissingProperty": "Missing: {{property}}",
   "formatItalic": "Format italic",
   "formatNumberedList": "Format numbered list",
   "formConfirmationMessage": "Form confirmation message",
   "formIntroduction": "Form introduction",
+  "formInvalidProperty": "Invalid: {{property}}",
+  "formMissingProperty": "Missing: {{property}}",
   "formSubmissionDisabledInPreview": "Form submission is disabled in preview",
   "formTitle": "Form title",
   "french": "French",
   "gcForms": "GC Forms",
-  "gcFormsStart": "Create new",
   "gcFormsEdit": "Edit",
   "gcFormsPreview": "Preview",
-  "gcFormsResponseDelivery": "Response delivery",
-  "gcFormsTranslate": "Translate",
-  "gcFormsShare": "Share",
   "gcFormsPublish": "Publish",
   "gcFormsPublished": "Published",
+  "gcFormsResponseDelivery": "Response delivery",
+  "gcFormsSave": "Save",
   "gcFormsSettings": "Settings",
+  "gcFormsShare": "Share",
+  "gcFormsStart": "Create new",
+  "gcFormsTranslate": "Translate",
   "ifYouAreExperiencingProblems": "If you are experiencing any problems with your published form, please <a href=\"https://www.canada.ca\" target=\"_blank\">contact support</a>.",
   "incomplete": "Incomplete",
   "insertLink": "Insert link",
@@ -114,12 +115,13 @@
   "saveDownloadMessage": "Form file downloaded successfully",
   "saveDraftMessage": "Form saved as a draft",
   "saveH2": "Save the form file on your computer",
-  "saveH3": "Upload the form file again to edit",
+  "saveH3": "Open the form file again to edit",
   "saveP1": "We don’t save your form on our website, but don’t worry, you can save the file to your computer.",
-  "saveP2": "Save the form file to work on later, and open it again to pick-up where you left off.",
+  "saveP2": "Save the from file to save your progress, or if you’re done, save it and open it again later to pick-up where you left off.",
   "saveP3": "Click the save button to download your form.",
   "saveP4": "Open the form file from the GC Form Builder’s start page to pick-up where you left off.",
   "saveYourForm": "Save your form",
+  "saveYourProgress": "Save your progress",
   "settings": "Settings",
   "settingsDeleteButton": "Delete",
   "settingsDeleteHint": "Once you delete a form, there is no way to retrieve it back again. Please save a copy before deleting your form.",
@@ -162,4 +164,4 @@
   "unlockPublishingDescription": "To unlock publishing, provide the contact information of the person you report to.",
   "updateResponseDestination": "Update response destination.",
   "viewCode": "View code"
-}
+}
diff --git a/public/static/locales/fr/form-builder.json b/public/static/locales/fr/form-builder.json
@@ -38,25 +38,26 @@
   "formatBulletList": "[FR] Format bullet list",
   "formatH2": "[FR] Format H2",
   "formatH3": "[FR] Format H3",
-  "formInvalidProperty": "Invalid: {{property}}",
-  "formMissingProperty": "Missing: {{property}}",
   "formatItalic": "[FR] Format italic",
   "formatNumberedList": "[FR] Format numbered list",
   "formConfirmationMessage": "[FR] Form confirmation message",
   "formIntroduction": "[FR] Form introduction",
+  "formInvalidProperty": "Invalid: {{property}}",
+  "formMissingProperty": "Missing: {{property}}",
   "formSubmissionDisabledInPreview": "[FR] Form submission is disabled in preview",
   "formTitle": "[FR] Form title",
   "french": "Français",
   "gcForms": "Formulaires GC",
-  "gcFormsStart": "Créer",
   "gcFormsEdit": "Editer",
   "gcFormsPreview": "Prévisualiser",
-  "gcFormsResponseDelivery": "Livraison des réponses",
-  "gcFormsTranslate": "Traduire",
-  "gcFormsShare": "Partager",
   "gcFormsPublish": "Publier",
   "gcFormsPublished": "Publié",
+  "gcFormsResponseDelivery": "Livraison des réponses",
+  "gcFormsSave": "[FR] Save",
   "gcFormsSettings": "Paramètres",
+  "gcFormsShare": "Partager",
+  "gcFormsStart": "Créer",
+  "gcFormsTranslate": "Traduire",
   "ifYouAreExperiencingProblems": "[FR] If you are experiencing any problems with your published form, please <a href=\"http://example.com\" target=\"_blank\">contact support</a>.",
   "incomplete": "[FR] Incomplete",
   "insertLink": "[FR] Insert link",
@@ -113,14 +114,14 @@
   "saveButton": "Enregistrer",
   "saveDownloadMessage": "[FR] Form file downloaded successfully",
   "saveDraftMessage": "[FR] Form saved as a draft",
-  "saveH1": "Enregistrer vos modifications",
   "saveH2": "Enregistrez le formulaire sur votre ordinateur.",
   "saveH3": "Rouvrir le formulaire pour le modifier",
   "saveP1": "Nous n’enregistrons pas votre formulaire sur notre site Web, mais ne vous inquiétez pas : vous pouvez le sauvegarder sur votre ordinateur. ",
   "saveP2": "Enregistrez le formulaire pour conserver vos modifications. Si vous avez terminé, vous pouvez aussi l’enregistrer pour reprendre votre travail là où vous vous êtes arrêté.",
   "saveP3": "Cliquez sur le bouton Enregistrer le fichier pour télécharger votre formulaire.",
   "saveP4": "Ouvrez le formulaire à partir de la page d’accueil de Formulaires GC pour reprendre là où vous vous êtes arrêté. ",
   "saveYourForm": "[FR] Save your form",
+  "saveYourProgress": "Enregistrer vos modifications",
   "settings": "Paramètres",
   "settingsDeleteButton": "Supprimer un formulaire",
   "settingsDeleteHint": "Une fois le formulaire supprimé, vous ne pourrez pas le récupérer. Veuillez enregistrer une copie du formulaire avant de le supprimer.",