Revert "Revert "PROD Deploy 1/27 (#1688)" (#1689)"

This reverts commit dd50ae9.

.env.example

@@ -0,0 +1,4 @@
+# Environment Variables for Local Development
+TEST_ADMIN_USERNAME=[email protected]
+TEST_ADMIN_PASSWORD=your_admin_password
+APP_API_URL=http://localhost:3000

.github/CODEOWNERS

@@ -1 +1 @@
-* @sashamaryl @mertbagt @nesanders @mvictor55 @timblais @alexjball @Mephistic
+* @sashamaryl @mertbagt @nesanders @mvictor55 @timblais @alexjball @Mephistic @kiminkim724

.gitignore

@@ -14,6 +14,7 @@
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.env
 
 .next/
 .eslintcache

.prettierignore

@@ -12,4 +12,5 @@ analysis/data
 dist
 *.handlebars
 coverage
-storybook-static
+storybook-static
+llm

README.md

@@ -79,7 +79,25 @@ Install the [Redux DevTools](https://chrome.google.com/webstore/detail/redux-dev
 
 MAPLE uses Jest for unit and integration testing, and Playwright for e2e testing.
 
-To start running tests, use one of the following commands:
+Environment Setup for Testing.
+
+To set up your environment for testing, make sure you have a .env file configured with the necessary variables. You can create it by copying the provided .env.example template:
+
+```
+cp .env.example .env
+```
+
+This file includes placeholders for key environment variables, which you should customize as needed:
+
+```
+TEST_ADMIN_USERNAME: Username for admin testing.
+TEST_ADMIN_PASSWORD: Password for admin testing.
+APP_API_URL: The base URL for the application API (default is http://localhost:3000).
+```
+
+Running Tests.
+
+Once your environment is set up, you can start running tests with one of the following commands:
 
 - `yarn test:integration [--watch] [-t testNamePattern] [my/feature.test.ts]`: Run integration tests in `components/` and `tests/integration/`. These tests run against the full local application -- start it with `yarn up`. You can use `--watch` to rerun your tests as you change them and filter by test name and file.
 - `yarn test:e2e`: Run e2e tests in `tests/e2e` with the Playwright UI

components/AboutSectionInfoCard/AboutInfoCard.tsx

@@ -21,7 +21,7 @@ export default function AboutInfoCard({ title, bodytext }: AboutInfoCardProps) {
       <Card className="h-100 bg-white">
         <StyledCardHeader
           forwardedAs="h3"
-          className="text-center align-self-center bg-info text-white rounded-0 border-0 mb-n3 overflow-visible"
+          className="text-center align-self-center bg-warning text-white rounded-0 border-0 mb-n3 overflow-visible"
         >
           {title}
         </StyledCardHeader>

components/Card/CardTitle.tsx

@@ -1,44 +1,212 @@
+import { useTranslation } from "next-i18next"
 import { ReactElement } from "react"
 import CardBootstrap from "react-bootstrap/Card"
+import { formatBillId } from "components/formatting"
+import { Internal } from "components/links"
 
 interface CardTitleProps {
+  authorUid?: string
+  billId?: string
+  court?: string
   header?: string
   subheader?: string
   timestamp?: string
   imgSrc?: string
-  imgTitle?: string
   inHeaderElement?: ReactElement
+  isBillMatch?: boolean
+  isUserMatch?: boolean
+  type?: string
+  userRole?: string
 }
 
 export const CardTitle = (props: CardTitleProps) => {
-  const { header, subheader, timestamp, imgSrc, imgTitle, inHeaderElement } =
-    props
+  const {
+    authorUid,
+    billId,
+    court,
+    header,
+    isBillMatch,
+    isUserMatch,
+    subheader,
+    type,
+    userRole
+  } = props
+
   return (
-    <CardBootstrap.Body
-      className={`align-items-center bg-secondary d-flex text-white`}
-    >
-      <div className="justify-content-middle d-flex flex-column align-items-center">
-        {imgSrc && <img alt="" src={imgSrc} width="75" height="75" />}
-        <div className="mt-1">{imgTitle}</div>
-      </div>
-      <CardBootstrap.Body>
-        {header && (
-          <CardBootstrap.Title className={`fs-4 lh-sm mb-1`}>
-            {header}
-          </CardBootstrap.Title>
-        )}
-        {subheader && (
-          <CardBootstrap.Text className={`fs-5 lh-sm mb-1`}>
-            {subheader}
-          </CardBootstrap.Text>
-        )}
-        {timestamp && (
-          <CardBootstrap.Text className={`fs-6 lh-sm`}>
-            {timestamp}
-          </CardBootstrap.Text>
-        )}
+    <CardBootstrap.Body className={`align-items-center d-flex px-2 pt-2 pb-0`}>
+      <CardHeaderImg type={type} userRole={userRole} />
+      <CardBootstrap.Body className="px-3 py-0">
+        <CardTitleHeadline
+          authorUid={authorUid}
+          billId={billId}
+          court={court}
+          header={header}
+          subheader={subheader}
+          type={type}
+        />
+        <CardTitleFollowing
+          billId={billId}
+          header={header}
+          subheader={subheader}
+          isBillMatch={isBillMatch}
+          isUserMatch={isUserMatch}
+          type={type}
+        />
       </CardBootstrap.Body>
-      {inHeaderElement && inHeaderElement}
     </CardBootstrap.Body>
   )
 }
+
+const CardHeaderImg = (props: CardTitleProps) => {
+  const { type, userRole } = props
+
+  let avatar = `individualUser.svg`
+  if (userRole == `organization`) {
+    avatar = `OrganizationUser.svg`
+  }
+
+  switch (type) {
+    case "testimony":
+      return (
+        <div className="justify-content-middle d-flex flex-column align-items-center">
+          <img alt="capitol building" src={avatar} width="32" height="32" />
+        </div>
+      )
+    case "bill":
+      return (
+        <div className="justify-content-middle d-flex flex-column align-items-center">
+          <img
+            alt="capitol building"
+            src={`/images/bill-capitol.svg`}
+            width="32"
+            height="32"
+          />
+        </div>
+      )
+    default:
+      return <></>
+  }
+}
+
+const CardTitleHeadline = (props: CardTitleProps) => {
+  const { authorUid, billId, court, header, subheader, type } = props
+  const { t } = useTranslation("common")
+
+  switch (type) {
+    case "testimony":
+      return (
+        <>
+          {header && subheader && (
+            <CardBootstrap.Title
+              className={`align-items-start fs-6 lh-sm mb-1 text-secondary`}
+            >
+              <Internal href={`/profile?id=${authorUid}`}>
+                <strong>{subheader}</strong>
+              </Internal>
+
+              {t("newsfeed.endorsed")}
+              <a href={`/bills/${court}/${billId}`}>
+                {billId && <strong>{formatBillId(billId)}</strong>}
+              </a>
+            </CardBootstrap.Title>
+          )}
+        </>
+      )
+    case "bill":
+      return (
+        <>
+          {header && (
+            <CardBootstrap.Title
+              className={`align-items-start fs-6 lh-sm mb-1 text-secondary`}
+            >
+              {billId && (
+                <a href={`/bills/${court}/${billId}`}>
+                  <strong>{formatBillId(billId)}</strong>
+                </a>
+              )}{" "}
+              {subheader && (
+                <>
+                  {t("newsfeed.actionUpdate")}
+                  {subheader}
+                </>
+              )}
+            </CardBootstrap.Title>
+          )}
+        </>
+      )
+    default:
+      return (
+        <CardBootstrap.Title
+          className={`align-items-start fs-6 lh-sm mb-1 text-secondary`}
+        >
+          <strong>{header}</strong>
+        </CardBootstrap.Title>
+      )
+  }
+}
+
+const CardTitleFollowing = (props: CardTitleProps) => {
+  const { billId, header, isBillMatch, isUserMatch, subheader, type } = props
+  const { t } = useTranslation("common")
+
+  if (type == ``) {
+    return <></>
+  } else if (type === `bill`) {
+    return (
+      <>
+        {header && (
+          <CardBootstrap.Title
+            className={`align-items-start fs-6 lh-sm mb-1 text-body-tertiary`}
+          >
+            {isBillMatch ? (
+              <>{t("newsfeed.follow")}</>
+            ) : (
+              <>{t("newsfeed.notFollow")}</>
+            )}
+            {billId && <strong>{formatBillId(billId)}</strong>}
+          </CardBootstrap.Title>
+        )}
+      </>
+    )
+  } else if (isBillMatch && isUserMatch) {
+    return (
+      <CardBootstrap.Title
+        className={`align-items-start fs-6 lh-sm mb-1 text-body-tertiary`}
+      >
+        {t("newsfeed.follow")}
+        {billId && <strong>{formatBillId(billId)}</strong>}
+        {t("newsfeed.and")}
+        {subheader}
+      </CardBootstrap.Title>
+    )
+  } else if (isBillMatch === true && isUserMatch === false) {
+    return (
+      <CardBootstrap.Title
+        className={`align-items-start fs-6 lh-sm mb-1 text-body-tertiary`}
+      >
+        {t("newsfeed.follow")}
+        {billId && <strong>{formatBillId(billId)}</strong>}
+      </CardBootstrap.Title>
+    )
+  } else if (isBillMatch === false && isUserMatch === true) {
+    return (
+      <CardBootstrap.Title
+        className={`align-items-start fs-6 lh-sm mb-1 text-body-tertiary`}
+      >
+        {t("newsfeed.follow")}
+        {subheader}
+      </CardBootstrap.Title>
+    )
+  } else {
+    return (
+      <CardBootstrap.Title
+        className={`align-items-start fs-6 lh-sm mb-1 text-body-tertiary`}
+      >
+        {t("newsfeed.notFollowEither")}
+        {billId && <strong>{formatBillId(billId)}</strong>}
+        {t("newsfeed.or")}
+        {subheader}
+      </CardBootstrap.Title>
+    )
+  }
+}