Fix: Scenario #2 for Email refactoring/improving according to docs (Private Cloud)

app/api/private-cloud/decision/[licencePlate]/route.ts

@@ -3,12 +3,12 @@ import { PermissionsEnum } from '@/types/permissions';
 import { z } from 'zod';
 import { PrivateCloudDecisionRequestBodySchema } from '@/schema';
 import makeDecisionRequest, {
-  PrivateCloudRequestWithRequestedProject,
+  PrivateCloudRequestWithProjectAndRequestedProject,
 } from '@/request-actions/private-cloud/decision-request';
 import createApiHandler from '@/core/api-handler';
 import { sendPrivateCloudNatsMessage } from '@/services/nats';
 import { subscribeUsersToMautic } from '@/services/mautic';
-import { sendRequestRejectionEmails } from '@/services/ches/private-cloud/email-handler';
+import { sendRequestRejectionEmails, sendRequestApprovalEmails } from '@/services/ches/private-cloud/email-handler';
 import { wrapAsync } from '@/helpers/runtime';
 import { BadRequestResponse, OkResponse, UnauthorizedResponse } from '@/core/responses';
 
@@ -26,7 +26,7 @@ export const POST = apiHandler(async ({ pathParams, body, session }) => {
   const { licencePlate } = pathParams;
   const { decision, decisionComment, ...requestedProjectFormData } = body;
 
-  const request: PrivateCloudRequestWithRequestedProject = await makeDecisionRequest(
+  const request: PrivateCloudRequestWithProjectAndRequestedProject = await makeDecisionRequest(
     licencePlate,
     decision,
     decisionComment,
@@ -40,7 +40,7 @@ export const POST = apiHandler(async ({ pathParams, body, session }) => {
 
   if (request.decisionStatus !== DecisionStatus.APPROVED) {
     // Send rejection email, message will need to be passed
-    wrapAsync(() => sendRequestRejectionEmails(request.requestedProject, decisionComment));
+    wrapAsync(() => sendRequestRejectionEmails(request, decisionComment));
 
     return OkResponse(`Request for ${request.licencePlate} successfully created as rejected.`);
   }
@@ -71,8 +71,9 @@ export const POST = apiHandler(async ({ pathParams, body, session }) => {
   // Subscribe users to Mautic
   await subscribeUsersToMautic(users, request.requestedProject.cluster, 'Private');
 
-  // TODO: revisit to delete for good
-  // sendRequestApprovalEmails(request);
+  if (request.type == 'EDIT') {
+    sendRequestApprovalEmails(request);
+  }
 
   return OkResponse(`Decision request for ${request.licencePlate} successfully created.`);
 });

app/api/private-cloud/provision/[licencePlate]/route.ts

@@ -15,7 +15,7 @@ const apiHandler = createApiHandler({
   roles: [],
   validations: { pathParams: pathParamSchema },
 });
-export const PUT = apiHandler(async ({ pathParams, session }) => {
+export const PUT = apiHandler(async ({ pathParams }) => {
   const { licencePlate } = pathParams;
 
   const request = await prisma.privateCloudRequest.findFirst({
@@ -30,7 +30,7 @@ export const PUT = apiHandler(async ({ pathParams, session }) => {
   });
 
   if (!request) {
-    return NotFoundResponse('No requetst found for this licece plate.');
+    return NotFoundResponse('No request found for this license plate.');
   }
 
   const updateRequest = prisma.privateCloudRequest.update({
@@ -75,6 +75,8 @@ export const PUT = apiHandler(async ({ pathParams, session }) => {
     },
   });
 
-  wrapAsync(() => sendProvisionedEmails(project as PrivateCloudRequestedProjectWithContacts));
+  if (request.type == 'CREATE') {
+    await wrapAsync(() => sendProvisionedEmails(project as PrivateCloudRequestedProjectWithContacts));
+  }
   return OkResponse(`Successfully marked ${licencePlate} as provisioned.`);
 });

components/modal/Comment.tsx

@@ -24,6 +24,14 @@ export default function Modal({
     setComment(comm);
   };
 
+  const showCommentsBox = () => {
+    if (action === 'APPROVE' && (type?.toLowerCase() === 'create' || type?.toLowerCase() === 'edit')) {
+      return false;
+    }
+
+    return true;
+  };
+
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
@@ -68,7 +76,7 @@ export default function Modal({
                       : `Are you sure you want to reject this ${type?.toLocaleLowerCase()} product request?`}
                   </Dialog.Title>
                 </div>
-                {!(action === 'APPROVE' && type?.toLowerCase() === 'create') && (
+                {showCommentsBox() && (
                   <>
                     <p className="pt-2 font-bcsans text-sm text-gray-900">
                       Please provide your final comments to be shared.

docs/email-scenarios-private-cloud.md

@@ -65,18 +65,14 @@ flowchart LR
 - **3a. Approval sent to PO/TLs** containing:
    <ol type="a">
       <li>Product Details (Name, Description, Ministry, Contacts of PO/TL(s))</li>
-      <li>Namespace Details (Cluster, Link to all four namespaces, Default values of namespaces)</li>
-      <li>Security Tools Info</li>
-      <li>Artifactory Info</li>
-      <li>Vault Info</li>
-      <li>ACS Info</li>
-      <li>Sysdig Info</li>
+      <li>Namespace Details with Previous and Approved values (Cluster, Link to all four namespaces)</li>
       </ol>
 
 - **3b. Rejection Sub-Scenario** containing:
    <ol type="a">
       <li>Product Details (Name, Description, Ministry, Contacts of PO/TL(s))</li>
       <li>Admin review comments</li>
+      <li>Namespace Details with Previous and Rejected values (Cluster, Link to all four namespaces)</li>
    </ol>
 
 ```mermaid

emails/PrivateCloudAdminRequest.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { samplePrivateRequest } from './_components/Params';
+import { samplePrivateEditRequest } from './_components/Params';
 import NewRequestTemplate from './_templates/private-cloud/AdminEditRequest';
 
 export default function NewRequest() {
-  return <NewRequestTemplate request={samplePrivateRequest} />;
+  return <NewRequestTemplate request={samplePrivateEditRequest} />;
 }

emails/PrivateCloudRequestApproval.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { samplePrivateRequest } from './_components/Params';
+import { samplePrivateEditRequest } from './_components/Params';
 import RequestApprovalTemplate from './_templates/private-cloud/RequestApproval';
 
 export default function RequestApproval() {
-  return <RequestApprovalTemplate request={samplePrivateRequest} />;
+  return <RequestApprovalTemplate request={samplePrivateEditRequest} />;
 }

emails/PrivateCloudRequestRejection.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
-import { samplePrivateRequest } from './_components/Params';
+import { samplePrivateEditRequest } from './_components/Params';
 import RequestRejectionTemplate from './_templates/private-cloud/RequestRejection';
 
 export default function RequestRejection() {
-  const productName = samplePrivateRequest.requestedProject.name;
-  const decisionComment = samplePrivateRequest.decisionComment || undefined;
+  const productName = samplePrivateEditRequest.requestedProject.name;
+  const decisionComment = samplePrivateEditRequest.decisionComment || undefined;
 
-  return <RequestRejectionTemplate productName={productName} decisionComment={decisionComment} />;
+  return (
+    <RequestRejectionTemplate
+      request={samplePrivateEditRequest}
+      productName={productName}
+      decisionComment={decisionComment}
+    />
+  );
 }

emails/_components/Comment.tsx

@@ -10,6 +10,7 @@ export default function Comment({ requestComment, decisionComment }: CommentProp
     <div>
       {requestComment && (
         <div>
+          <Text className="font-semibold">User Comment:</Text>
           <Text>{requestComment}</Text>
         </div>
       )}

emails/_components/Edit/QuotaChanges.tsx

@@ -2,19 +2,25 @@ import { Heading, Link, Text } from '@react-email/components';
 import { QuotaInput } from '@/schema';
 import { defaultCpuOptionsLookup, defaultMemoryOptionsLookup, defaultStorageOptionsLookup } from './quotaLookup';
 
+interface QuotaChangesProps {
+  licencePlate: string;
+  quotaCurrent: QuotaInput;
+  quotaRequested: QuotaInput;
+  type: string;
+  cluster: string;
+  currentLabel?: string;
+  requestedLabel?: string;
+}
+
 export default function QuotaChanges({
   licencePlate,
   quotaCurrent,
   quotaRequested,
   type,
   cluster,
-}: {
-  licencePlate: string;
-  quotaCurrent: QuotaInput;
-  quotaRequested: QuotaInput;
-  type: string;
-  cluster: string;
-}) {
+  currentLabel = 'Current',
+  requestedLabel = 'Requested',
+}: QuotaChangesProps) {
   cluster = cluster.toLowerCase();
   return (
     <div className="mb-4 mr-16">
@@ -28,27 +34,27 @@ export default function QuotaChanges({
       {quotaCurrent.cpu !== quotaRequested.cpu && (
         <div>
           <Text className="mt-4 mb-0 font-semibold h-4">CPU</Text>
-          <Text className="mt-2 mb-0 font-medium h-3">Current Quota</Text>
+          <Text className="mt-2 mb-0 font-medium h-3">{currentLabel} Quota</Text>
           <Text className="mt-1 mb-0 h-4">{defaultCpuOptionsLookup[quotaCurrent.cpu]}</Text>
-          <Text className="mt-2 mb-0 font-medium h-3">Requested Quota</Text>
+          <Text className="mt-2 mb-0 font-medium h-3">{requestedLabel} Quota</Text>
           <Text className="mt-1 mb-0 h-4">{defaultCpuOptionsLookup[quotaRequested.cpu]}</Text>
         </div>
       )}
       {quotaCurrent.memory !== quotaRequested.memory && (
         <div>
           <Text className="mt-6 mb-0 font-semibold h-4">Memory</Text>
-          <Text className="mt-2 mb-0 font-medium h-3">Current Memory</Text>
+          <Text className="mt-2 mb-0 font-medium h-3">{currentLabel} Memory</Text>
           <Text className="mt-1 mb-0 h-4">{defaultMemoryOptionsLookup[quotaCurrent.memory]}</Text>
-          <Text className="mt-2 mb-0 font-medium h-3">Requested Memory</Text>
+          <Text className="mt-2 mb-0 font-medium h-3">{requestedLabel} Memory</Text>
           <Text className="mt-1 mb-0 h-4">{defaultMemoryOptionsLookup[quotaRequested.memory]}</Text>
         </div>
       )}
       {quotaCurrent.storage !== quotaRequested.storage && (
         <div>
           <Text className="mt-6 mb-0 font-semibold h-4">Storage</Text>
-          <Text className="mt-2 mb-0 font-medium h-3">Current Storage</Text>
+          <Text className="mt-2 mb-0 font-medium h-3">{currentLabel} Storage</Text>
           <Text className="mt-1 mb-0 h-4">{defaultStorageOptionsLookup[quotaCurrent.storage]}</Text>
-          <Text className="mt-2 mb-0 font-medium h-3">Requested Storage</Text>
+          <Text className="mt-2 mb-0 font-medium h-3">{requestedLabel} Storage</Text>
           <Text className="mt-1 mb-0 h-4">{defaultStorageOptionsLookup[quotaRequested.storage]}</Text>
         </div>
       )}

emails/_templates/private-cloud/AdminEditRequest.tsx

@@ -1,18 +1,25 @@
-import { PrivateCloudRequestWithRequestedProject } from '@/request-actions/private-cloud/decision-request';
+import { PrivateCloudRequestWithProjectAndRequestedProject } from '@/request-actions/private-cloud/decision-request';
 import * as React from 'react';
 import Header from '../../_components/Header';
 import ProductDetails from '../../_components/ProductDetails';
 import { Body, Button, Heading, Html, Img, Text } from '@react-email/components';
 import { Tailwind } from '@react-email/tailwind';
 import NamespaceDetails from '../../_components/NamespaceDetails';
 import { TailwindConfig } from '../../_components/TailwindConfig';
+import { comparePrivateCloudProjects } from '../../_components/Edit/utils/compare-projects';
+import Comment from '@/emails/_components/Comment';
+import QuotaChanges from '../../_components/Edit/QuotaChanges';
 
 interface EmailProp {
-  request: PrivateCloudRequestWithRequestedProject;
+  request: PrivateCloudRequestWithProjectAndRequestedProject;
 }
 
 const NewRequestTemplate = ({ request }: EmailProp) => {
-  if (!request) return <></>;
+  if (!request || !request.project || !request.requestedProject) return <></>;
+  const current = request.project;
+  const requested = request.requestedProject;
+  const changed = comparePrivateCloudProjects(current, requested);
+  const requestComment = request.requestComment ?? undefined;
 
   return (
     <Html>
@@ -27,7 +34,7 @@ const NewRequestTemplate = ({ request }: EmailProp) => {
                 <Text className="">
                   There is a new request that requires your review. Log in to the Registry to review the details. If you
                   have any questions about the request, the PO and TL contact details are included below and in the
-                  Registry
+                  Registry.
                 </Text>
                 <Button
                   href="https://registry.developer.gov.bc.ca/"
@@ -36,6 +43,9 @@ const NewRequestTemplate = ({ request }: EmailProp) => {
                   Review Request
                 </Button>
               </div>
+              <div className="pb-6 mt-2 mb-2 border-solid border-0 border-b-1 border-slate-300">
+                <Comment requestComment={requestComment} />
+              </div>
               <div>
                 <ProductDetails
                   name={request.requestedProject.name}
@@ -49,6 +59,49 @@ const NewRequestTemplate = ({ request }: EmailProp) => {
               <div>
                 <NamespaceDetails cluster={request.requestedProject.cluster} showNamespaceDetailsTitle={false} />
               </div>
+              <div className="pb-6 mt-4 mb-4 border-solid border-0 border-b-1 border-slate-300">
+                {(changed.productionQuota || changed.testQuota || changed.developmentQuota || changed.toolsQuota) && (
+                  <Heading className="text-lg mb-0 text-black">Quota Changes</Heading>
+                )}
+                <div className="flex flex-row flex-wrap">
+                  {changed.productionQuota && (
+                    <QuotaChanges
+                      licencePlate={`${request.licencePlate}-prod`}
+                      quotaCurrent={current.productionQuota}
+                      quotaRequested={requested.productionQuota}
+                      type="Production"
+                      cluster={current.cluster}
+                    />
+                  )}
+                  {changed.testQuota && (
+                    <QuotaChanges
+                      licencePlate={`${request.licencePlate}-test`}
+                      quotaCurrent={current.testQuota}
+                      quotaRequested={requested.testQuota}
+                      type="Test"
+                      cluster={current.cluster}
+                    />
+                  )}
+                  {changed.developmentQuota && (
+                    <QuotaChanges
+                      licencePlate={`${request.licencePlate}-dev`}
+                      quotaCurrent={current.testQuota}
+                      quotaRequested={requested.testQuota}
+                      type="Development"
+                      cluster={current.cluster}
+                    />
+                  )}
+                  {changed.toolsQuota && (
+                    <QuotaChanges
+                      licencePlate={`${request.licencePlate}-tools`}
+                      quotaCurrent={current.testQuota}
+                      quotaRequested={requested.testQuota}
+                      type="Tools"
+                      cluster={current.cluster}
+                    />
+                  )}
+                </div>
+              </div>
             </div>
           </Body>
         </div>