@learncard/react 2.4.0 → 2.5.0

package/dist/esm/{FlippyCard-f4f0b3f8.js → FlippyCard-a2de5cf1.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const FlippyCard = ({ children, flipState }) => {
+const FlippyCard = ({ children, flipState = "front" }) => {
   if ((children == null ? void 0 : children.length) > 3) {
     console.warn("More than two children passed into Flippy Card! \u{1F633}\u{1F633}\u{1F633} Picking first two...");
   }
@@ -25,4 +25,4 @@ const FlippyCard = ({ children, flipState }) => {
 };
 
 export { FlippyCard as F };
-//# sourceMappingURL=FlippyCard-f4f0b3f8.js.map
+//# sourceMappingURL=FlippyCard-a2de5cf1.js.map

package/dist/esm/FlippyCard-a2de5cf1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlippyCard-a2de5cf1.js","sources":["../../src/components/FlippyCard/FlippyCard.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FlippyCardProps = {\n    children: React.ReactChild[];\n    flipState?: 'front' | 'back' | string;\n};\n\nexport const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState = 'front' }) => {\n    if (children?.length > 3) {\n        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');\n    }\n\n    if (!children) return <></>;\n\n    const frontCard = children?.[0] as React.ReactNode;\n    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);\n\n    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';\n\n    return (\n        <div data-testid=\"flippy-card-wrapper\" className=\"flippy-wrapper-container\">\n            <div data-testid=\"flippy-card\" className={flipCardCSSClass}>\n                <section data-testid=\"flippy-card-front\" className=\"card-face card-face--front\">\n                    {frontCard}\n                </section>\n                <section data-testid=\"flippy-card-back\" className=\"card-face card-face--back\">\n                    {backCard}\n                </section>\n            </div>\n        </div>\n    );\n};\n\nexport default FlippyCard;\n"],"names":[],"mappings":";;AAOO,MAAM,aAAwC,CAAC,EAAE,QAAU,EAAA,SAAA,GAAY,SAAc,KAAA;AACxF,EAAI,IAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,UAAS,CAAG,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,kGAA6E,CAAA,CAAA;AAAA,GAC9F;AAEA,EAAA,IAAI,CAAC,QAAA;AAAU,IAAA,uBAAS,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAExB,EAAA,MAAM,YAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAA,CAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,MAA2B,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,SAAc,KAAA,OAAA,GAAU,aAAgB,GAAA,wBAAA,CAAA;AAEjE,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,qBAAA;AAAA,IAAsB,SAAU,EAAA,0BAAA;AAAA,GAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,aAAA;AAAA,IAAc,SAAW,EAAA,gBAAA;AAAA,GAAA,kBACrC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,mBAAA;AAAA,IAAoB,SAAU,EAAA,4BAAA;AAAA,GAC9C,EAAA,SACL,mBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,kBAAA;AAAA,IAAmB,SAAU,EAAA,2BAAA;AAAA,GAC7C,EAAA,QACL,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{LearnCardCreditCardFrontFace-cf793917.js → LearnCardCreditCardFrontFace-c221facc.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Q as QRCodeSVG } from './index-aa1098e1.js';
+import { Q as QRCodeSVG } from './index-54ccc558.js';
 import CardChip from './card-chip.svg';
 import MasterCardLogo from './master-card-logo.svg';
 
@@ -67,4 +67,4 @@ const LearnCardCreditCardFrontFace = ({
 };
 
 export { LearnCardCreditCardFrontFace as L };
-//# sourceMappingURL=LearnCardCreditCardFrontFace-cf793917.js.map
+//# sourceMappingURL=LearnCardCreditCardFrontFace-c221facc.js.map

package/dist/esm/{LearnCardCreditCardFrontFace-cf793917.js.map → LearnCardCreditCardFrontFace-c221facc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-cf793917.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { LearnCardCreditCardFrontFaceProps } from './types';\n\nimport CardChip from '../../assets/images/card-chip.svg';\nimport MasterCardLogo from '../../assets/images/master-card-logo.svg';\n\nexport const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({\n    userImage,\n    userImageComponent = null,\n    qrCodeValue,\n    className,\n    showActionButton = false,\n    actionButtonText = 'Open Card',\n    onClick = () => {},\n    children,\n}) => {\n    let userImageEl: React.ReactNode | null = null;\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-2 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                    data-testid=\"credit-card-frontface-userImg\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble\" />\n                {showActionButton && (\n                    <button\n                        className=\"absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white\"\n                        onClick={onClick}\n                        data-testid=\"credit-card-frontface-button\"\n                    >\n                        {actionButtonText}\n                    </button>\n                )}\n                <div className=\"flex flex-row justify-between items-start w-full h-full relative\">\n                    <div className=\"flex flex-1 flex-col\">\n                        <div className=\"pl-8\">\n                            <p className=\"w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title\">\n                                LEARNCARD\n                            </p>\n                            <img\n                                src={CardChip ?? ''}\n                                alt=\"card chip\"\n                                className=\"h-[30px] w-[42px]\"\n                            />\n                        </div>\n\n                        {userImageEl}\n                    </div>\n\n                    {qrCodeValue && (\n                        <div className=\"flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container\">\n                            <div className=\"h-auto relative qr-code-container\">\n                                {/* <div className=\"qr-code-upper-left-yellow\" />\n                            <div className=\"qr-code-upper-right-pink-square\" />\n                            <div className=\"qr-code-bottom-left-purple-square\" />\n                            <div className=\"qr-code-green-blob\" />\n                            <div className=\"qr-code-green-blob-2\" />\n                            <div className=\"qr-code-blue-blob\" />\n                            <div className=\"qr-code-orange-blob\" /> */}\n                                <QRCodeSVG\n                                    className=\"h-full w-full\"\n                                    value={qrCodeValue}\n                                    data-testid=\"credit-card-qr-code\"\n                                    bgColor=\"transparent\"\n                                    // fgColor=\"#999999\"\n                                />\n                            </div>\n                        </div>\n                    )}\n\n                    <img\n                        src={MasterCardLogo ?? ''}\n                        alt=\"mastercard icon\"\n                        className=\"absolute bottom-[-8px] right-4 learn-card-mastercard-logo\"\n                    />\n                </div>\n            </div>\n            {children}\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":[],"mappings":";;;;;AAQO,MAAM,+BAA4E,CAAC;AAAA,EACtF,SAAA;AAAA,EACA,kBAAqB,GAAA,IAAA;AAAA,EACrB,WAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAmB,GAAA,KAAA;AAAA,EACnB,gBAAmB,GAAA,WAAA;AAAA,EACnB,UAAU,MAAM;AAAA,GAAC;AAAA,EACjB,QAAA;AACJ,CAAM,KAAA;AAjBN,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAkBI,EAAA,IAAI,WAAsC,GAAA,IAAA,CAAA;AAE1C,EAAA,IAAI,SAAW,EAAA;AACX,IAAA,WAAA,mBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,qGAAA;AAAA,KAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACG,SAAU,EAAA,qFAAA;AAAA,MACV,GAAK,EAAA,SAAA;AAAA,MACL,GAAI,EAAA,YAAA;AAAA,MACJ,aAAY,EAAA,+BAAA;AAAA,KAChB,CACJ,CAAA,CAAA;AAAA,GAER,MAAA,IAAW,CAAC,SAAA,IAAa,kBAAoB,EAAA;AACzC,IAAc,WAAA,GAAA,kBAAA,CAAA;AAAA,GAClB;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAiE,8DAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,kBAE3E,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAW,EAAA,CAAA,4IAAA,CAAA;AAAA,GAAA,kBAEV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,wHAAA;AAAA,GAAyH,CAAA,EACvI,oCACI,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACG,SAAU,EAAA,oMAAA;AAAA,IACV,OAAA;AAAA,IACA,aAAY,EAAA,8BAAA;AAAA,GAEX,EAAA,gBACL,mBAEH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,kEAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,sBAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,MAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,sFAAA;AAAA,GAAuF,EAAA,WAEpG,mBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,MAAK,EAAY,GAAA,QAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,IACjB,GAAI,EAAA,WAAA;AAAA,IACJ,SAAU,EAAA,mBAAA;AAAA,GACd,CACJ,CAAA,EAEC,WACL,CAAA,EAEC,+BACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,sFAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,mCAAA;AAAA,GAAA,kBAQV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,qBAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GAEZ,CACJ,CACJ,CAAA,kBAGH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,MAAK,EAAkB,GAAA,cAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,IACvB,GAAI,EAAA,iBAAA;AAAA,IACJ,SAAU,EAAA,2DAAA;AAAA,GACd,CACJ,CACJ,CAAA,EACC,QACL,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"LearnCardCreditCardFrontFace-c221facc.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { LearnCardCreditCardFrontFaceProps } from './types';\n\nimport CardChip from '../../assets/images/card-chip.svg';\nimport MasterCardLogo from '../../assets/images/master-card-logo.svg';\n\nexport const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({\n    userImage,\n    userImageComponent = null,\n    qrCodeValue,\n    className,\n    showActionButton = false,\n    actionButtonText = 'Open Card',\n    onClick = () => {},\n    children,\n}) => {\n    let userImageEl: React.ReactNode | null = null;\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-2 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                    data-testid=\"credit-card-frontface-userImg\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble\" />\n                {showActionButton && (\n                    <button\n                        className=\"absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white\"\n                        onClick={onClick}\n                        data-testid=\"credit-card-frontface-button\"\n                    >\n                        {actionButtonText}\n                    </button>\n                )}\n                <div className=\"flex flex-row justify-between items-start w-full h-full relative\">\n                    <div className=\"flex flex-1 flex-col\">\n                        <div className=\"pl-8\">\n                            <p className=\"w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title\">\n                                LEARNCARD\n                            </p>\n                            <img\n                                src={CardChip ?? ''}\n                                alt=\"card chip\"\n                                className=\"h-[30px] w-[42px]\"\n                            />\n                        </div>\n\n                        {userImageEl}\n                    </div>\n\n                    {qrCodeValue && (\n                        <div className=\"flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container\">\n                            <div className=\"h-auto relative qr-code-container\">\n                                {/* <div className=\"qr-code-upper-left-yellow\" />\n                            <div className=\"qr-code-upper-right-pink-square\" />\n                            <div className=\"qr-code-bottom-left-purple-square\" />\n                            <div className=\"qr-code-green-blob\" />\n                            <div className=\"qr-code-green-blob-2\" />\n                            <div className=\"qr-code-blue-blob\" />\n                            <div className=\"qr-code-orange-blob\" /> */}\n                                <QRCodeSVG\n                                    className=\"h-full w-full\"\n                                    value={qrCodeValue}\n                                    data-testid=\"credit-card-qr-code\"\n                                    bgColor=\"transparent\"\n                                    // fgColor=\"#999999\"\n                                />\n                            </div>\n                        </div>\n                    )}\n\n                    <img\n                        src={MasterCardLogo ?? ''}\n                        alt=\"mastercard icon\"\n                        className=\"absolute bottom-[-8px] right-4 learn-card-mastercard-logo\"\n                    />\n                </div>\n            </div>\n            {children}\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":[],"mappings":"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"}

package/dist/esm/{Notification-ac50790d.js → Notification-75f2b46f.js}

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { T as Trophy } from './Trophy-702610b8.js';
 import { a as Coins, U as User, L as Lightbulb, B as Briefcase, G as Graduation, C as Checkmark } from './User-d3aa7eb3.js';
 
@@ -69,11 +69,21 @@ const Notification = ({
   issueDate,
   className,
   notificationType = NotificationTypeEnum.Achievement,
-  onClick = () => {
-  }
+  handleViewOnClick = () => {
+  },
+  claimStatus = false,
+  handleClaimOnClick = () => {
+  },
+  loadingState = false
 }) => {
-  const [isClaimed, setIsClaimed] = useState(false);
-  const handleClaim = () => setIsClaimed(!isClaimed);
+  const [isClaimed, setIsClaimed] = useState(claimStatus || false);
+  const [isLoading, setIsLoading] = useState(loadingState || false);
+  useEffect(() => {
+    setIsClaimed(claimStatus);
+  }, [claimStatus]);
+  useEffect(() => {
+    setIsLoading(loadingState);
+  }, [loadingState]);
   const {
     IconComponent,
     iconCircleStyles,
@@ -83,6 +93,12 @@ const Notification = ({
     unclaimedButtonStyles
   } = NotificationTypeStyles[notificationType];
   const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
+  let buttonText = "";
+  if (isClaimed) {
+    buttonText = "Claimed";
+  } else if (!isClaimed) {
+    buttonText = "Claim";
+  }
   return /* @__PURE__ */ React.createElement("div", {
     className: `flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -113,19 +129,19 @@ const Notification = ({
   }, "\u2022 ", issueDate)))), /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-between w-full mt-3"
   }, /* @__PURE__ */ React.createElement("button", {
-    onClick,
+    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"), /* @__PURE__ */ React.createElement("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: handleClaim,
+    onClick: handleClaimOnClick,
     role: "button",
     name: "notification-claim-button"
   }, isClaimed && /* @__PURE__ */ React.createElement(Checkmark, {
     className: "h-[24px] p-0 m-0"
-  }), " ", isClaimed ? "Claimed" : "Claim"))));
+  }), " ", isLoading ? "Loading..." : buttonText))));
 };
 
 export { Notification as N, NotificationTypeStyles as a };
-//# sourceMappingURL=Notification-ac50790d.js.map
+//# sourceMappingURL=Notification-75f2b46f.js.map

package/dist/esm/Notification-75f2b46f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification-75f2b46f.js","sources":["../../src/constants/notifications.ts","../../src/components/Notification/types.ts","../../src/components/Notification/Notification.tsx"],"sourcesContent":["export enum NotificationTypeEnum {\n    Currency = 'currency',\n    ID = 'id',\n    Achievement = 'achievement',\n    Skill = 'skill',\n    Job = 'job',\n    Learning = 'learning',\n}\n","import { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Trophy from '../svgs/Trophy';\nimport Coins from '../svgs/Coins';\nimport User from '../svgs/User';\nimport Briefcase from '../svgs/Briefcase';\nimport Lightbulb from '../svgs/Lightbulb';\nimport Graduation from '../svgs/Graduation';\n\nexport type NotificationProps = {\n    notificationType: NotificationTypeEnum;\n    title: string;\n    issuerImage?: string;\n    issueDate: string;\n    className?: string;\n    handleViewOnClick: () => void;\n    claimStatus: boolean;\n    handleClaimOnClick: () => void;\n    loadingState: boolean;\n};\n\nexport const NotificationTypeStyles = {\n    [NotificationTypeEnum.Currency]: {\n        viewButtonStyles: 'border-cyan-600 text-cyan-600',\n        unclaimedButtonStyles: 'text-white bg-cyan-600 border-cyan-600',\n        claimedButtonStyles: 'text-cyan-600 bg-cyan-50 border-cyan-50',\n        textStyles: 'text-cyan-600 capitalize',\n        iconCircleStyles: 'bg-cyan-600',\n        IconComponent: Coins,\n    },\n    [NotificationTypeEnum.ID]: {\n        viewButtonStyles: 'border-yellow-400 text-yellow-400',\n        unclaimedButtonStyles: 'text-white bg-yellow-400 border-yellow-400',\n        claimedButtonStyles: 'text-yellow-400 bg-yellow-50 border-yellow-50',\n        textStyles: 'text-yellow-400 uppercase',\n        iconCircleStyles: 'bg-yellow-400',\n        IconComponent: User,\n    },\n    [NotificationTypeEnum.Achievement]: {\n        viewButtonStyles: 'border-spice-400 text-spice-400',\n        unclaimedButtonStyles: 'text-white bg-spice-400 border-spice-400',\n        claimedButtonStyles: 'text-spice-400 bg-spice-50 border-spice-50',\n        textStyles: 'text-spice-400 capitalize',\n        iconCircleStyles: 'bg-spice-400',\n        IconComponent: Trophy,\n    },\n    [NotificationTypeEnum.Skill]: {\n        viewButtonStyles: 'border-indigo-400 text-indigo-400',\n        unclaimedButtonStyles: 'text-white bg-indigo-400 border-indigo-400',\n        claimedButtonStyles: 'text-indigo-400 bg-indigo-50 border-indigo-50',\n        textStyles: 'text-indigo-400 capitalize',\n        iconCircleStyles: 'bg-indigo-400',\n        IconComponent: Lightbulb,\n    },\n    [NotificationTypeEnum.Job]: {\n        viewButtonStyles: 'border-emerald-400 text-emerald-400',\n        unclaimedButtonStyles: 'text-white bg-emerald-400 border-emerald-400',\n        claimedButtonStyles: 'text-emerald-400 bg-emerald-50 border-emerald-50',\n        textStyles: 'text-emerald-400 capitalize',\n        iconCircleStyles: 'bg-emerald-400',\n        IconComponent: Briefcase,\n    },\n    [NotificationTypeEnum.Learning]: {\n        viewButtonStyles: 'border-rose-400 text-rose-400',\n        unclaimedButtonStyles: 'text-white bg-rose-400 border-rose-400',\n        claimedButtonStyles: 'text-rose-400 bg-rose-50 border-rose-50',\n        textStyles: 'text-rose-400 capitalize',\n        iconCircleStyles: 'bg-rose-400',\n        IconComponent: Graduation,\n    },\n};\n","import React, { useState, useEffect } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n    title,\n    issuerImage,\n    issueDate,\n    className,\n    notificationType = NotificationTypeEnum.Achievement,\n    handleViewOnClick = () => {},\n    claimStatus = false,\n    handleClaimOnClick = () => {},\n    loadingState = false,\n}) => {\n    const [isClaimed, setIsClaimed] = useState<boolean>(claimStatus || false);\n    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);\n\n    useEffect(() => {\n        setIsClaimed(claimStatus);\n    }, [claimStatus]);\n\n    useEffect(() => {\n        setIsLoading(loadingState);\n    }, [loadingState]);\n\n    const {\n        IconComponent,\n        iconCircleStyles,\n        textStyles,\n        viewButtonStyles,\n        claimedButtonStyles,\n        unclaimedButtonStyles,\n    } = NotificationTypeStyles[notificationType];\n\n    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\n\n    let buttonText: string = '';\n\n    if (isClaimed) {\n        buttonText = 'Claimed';\n    } else if (!isClaimed) {\n        buttonText = 'Claim';\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n        >\n            <div\n                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n            >\n                <IconComponent className=\"h-4/5 text-white\" />\n            </div>\n            <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n                <div className=\"flex flex-row items-center justify-start w-full\">\n                    <div className=\"h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full\">\n                        <img\n                            src={issuerImage}\n                            alt=\"issuer image\"\n                            className=\"w-full h-full object-cover\"\n                        />\n                    </div>\n                    <div className=\"text-left ml-3\">\n                        <h4\n                            className=\"font-bold tracking-wide line-clamp-1 text-black\"\n                            data-testid=\"notification-title\"\n                        >\n                            {title}\n                        </h4>\n                        <p\n                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n                            data-testid=\"notification-type\"\n                        >\n                            {notificationType}{' '}\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-sm\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-between w-full mt-3\">\n                    <button\n                        onClick={handleViewOnClick}\n                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n                        role=\"button\"\n                        name=\"notification-view-button\"\n                    >\n                        View\n                    </button>\n                    <button\n                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                        onClick={handleClaimOnClick}\n                        role=\"button\"\n                        name=\"notification-claim-button\"\n                    >\n                        {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n                        {isLoading ? 'Loading...' : buttonText}\n                    </button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Notification;\n"],"names":["NotificationTypeEnum"],"mappings":";;;;AAAY,IAAA,oBAAA,qBAAAA,qBAAL,KAAA;AACH,EAAAA,sBAAA,UAAW,CAAA,GAAA,UAAA,CAAA;AACX,EAAAA,sBAAA,IAAK,CAAA,GAAA,IAAA,CAAA;AACL,EAAAA,sBAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,sBAAA,OAAQ,CAAA,GAAA,OAAA,CAAA;AACR,EAAAA,sBAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,sBAAA,UAAW,CAAA,GAAA,UAAA,CAAA;AANH,EAAAA,OAAAA,qBAAAA,CAAAA;AAAA,CAAA,EAAA,oBAAA,IAAA,EAAA,CAAA;;ACqBL,MAAM,sBAAyB,GAAA;AAAA,EAClC,CAAC,qBAAqB,QAAW,GAAA;AAAA,IAC7B,gBAAkB,EAAA,+BAAA;AAAA,IAClB,qBAAuB,EAAA,wCAAA;AAAA,IACvB,mBAAqB,EAAA,yCAAA;AAAA,IACrB,UAAY,EAAA,0BAAA;AAAA,IACZ,gBAAkB,EAAA,aAAA;AAAA,IAClB,aAAe,EAAA,KAAA;AAAA,GACnB;AAAA,EACA,CAAC,qBAAqB,EAAK,GAAA;AAAA,IACvB,gBAAkB,EAAA,mCAAA;AAAA,IAClB,qBAAuB,EAAA,4CAAA;AAAA,IACvB,mBAAqB,EAAA,+CAAA;AAAA,IACrB,UAAY,EAAA,2BAAA;AAAA,IACZ,gBAAkB,EAAA,eAAA;AAAA,IAClB,aAAe,EAAA,IAAA;AAAA,GACnB;AAAA,EACA,CAAC,qBAAqB,WAAc,GAAA;AAAA,IAChC,gBAAkB,EAAA,iCAAA;AAAA,IAClB,qBAAuB,EAAA,0CAAA;AAAA,IACvB,mBAAqB,EAAA,4CAAA;AAAA,IACrB,UAAY,EAAA,2BAAA;AAAA,IACZ,gBAAkB,EAAA,cAAA;AAAA,IAClB,aAAe,EAAA,MAAA;AAAA,GACnB;AAAA,EACA,CAAC,qBAAqB,KAAQ,GAAA;AAAA,IAC1B,gBAAkB,EAAA,mCAAA;AAAA,IAClB,qBAAuB,EAAA,4CAAA;AAAA,IACvB,mBAAqB,EAAA,+CAAA;AAAA,IACrB,UAAY,EAAA,4BAAA;AAAA,IACZ,gBAAkB,EAAA,eAAA;AAAA,IAClB,aAAe,EAAA,SAAA;AAAA,GACnB;AAAA,EACA,CAAC,qBAAqB,GAAM,GAAA;AAAA,IACxB,gBAAkB,EAAA,qCAAA;AAAA,IAClB,qBAAuB,EAAA,8CAAA;AAAA,IACvB,mBAAqB,EAAA,kDAAA;AAAA,IACrB,UAAY,EAAA,6BAAA;AAAA,IACZ,gBAAkB,EAAA,gBAAA;AAAA,IAClB,aAAe,EAAA,SAAA;AAAA,GACnB;AAAA,EACA,CAAC,qBAAqB,QAAW,GAAA;AAAA,IAC7B,gBAAkB,EAAA,+BAAA;AAAA,IAClB,qBAAuB,EAAA,wCAAA;AAAA,IACvB,mBAAqB,EAAA,yCAAA;AAAA,IACrB,UAAY,EAAA,0BAAA;AAAA,IACZ,gBAAkB,EAAA,aAAA;AAAA,IAClB,aAAe,EAAA,UAAA;AAAA,GACnB;AACJ;;AC/DO,MAAM,eAA4C,CAAC;AAAA,EACtD,KAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,mBAAmB,oBAAqB,CAAA,WAAA;AAAA,EACxC,oBAAoB,MAAM;AAAA,GAAC;AAAA,EAC3B,WAAc,GAAA,KAAA;AAAA,EACd,qBAAqB,MAAM;AAAA,GAAC;AAAA,EAC5B,YAAe,GAAA,KAAA;AACnB,CAAM,KAAA;AACF,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA,CAAkB,eAAe,KAAK,CAAA,CAAA;AACxE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA,CAAkB,gBAAgB,KAAK,CAAA,CAAA;AAEzE,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,YAAA,CAAa,WAAW,CAAA,CAAA;AAAA,GAC5B,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,YAAA,CAAa,YAAY,CAAA,CAAA;AAAA,GAC7B,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAM,MAAA;AAAA,IACF,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,qBAAA;AAAA,MACA,sBAAuB,CAAA,gBAAA,CAAA,CAAA;AAE3B,EAAM,MAAA,iBAAA,GAAoB,YAAY,mBAAsB,GAAA,qBAAA,CAAA;AAE5D,EAAA,IAAI,UAAqB,GAAA,EAAA,CAAA;AAEzB,EAAA,IAAI,SAAW,EAAA;AACX,IAAa,UAAA,GAAA,SAAA,CAAA;AAAA,GACjB,MAAA,IAAW,CAAC,SAAW,EAAA;AACnB,IAAa,UAAA,GAAA,OAAA,CAAA;AAAA,GACjB;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAyF,sFAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,kBAEnG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAqG,kGAAA,EAAA,gBAAA,CAAA,CAAA;AAAA,GAAA,kBAE/G,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,SAAU,EAAA,kBAAA;AAAA,GAAmB,CAChD,mBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,iDAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,wFAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,GAAK,EAAA,WAAA;AAAA,IACL,GAAI,EAAA,cAAA;AAAA,IACJ,SAAU,EAAA,4BAAA;AAAA,GACd,CACJ,mBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,gBAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACG,SAAU,EAAA,iDAAA;AAAA,IACV,aAAY,EAAA,oBAAA;AAAA,GAEX,EAAA,KACL,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,WAAW,CAAiE,8DAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAC5E,aAAY,EAAA,mBAAA;AAAA,GAEX,EAAA,gBAAA,EAAkB,qBAClB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACG,SAAU,EAAA,oDAAA;AAAA,IACV,aAAY,EAAA,8BAAA;AAAA,GAAA,EACf,WACM,SACP,CACJ,CACJ,CACJ,mBACC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,+CAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACG,OAAS,EAAA,iBAAA;AAAA,IACT,WAAW,CAAmG,gGAAA,EAAA,gBAAA,CAAA,CAAA;AAAA,IAC9G,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,0BAAA;AAAA,GACR,EAAA,MAED,mBACC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACG,WAAW,CAAsH,mHAAA,EAAA,iBAAA,CAAA,CAAA;AAAA,IACjI,OAAS,EAAA,kBAAA;AAAA,IACT,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,2BAAA;AAAA,GAAA,EAEJ,6BAAc,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAU,SAAU,EAAA,kBAAA;AAAA,GAAmB,GAAI,GACzD,EAAA,SAAA,GAAY,eAAe,UAChC,CACJ,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{QRCodeCard-c57e2067.js → QRCodeCard-d147d009.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Q as QRCodeSVG } from './index-aa1098e1.js';
+import { Q as QRCodeSVG } from './index-54ccc558.js';
 
 const QRCodeCard = ({
   userHandle,
@@ -33,4 +33,4 @@ const QRCodeCard = ({
 };
 
 export { QRCodeCard as Q };
-//# sourceMappingURL=QRCodeCard-c57e2067.js.map
+//# sourceMappingURL=QRCodeCard-d147d009.js.map

package/dist/esm/{QRCodeCard-c57e2067.js.map → QRCodeCard-d147d009.js.map}

@@ -1 +1 @@
-{"version":3,"file":"QRCodeCard-c57e2067.js","sources":["../../src/components/QRCodeCard/QRCodeCard.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { QRCodeCardProps } from './types';\n\nexport const QRCodeCard: React.FC<QRCodeCardProps> = ({\n    userHandle,\n    qrCodeValue,\n    className,\n    text = null,\n}) => {\n    let textEl: React.ReactNode | null = null;\n    if (typeof text === 'string') {\n        textEl = (\n            <p className=\"flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]\">\n                {text}\n            </p>\n        );\n    } else {\n        textEl = text;\n    }\n\n    return (\n        <div\n            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}\n        >\n            {qrCodeValue && (\n                <div className=\"flex justify-center items-center w-full relative px-8 mb-5\">\n                    <div className=\"max-w-[90%] w-full h-auto relative\">\n                        <QRCodeSVG\n                            className=\"h-full w-full\"\n                            value={qrCodeValue}\n                            data-testid=\"qrcode-card\"\n                            bgColor=\"transparent\"\n                        />\n                    </div>\n                </div>\n            )}\n\n            {userHandle && (\n                <p\n                    className=\"flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500\"\n                    data-testid=\"qrcode-card-user-handle\"\n                >\n                    {userHandle}\n                </p>\n            )}\n\n            {textEl}\n        </div>\n    );\n};\n\nexport default QRCodeCard;\n"],"names":[],"mappings":";;;AAKO,MAAM,aAAwC,CAAC;AAAA,EAClD,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AACX,CAAM,KAAA;AACF,EAAA,IAAI,MAAiC,GAAA,IAAA,CAAA;AACrC,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC1B,IAAA,MAAA,mBACK,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MAAE,SAAU,EAAA,qFAAA;AAAA,KAAA,EACR,IACL,CAAA,CAAA;AAAA,GAED,MAAA;AACH,IAAS,MAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,aAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GACZ,CACJ,CACJ,CAGH,EAAA,UAAA,oBACI,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"QRCodeCard-d147d009.js","sources":["../../src/components/QRCodeCard/QRCodeCard.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { QRCodeCardProps } from './types';\n\nexport const QRCodeCard: React.FC<QRCodeCardProps> = ({\n    userHandle,\n    qrCodeValue,\n    className,\n    text = null,\n}) => {\n    let textEl: React.ReactNode | null = null;\n    if (typeof text === 'string') {\n        textEl = (\n            <p className=\"flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]\">\n                {text}\n            </p>\n        );\n    } else {\n        textEl = text;\n    }\n\n    return (\n        <div\n            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}\n        >\n            {qrCodeValue && (\n                <div className=\"flex justify-center items-center w-full relative px-8 mb-5\">\n                    <div className=\"max-w-[90%] w-full h-auto relative\">\n                        <QRCodeSVG\n                            className=\"h-full w-full\"\n                            value={qrCodeValue}\n                            data-testid=\"qrcode-card\"\n                            bgColor=\"transparent\"\n                        />\n                    </div>\n                </div>\n            )}\n\n            {userHandle && (\n                <p\n                    className=\"flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500\"\n                    data-testid=\"qrcode-card-user-handle\"\n                >\n                    {userHandle}\n                </p>\n            )}\n\n            {textEl}\n        </div>\n    );\n};\n\nexport default QRCodeCard;\n"],"names":[],"mappings":";;;AAKO,MAAM,aAAwC,CAAC;AAAA,EAClD,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AACX,CAAM,KAAA;AACF,EAAA,IAAI,MAAiC,GAAA,IAAA,CAAA;AACrC,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC1B,IAAA,MAAA,mBACK,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MAAE,SAAU,EAAA,qFAAA;AAAA,KAAA,EACR,IACL,CAAA,CAAA;AAAA,GAED,MAAA;AACH,IAAS,MAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,aAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GACZ,CACJ,CACJ,CAGH,EAAA,UAAA,oBACI,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}