Merge branch 'main' into feature/remove_locale_param

Author: bryan-robitaille

app/(gcforms)/(app administration)/admin/(with nav)/accounts/[id]/manage-forms/actions.ts

@@ -6,7 +6,7 @@ import { TemplateHasUnprocessedSubmissions } from "@lib/templates/internal/error
 import { revalidatePath } from "next/cache";
 import { AuthenticatedAction } from "@lib/actions";
 import { getTemplateWithAssignedUsers } from "@lib/templates/queries/getTemplateWithAssignedUsers";
-import { sendArchivedFormNotifications } from "@lib/notifications";
+import { sendArchivedFormNotifications } from "@lib/formEmailOrchestration";
 
 // Public facing functions - they can be used by anyone who finds the associated server action identifer
 
@@ -18,13 +18,14 @@ export const deleteForm = AuthenticatedAction(async (session, id: string) => {
     }
 
     await deleteTemplate(id);
-    await sendArchivedFormNotifications(
-      session,
-      id,
-      template.formRecord.form.titleEn,
-      template.formRecord.form.titleFr,
-      template.users
-    );
+
+    sendArchivedFormNotifications(session.user.email, {
+      title: {
+        en: template.formRecord.form.titleEn,
+        fr: template.formRecord.form.titleFr,
+      },
+      ownersEmailAddresses: template.users.map((u) => u.email),
+    });
 
     revalidatePath("app/[locale]/(app administration)/admin/(with nav)/accounts/[id]/manage-forms");
   } catch (error) {

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/LeftNavigation.tsx

@@ -34,9 +34,14 @@ export const LeftNavigation = ({ id }: { id: string }) => {
     t,
     i18n: { language },
   } = useTranslation("form-builder");
-  const { isPublished, id: storeId } = useTemplateStore((s) => ({
+  const {
+    isPublished,
+    id: storeId,
+    currentDraftVersionId,
+  } = useTemplateStore((s) => ({
     isPublished: s.isPublished,
     id: s.id,
+    currentDraftVersionId: s.currentDraftVersionId,
   }));
 
   if (storeId && storeId !== id) {
@@ -48,7 +53,7 @@ export const LeftNavigation = ({ id }: { id: string }) => {
   return (
     <nav aria-label={t("navLabelFormBuilder")}>
       <ul className="m-0 list-none p-0">
-        {!isPublished && (
+        {(!isPublished || currentDraftVersionId) && (
           <li>
             <LeftNav
               testid="edit"
@@ -82,7 +87,7 @@ export const LeftNavigation = ({ id }: { id: string }) => {
             <NavSettingsIcon />
           </LeftNav>
         </li>
-        {!isPublished && (
+        {(!isPublished || currentDraftVersionId) && (
           <li>
             <LeftNav
               testid="publish"

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/CreateDraftConfirmDialog/ConfirmationAgreement.tsx

@@ -0,0 +1,37 @@
+"use client";
+import React, { useState } from "react";
+import { useTranslation } from "@i18n/client";
+
+export const ConfirmationAgreement = ({
+  handleAgreement,
+}: {
+  handleAgreement: (value: string) => void;
+}) => {
+  const { t } = useTranslation("form-builder");
+  const [agreeValue, setAgreeValue] = useState("");
+
+  return (
+    <div className="mb-4">
+      <label className="mb-2 block font-bold" id="enterAgreeInput">
+        {t("confirm.createDraft.label")}{" "}
+        <span className="text-gcds-red-500">{t("confirm.createDraft.required")}</span>
+      </label>
+      <div>
+        <input
+          type="text"
+          id="confirmation-agree"
+          className="gc-input-text mb-1 w-4/5"
+          value={agreeValue}
+          placeholder={t("confirm.createDraft.placeholder")}
+          onChange={(e) => {
+            setAgreeValue(e.target.value);
+            handleAgreement((e.target.value || "").toUpperCase().trim());
+          }}
+          aria-labelledby="enterAgreeInput"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationAgreement;

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/CreateDraftConfirmDialog/CreateDraftConfirmDialog.tsx

@@ -0,0 +1,109 @@
+"use client";
+import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Dialog, useDialogRef } from "@formBuilder/components/shared/Dialog";
+import { Button } from "@clientComponents/globals";
+import { EventKeys, useCustomEvent } from "@lib/hooks/useCustomEvent";
+import ConfirmationAgreement from "./ConfirmationAgreement";
+import { toast } from "@formBuilder/components/shared/Toast";
+import { useTranslation } from "@i18n/client";
+import { createDraftVersion } from "./actions";
+
+type OpenDetail = { id: string };
+
+export const CreateDraftConfirmDialog = () => {
+  const dialog = useDialogRef();
+  const { Event } = useCustomEvent();
+  const { t, i18n } = useTranslation("form-builder");
+  const router = useRouter();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [formId, setFormId] = useState<string>("");
+  const [agreed, setAgreed] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleOpen = useCallback((detail: OpenDetail) => {
+    if (detail && detail.id) {
+      setFormId(detail.id);
+      setAgreed(false);
+      setIsOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    Event.on(EventKeys.openCreateDraftConfirmDialog, handleOpen);
+    return () => {
+      Event.off(EventKeys.openCreateDraftConfirmDialog, handleOpen);
+    };
+  }, [Event, handleOpen]);
+
+  const handleAgreement = (value: string) => {
+    if (value === "AGREE" || value === "ACCEPTE") setAgreed(true);
+    else setAgreed(false);
+  };
+
+  const handleClose = () => {
+    dialog.current?.close();
+    setIsOpen(false);
+    setAgreed(false);
+  };
+
+  const handleContinue = async () => {
+    setIsSubmitting(true);
+    try {
+      const res = await createDraftVersion({ id: formId });
+      if (res?.error || !res?.formRecord) {
+        toast.error("Could not create draft version");
+        setIsSubmitting(false);
+        return;
+      }
+      // Navigate to edit page for the draft
+      const lang = i18n.language || "en";
+      router.push(`/${lang}/form-builder/${res.formRecord.id}/edit`);
+    } catch (e) {
+      toast.error("Could not create draft version");
+      setIsSubmitting(false);
+    }
+  };
+
+  const actions = (
+    <>
+      <Button theme="secondary" onClick={handleClose} disabled={isSubmitting}>
+        {t("actions.cancel")}
+      </Button>
+      <Button
+        theme="primary"
+        className="ml-4"
+        onClick={handleContinue}
+        disabled={!agreed || isSubmitting}
+      >
+        {isSubmitting ? t("actions.continuing") : t("actions.continue")}
+      </Button>
+    </>
+  );
+
+  return (
+    <>
+      {isOpen && (
+        <Dialog
+          handleClose={handleClose}
+          dialogRef={dialog}
+          actions={actions}
+          title={t("confirm.createDraft.title")}
+        >
+          <div className="p-4">
+            <p className="mb-4">{t("confirm.createDraft.description")}</p>
+            <p className="text-warning mb-4 font-medium">
+              {t("confirm.createDraft.responseWarning")}
+            </p>
+            <p className="mb-4">{t("confirm.createDraft.liveForm")}</p>
+            <p className="mb-4 font-semibold">{t("confirm.createDraft.prompt")}</p>
+            <ConfirmationAgreement handleAgreement={handleAgreement} />
+          </div>
+        </Dialog>
+      )}
+    </>
+  );
+};
+
+export default CreateDraftConfirmDialog;

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/CreateDraftConfirmDialog/actions.ts

@@ -0,0 +1,52 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+import { redirect } from "next/navigation";
+
+import { createDraftVersionForTemplate } from "@lib/templates/versioning/mutations/createDraftForTemplate";
+
+import { AuthenticatedAction } from "@lib/actions";
+import { type FormRecord } from "@lib/types";
+
+export const createDraftVersion = AuthenticatedAction(
+  async (
+    _,
+    {
+      id: formID,
+      redirectAfter,
+    }: {
+      id: string;
+      redirectAfter?: string;
+    }
+  ): Promise<{
+    formRecord: FormRecord | null;
+    error?: string;
+  }> => {
+    let hasError;
+    let response: FormRecord | null = null;
+
+    try {
+      response = await createDraftVersionForTemplate(formID);
+
+      if (!response) {
+        throw new Error(`Unable to create a draft version for ${formID}`);
+      }
+
+      revalidatePath(`/form-builder/${formID}`, "layout");
+      revalidatePath(`/form-builder/${formID}/published`, "page");
+      revalidatePath(`/form-builder/${formID}/publish`, "page");
+    } catch (error) {
+      hasError = error;
+    }
+
+    if (!hasError && redirectAfter) {
+      if (!redirectAfter.startsWith("/") || redirectAfter.startsWith("//")) {
+        return { formRecord: response, error: "Invalid redirect path" };
+      }
+      redirect(redirectAfter);
+    }
+
+    return { formRecord: response, error: hasError ? (hasError as Error).message : undefined };
+  }
+);

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/components/EditWithGroups.tsx

@@ -25,7 +25,15 @@ import { SkipLinkReusable } from "@clientComponents/globals/SkipLinkReusable";
 import { AddPageButton } from "./AddPageButton";
 import { AddBranchingButton } from "./AddBranchingButton";
 
-export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) => {
+export const EditWithGroups = ({
+  id,
+  locale,
+  hasDraft,
+}: {
+  id: string;
+  locale: string;
+  hasDraft: boolean;
+}) => {
   const { t } = useTranslation("form-builder");
   const {
     title,
@@ -35,7 +43,6 @@ export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) =
     getLocalizationAttribute,
     isPublished,
     getName,
-    currentDraftVersionId,
   } = useTemplateStore((s) => ({
     title:
       s.form[s.localizeField(LocalizedFormProperties.TITLE, s.translationLanguagePriority)] ?? "",
@@ -44,7 +51,6 @@ export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) =
     translationLanguagePriority: s.translationLanguagePriority,
     getLocalizationAttribute: s.getLocalizationAttribute,
     isPublished: s.isPublished,
-    currentDraftVersionId: s.currentDraftVersionId,
     getName: s.getName,
   }));
 
@@ -75,11 +81,11 @@ export const EditWithGroups = ({ id, locale }: { id: string; locale: string }) =
   }, [title]);
 
   useEffect(() => {
-    if (isPublished && !currentDraftVersionId) {
+    if (isPublished && !hasDraft) {
       router.replace(`/${locale}/form-builder/${id}/published`);
       return;
     }
-  }, [router, isPublished, id, locale, currentDraftVersionId]);
+  }, [router, isPublished, id, locale, hasDraft]);
 
   const _debounced = debounce(
     useCallback(

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/edit/page.tsx

@@ -4,6 +4,7 @@ import { EditWithGroups } from "./components/EditWithGroups";
 import { DynamicRowDialog } from "@formBuilder/components/dialogs/DynamicRowDialog/DynamicRowDialog";
 import { MoreDialog } from "../components/dialogs/MoreDialog/MoreDialog";
 import { RulesDialog } from "../components/dialogs/RulesDialog/RulesDialog";
+import { getTemplateVersionState } from "@lib/templates/versioning/queries/getTemplateVersionState";
 
 export async function generateMetadata(props: {
   params: Promise<{ locale: string }>;
@@ -23,9 +24,15 @@ export default async function Page(props: { params: Promise<{ id: string; locale
 
   const { id, locale } = params;
 
+  const templateVersionState = await getTemplateVersionState(id);
+
   return (
     <>
-      <EditWithGroups id={id} locale={locale} />
+      <EditWithGroups
+        id={id}
+        hasDraft={!!templateVersionState?.currentDraftVersionId}
+        locale={locale}
+      />
       <DynamicRowDialog />
       <MoreDialog />
       <RulesDialog />

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/layout.tsx

@@ -110,6 +110,7 @@ export default async function Layout(props: {
             >
               <GroupStoreProvider>
                 <ManageFormAccessDialogContainer formId={id} />
+
                 <div className="h-full">
                   <div className="flex min-h-screen flex-col">
                     <Header

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/ClientContainer.tsx

@@ -27,7 +27,7 @@ export const PreviewFormWrapper = ({
   setSent: React.Dispatch<React.SetStateAction<string | null | undefined>>;
 }) => {
   const { status } = useSession();
-  const { saveSessionProgress, currentGroup } = useGCFormsContext();
+  const { saveSessionProgress, currentGroup, matchedIds, getGroupHistory } = useGCFormsContext();
 
   const { translationLanguagePriority, getLocalizationAttribute } = useTemplateStore((s) => ({
     translationLanguagePriority: s.translationLanguagePriority,
@@ -48,6 +48,8 @@ export const PreviewFormWrapper = ({
       language={translationLanguagePriority}
       t={translatedT}
       onSuccess={setSent}
+      matchedIds={matchedIds}
+      getGroupHistory={getGroupHistory}
       renderSubmit={({ validateForm }) => {
         return (
           <div id="PreviewSubmitButton">