qlu-20-ui-library 1.9.1 → 1.9.2

package/dist/components/ContentLocked/ContentLocked.d.ts

@@ -0,0 +1,8 @@
+type ContentLockedProps = {
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    onUpgradeClick?: () => void;
+};
+declare function ContentLocked({ title, description, buttonText, onUpgradeClick, }: ContentLockedProps): import("react/jsx-runtime").JSX.Element;
+export default ContentLocked;

package/dist/components/PersonView/PersonViewBody/index.d.ts

@@ -13,6 +13,8 @@ interface PersonViewBodyProps {
     scrollToEducation?: boolean;
     dataCy?: string;
     productsObject: IMultiTypeFilterPayload<IPillTypePayload<ProductData>>;
+    hasSubscription?: boolean;
+    onUpgradeClick?: () => void;
 }
 declare const PersonViewBody: React.FC<PersonViewBodyProps>;
 export default PersonViewBody;

package/dist/components/PersonView/PersonViewExperienceCard/index.d.ts

@@ -13,6 +13,8 @@ interface PersonViewExperienceCardProps {
     isSummaryView?: boolean;
     dataCy?: string;
     productsObject?: IMultiTypeFilterPayload<IPillTypePayload<ProductData>>;
+    isBlurred?: boolean;
+    onUpgradeClick?: () => void;
 }
 declare const PersonViewExperienceCard: React.FC<PersonViewExperienceCardProps>;
 export default PersonViewExperienceCard;

package/dist/components/PersonView/PersonViewSummary/index.d.ts

@@ -16,6 +16,8 @@ interface PersonViewSummaryProps {
     dataCy?: string;
     isSummaryView?: boolean;
     productsObject?: IMultiTypeFilterPayload<IPillTypePayload<ProductData>>;
+    hasSubscription?: boolean;
+    onUpgradeClick?: () => void;
 }
-declare const PersonViewSummary: ({ about, experience, totalExperience, education, onCompanyNameClick, industries, isIndustryLoading, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading, scrollToEducation, dataCy, isSummaryView, productsObject, }: PersonViewSummaryProps) => import("react/jsx-runtime").JSX.Element;
+declare const PersonViewSummary: ({ about, experience, totalExperience, education, onCompanyNameClick, industries, isIndustryLoading, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading, scrollToEducation, dataCy, isSummaryView, productsObject, hasSubscription, onUpgradeClick, }: PersonViewSummaryProps) => import("react/jsx-runtime").JSX.Element;
 export default PersonViewSummary;

package/dist/components/index.d.ts

@@ -55,6 +55,7 @@ export { default as PersonCompanyNameClickable } from "./PersonCompanyNameClicka
 export { default as PersonViewBody } from "./PersonView/PersonViewBody";
 export { default as PersonViewInfo } from "./PersonView/PersonViewInfo";
 export { default as PersonViewExperienceCard } from "./PersonView/PersonViewExperienceCard";
+export { default as ContentLocked } from "./ContentLocked/ContentLocked";
 export { default as PersonViewExperienceDetails } from "./PersonView/PersonViewExperienceDetails";
 export { default as PersonViewHeader } from "./PersonView/PersonViewHeader";
 export { default as PersonViewSummary } from "./PersonView/PersonViewSummary";

package/dist/types/components/ContentLocked/ContentLocked.d.ts

@@ -0,0 +1,8 @@
+type ContentLockedProps = {
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    onUpgradeClick?: () => void;
+};
+declare function ContentLocked({ title, description, buttonText, onUpgradeClick, }: ContentLockedProps): import("react/jsx-runtime").JSX.Element;
+export default ContentLocked;

package/dist/types/components/ContentLocked/ContentLocked.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GetSvgIcon, PrimaryButton } from "..";
+import styles from "./styles.module.scss";
+function ContentLocked({ title = "Content Locked", description = "Upgrade your plan to get access to this content", buttonText = "Upgrade Plan", onUpgradeClick, }) {
+    return (_jsx("div", { className: styles.contentLockedContainer, children: _jsxs("div", { className: styles.contentLockedContent, children: [_jsx("div", { className: styles.contentLockedIcon, children: _jsx(GetSvgIcon, { iconType: "lock", iconSize: "24" }) }), _jsxs("div", { children: [_jsx("h2", { className: styles.contentLockedTitle, children: title }), _jsx("p", { className: styles.contentLockedDescription, children: description })] }), _jsx(PrimaryButton, { sizeVariant: "base", colorVariant: "orange", onClick: onUpgradeClick, children: buttonText })] }) }));
+}
+export default ContentLocked;

package/dist/types/components/ContentLocked/index.d.ts

@@ -0,0 +1,2 @@
+import ContentLocked from "./ContentLocked";
+export default ContentLocked;

package/dist/types/components/ContentLocked/index.js

@@ -0,0 +1,2 @@
+import ContentLocked from "./ContentLocked";
+export default ContentLocked;

package/dist/types/components/PersonView/PersonViewBody/index.d.ts

@@ -13,6 +13,8 @@ interface PersonViewBodyProps {
     scrollToEducation?: boolean;
     dataCy?: string;
     productsObject: IMultiTypeFilterPayload<IPillTypePayload<ProductData>>;
+    hasSubscription?: boolean;
+    onUpgradeClick?: () => void;
 }
 declare const PersonViewBody: React.FC<PersonViewBodyProps>;
 export default PersonViewBody;

package/dist/types/components/PersonView/PersonViewBody/index.js

@@ -6,10 +6,18 @@ const PersonViewBody = ({ personViewActiveTab = "Experience", personViewSummaryP
     experience: dummyExpPayload,
     education: dummyEduPayload,
     totalExperience: "",
-}, onCompanyNameClick, industries = [], isIndustryLoading = false, filterIndustries = [], filterSkills = [], filterProducts = [], isExpIndustriesLoading = false, scrollToEducation = false, dataCy, productsObject, }) => {
+}, onCompanyNameClick, industries = [], isIndustryLoading = false, filterIndustries = [], filterSkills = [], filterProducts = [], isExpIndustriesLoading = false, scrollToEducation = false, dataCy, productsObject, hasSubscription, onUpgradeClick, }) => {
+    // Filter data based on subscription status
+    const filteredExperience = hasSubscription
+        ? personViewSummaryPayload.experience
+        : personViewSummaryPayload.experience?.slice(0, 3);
+    // For free users, don't pass education data since the section is hidden
+    const filteredEducation = hasSubscription
+        ? personViewSummaryPayload.education
+        : undefined;
     switch (personViewActiveTab) {
         case "Experience":
-            return (_jsx(PersonViewSummary, { about: personViewSummaryPayload.about, experience: personViewSummaryPayload.experience, education: personViewSummaryPayload.education, onCompanyNameClick: onCompanyNameClick ? onCompanyNameClick : () => { }, totalExperience: personViewSummaryPayload.totalExperience, industries: industries, isIndustryLoading: isIndustryLoading, filterIndustries: filterIndustries, filterSkills: filterSkills, filterProducts: filterProducts, isExpIndustriesLoading: isExpIndustriesLoading, scrollToEducation: scrollToEducation, dataCy: dataCy, productsObject: productsObject }));
+            return (_jsx(PersonViewSummary, { about: personViewSummaryPayload.about, experience: filteredExperience, education: filteredEducation, onCompanyNameClick: onCompanyNameClick ? onCompanyNameClick : () => { }, totalExperience: personViewSummaryPayload.totalExperience, industries: industries, isIndustryLoading: isIndustryLoading, filterIndustries: filterIndustries, filterSkills: filterSkills, filterProducts: filterProducts, isExpIndustriesLoading: isExpIndustriesLoading, scrollToEducation: scrollToEducation, dataCy: dataCy, productsObject: productsObject, hasSubscription: hasSubscription, onUpgradeClick: onUpgradeClick }));
         default:
             return _jsx(_Fragment, {});
     }

package/dist/types/components/PersonView/PersonViewExperienceCard/index.d.ts

@@ -14,6 +14,8 @@ interface PersonViewExperienceCardProps {
     isSummaryView?: boolean;
     dataCy?: string;
     productsObject?: IMultiTypeFilterPayload<IPillTypePayload<ProductData>>;
+    isBlurred?: boolean;
+    onUpgradeClick?: () => void;
 }
 declare const PersonViewExperienceCard: React.FC<PersonViewExperienceCardProps>;
 export default PersonViewExperienceCard;

package/dist/types/components/PersonView/PersonViewExperienceCard/index.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./style.scss";
 import RectangularIcon from "../../RectangularIcon";
 import PersonViewExperienceDetails from "../PersonViewExperienceDetails";
+import { ContentLocked } from "../..";
 import clsx from "clsx";
-const PersonViewExperienceCard = ({ companyLogo = "", experienceDetails = [], onCompanyNameClick, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading = false, companyExp, isSummaryView = false, dataCy, productsObject, }) => {
+const PersonViewExperienceCard = ({ companyLogo = "", experienceDetails = [], onCompanyNameClick, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading = false, companyExp, isSummaryView = false, dataCy, productsObject, isBlurred = false, onUpgradeClick, }) => {
     const groupedExperiences = {};
     experienceDetails.forEach((experience) => {
         const { companyName } = experience;
@@ -12,16 +13,19 @@ const PersonViewExperienceCard = ({ companyLogo = "", experienceDetails = [], on
         }
         groupedExperiences[companyName].push(experience);
     });
-    return (_jsx("div", { className: "personViewExperienceCard--Generic", children: Object.entries(groupedExperiences).map(([companyName, experiences]) => {
-            const hasMultipleExperiences = experiences.length > 1;
-            return (_jsx("div", { children: experiences.map((experience, key) => {
-                    return (_jsxs("div", { className: "parentDiv", children: [_jsxs("div", { className: "leftDiv", children: [key === 0 && (_jsx(RectangularIcon, { iconPath: companyLogo, altImageType: "company", iconSize: "48", placeholderSize: 40 })), hasMultipleExperiences && key < experiences.length - 1 && (_jsx("div", { className: "divider" }))] }), _jsx("div", { className: clsx("experienceItem", {
-                                    withBullet: hasMultipleExperiences,
-                                }), children: _jsx(PersonViewExperienceDetails, { showCompanyName: hasMultipleExperiences && key === 0, experienceDetails: {
-                                        ...experience,
-                                        location: experience.location,
-                                    }, onCompanyNameClick: onCompanyNameClick, filterIndustries: filterIndustries, filterSkills: filterSkills, filterProducts: filterProducts, isExpIndustriesLoading: isExpIndustriesLoading, singleExperience: !hasMultipleExperiences, companyExp: companyExp, isSummaryView: isSummaryView, dataCy: dataCy, productsObject: productsObject }) })] }, key));
-                }) }, companyName));
-        }) }));
+    const blurClass = clsx("personViewExperienceCard--Generic", {
+        "personViewExperienceCard--Blurred": isBlurred,
+    });
+    return (_jsxs("div", { className: blurClass, children: [Object.entries(groupedExperiences).map(([companyName, experiences]) => {
+                const hasMultipleExperiences = experiences.length > 1;
+                return (_jsx("div", { children: experiences.map((experience, key) => {
+                        return (_jsxs("div", { className: "parentDiv", children: [_jsxs("div", { className: "leftDiv", children: [key === 0 && (_jsx(RectangularIcon, { iconPath: companyLogo, altImageType: "company", iconSize: "48", placeholderSize: 40 })), hasMultipleExperiences && key < experiences.length - 1 && (_jsx("div", { className: "divider" }))] }), _jsx("div", { className: clsx("experienceItem", {
+                                        withBullet: hasMultipleExperiences,
+                                    }), children: _jsx(PersonViewExperienceDetails, { showCompanyName: hasMultipleExperiences && key === 0, experienceDetails: {
+                                            ...experience,
+                                            location: experience.location,
+                                        }, onCompanyNameClick: onCompanyNameClick, filterIndustries: filterIndustries, filterSkills: filterSkills, filterProducts: filterProducts, isExpIndustriesLoading: isExpIndustriesLoading, singleExperience: !hasMultipleExperiences, companyExp: companyExp, isSummaryView: isSummaryView, dataCy: dataCy, productsObject: productsObject }) })] }, key));
+                    }) }, companyName));
+            }), isBlurred && onUpgradeClick && (_jsx("div", { className: "personViewExperienceCard--ContentLockedOverlay", children: _jsx(ContentLocked, { title: "Unlock full profile experience", description: "Upgrade to explore the full career journey and experience details of this profile", buttonText: "Upgrade Plan", onUpgradeClick: onUpgradeClick }) }))] }));
 };
 export default PersonViewExperienceCard;

package/dist/types/components/PersonView/PersonViewSummary/index.d.ts

@@ -17,6 +17,8 @@ interface PersonViewSummaryProps {
     dataCy?: string;
     isSummaryView?: boolean;
     productsObject?: IMultiTypeFilterPayload<IPillTypePayload<ProductData>>;
+    hasSubscription?: boolean;
+    onUpgradeClick?: () => void;
 }
-declare const PersonViewSummary: ({ about, experience, totalExperience, education, onCompanyNameClick, industries, isIndustryLoading, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading, scrollToEducation, dataCy, isSummaryView, productsObject, }: PersonViewSummaryProps) => import("react/jsx-runtime").JSX.Element;
+declare const PersonViewSummary: ({ about, experience, totalExperience, education, onCompanyNameClick, industries, isIndustryLoading, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading, scrollToEducation, dataCy, isSummaryView, productsObject, hasSubscription, onUpgradeClick, }: PersonViewSummaryProps) => import("react/jsx-runtime").JSX.Element;
 export default PersonViewSummary;

package/dist/types/components/PersonView/PersonViewSummary/index.js

@@ -6,7 +6,7 @@ import PersonViewEducationCard from "../PersonViewEducationCard";
 import { ClickableText, Loader, SkillIndustryBadge, Tooltip } from "../..";
 import { detectEntitiesInDescription, detectEntitiesInDescriptionWithSlop, highlightRichTextWithSlop, splitTruncatedTextByKeyWordsWithSlop, } from "../../../utils";
 import { useEffect, useState, useRef } from "react";
-const PersonViewSummary = ({ about = "", experience = [], totalExperience = "", education = [], onCompanyNameClick, industries, isIndustryLoading = false, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading = false, scrollToEducation = false, dataCy, isSummaryView, productsObject, }) => {
+const PersonViewSummary = ({ about = "", experience = [], totalExperience = "", education = [], onCompanyNameClick, industries, isIndustryLoading = false, filterIndustries, filterSkills, filterProducts, isExpIndustriesLoading = false, scrollToEducation = false, dataCy, isSummaryView, productsObject, hasSubscription, onUpgradeClick, }) => {
     const [hoveredPill, setHoveredPill] = useState(null);
     const [showMore, setShowMore] = useState(false);
     const educationRef = useRef(null);
@@ -55,7 +55,8 @@ const PersonViewSummary = ({ about = "", experience = [], totalExperience = "",
         onCompanyNameClick &&
         experience?.length !== 0;
     return (_jsx("div", { className: "personViewSummary--Generic", children: _jsxs("div", { className: isAboutNA, children: [about.toLowerCase() !== "not available" && !isSummaryView && (_jsx("h2", { children: "About" })), about.toLowerCase() !== "not available" && (_jsxs("div", { id: "personViewSummary-About-Text", "data-cy": `${dataCy}-about-section`, children: [_jsxs("span", { children: [showMore ? highlightedText : truncatedTextHighlighted, !showMore && isTruncated && "..."] }), isTruncated && (_jsx("div", { className: "clickableTextWrapper", children: _jsx(ClickableText, { text: showMore ? "‎ See less" : "See more", onClick: handleToggleShowMore, sizeVariant: "base" }) })), shouldShowMatchedKeywords && (_jsx("div", { className: "personViewExperienceDetails--MatchedKeywordsAbout", children: isIndustryLoading ? (_jsx(Loader, { width: "24", height: "24" })) : (_jsxs(_Fragment, { children: [aboutSectionProducts.length > 0 && (_jsxs("span", { className: "personViewExperienceDetails--SkillsAndIndustries", children: [_jsx("h2", { children: "COMPANY PRODUCT:" }), _jsx("span", { children: aboutSectionProducts.map((product, key) => (_jsx(Tooltip, { content: 'Extracted from "About"', toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlight: handleHoverPill, highlightPill: false, text: product }) }, `industry-${key}`))) })] })), industries.length > 0 && (_jsxs("span", { className: "personViewExperienceDetails--SkillsAndIndustries", children: [_jsx("h2", { children: "INDUSTRIES MATCHED:" }), _jsx("span", { children: industries.map((industry, key) => (_jsx(Tooltip, { content: 'Extracted from "About"', toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlight: handleHoverPill, highlightPill: true, text: industry, type: "industry" }) }, `industry-${key}`))) })] })), aboutSectionSkills.length > 0 && (_jsxs("span", { className: "personViewExperienceDetails--SkillsAndIndustries", children: [_jsx("h2", { children: "KEYWORDS/SKILLS:" }), _jsx("span", { children: aboutSectionSkills.map((skill, key) => (_jsx(Tooltip, { content: 'Extracted from "About"', toolTipPosition: "bottom", children: _jsx(SkillIndustryBadge, { highlight: handleHoverPill, highlightPill: true, text: skill, type: "skill" }) }, `skill-${key}`))) })] }))] })) }))] })), showExperience && (_jsxs("div", { className: "personViewSummary-Experience", "data-cy": `${dataCy}-experience-section`, children: [_jsx("h2", { children: "Work Experience" }), totalExperience && (_jsxs("span", { className: "totalExperience", children: ["Total: ", totalExperience] })), experience?.map((companyExp, key) => {
-                            return (_jsx(PersonViewExperienceCard, { companyLogo: companyExp?.companyLogo, experienceDetails: companyExp?.experienceDetails, onCompanyNameClick: onCompanyNameClick, filterIndustries: filterIndustries, filterSkills: filterSkills, filterProducts: filterProducts, isExpIndustriesLoading: isExpIndustriesLoading, companyExp: companyExp, isNoSkillsOrIndustries: false, dataCy: `${dataCy}-experience-section`, productsObject: productsObject }, key));
+                            const isBlurred = !hasSubscription && key === 2;
+                            return (_jsx(PersonViewExperienceCard, { companyLogo: companyExp?.companyLogo, experienceDetails: companyExp?.experienceDetails, onCompanyNameClick: onCompanyNameClick, filterIndustries: filterIndustries, filterSkills: filterSkills, filterProducts: filterProducts, isExpIndustriesLoading: isExpIndustriesLoading, companyExp: companyExp, isNoSkillsOrIndustries: false, dataCy: `${dataCy}-experience-section`, productsObject: productsObject, isBlurred: isBlurred, onUpgradeClick: onUpgradeClick }, key));
                         })] })), !isSummaryView && education?.length !== 0 && (_jsxs("div", { ref: educationRef, className: "personViewSummary-Education", "data-cy": `${dataCy}-education-section`, children: [_jsx("h2", { children: "Education" }), education?.map((edu) => {
                             return (_jsx(PersonViewEducationCard, { education: edu }, edu?.index));
                         })] }))] }) }));

package/dist/types/components/index.d.ts

@@ -55,6 +55,7 @@ export { default as PersonCompanyNameClickable } from "./PersonCompanyNameClicka
 export { default as PersonViewBody } from "./PersonView/PersonViewBody";
 export { default as PersonViewInfo } from "./PersonView/PersonViewInfo";
 export { default as PersonViewExperienceCard } from "./PersonView/PersonViewExperienceCard";
+export { default as ContentLocked } from "./ContentLocked/ContentLocked";
 export { default as PersonViewExperienceDetails } from "./PersonView/PersonViewExperienceDetails";
 export { default as PersonViewHeader } from "./PersonView/PersonViewHeader";
 export { default as PersonViewSummary } from "./PersonView/PersonViewSummary";

package/dist/types/components/index.js

@@ -55,6 +55,7 @@ export { default as PersonCompanyNameClickable } from "./PersonCompanyNameClicka
 export { default as PersonViewBody } from "./PersonView/PersonViewBody";
 export { default as PersonViewInfo } from "./PersonView/PersonViewInfo";
 export { default as PersonViewExperienceCard } from "./PersonView/PersonViewExperienceCard";
+export { default as ContentLocked } from "./ContentLocked/ContentLocked";
 export { default as PersonViewExperienceDetails } from "./PersonView/PersonViewExperienceDetails";
 export { default as PersonViewHeader } from "./PersonView/PersonViewHeader";
 export { default as PersonViewSummary } from "./PersonView/PersonViewSummary";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qlu-20-ui-library",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "type": "module",
   "scripts": {
     "dev": "vite",