@learncard/react 2.10.3 → 2.10.4

package/src/components/MiniVCThumbnail/__tests__/MiniVCThumbnail.test.tsx

@@ -0,0 +1,59 @@
+import { vi } from 'vitest';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+
+import MiniVCThumbnail from '../MiniVCThumbnail';
+
+describe('Running Tests for MiniVCThumbnail', () => {
+    test('Checks MiniVCThumbnail renders with props', () => {
+        const handleOnClick = vi.fn();
+
+        const { getByTestId, getByAltText } = render(
+            <MiniVCThumbnail
+                title="This is a title!"
+                createdAt="05/01/2022"
+                issuerImage="https://issuerimage.png"
+                badgeImage="https://badgeimage.png"
+                listView={false}
+                onClick={handleOnClick}
+            />
+        );
+
+        fireEvent.click(getByTestId('mini-vc-thumbnail'));
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+
+        const title = getByTestId('mini-vc-thumbnail-title');
+        expect(title).toHaveTextContent('This is a title!');
+
+        const createdAt = getByTestId('mini-vc-thumbnail-createdAt');
+        expect(createdAt).toHaveTextContent('05/01/2022');
+
+        const issuerImage = getByAltText('issuer image');
+        expect(issuerImage).toHaveAttribute('src', 'https://issuerimage.png');
+
+        const badgeImage = getByAltText('badge image');
+        expect(badgeImage).toHaveAttribute('src', 'https://badgeimage.png');
+    });
+
+    test('Checks MiniVCThumbnail renders without props', () => {
+        const handleOnClick = vi.fn();
+
+        const { getByTestId, queryByTestId } = render(<MiniVCThumbnail />);
+
+        fireEvent.click(getByTestId('mini-vc-thumbnail'));
+        expect(handleOnClick).not.toHaveBeenCalledTimes(1);
+
+        const title = getByTestId('mini-vc-thumbnail-title');
+        expect(title).toBeEmptyDOMElement();
+
+        const createdAt = getByTestId('mini-vc-thumbnail-createdAt');
+        expect(createdAt).toBeEmptyDOMElement();
+
+        const issuerImage = queryByTestId('mini-vc-thumbnail-issuer');
+        expect(issuerImage).not.toBeInTheDocument();
+
+        const badgeImage = queryByTestId('mini-vc-thumbnail-badge');
+        expect(badgeImage).not.toBeInTheDocument();
+    });
+});

package/src/components/MiniVCThumbnail/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './MiniVCThumbnail';
+export * from './types';

package/src/components/MiniVCThumbnail/types.ts

@@ -0,0 +1,32 @@
+export type MiniVCThumbnailProps = {
+    /**
+     * thumbnail title
+     * @type {string}
+     */
+    title?: string;
+    /**
+     * issue date
+     * @type {string}
+     */
+    createdAt?: string;
+    /**
+     * issuer image
+     * @type {string}
+     */
+    issuerImage?: string;
+    /**
+     * badge image
+     * @type {string}
+     */
+    badgeImage?: string;
+    /**
+     * custom className
+     * @type {string}
+     */
+    className?: string;
+    /**
+     *
+     * @type {function}
+     */
+    onClick?: () => void;
+};

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import Notification from './Notification';
+import { NotificationProps } from './types';
+import { NotificationTypeEnum } from '../../constants/notifications';
+
+export default {
+    title: 'Notification',
+    component: Notification,
+    argTypes: {},
+} as Meta<typeof Notification>;
+
+const Template: Story<NotificationProps> = args => <Notification {...args} />;
+
+export const NotificationTest = Template.bind({});
+NotificationTest.args = {
+    title: 'Title of Credential',
+    issuerImage:
+        'https://upload.wikimedia.org/wikipedia/en/thumb/a/a8/Jack_Daniels_Logo.svg/1200px-Jack_Daniels_Logo.svg.png',
+    issuerName: "Jack Daniel's",
+    issueDate: '04 Apr 2022',
+    className: '',
+    notificationType: NotificationTypeEnum.SocialBadges,
+};

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+
+import { NotificationProps, NotificationTypeStyles } from './types';
+import { NotificationTypeEnum } from '../../constants/notifications';
+
+import Checkmark from '../svgs/Checkmark';
+
+export const Notification: React.FC<NotificationProps> = ({
+    title,
+    issuerImage,
+    issueDate,
+    className,
+    notificationType = NotificationTypeEnum.Achievement,
+    handleViewOnClick = () => {},
+    claimStatus = false,
+    handleClaimOnClick = () => {},
+    loadingState = false,
+}) => {
+    const [isClaimed, setIsClaimed] = useState<boolean>(claimStatus || false);
+    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);
+
+    useEffect(() => {
+        setIsClaimed(claimStatus);
+    }, [claimStatus]);
+
+    useEffect(() => {
+        setIsLoading(loadingState);
+    }, [loadingState]);
+
+    const {
+        IconComponent,
+        iconCircleStyles,
+        textStyles,
+        viewButtonStyles,
+        claimedButtonStyles,
+        unclaimedButtonStyles,
+        typeText,
+    } = NotificationTypeStyles[notificationType];
+
+    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
+
+    let buttonText: string = '';
+
+    if (isClaimed) {
+        buttonText = 'Claimed';
+    } else if (!isClaimed) {
+        buttonText = 'Claim';
+    }
+
+    return (
+        <div
+            className={`flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}
+        >
+            <div
+                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}
+            >
+                <IconComponent className="h-4/5 text-white" />
+            </div>
+            <div className="flex flex-col justify-center items-center relative w-11/12">
+                <div className="flex flex-row items-center justify-start w-full">
+                    <div
+                        className={`h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full ${iconCircleStyles}`}
+                    >
+                        <img
+                            src={issuerImage}
+                            alt="issuer image"
+                            className="w-full h-full object-cover"
+                        />
+                    </div>
+                    <div className="text-left ml-3">
+                        <h4
+                            className="font-bold tracking-wide line-clamp-1 text-black"
+                            data-testid="notification-title"
+                        >
+                            {title}
+                        </h4>
+                        <p
+                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}
+                            data-testid="notification-type"
+                        >
+                            {typeText}{' '}
+                            <span
+                                className="text-grayscale-600 normal-case font-normal text-sm"
+                                data-testid="notification-cred-issue-date"
+                            >
+                                • {issueDate}
+                            </span>
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center justify-between w-full mt-3">
+                    <button
+                        onClick={handleViewOnClick}
+                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}
+                        role="button"
+                        name="notification-view-button"
+                    >
+                        View
+                    </button>
+                    <button
+                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}
+                        onClick={handleClaimOnClick}
+                        role="button"
+                        name="notification-claim-button"
+                    >
+                        {isClaimed && <Checkmark className="h-[24px] p-0 m-0" />}{' '}
+                        {isLoading ? 'Loading...' : buttonText}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Notification;

package/src/components/Notification/__tests__/Notification.test.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import Notification from '../Notification';
+import { NotificationTypeStyles } from '../types';
+import { NotificationTypeEnum } from '../../../constants/notifications';
+
+describe('Notification', () => {
+    it('Renders Notification of Type: Currency with props', () => {
+        render(
+            <Notification
+                title="Title of Credential"
+                issuerImage="https://issuerimage.png"
+                issueDate="04 Apr 22"
+                notificationType={NotificationTypeEnum.Currency}
+                claimStatus={false}
+                loadingState={false}
+            />
+        );
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.Currency]?.typeText;
+
+        const title = screen.getByTestId('notification-title');
+        expect(title).toHaveTextContent('Title of Credential');
+
+        const credIssueDate = screen.getByTestId('notification-cred-issue-date');
+        expect(credIssueDate).toHaveTextContent('04 Apr 22');
+
+        const issuerImage = screen.getByAltText('issuer image');
+        expect(issuerImage).toHaveAttribute('src', 'https://issuerimage.png');
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.Currency}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+
+    it('Renders Notification of Type: Identification', () => {
+        render(<Notification notificationType={NotificationTypeEnum.ID} />);
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.ID]?.typeText;
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.ID}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+
+    it('Renders Notification of Type: Achievement', () => {
+        render(<Notification notificationType={NotificationTypeEnum.Achievement} />);
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.Achievement]?.typeText;
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.Achievement}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+
+    it('Renders Notification of Type: Skill', () => {
+        render(<Notification notificationType={NotificationTypeEnum.Skill} />);
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.Skill]?.typeText;
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.Skill}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+
+    it('Renders Notification of Type: Job', () => {
+        render(<Notification notificationType={NotificationTypeEnum.Job} />);
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.Job]?.typeText;
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.Job}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+
+    it('Renders Notification of Type: Learning', () => {
+        render(<Notification notificationType={NotificationTypeEnum.Learning} />);
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.Learning]?.typeText;
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.Learning}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+
+    it('Renders Notification of Type: Social Badge', () => {
+        render(<Notification notificationType={NotificationTypeEnum.SocialBadges} />);
+
+        const typeText = NotificationTypeStyles?.[NotificationTypeEnum.SocialBadges]?.typeText;
+
+        const notificationType = screen.getByTestId('notification-type');
+        expect(notificationType).toHaveTextContent(typeText);
+
+        const iconComponent = screen.getByTestId(`${NotificationTypeEnum.SocialBadges}-icon`);
+        expect(iconComponent).toBeInTheDocument();
+    });
+});

package/src/components/Notification/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './Notification';
+export * from './types';

package/src/components/Notification/types.ts

@@ -0,0 +1,97 @@
+import { NotificationTypeEnum } from '../../constants/notifications';
+
+import Trophy from '../svgs/Trophy';
+import Coins from '../svgs/Coins';
+import User from '../svgs/User';
+import Briefcase from '../svgs/Briefcase';
+import PuzzlePiece from '../svgs/PuzzlePiece';
+import Graduation from '../svgs/Graduation';
+import ShieldChevron from '../svgs/ShieldChevron';
+
+export type NotificationProps = {
+    notificationType: NotificationTypeEnum;
+    title: string;
+    issuerImage?: string;
+    issueDate: string;
+    className?: string;
+    handleViewOnClick: () => void;
+    claimStatus: boolean;
+    handleClaimOnClick: () => void;
+    loadingState: boolean;
+};
+
+export const NotificationTypeStyles: {
+    [key: NotificationTypeEnum | string]: {
+        viewButtonStyles: string;
+        unclaimedButtonStyles: string;
+        claimedButtonStyles: string;
+        textStyles: string;
+        iconCircleStyles: string;
+        IconComponent: any;
+        typeText: string;
+    };
+} = {
+    [NotificationTypeEnum.Currency]: {
+        viewButtonStyles: 'border-cyan-400 text-cyan-400',
+        unclaimedButtonStyles: 'text-white bg-cyan-400 border-cyan-400 shadow-bottom',
+        claimedButtonStyles: 'text-cyan-400 bg-cyan-50 border-cyan-50',
+        textStyles: 'text-cyan-400 capitalize',
+        iconCircleStyles: 'bg-cyan-400',
+        IconComponent: Coins,
+        typeText: 'Currency',
+    },
+    [NotificationTypeEnum.SocialBadges]: {
+        viewButtonStyles: 'border-cyan-400 text-cyan-400',
+        unclaimedButtonStyles: 'text-white bg-cyan-400 border-cyan-400 shadow-bottom',
+        claimedButtonStyles: 'text-cyan-400 bg-cyan-50 border-cyan-50',
+        textStyles: 'text-cyan-400 capitalize',
+        iconCircleStyles: 'bg-cyan-400',
+        IconComponent: ShieldChevron,
+        typeText: 'Social Badge',
+    },
+    [NotificationTypeEnum.ID]: {
+        viewButtonStyles: 'border-yellow-400 text-yellow-400',
+        unclaimedButtonStyles: 'text-white bg-yellow-400 border-yellow-400 shadow-bottom',
+        claimedButtonStyles: 'text-yellow-400 bg-yellow-50 border-yellow-50',
+        textStyles: 'text-yellow-400 uppercase',
+        iconCircleStyles: 'bg-yellow-400',
+        IconComponent: User,
+        typeText: 'ID',
+    },
+    [NotificationTypeEnum.Achievement]: {
+        viewButtonStyles: 'border-spice-600 text-spice-400',
+        unclaimedButtonStyles: 'text-white bg-spice-400 border-spice-400 shadow-bottom',
+        claimedButtonStyles: 'text-spice-400 bg-spice-50 border-spice-50',
+        textStyles: 'text-spice-400 capitalize',
+        iconCircleStyles: 'bg-spice-400',
+        IconComponent: Trophy,
+        typeText: 'Achievement',
+    },
+    [NotificationTypeEnum.Skill]: {
+        viewButtonStyles: 'border-indigo-400 text-indigo-400',
+        unclaimedButtonStyles: 'text-white bg-indigo-400 border-indigo-400 shadow-bottom',
+        claimedButtonStyles: 'text-indigo-400 bg-indigo-50 border-indigo-50',
+        textStyles: 'text-indigo-400 capitalize',
+        iconCircleStyles: 'bg-indigo-400',
+        IconComponent: PuzzlePiece,
+        typeText: 'Skill',
+    },
+    [NotificationTypeEnum.Job]: {
+        viewButtonStyles: 'border-rose-400 text-rose-400',
+        unclaimedButtonStyles: 'text-white bg-rose-400 border-rose-400 shadow-bottom',
+        claimedButtonStyles: 'text-rose-400 bg-rose-50 border-rose-50',
+        textStyles: 'text-rose-400 capitalize',
+        iconCircleStyles: 'bg-rose-400',
+        IconComponent: Briefcase,
+        typeText: 'Work History',
+    },
+    [NotificationTypeEnum.Learning]: {
+        viewButtonStyles: 'border-emerald-500 text-emerald-500',
+        unclaimedButtonStyles: 'text-white bg-emerald-500 border-emerald-500 shadow-bottom',
+        claimedButtonStyles: 'text-emerald-500 bg-emerald-50 border-emerald-50',
+        textStyles: 'text-emerald-500 capitalize',
+        iconCircleStyles: 'bg-emerald-500',
+        IconComponent: Graduation,
+        typeText: 'Learning History',
+    },
+};

package/src/components/NotificationBoostCard/NotificationBoostCard.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import NotificationBoostCard from './NotificationBoostCard';
+import { NotificationBoostCardProps } from './types';
+import { NotificationTypeEnum } from '../../constants/notifications';
+
+export default {
+    title: 'NotificationBoostCard',
+    component: NotificationBoostCard,
+    argTypes: {},
+} as Meta<typeof NotificationBoostCard>;
+
+const Template: Story<NotificationBoostCardProps> = args => <NotificationBoostCard {...args} />;
+
+export const NotificationCardTest = Template.bind({});
+
+NotificationCardTest.args = {
+    title: 'Title of Credential',
+    thumbImage:
+        'https://upload.wikimedia.org/wikipedia/en/thumb/a/a8/Jack_Daniels_Logo.svg/1200px-Jack_Daniels_Logo.svg.png',
+    issuerInfo: {
+        image: 'https://picsum.photos/200',
+        fullName: 'Bobby Baggins',
+        displayName: 'BBaggins',
+    },
+    className: 'notification-boost-card-test',
+    issueDate: 'Apr 04 2022',
+    notificationType: NotificationTypeEnum.SocialBadges,
+    handleButtonClick: () => console.log('BUTTON CLICK'),
+    handleCardClick: () => console.log('CARD CLICK'),
+    handleCancelClick: () => console.log('///CANCEL CLICK'),
+    isArchived: false,
+};
+
+export const NotificationCardTestNoIssuerImage = Template.bind({});
+
+NotificationCardTestNoIssuerImage.args = {
+    title: 'Title of Credential',
+    thumbImage:
+        'https://upload.wikimedia.org/wikipedia/en/thumb/a/a8/Jack_Daniels_Logo.svg/1200px-Jack_Daniels_Logo.svg.png',
+    issuerInfo: {
+        image: '',
+        fullName: 'Bobby Baggins',
+        displayName: 'BBaggins',
+    },
+    className: 'notification-boost-card-test',
+    issueDate: 'Apr 04 2022',
+    notificationType: NotificationTypeEnum.SocialBadges,
+    handleButtonClick: () => console.log('BUTTON CLICK'),
+    handleCardClick: () => console.log('CARD CLICK'),
+    handleCancelClick: () => console.log('///CANCEL CLICK'),
+    isArchived: false,
+};

package/src/components/NotificationBoostCard/NotificationBoostCard.tsx

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import X from '../../assets/images/X.svg';
+import { NotificationBoostCardProps } from './types';
+import { NotificationTypeStyles } from '../Notification/types';
+import { NotificationTypeEnum } from '../../constants/notifications';
+import Checkmark from '../svgs/Checkmark';
+import ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';
+import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
+
+export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
+    title,
+    customThumbComponent,
+    className,
+    thumbImage,
+    notificationType = NotificationTypeEnum.Achievement,
+    issueDate,
+    issuerInfo,
+    claimStatus = false,
+    loadingState = false,
+    handleButtonClick,
+    handleCancelClick,
+    handleCardClick,
+    showIssuerInfo = true,
+    isArchived,
+}) => {
+    const [isClaimed, setIsClaimed] = useState<boolean>(claimStatus || false);
+    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);
+
+    useEffect(() => {
+        setIsClaimed(claimStatus);
+    }, [claimStatus]);
+
+    useEffect(() => {
+        setIsLoading(loadingState);
+    }, [loadingState]);
+
+    const {
+        iconCircleStyles,
+        textStyles,
+        viewButtonStyles,
+        claimedButtonStyles,
+        unclaimedButtonStyles,
+        typeText,
+    } = NotificationTypeStyles[notificationType];
+
+    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
+
+    let buttonText: string = '';
+
+    if (isClaimed) {
+        buttonText = 'Claimed';
+    } else if (!isClaimed) {
+        buttonText = 'Claim';
+    }
+
+    return (
+        <div
+            className={`flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`}
+        >
+            <div className="notification-card-left-side px-[0px] flex">
+                {!customThumbComponent && (
+                    <div
+                        onClick={handleCardClick}
+                        className={`overflow-hidden cursor-pointer w-[90px] h-[90px] rounded-full flex items-start ${iconCircleStyles} notification-card-thumbnail`}
+                    >
+                        <img
+                            src={thumbImage}
+                            alt="Notification Thumb"
+                            className="w-full h-full w-[100px] h-[100px] object-cover"
+                        />
+                    </div>
+                )}
+                {customThumbComponent && customThumbComponent}
+            </div>
+            <div className="flex flex-col justify-center items-start relative w-full">
+                <div className="text-left ml-3 flex flex-col items-start justify-start w-full">
+                    <h4
+                        onClick={handleCardClick}
+                        className="cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title"
+                        data-testid="notification-title"
+                    >
+                        {title}
+                    </h4>
+                    <p
+                        className={`font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`}
+                        data-testid="notification-type"
+                    >
+                        {typeText}{' '}
+                        {issueDate && (
+                            <span
+                                className="text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date"
+                                data-testid="notification-cred-issue-date"
+                            >
+                                • {issueDate}
+                            </span>
+                        )}
+                    </p>
+
+                    {showIssuerInfo && (
+                        <div className="notification-card-issuer-info flex items-center mt-[10px]">
+                            <div className="profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]">
+                                <UserProfilePicture
+                                    customContainerClass={`h-full w-full object-cover text-xl ${
+                                        !issuerInfo?.image ? 'pt-[3px]' : ''
+                                    }`}
+                                    user={{ image: issuerInfo?.image, name: issuerInfo?.fullName }}
+                                    alt="profile"
+                                />
+                            </div>
+                            <div className="notification-issuer-info-text flex items-center px-[10px]">
+                                <p className="text-[13px] text-gray-700 font-medium">
+                                    From {issuerInfo?.fullName || issuerInfo?.displayName}
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="flex items-center justify-between mt-3 w-full">
+                        <button
+                            className={`notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}
+                            onClick={handleButtonClick}
+                            role="button"
+                            name="notification-claim-button"
+                        >
+                            {isClaimed && <Checkmark className="h-[24px] p-0 m-0" />}{' '}
+                            {isLoading ? 'Loading...' : buttonText}
+                        </button>
+
+                        <button
+                            onClick={handleCancelClick}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            role="button"
+                            name="notification-view-button"
+                        >
+                            {!isArchived && (
+                                <img src={X ?? ''} alt="Cancel" className="notification-card-x" />
+                            )}
+                            {isArchived && (
+                                <img
+                                    src={ArrowArcLeft ?? ''}
+                                    alt="Cancel"
+                                    className="notification-card-x"
+                                />
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotificationBoostCard;

package/src/components/NotificationBoostCard/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './NotificationBoostCard';
+export * from './types';