feat: add cost recovery to program cards

bcgov · Dec 23, 2024 · 9a2120d · 9a2120d
1 parent df556c2
commit 9a2120d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 6 deletions.
diff --git a/src/front-end/typescript/lib/pages/landing.tsx b/src/front-end/typescript/lib/pages/landing.tsx
@@ -1,6 +1,6 @@
 import { makePageMetadata, prefixPath } from "front-end/lib";
 import { Route, SharedState } from "front-end/lib/app/types";
-import { immutable, component as component_ } from "front-end/lib/framework";
+import { component as component_ } from "front-end/lib/framework";
 import * as api from "front-end/lib/http/api";
 import { BulletPoint } from "front-end/lib/views/bullet-point";
 import Icon from "front-end/lib/views/icon";
@@ -19,10 +19,21 @@ import * as cwu from "shared/lib/resources/opportunity/code-with-us";
 import * as swu from "shared/lib/resources/opportunity/sprint-with-us";
 import { adt, ADT } from "shared/lib/types";
 import { OpportunityMetrics } from "shared/lib/resources/metrics";
+import {
+  isPublicSectorEmployee,
+  User,
+  UserType
+} from "shared/lib/resources/user";
+import {
+  CWU_COST_RECOVERY_FIGURE,
+  SWU_COST_RECOVERY_FIGURE,
+  TWU_COST_RECOVERY_FIGURE
+} from "front-end/config";
 
 const IMG_MAX_WIDTH = "550px";
 
 export interface State {
+  viewerUser?: User;
   totalCount: number;
   totalAwarded: number;
 }
@@ -42,9 +53,10 @@ const init: component_.page.Init<
   State,
   InnerMsg,
   Route
-> = () => {
+> = ({ shared }) => {
   return [
     {
+      viewerUser: shared.session?.user,
       totalCount: 0,
       totalAwarded: 0
     },
@@ -61,7 +73,7 @@ const update: component_.page.Update<State, InnerMsg, Route> = ({
       const response = msg.value;
       if (api.isValid(response)) {
         return [
-          immutable(response.value[0]),
+          state.merge(response.value[0]),
           [component_.cmd.dispatch(component_.page.readyMsg())]
         ];
       } else {
@@ -152,7 +164,10 @@ const Stat: component_.base.View<{
   );
 };
 
-const Programs: component_.base.View = () => {
+const Programs: component_.page.View<State, InnerMsg, Route> = ({ state }) => {
+  const userIsGov = isPublicSectorEmployee(
+    state.viewerUser ?? { type: UserType.Vendor }
+  );
   return (
     <div className="bg-c-landing-programs-bg py-7">
       <Container>
@@ -180,6 +195,10 @@ const Programs: component_.base.View = () => {
                 symbol_: rightPlacement(iconLinkSymbol("arrow-right"))
               }
             ]}
+            costRecoveryDetails={{
+              show: userIsGov,
+              amount: CWU_COST_RECOVERY_FIGURE
+            }}
           />
           <ProgramCard
             img={prefixPath("/images/illustrations/team_with_us.svg")}
@@ -203,10 +222,15 @@ const Programs: component_.base.View = () => {
                 symbol_: rightPlacement(iconLinkSymbol("arrow-right"))
               }
             ]}
+            costRecoveryDetails={{
+              show: userIsGov,
+              amount: TWU_COST_RECOVERY_FIGURE
+            }}
           />
           <ProgramCard
             img={prefixPath("/images/illustrations/sprint_with_us.svg")}
             title="Sprint With Us"
+            className="mb-4 mb-md-0"
             description={
               <div>
                 <div>
@@ -228,6 +252,10 @@ const Programs: component_.base.View = () => {
                 symbol_: rightPlacement(iconLinkSymbol("arrow-right"))
               }
             ]}
+            costRecoveryDetails={{
+              show: userIsGov,
+              amount: SWU_COST_RECOVERY_FIGURE
+            }}
           />
         </Row>
       </Container>
@@ -465,7 +493,7 @@ const view: component_.page.View<State, InnerMsg, Route> = (props) => {
     <div>
       <Hero {...props} />
       <Stats {...props} />
-      <Programs />
+      <Programs {...props} />
       <AppInfo />
       <VendorRoleInfo />
       <GovRoleInfo />

diff --git a/src/front-end/typescript/lib/pages/opportunity/create.tsx b/src/front-end/typescript/lib/pages/opportunity/create.tsx
@@ -12,6 +12,11 @@ import * as swu from "shared/lib/resources/opportunity/sprint-with-us";
 import { UserType } from "shared/lib/resources/user";
 import { adt, ADT } from "shared/lib/types";
 import { GUIDE_AUDIENCE } from "front-end/lib/pages/guide/view";
+import {
+  CWU_COST_RECOVERY_FIGURE,
+  TWU_COST_RECOVERY_FIGURE,
+  SWU_COST_RECOVERY_FIGURE
+} from "front-end/config";
 
 export interface State {
   empty: true;
@@ -100,6 +105,7 @@ const view: component_.page.View<State, InnerMsg, Route> = () => {
               color: "primary" as TextColor
             }
           ]}
+          costRecoveryDetails={{ show: true, amount: CWU_COST_RECOVERY_FIGURE }}
         />
         <ProgramCard
           img={prefixPath("/images/illustrations/team_with_us.svg")}
@@ -132,10 +138,12 @@ const view: component_.page.View<State, InnerMsg, Route> = () => {
               color: "primary" as TextColor
             }
           ]}
+          costRecoveryDetails={{ show: true, amount: TWU_COST_RECOVERY_FIGURE }}
         />
         <ProgramCard
           img={prefixPath("/images/illustrations/sprint_with_us.svg")}
           title="Sprint With Us"
+          className="mb-4 mb-md-0"
           description={
             <span>
               Use a <em>Sprint With Us</em> opportunity to procure an Agile
@@ -163,6 +171,7 @@ const view: component_.page.View<State, InnerMsg, Route> = () => {
               color: "primary" as TextColor
             }
           ]}
+          costRecoveryDetails={{ show: true, amount: SWU_COST_RECOVERY_FIGURE }}
         />
       </Row>
     </div>

diff --git a/src/front-end/typescript/lib/views/program-card.tsx b/src/front-end/typescript/lib/views/program-card.tsx
@@ -2,6 +2,7 @@ import { component } from "front-end/lib/framework";
 import Link, { ButtonProps } from "front-end/lib/views/link";
 import React from "react";
 import { Col } from "reactstrap";
+import { formatAmount } from "shared/lib";
 
 export interface Props {
   img: string;
@@ -10,6 +11,10 @@ export interface Props {
   className?: string;
   links: ButtonProps[];
   wideLinks?: boolean;
+  costRecoveryDetails: {
+    amount: number;
+    show: boolean;
+  };
 }
 
 /**
@@ -24,7 +29,8 @@ const ProgramCard: component.base.View<Props> = ({
   description,
   links,
   wideLinks,
-  className
+  className,
+  costRecoveryDetails
 }) => {
   return (
     <Col xs="12" md="4" className={className}>
@@ -41,6 +47,21 @@ const ProgramCard: component.base.View<Props> = ({
           className={`mt-auto d-flex flex-column ${
             wideLinks ? "align-self-stretch" : ""
           } `}>
+          {costRecoveryDetails.show ? (
+            <div className="mx-auto mb-3">
+              Price:{" "}
+              <b className="font-size-large">
+                {formatAmount(costRecoveryDetails.amount, "$")} CAD
+              </b>
+              <br />
+              via Cost Recovery
+              <div>
+                <Link className="font-size-small no-wrap">
+                  See Service Level Agreement for details
+                </Link>
+              </div>
+            </div>
+          ) : null}
           {links.map((link, index) => (
             <Link
               {...link}