feat(ui): Sedi: add clickable link to credential description

src/ui/components/CredentialDetailModule/components/CredentialContent.tsx

@@ -33,8 +33,10 @@ import { MultisigMember } from "./MultisigMember";
 import { MemberAcceptStatus } from "./MultisigMember.types";
 import { getProfiles } from "../../../../store/reducers/profileCache";
 import { Avatar } from "../../Avatar";
+import { openBrowserLink } from "../../../utils/openBrowserLink";
 
 const IGNORE_KEYS = ["i", "dt", "d", "u"];
+const DOCUMENTATION_LINK = "https://secure.utah.gov/vitalrecords/index.html";
 
 const RelatedProfile = ({ identifierId }: IssuedIdentifierProps) => {
   const profiles = useAppSelector(getProfiles);
@@ -150,7 +152,13 @@ const CredentialContent = ({
         flatBorder={FlatBorderType.TOP}
         testId="readmore-block"
       >
-        <ReadMore content={cardData.s.description} />
+        <ReadMore content={cardData.s.description}>
+          {cardData.s.title === "Birth Certificate" && (
+            <u onClick={() => openBrowserLink(DOCUMENTATION_LINK)}>
+              {DOCUMENTATION_LINK}
+            </u>
+          )}
+        </ReadMore>
       </CardBlock>
       {joinedCredRequestMembers && joinedCredRequestMembers.length > 0 && (
         <CardDetailsBlock

src/ui/components/ReadMore/ReadMore.scss

@@ -2,9 +2,11 @@
   display: flex;
   flex-direction: column;
 
-  span {
-    margin-bottom: 1.25rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
 
+  span {
     &.clamp {
       white-space: nowrap;
       text-overflow: ellipsis;

src/ui/components/ReadMore/ReadMore.test.tsx

@@ -1,20 +1,38 @@
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { act } from "react";
-import { ReadMore } from "./ReadMore";
 import EN_TRANSLATIONS from "../../../locales/en/en.json";
+import { ReadMore } from "./ReadMore";
 
 describe("ReadMore", () => {
+  beforeEach(() => {
+    window.getComputedStyle = jest.fn().mockReturnValue({ lineHeight: "20px" });
+
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      configurable: true,
+      get() {
+        return this.dataset.testid === "read-more-text" ? 60 : 0;
+      },
+    });
+  });
+
   test("View text when expand and collapse", async () => {
     const text =
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
     const { getByTestId } = render(<ReadMore content={text} />);
+
     expect(getByTestId("read-more-text").innerHTML).toBe(text);
+    await waitFor(() => {
+      expect(getByTestId("read-more-button")).toBeVisible();
+    });
+
     expect(getByTestId("read-more-button").innerHTML).toBe(
       EN_TRANSLATIONS.readmore.more
     );
+
     act(() => {
       fireEvent.click(getByTestId("read-more-button"));
     });
+
     await waitFor(() => {
       expect(getByTestId("read-more-button").innerHTML).toBe(
         EN_TRANSLATIONS.readmore.less

src/ui/components/ReadMore/ReadMore.tsx

@@ -1,15 +1,35 @@
-import { useState } from "react";
-import "./ReadMore.scss";
 import { IonButton } from "@ionic/react";
+import React, { useEffect, useRef, useState } from "react";
 import { i18n } from "../../../i18n";
+import "./ReadMore.scss";
 
-const ReadMore = ({ content }: { content: string }) => {
+const ReadMore = ({
+  content,
+  children,
+}: {
+  content: string;
+  children?: React.ReactNode;
+}) => {
   const [isReadMore, setIsReadMore] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLSpanElement | null>(null);
 
   const toggleReadMore = () => {
     setIsReadMore(!isReadMore);
   };
 
+  useEffect(() => {
+    const el = textRef.current;
+    if (el) {
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+      const maxHeight = lineHeight * 2;
+
+      if (el.scrollHeight > maxHeight + 1) {
+        setIsOverflowing(true);
+      }
+    }
+  }, [content]);
+
   return (
     <div
       data-testid="read-more"
@@ -18,15 +38,19 @@ const ReadMore = ({ content }: { content: string }) => {
       <span
         data-testid="read-more-text"
         className={isReadMore ? "" : "clamp"}
+        ref={textRef}
       >
         {content}
       </span>
-      <IonButton
-        onClick={toggleReadMore}
-        data-testid="read-more-button"
-      >
-        {isReadMore ? i18n.t("readmore.less") : i18n.t("readmore.more")}
-      </IonButton>
+      {children}
+      {isOverflowing && (
+        <IonButton
+          onClick={toggleReadMore}
+          data-testid="read-more-button"
+        >
+          {isReadMore ? i18n.t("readmore.less") : i18n.t("readmore.more")}
+        </IonButton>
+      )}
     </div>
   );
 };

src/ui/pages/NotificationDetails/components/CredentialRequest/CredentialRequest.test.tsx

@@ -10,10 +10,16 @@ import { connectionsForNotificationsValues } from "../../../../__fixtures__/conn
 import { credRequestFix } from "../../../../__fixtures__/credRequestFix";
 import { multisignIdentifierFix } from "../../../../__fixtures__/filteredIdentifierFix";
 import { notificationsFix } from "../../../../__fixtures__/notificationsFix";
+import { revokedCredsFix } from "../../../../__fixtures__/filteredCredsFix";
 import { CredentialRequest } from "./CredentialRequest";
 import { makeTestStore } from "../../../../utils/makeTestStore";
 import { profileCacheFixData } from "../../../../__fixtures__/storeDataFix";
 
+const getIpexApplyDetailsMock = jest.fn(() => Promise.resolve(credRequestFix));
+const getLinkedGroupFromIpexApplyMock = jest.fn();
+const offerAcdcFromApplyMock = jest.fn();
+const dispatchMock = jest.fn();
+
 jest.mock("@ionic/react", () => {
   const actual = jest.requireActual("@ionic/react");
   return {
@@ -29,9 +35,6 @@ jest.mock("@ionic/react", () => {
   };
 });
 
-const getIpexApplyDetailsMock = jest.fn(() => Promise.resolve(credRequestFix));
-const getLinkedGroupFromIpexApplyMock = jest.fn();
-
 jest.mock("../../../../../core/agent/agent", () => ({
   Agent: {
     agent: {
@@ -40,6 +43,10 @@ jest.mock("../../../../../core/agent/agent", () => ({
         getLinkedGroupFromIpexApply: () => getLinkedGroupFromIpexApplyMock(),
         joinMultisigOffer: jest.fn(),
         getOfferedCredentialSaid: jest.fn(),
+        offerAcdcFromApply: (...args: any[]) => offerAcdcFromApplyMock(...args),
+      },
+      auth: {
+        verifySecret: jest.fn().mockResolvedValue(true),
       },
       connections: {
         getConnectionById: jest.fn().mockResolvedValue(undefined),
@@ -48,8 +55,6 @@ jest.mock("../../../../../core/agent/agent", () => ({
   },
 }));
 
-const dispatchMock = jest.fn();
-
 const initialState = {
   stateCache: {
     routes: [TabsRoutePath.NOTIFICATIONS],
@@ -192,6 +197,185 @@ describe("Credential request", () => {
       EN_TRANSLATIONS.tabs.notifications.details.credential.request.alert.text
     );
   });
+
+  test("Auto-submit when only one suitable credential exists", async () => {
+    const storeMocked = {
+      ...makeTestStore(initialState),
+      dispatch: dispatchMock,
+    };
+
+    const history = createMemoryHistory();
+
+    getIpexApplyDetailsMock.mockImplementation(() =>
+      Promise.resolve({
+        ...credRequestFix,
+        credentials: [credRequestFix.credentials[0]],
+      })
+    );
+
+    const { getByText, getByTestId, queryByTestId } = render(
+      <Provider store={storeMocked}>
+        <IonReactMemoryRouter history={history}>
+          <CredentialRequest
+            pageId="notification-details"
+            activeStatus
+            handleBack={jest.fn()}
+            notificationDetails={notificationsFix[4]}
+          />
+        </IonReactMemoryRouter>
+      </Provider>
+    );
+
+    expect(getByTestId("credential-request-spinner-container")).toBeVisible();
+
+    await waitFor(() => {
+      expect(queryByTestId("credential-request-spinner-container")).toBe(null);
+
+      expect(
+        getByText(
+          EN_TRANSLATIONS.tabs.notifications.details.credential.request
+            .information.title
+        )
+      ).toBeVisible();
+    });
+
+    act(() => {
+      fireEvent.click(getByTestId("primary-button-notification-details"));
+    });
+
+    await waitFor(() => {
+      expect(getByTestId("verify-passcode")).toBeVisible();
+    });
+  });
+
+  test("Do not auto-submit when multiple suitable credentials exist", async () => {
+    const storeMocked = {
+      ...makeTestStore(initialState),
+      dispatch: dispatchMock,
+    };
+
+    const history = createMemoryHistory();
+
+    getIpexApplyDetailsMock.mockImplementation(() =>
+      Promise.resolve(credRequestFix)
+    );
+
+    const { getByText, getByTestId, queryByTestId } = render(
+      <Provider store={storeMocked}>
+        <IonReactMemoryRouter history={history}>
+          <CredentialRequest
+            pageId="notification-details"
+            activeStatus
+            handleBack={jest.fn()}
+            notificationDetails={notificationsFix[4]}
+          />
+        </IonReactMemoryRouter>
+      </Provider>
+    );
+
+    expect(getByTestId("credential-request-spinner-container")).toBeVisible();
+
+    await waitFor(() => {
+      expect(queryByTestId("credential-request-spinner-container")).toBe(null);
+
+      expect(
+        getByText(
+          EN_TRANSLATIONS.tabs.notifications.details.credential.request
+            .information.title
+        )
+      ).toBeVisible();
+    });
+
+    act(() => {
+      fireEvent.click(getByTestId("primary-button-notification-details"));
+    });
+
+    await waitFor(() => {
+      expect(
+        getByText(
+          EN_TRANSLATIONS.tabs.notifications.details.credential.request
+            .choosecredential.title
+        )
+      ).toBeVisible();
+    });
+
+    expect(offerAcdcFromApplyMock).not.toHaveBeenCalled();
+  });
+
+  test("Auto-submit when only one suitable credential exists after filtering out revoked", async () => {
+    const stateWithRevokedCreds = {
+      ...initialState,
+      profilesCache: {
+        ...initialState.profilesCache,
+        profiles: {
+          ...initialState.profilesCache.profiles,
+          EMrT7qX0FIMenQoe5pJLahxz_rheks1uIviGW8ch8pfB: {
+            ...initialState.profilesCache.profiles[
+              "EMrT7qX0FIMenQoe5pJLahxz_rheks1uIviGW8ch8pfB"
+            ],
+            credentials: revokedCredsFix,
+          } as any,
+        },
+      },
+    };
+
+    const storeMocked = {
+      ...makeTestStore(stateWithRevokedCreds as any),
+      dispatch: dispatchMock,
+    };
+
+    const history = createMemoryHistory();
+
+    getIpexApplyDetailsMock.mockImplementation(() =>
+      Promise.resolve({
+        ...credRequestFix,
+        credentials: [
+          credRequestFix.credentials[0],
+          {
+            connectionId: "EMrT7qX0FIMenQoe5pJLahxz_rheks1uIviGW8ch8pfB",
+            acdc: {
+              ...credRequestFix.credentials[1].acdc,
+              d: "EBgG1lhkxiv_UQ8IiF2G4j5HQlnT5K5XZy_zRFg_EGCS",
+            },
+          },
+        ],
+      })
+    );
+
+    const { getByText, getByTestId, queryByTestId } = render(
+      <Provider store={storeMocked}>
+        <IonReactMemoryRouter history={history}>
+          <CredentialRequest
+            pageId="notification-details"
+            activeStatus
+            handleBack={jest.fn()}
+            notificationDetails={notificationsFix[4]}
+          />
+        </IonReactMemoryRouter>
+      </Provider>
+    );
+
+    expect(getByTestId("credential-request-spinner-container")).toBeVisible();
+
+    await waitFor(() => {
+      expect(queryByTestId("credential-request-spinner-container")).toBe(null);
+
+      expect(
+        getByText(
+          EN_TRANSLATIONS.tabs.notifications.details.credential.request
+            .information.title
+        )
+      ).toBeVisible();
+    });
+
+    act(() => {
+      fireEvent.click(getByTestId("primary-button-notification-details"));
+    });
+
+    await waitFor(() => {
+      expect(getByTestId("verify-passcode")).toBeVisible();
+    });
+  });
 });
 
 describe("Credential request: Multisig", () => {