From df556c259d9c5ef19cad68230197bdae784485c0 Mon Sep 17 00:00:00 2001
From: IanFonzie <ian.fonberg@gov.bc.ca>
Date: Tue, 17 Dec 2024 14:51:17 -0800
Subject: [PATCH] feat: learn more cost recovery components

---
 src/front-end/typescript/config.ts            |  6 ++++
 .../lib/pages/learn-more/code-with-us.tsx     | 32 +++++++++++++++----
 .../typescript/lib/pages/learn-more/index.tsx | 30 +++++++++++++++++
 .../lib/pages/learn-more/sprint-with-us.tsx   | 25 ++++++++++++---
 .../lib/pages/learn-more/team-with-us.tsx     | 26 +++++++++++----
 5 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 src/front-end/typescript/lib/pages/learn-more/index.tsx

diff --git a/src/front-end/typescript/config.ts b/src/front-end/typescript/config.ts
index 0296a26b7..07475a900 100644
--- a/src/front-end/typescript/config.ts
+++ b/src/front-end/typescript/config.ts
@@ -65,3 +65,9 @@ export const CWU_PAYMENT_OPTIONS_URL =
 
 export const TWU_BC_BID_URL =
   "https://bcbid.gov.bc.ca/page.aspx/en/bpm/process_manage_extranet/176305";
+
+export const CWU_COST_RECOVERY_FIGURE = 2000;
+
+export const SWU_COST_RECOVERY_FIGURE = 5000;
+
+export const TWU_COST_RECOVERY_FIGURE = 5000;
diff --git a/src/front-end/typescript/lib/pages/learn-more/code-with-us.tsx b/src/front-end/typescript/lib/pages/learn-more/code-with-us.tsx
index 2ce1adcb1..442f2bff9 100644
--- a/src/front-end/typescript/lib/pages/learn-more/code-with-us.tsx
+++ b/src/front-end/typescript/lib/pages/learn-more/code-with-us.tsx
@@ -1,4 +1,7 @@
-import { CWU_PAYMENT_OPTIONS_URL } from "front-end/config";
+import {
+  CWU_PAYMENT_OPTIONS_URL,
+  CWU_COST_RECOVERY_FIGURE
+} from "front-end/config";
 import { makePageMetadata, prefixPath } from "front-end/lib";
 import { Route, SharedState } from "front-end/lib/app/types";
 import { component as component_ } from "front-end/lib/framework";
@@ -14,8 +17,12 @@ import { Col, Container, Row } from "reactstrap";
 import { COPY } from "shared/config";
 import { ADT, adt } from "shared/lib/types";
 import { GUIDE_AUDIENCE } from "front-end/lib/pages/guide/view";
+import { User } from "shared/lib/resources/user";
+import { formatAmount } from "shared/lib";
+import { CostRecoveryLearnMore } from "front-end/lib/pages/learn-more";
 
 export interface State {
+  viewerUser?: User;
   isVendorAccordionOpen: boolean;
   isPublicSectorAccordionOpen: boolean;
 }
@@ -35,8 +42,9 @@ const init: component_.page.Init<
   State,
   InnerMsg,
   Route
-> = () => [
+> = ({ shared }) => [
   {
+    viewerUser: shared.session?.user,
     isVendorAccordionOpen: true,
     isPublicSectorAccordionOpen: false
   },
@@ -57,7 +65,7 @@ const update: component_.page.Update<State, InnerMsg, Route> = ({
   }
 };
 
-const TitleView: component_.base.View = () => {
+const TitleView: component_.page.View<State, InnerMsg, Route> = ({ state }) => {
   return (
     <div className="bg-c-learn-more-bg pt-4 pb-6 pb-md-7">
       <Container>
@@ -73,10 +81,22 @@ const TitleView: component_.base.View = () => {
               organizations in {COPY.region.name.long} to pay developers for
               code.
             </p>
+            <CostRecoveryLearnMore user={state.viewerUser}>
+              <>
+                *Code With Us is funded via Cost Recovery and charges{" "}
+                <b className="font-size-large">
+                  {formatAmount(CWU_COST_RECOVERY_FIGURE, "$")} CAD
+                </b>{" "}
+                per competition.
+              </>
+            </CostRecoveryLearnMore>
           </Col>
-          <Col md="4">
+          <Col md="4" className="align-self-end">
             <img
-              style={{ maxWidth: "250px" }}
+              style={{
+                maxWidth: "250px",
+                transform: "translateY(-48px)"
+              }}
               className="d-none d-md-block position-absolute ml-6"
               src={prefixPath(
                 "/images/illustrations/code_with_us_learn_more.svg"
@@ -256,7 +276,7 @@ const view: component_.page.View<State, InnerMsg, Route> = ({
 }) => {
   return (
     <div className="d-flex flex-column flex-grow-1">
-      <TitleView />
+      <TitleView state={state} dispatch={dispatch} />
       <VendorView state={state} dispatch={dispatch} />
       <PublicSectorView state={state} dispatch={dispatch} />
       <div className="flex-grow-1 bg-white"></div>
diff --git a/src/front-end/typescript/lib/pages/learn-more/index.tsx b/src/front-end/typescript/lib/pages/learn-more/index.tsx
new file mode 100644
index 000000000..d6b1858d8
--- /dev/null
+++ b/src/front-end/typescript/lib/pages/learn-more/index.tsx
@@ -0,0 +1,30 @@
+import { component } from "front-end/lib/framework";
+import Link from "front-end/lib/views/link";
+import React from "react";
+import { ReactElement } from "react";
+import { Alert } from "reactstrap";
+import {
+  isPublicSectorEmployee,
+  User,
+  UserType
+} from "shared/lib/resources/user";
+
+type CostRecoveryLearnMoreProps = {
+  children: ReactElement;
+  user?: User;
+};
+
+export const CostRecoveryLearnMore: component.base.View<
+  CostRecoveryLearnMoreProps,
+  ReactElement | null
+> = ({ children, user }) => {
+  return isPublicSectorEmployee(user ?? { type: UserType.Vendor }) ? (
+    <Alert className="mb-0 mt-4 mr-5" color="primary" fade={false}>
+      <div style={{ color: "black" }}>{children}</div>
+      <Link>
+        See Service Level Agreement for more details on Cost Recovery and
+        Services provided
+      </Link>
+    </Alert>
+  ) : null;
+};
diff --git a/src/front-end/typescript/lib/pages/learn-more/sprint-with-us.tsx b/src/front-end/typescript/lib/pages/learn-more/sprint-with-us.tsx
index 3cac3f610..2d396ca54 100644
--- a/src/front-end/typescript/lib/pages/learn-more/sprint-with-us.tsx
+++ b/src/front-end/typescript/lib/pages/learn-more/sprint-with-us.tsx
@@ -13,8 +13,13 @@ import { Col, Container, Row } from "reactstrap";
 import { COPY, VENDOR_IDP_NAME } from "shared/config";
 import { ADT, adt } from "shared/lib/types";
 import { GUIDE_AUDIENCE } from "front-end/lib/pages/guide/view";
+import { CostRecoveryLearnMore } from "front-end/lib/pages/learn-more";
+import { formatAmount } from "shared/lib";
+import { SWU_COST_RECOVERY_FIGURE } from "front-end/config";
+import { User } from "shared/lib/resources/user";
 
 export interface State {
+  viewerUser?: User;
   isWhatToExpectAccordionOpen: boolean;
   isHowToApplyAccordionOpen: boolean;
 }
@@ -34,8 +39,9 @@ const init: component_.page.Init<
   State,
   InnerMsg,
   Route
-> = () => [
+> = ({ shared }) => [
   {
+    viewerUser: shared.session?.user,
     isWhatToExpectAccordionOpen: true,
     isHowToApplyAccordionOpen: true
   },
@@ -56,7 +62,7 @@ const update: component_.page.Update<State, InnerMsg, Route> = ({
   }
 };
 
-const TitleView: component_.base.View = () => {
+const TitleView: component_.page.View<State, InnerMsg, Route> = ({ state }) => {
   return (
     <div className="bg-c-learn-more-bg pt-4 pb-6 pb-md-7">
       <Container>
@@ -71,10 +77,19 @@ const TitleView: component_.base.View = () => {
               <em>Sprint With Us</em> is a procurement mechanism that allows the{" "}
               {COPY.gov.name.short} to procure Agile software development teams.
             </p>
+            <CostRecoveryLearnMore user={state.viewerUser}>
+              <>
+                *Sprint With Us is funded via Cost Recovery and charges{" "}
+                <b className="font-size-large">
+                  {formatAmount(SWU_COST_RECOVERY_FIGURE, "$")} CAD
+                </b>{" "}
+                per competition.
+              </>
+            </CostRecoveryLearnMore>
           </Col>
-          <Col md="4">
+          <Col md="4" className="align-self-end">
             <img
-              style={{ maxWidth: "213px" }}
+              style={{ maxWidth: "213px", transform: "translateY(-48px)" }}
               className="d-none d-md-block position-absolute mt-n5 ml-6"
               src={prefixPath(
                 "/images/illustrations/sprint_with_us_learn_more.svg"
@@ -286,7 +301,7 @@ const view: component_.page.View<State, InnerMsg, Route> = ({
 }) => {
   return (
     <div className="d-flex flex-column flex-grow-1">
-      <TitleView />
+      <TitleView state={state} dispatch={dispatch} />
       <WhatToExpectView state={state} dispatch={dispatch} />
       <HowToApplyView state={state} dispatch={dispatch} />
       <div className="flex-grow-1 bg-white"></div>
diff --git a/src/front-end/typescript/lib/pages/learn-more/team-with-us.tsx b/src/front-end/typescript/lib/pages/learn-more/team-with-us.tsx
index 42e58a508..41106cf0b 100644
--- a/src/front-end/typescript/lib/pages/learn-more/team-with-us.tsx
+++ b/src/front-end/typescript/lib/pages/learn-more/team-with-us.tsx
@@ -1,4 +1,4 @@
-import { TWU_BC_BID_URL } from "front-end/config";
+import { TWU_BC_BID_URL, TWU_COST_RECOVERY_FIGURE } from "front-end/config";
 import { makePageMetadata, prefixPath } from "front-end/lib";
 import { Route, SharedState } from "front-end/lib/app/types";
 import { component as component_ } from "front-end/lib/framework";
@@ -18,8 +18,12 @@ import ALL_SERVICE_AREAS from "shared/lib/data/service-areas";
 import { ADT, adt } from "shared/lib/types";
 import { GUIDE_AUDIENCE } from "front-end/lib/pages/guide/view";
 import { twuServiceAreaToTitleCase } from "../opportunity/team-with-us/lib";
+import { CostRecoveryLearnMore } from "front-end/lib/pages/learn-more";
+import { formatAmount } from "shared/lib";
+import { User } from "shared/lib/resources/user";
 
 export interface State {
+  viewerUser?: User;
   isVendorAccordionOpen: boolean;
   isPublicSectorAccordionOpen: boolean;
 }
@@ -39,8 +43,9 @@ const init: component_.page.Init<
   State,
   InnerMsg,
   Route
-> = () => [
+> = ({ shared }) => [
   {
+    viewerUser: shared.session?.user,
     isVendorAccordionOpen: true,
     isPublicSectorAccordionOpen: false
   },
@@ -61,7 +66,7 @@ const update: component_.page.Update<State, InnerMsg, Route> = ({
   }
 };
 
-const TitleView: component_.base.View = () => {
+const TitleView: component_.page.View<State, InnerMsg, Route> = ({ state }) => {
   return (
     <div className="bg-c-learn-more-bg pt-4 pb-6 pb-md-7">
       <Container>
@@ -77,10 +82,19 @@ const TitleView: component_.base.View = () => {
               {COPY.gov.name.short} to procure individual resources for Agile
               software development teams.
             </p>
+            <CostRecoveryLearnMore user={state.viewerUser}>
+              <>
+                *Team With Us is funded via Cost Recovery and charges{" "}
+                <b className="font-size-large">
+                  {formatAmount(TWU_COST_RECOVERY_FIGURE, "$")} CAD
+                </b>{" "}
+                per competition.
+              </>
+            </CostRecoveryLearnMore>
           </Col>
-          <Col md="4">
+          <Col md="4" className="align-self-end">
             <img
-              style={{ maxWidth: "250px" }}
+              style={{ maxWidth: "250px", transform: "translateY(-48px)" }}
               className="d-none d-md-block position-absolute ml-6"
               src={prefixPath(
                 "/images/illustrations/team_with_us_learn_more.svg"
@@ -353,7 +367,7 @@ const view: component_.page.View<State, InnerMsg, Route> = ({
 }) => {
   return (
     <div className="d-flex flex-column flex-grow-1">
-      <TitleView />
+      <TitleView state={state} dispatch={dispatch} />
       <VendorView state={state} dispatch={dispatch} />
       <PublicSectorView state={state} dispatch={dispatch} />
       <div className="flex-grow-1 bg-white"></div>