Skip to content

Commit

Permalink
Merge pull request #628 from cardano-foundation/feat/DTIS-1103-rareev…
Browse files Browse the repository at this point in the history
…o-credential

feat(ui): New Credential Issuance for RareEvo
  • Loading branch information
sdisalvo-crd authored Aug 2, 2024
2 parents b4ed661 + fc63797 commit bf788f6
Show file tree
Hide file tree
Showing 16 changed files with 605 additions and 131 deletions.
12 changes: 12 additions & 0 deletions src/ui/__fixtures__/shortCredsFix.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,18 @@ const shortCredsFix: CredentialShortDetails[] = [
credentialType: "Qualified vLEI Issuer Credential",
status: CredentialMetadataRecordStatus.PENDING,
},
{
id: "metadata:EKfweht5lOkjaguB5dz42BMkfejhBFIF2-ghumzCJ6nv",
issuanceDate: "2024-01-23T16:03:44.643Z",
credentialType: "Rare EVO 2024 Attendee",
status: CredentialMetadataRecordStatus.CONFIRMED,
},
{
id: "metadata:EKfweht5lOkjaguB5dz42BMkfejhBFIF3-ghumzCJ6nv",
issuanceDate: "2024-01-23T16:03:44.643Z",
credentialType: "Rare EVO 2024 Attendee",
status: CredentialMetadataRecordStatus.PENDING,
},
];

export { shortCredsFix };
Binary file added src/ui/assets/images/rare-evo-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/ui/components/CardSlider/CardSlider.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ describe("Card slider", () => {
});

act(() => {
fireEvent.click(getByTestId("cred-card-template-creds-index-1"));
fireEvent.click(getByTestId("keri-card-template-creds-index-1"));
});

expect(historyPushMock).toBeCalled();
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/CardsStack/CardsStack.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ describe("Cards Stack Component", () => {
</IonReactRouter>
);

const firstCard = await findByTestId("cred-card-template-example-index-0");
const firstCard = await findByTestId("keri-card-template-example-index-0");
await waitFor(() => expect(firstCard).not.toHaveClass("active"));

act(() => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,74 +1,57 @@
import { act, fireEvent, render, waitFor } from "@testing-library/react";
import { act, fireEvent, render } from "@testing-library/react";
import { Provider } from "react-redux";
import { store } from "../../../store";
import { CredentialCardTemplate } from "./CredentialCardTemplate";
import { store } from "../../../store";
import { shortCredsFix } from "../../__fixtures__/shortCredsFix";
import { formatShortDate } from "../../utils/formatters";

describe("CredentialCardTemplate", () => {
it("renders Credential Card Template", async () => {
describe("Credential Card Template", () => {
it("Renders Rare Evo Card Template", async () => {
const handleShowCardDetails = jest.fn();
const { getByText, getByTestId, getByAltText } = render(
<Provider store={store}>
<CredentialCardTemplate
name="name"
index={0}
cardData={shortCredsFix[3]}
cardData={shortCredsFix[5]}
isActive={true}
onHandleShowCardDetails={() => handleShowCardDetails(0)}
/>
</Provider>
);
const card = getByTestId("cred-card-template-name-index-0");
expect(getByText("Qualified vLEI Issuer Credential")).toBeInTheDocument();
expect(getByText("22/01/2024")).toBeInTheDocument();
const card = getByTestId("rare-card-template-name-index-0");
expect(getByText(shortCredsFix[5].credentialType)).toBeInTheDocument();
expect(
getByText(formatShortDate(shortCredsFix[5].issuanceDate))
).toBeInTheDocument();
expect(getByAltText(/card-logo/i)).toBeInTheDocument();
act(() => {
fireEvent.click(card);
});
expect(handleShowCardDetails).toBeCalledTimes(1);
});

it("Click pending card", async () => {
it("Renders Keri Card Template", async () => {
const handleShowCardDetails = jest.fn();
const { getByTestId } = render(
const { getByText, getByTestId, getByAltText } = render(
<Provider store={store}>
<CredentialCardTemplate
name="name"
index={0}
cardData={shortCredsFix[4]}
cardData={shortCredsFix[3]}
isActive={true}
onHandleShowCardDetails={() => handleShowCardDetails(0)}
/>
</Provider>
);
const card = getByTestId("cred-card-template-name-index-0");

const card = getByTestId("keri-card-template-name-index-0");
expect(getByText("Qualified vLEI Issuer Credential")).toBeInTheDocument();
expect(getByText("22/01/2024")).toBeInTheDocument();
expect(getByAltText(/card-logo/i)).toBeInTheDocument();
act(() => {
fireEvent.click(card);
});

expect(handleShowCardDetails).toBeCalledTimes(0);

await waitFor(() => {
expect(getByTestId("alert-confirm")).toBeInTheDocument();
});
});

it("In active card status", async () => {
const handleShowCardDetails = jest.fn();
const { getByTestId } = render(
<Provider store={store}>
<CredentialCardTemplate
name="name"
index={0}
cardData={shortCredsFix[4]}
isActive={false}
onHandleShowCardDetails={() => handleShowCardDetails(0)}
/>
</Provider>
);
const card = getByTestId("cred-card-template-name-index-0");

expect(card.classList.contains("active")).toBe(false);
expect(handleShowCardDetails).toBeCalledTimes(1);
});
});
103 changes: 14 additions & 89 deletions src/ui/components/CredentialCardTemplate/CredentialCardTemplate.tsx
Original file line number Diff line number Diff line change
@@ -1,99 +1,24 @@
import { useState } from "react";
import { IonChip, IonIcon } from "@ionic/react";
import { hourglassOutline } from "ionicons/icons";
import { Alert } from "../Alert";
import { KeriCardTemplate, RareEvoCardTemplate } from "./components";
import { CredentialCardTemplateProps } from "./CredentialCardTemplate.types";
import { CredentialMetadataRecordStatus } from "../../../core/agent/records/credentialMetadataRecord.types";
import { i18n } from "../../../i18n";
import ACDCLogo from "../../../ui/assets/images/keri-acdc.svg";
import KeriBackground from "../../../ui/assets/images/keri-00.svg";
import "./CredentialCardTemplate.scss";
import { formatShortDate } from "../../utils/formatters";

const CredentialCardTemplate = ({
name = "default",
cardData,
isActive,
index = 0,
onHandleShowCardDetails,
pickedCard,
...props
}: CredentialCardTemplateProps) => {
const [alertIsOpen, setAlertIsOpen] = useState(false);

const CredentialCardTemplateStyles = {
zIndex: index,
backgroundImage: `url(${KeriBackground})`,
backgroundSize: "cover",
};

const handleCardClick = () => {
if (cardData.status === CredentialMetadataRecordStatus.PENDING) {
setAlertIsOpen(true);
} else if (onHandleShowCardDetails) {
onHandleShowCardDetails(index);
}
};
if (props.cardData.credentialType === "Rare EVO 2024 Attendee") {
return (
<RareEvoCardTemplate
name={name}
{...props}
/>
);
}

return (
<div
key={index}
data-testid={`cred-card-template${
index !== undefined ? `-${name}-index-${index}` : ""
}`}
className={`cred-card-template ${isActive ? "active" : ""} ${
pickedCard ? "picked-card" : "not-picked"
}`}
onClick={() => handleCardClick()}
style={CredentialCardTemplateStyles}
>
<div className={`cred-card-template-inner ${cardData.status}`}>
<div className="card-header">
<span className="card-logo">
<img
src={ACDCLogo}
alt="card-logo"
/>
</span>
{cardData.status === CredentialMetadataRecordStatus.PENDING ? (
<IonChip>
<IonIcon
icon={hourglassOutline}
color="primary"
/>
<span>{CredentialMetadataRecordStatus.PENDING}</span>
</IonChip>
) : (
<span className="credential-type">{cardData.credentialType}</span>
)}
</div>
<div className="card-footer">
<div className="card-footer-column">
<span className="card-footer-column-label">
{i18n.t("credentials.layout.issued")}
</span>
<span className="card-footer-column-value">
{cardData.status === CredentialMetadataRecordStatus.CONFIRMED ? (
formatShortDate(cardData.issuanceDate)
) : (
<>&nbsp;</>
)}
</span>
</div>
</div>
</div>
{cardData.status === CredentialMetadataRecordStatus.PENDING &&
alertIsOpen && (
<Alert
isOpen={alertIsOpen}
setIsOpen={setAlertIsOpen}
dataTestId="alert-confirm"
headerText={i18n.t("credentials.create.alert.title")}
confirmButtonText={`${i18n.t("credentials.create.alert.confirm")}`}
actionConfirm={() => setAlertIsOpen(false)}
backdropDismiss={false}
/>
)}
</div>
<KeriCardTemplate
name={name}
{...props}
/>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.cred-card-template {
.keri-card-template {
height: calc((100vw - 2.5rem) * (200 / 350));
width: 100%;
padding: 1.25rem 1.56rem;
Expand Down Expand Up @@ -27,7 +27,7 @@
box-shadow: 0px -5px 5px rgba(54, 60, 74, 0.25);
}

.cred-card-template-inner {
.keri-card-template-inner {
height: 100%;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -134,7 +134,7 @@
margin-top: -8.8rem;
}

.cred-card-template-inner {
.keri-card-template-inner {
&.pending {
.card-header {
.card-logo {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { act, fireEvent, render, waitFor } from "@testing-library/react";
import { Provider } from "react-redux";
import { store } from "../../../../../store";
import { KeriCardTemplate } from "./KeriCardTemplate";
import { shortCredsFix } from "../../../../__fixtures__/shortCredsFix";

describe("KeriCardTemplate", () => {
it("renders Keri Card Template", async () => {
const handleShowCardDetails = jest.fn();
const { getByText, getByTestId, getByAltText } = render(
<Provider store={store}>
<KeriCardTemplate
name="name"
index={0}
cardData={shortCredsFix[3]}
isActive={true}
onHandleShowCardDetails={() => handleShowCardDetails(0)}
/>
</Provider>
);
const card = getByTestId("keri-card-template-name-index-0");
expect(getByText("Qualified vLEI Issuer Credential")).toBeInTheDocument();
expect(getByText("22/01/2024")).toBeInTheDocument();
expect(getByAltText(/card-logo/i)).toBeInTheDocument();
act(() => {
fireEvent.click(card);
});
expect(handleShowCardDetails).toBeCalledTimes(1);
});

it("Click pending card", async () => {
const handleShowCardDetails = jest.fn();
const { getByTestId } = render(
<Provider store={store}>
<KeriCardTemplate
name="name"
index={0}
cardData={shortCredsFix[4]}
isActive={true}
onHandleShowCardDetails={() => handleShowCardDetails(0)}
/>
</Provider>
);
const card = getByTestId("keri-card-template-name-index-0");

act(() => {
fireEvent.click(card);
});

expect(handleShowCardDetails).toBeCalledTimes(0);

await waitFor(() => {
expect(getByTestId("alert-confirm")).toBeInTheDocument();
});
});

it("In active card status", async () => {
const handleShowCardDetails = jest.fn();
const { getByTestId } = render(
<Provider store={store}>
<KeriCardTemplate
name="name"
index={0}
cardData={shortCredsFix[4]}
isActive={false}
onHandleShowCardDetails={() => handleShowCardDetails(0)}
/>
</Provider>
);
const card = getByTestId("keri-card-template-name-index-0");

expect(card.classList.contains("active")).toBe(false);
});
});
Loading

0 comments on commit bf788f6

Please sign in to comment.