@ludo.ninja/components 2.3.6 → 2.3.8

package/build/modules/opportunity/OpportunityCard.js

@@ -0,0 +1,261 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpportunityCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useDislikeOpportunity_1 = require("../../api/server-opportunities/mutations/useDislikeOpportunity");
+const useLikeOpportunity_1 = require("../../api/server-opportunities/mutations/useLikeOpportunity");
+const useOpenOpportunity_1 = __importDefault(require("../../api/server-opportunities/mutations/useOpenOpportunity"));
+const data_1 = __importDefault(require("../../entities/labelCreationType/data"));
+const vars_1 = require("../../fonts/vars");
+const OpportunityDropDown_1 = require("./OpportunityDropDown");
+const ShareIcon_1 = require("./ShareIcon");
+const OpportunityMenu_1 = require("./popup/OpportunityMenu");
+const store_1 = require("../user/store");
+const heart_svg_1 = __importDefault(require("../../public/cards/heart"));
+const env_1 = require("../../store/env");
+const ui_1 = require("../../store/ui");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const colors_1 = require("../../styles/colors");
+const boxTransform_1 = __importDefault(require("../../styles/mixins/boxTransform"));
+const typography_1 = require("../../styles/typography");
+const CardCategory_1 = __importDefault(require("../../system/Cards/CardContent/CardCategory"));
+const Headicons_1 = __importDefault(require("../../system/Cards/Styles/Headicons"));
+const ImageInterceptor_1 = require("../../system/Img/ImageInterceptor");
+const index_1 = require("../../system/index");
+const screen_1 = require("../../utils/screen");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const colors_2 = require("@ludo.ninja/ui/build/styles/colors");
+const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const moment_1 = __importDefault(require("moment/moment"));
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const SWrapperLink = styled_components_1.default.a `
+  position: relative;
+  background-color: ${colors_2.WhiteColor};
+  border-radius: 6px;
+  ${boxShadow_1.default};
+  ${boxTransform_1.default};
+  width: 252px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &:hover ${Headicons_1.default} {
+    transition: 0.2s opacity ease-in;
+    opacity: 1 !important;
+  }
+
+  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+    width: 164px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    width: 154px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  }
+`;
+const StyledCardHead = styled_components_1.default.div `
+  position: relative;
+  height: 152px;
+  width: 252px;
+  margin: 0 auto;
+
+  .imgWrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (max-width: 1200px) {
+    height: 100px;
+    width: 164px;
+  }
+
+  @media (max-width: 767px) {
+    height: 92px;
+    width: 154px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(152)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+  }
+`;
+const StyledCardContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  min-height: 212px;
+  //max-height: 212px;
+  flex-grow: 1;
+  @media (max-width: 767px) {
+    min-height: 190px;
+    //max-height: 84px;
+  }
+
+  .cardContent {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+
+    .cardContentWrapper {
+      display: flex;
+      flex-direction: column;
+      width: calc(100% - 4px);
+      overflow: hidden;
+
+      .mainName {
+        font-family: ${vars_1.dmsansFontVarCss.css};
+        ${typography_1.TextSmall};
+        color: ${colors_1.TextGrayColor};
+        font-size: 13px;
+        flex: 1;
+        -webkit-line-clamp: 6;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        display: -webkit-box;
+      }
+
+      .secondName {
+        font-family: ${vars_1.poppinsFontVarCss.css};
+        ${typography_1.FH5};
+        color: ${colors_1.BlackColor};
+        font-size: 15px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: calc(100% - 20px);
+      }
+
+      .categoryName {
+        color: #6048ff;
+        font-size: 12px;
+        line-height: 16px;
+        font-family: ${vars_1.poppinsFontVarCss.css};
+        margin-top: 12px;
+        display: inline-flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        .participantsCount {
+          color: ${colors_1.TextGrayColor};
+          ${typography_1.FH6}
+        }
+      }
+    }
+  }
+
+  .date {
+    color: #b0b2c0;
+    font-size: 12px;
+    line-height: 16px;
+    font-family: ${vars_1.poppinsFontVarCss.css};
+  }
+
+  @media (max-width: 1040px) {
+    height: auto;
+    padding: 12px;
+  }
+  @media (max-width: 1199px) {
+    .categoryFooter {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} ${(0, _4k_1.adaptiveValueCalc)(16)};
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(212)};
+    max-height: ${(0, _4k_1.adaptiveValueCalc)(212)};
+
+    .cardContent {
+      .cardContentWrapper {
+        .mainName {
+          font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+        }
+
+        .secondName {
+          font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+        }
+
+        .categoryName {
+          font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
+          line-height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+          margin-top: ${(0, _4k_1.adaptiveValueCalc)(12)};
+        }
+      }
+    }
+
+    .date {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+`;
+const SImage = styled_components_1.default.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const OpportunityImage = ({ src, alt }) => {
+    return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { className: "imgWrapper", children: (0, jsx_runtime_1.jsx)(SImage, { src: src, alt: alt, width: 252, height: 152 }) }));
+};
+const OpportunityLike = ({ isDefaultLiked, opportunityId, toolsForRemove, }) => {
+    const [isLiked, setIsLiked] = (0, react_1.useState)(isDefaultLiked);
+    const [isLoadingMutation, setIsLoadingMutation] = (0, react_1.useState)(false);
+    const { likeOpportunityAction } = (0, useLikeOpportunity_1.useLikeOpportunity)();
+    const { dislikeOpportunityAction } = (0, useDislikeOpportunity_1.useDislikeOpportunity)();
+    const handleLikeToggle = async () => {
+        setIsLoadingMutation(true);
+        try {
+            if (isLiked) {
+                await dislikeOpportunityAction({ opportunityId });
+                toolsForRemove?.("opportunity");
+                setIsLiked(false);
+            }
+            else {
+                await likeOpportunityAction({ opportunityId });
+                setIsLiked(true);
+            }
+        }
+        catch (e) {
+            //====
+        }
+        setIsLoadingMutation(false);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: `icon like ${isLiked ? "liked" : ""}`, onClick: handleLikeToggle, style: {
+            pointerEvents: isLoadingMutation ? "none" : "unset",
+        }, children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
+};
+const OpportunityCard = ({ opportunity, toolsForRemove, }) => {
+    const { NEXT_PUBLIC_ENV_VALUE } = (0, env_1.useEnvStore)((state) => ({
+        NEXT_PUBLIC_ENV_VALUE: state.NEXT_PUBLIC_ENV_VALUE,
+    }));
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    const { openOpportunityAction } = (0, useOpenOpportunity_1.default)();
+    const isMobile = !!(windowDimensions?.windowWidth && windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
+    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
+    const { openModalSidebarPortal, closeModalSidebarPortal } = (0, ui_1.useUiStore)((state) => ({
+        openModalSidebarPortal: state.openModalSidebarPortal,
+        closeModalSidebarPortal: state.closeModalSidebarPortal,
+    }));
+    const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
+    const opportunityLink = opportunity.opportunityType === "TOKEN_AIRDROP"
+        ? `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/brand/${opportunity.opportunityId}`
+        : opportunity.projectUrl || opportunity.shareLink || "";
+    const isShowParticipantsCount = typeof opportunity.availablePlacesForAirdrop === 'number' && typeof opportunity.participantsLimit === 'number';
+    return ((0, jsx_runtime_1.jsxs)(SWrapperLink, { href: opportunityLink, target: "_blank", onClick: () => openOpportunityAction({ opportunityId: opportunity.opportunityId }), children: [(0, jsx_runtime_1.jsxs)(StyledCardHead, { children: [(0, jsx_runtime_1.jsx)(OpportunityImage, { alt: opportunity.name, src: opportunity.media ? `${getMediaENVDomain()}/opportunity-medias/${opportunity.media}` : "" }), (0, jsx_runtime_1.jsx)(Headicons_1.default, { isMobile: isMobile, onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: () => {
+                                        openModalSidebarPortal((0, jsx_runtime_1.jsx)(OpportunityMenu_1.OpportunityMenu, { opportunity: opportunity, onClose: closeModalSidebarPortal }));
+                                    }, children: (0, jsx_runtime_1.jsx)(ShareIcon_1.ShareIcon, {}) }), !isProd() && ((0, jsx_runtime_1.jsx)(OpportunityLike, { isDefaultLiked: !!(isSignedIn && opportunity.liked), opportunityId: opportunity.opportunityId, toolsForRemove: toolsForRemove }))] }) })] }), (0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cardContent", children: [(0, jsx_runtime_1.jsxs)("div", { className: "cardContentWrapper", children: [(0, jsx_runtime_1.jsx)("p", { className: `secondName`, children: opportunity.name }), (0, jsx_runtime_1.jsx)("p", { className: `mainName`, children: opportunity.description }), (0, jsx_runtime_1.jsxs)("p", { className: `categoryName`, children: [opportunity.categoryName, isShowParticipantsCount && (0, jsx_runtime_1.jsx)("span", { className: 'participantsCount', children: `${opportunity.availablePlacesForAirdrop}/${opportunity.participantsLimit}` })] })] }), (0, jsx_runtime_1.jsx)(OpportunityDropDown_1.OpportunityDropDown, { opportunity: opportunity })] }), (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", className: `categoryFooter`, children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: data_1.default[opportunity.opportunityType] || data_1.default.opportunity }), opportunity.activeUntil && ((0, jsx_runtime_1.jsx)("div", { className: "date", children: `till ${(0, moment_1.default)(opportunity.activeUntil).format("LL")}` }))] })] })] }));
+};
+exports.OpportunityCard = OpportunityCard;

package/build/modules/opportunity/OpportunityDropDown.d.ts

@@ -0,0 +1,5 @@
+import { TOpportunity } from './type';
+export declare const GOOGLE_FORM_REPORT_OPPORTUNITY = "https://docs.google.com/forms/d/e/1FAIpQLScjeZ0ZHrsOKteM1FtWx6GfolXfWa9W2JFSwpwwI_sz-dsrkg/viewform";
+export declare const OpportunityDropDown: ({ opportunity, }: {
+    opportunity: TOpportunity;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/modules/opportunity/OpportunityDropDown.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpportunityDropDown = exports.GOOGLE_FORM_REPORT_OPPORTUNITY = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import { useUiStore } from '@/store/ui';
+const CardShowMore_1 = require("../../system/Cards/CardContent/CardShowMore");
+const moreBtnVertical_svg_1 = __importDefault(require("../../public/creation/card/moreBtnVertical"));
+const encodeQuery_1 = require("./encodeQuery");
+exports.GOOGLE_FORM_REPORT_OPPORTUNITY = 'https://docs.google.com/forms/d/e/1FAIpQLScjeZ0ZHrsOKteM1FtWx6GfolXfWa9W2JFSwpwwI_sz-dsrkg/viewform';
+const OpportunityDropDown = ({ opportunity, }) => {
+    // const openAlert = useUiStore((state) => state.openAlert);
+    // const copyAssetLinkToClipboard = (e: { preventDefault: () => void }) => {
+    //   e.preventDefault();
+    //   copyToClipboard(`${window.location.origin}${href}`);
+    //   openAlert({
+    //     type: alertVariants.copied,
+    //   });
+    // };
+    const onReportClick = () => {
+        const opportunityId = opportunity.opportunityId
+            ? `ID: ${opportunity.opportunityId}`
+            : '';
+        const link = opportunity.projectUrl
+            ? `  Link: ${opportunity.projectUrl}`
+            : '';
+        const generatedQueryParams = encodeQuery_1.encodeQuery.stringify({
+            'entry.1716021430': 'Opportunity',
+            'entry.102149572': `${opportunityId}${link}`,
+            'entry.483745074': `Opportunity: ${opportunity.name}`,
+        }, { format: 'RFC1738' } //   "RFC1738" format - replaces spaces ' ' with '+'.
+        );
+        const url = `${exports.GOOGLE_FORM_REPORT_OPPORTUNITY}?usp=pp_url&${generatedQueryParams}`;
+        window.open(url, '_blank');
+    };
+    return ((0, jsx_runtime_1.jsx)(CardShowMore_1.StyledCardShowMore, { onClick: (e) => {
+            e.stopPropagation();
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: `cardShowMoreDropDown`, children: (0, jsx_runtime_1.jsx)("span", { className: 'cardShowMoreDropDownItem', onClick: onReportClick, children: "Report" }) })] }) }));
+};
+exports.OpportunityDropDown = OpportunityDropDown;

package/build/modules/opportunity/ShareIcon.d.ts

@@ -0,0 +1 @@
+export declare const ShareIcon: () => import("react/jsx-runtime").JSX.Element;

package/build/modules/opportunity/ShareIcon.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShareIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "18", viewBox: "0 0 20 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.33333 2.24974C1.49238 2.24974 0 3.76081 0 5.6248V14.6249C0 16.4889 1.49238 18 3.33333 18H16.6667C18.5076 18 20 16.4889 20 14.6249V5.6248C20 3.76081 18.5076 2.24974 16.6667 2.24974H14.9663C14.0182 2.24974 13.115 1.8406 12.4831 1.12487C11.1591 -0.374955 8.84093 -0.374958 7.51688 1.12487C6.88503 1.8406 5.98186 2.24974 5.03375 2.24974H3.33333ZM10.6285 2.51925C10.2814 2.15978 9.71859 2.15978 9.37146 2.51925L5.81591 6.20113C5.46877 6.56059 5.46877 7.1434 5.81591 7.50287C6.16304 7.86233 6.72585 7.86233 7.07298 7.50287L9.11111 5.39233V11.4543C9.11111 11.9627 9.50908 12.3748 10 12.3748C10.4909 12.3748 10.8889 11.9627 10.8889 11.4543L10.8889 5.39233L12.927 7.50287C13.2741 7.86233 13.837 7.86233 14.1841 7.50287C14.5312 7.1434 14.5312 6.56059 14.1841 6.20113L10.6285 2.51925Z", fill: "#B0B2C0" }) }));
+exports.ShareIcon = ShareIcon;

package/build/modules/opportunity/encodeQuery.d.ts

@@ -0,0 +1,14 @@
+import { IParseOptions, IStringifyOptions } from 'qs';
+type AnyObject = {
+    [Key in string]: any;
+};
+declare class EncodeQuery {
+    defaultParseOptions: {
+        arrayLimit: number;
+    };
+    stringify(params: AnyObject, options?: IStringifyOptions): string;
+    parseQuery(query: string, options?: IParseOptions): AnyObject;
+    checkEmptyParams(search: AnyObject): AnyObject;
+}
+declare const encodeQuery: EncodeQuery;
+export { encodeQuery };

package/build/modules/opportunity/encodeQuery.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.encodeQuery = void 0;
+const qs_1 = __importDefault(require("qs"));
+class EncodeQuery {
+    defaultParseOptions = { arrayLimit: 100 };
+    stringify(params, options) {
+        return qs_1.default.stringify(this.checkEmptyParams(params), options) || '';
+    }
+    parseQuery(query, options) {
+        const params = query.replace(/\?/, '');
+        return qs_1.default.parse(params, { ...this.defaultParseOptions, ...options });
+    }
+    checkEmptyParams(search) {
+        const keys = Object.keys(search);
+        return keys.reduce((formated, item) => {
+            if (search[item] && search[item].toString()) {
+                return {
+                    ...formated,
+                    [item]: search[item],
+                };
+            }
+            return formated;
+        }, {});
+    }
+}
+const encodeQuery = new EncodeQuery();
+exports.encodeQuery = encodeQuery;

package/build/modules/opportunity/popup/CopyIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+};
+declare const CopyIcon: React.FC<Props>;
+export default CopyIcon;

package/build/modules/opportunity/popup/CopyIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CopyIcon = ({ className, onClick, style }) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, onClick: onClick, style: style, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.77284 8.94322C2.88764 10.8284 2.76634 13.7637 4.50193 15.4992C6.23752 17.2348 9.17275 17.1135 11.0579 15.2283L12.1958 14.0905L10.7991 12.6938L9.66126 13.8316C8.61392 14.879 6.98324 14.9464 6.01903 13.9821C5.05481 13.0179 5.1222 11.3873 6.16953 10.3399L7.30735 9.20209L5.91066 7.8054L4.77284 8.94322Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.21705 11.3874L8.61374 12.7841L12.7858 8.61211L11.3891 7.21542L7.21705 11.3874Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.80703 5.90903L9.20372 7.30572L10.3415 6.1679C11.3889 5.12057 13.0196 5.05318 13.9838 6.0174C14.948 6.98161 14.8806 8.61229 13.8333 9.65963L12.6954 10.7975L14.0921 12.1941L15.23 11.0563C17.1152 9.17112 17.2365 6.23589 15.5009 4.5003C13.7653 2.76472 10.8301 2.88601 8.94485 4.77121L7.80703 5.90903Z", fill: "currentColor" })] }));
+};
+exports.default = CopyIcon;

package/build/modules/opportunity/popup/FacebookIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+};
+declare const FacebookIcon: React.FC<Props>;
+export default FacebookIcon;

package/build/modules/opportunity/popup/FacebookIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FacebookIcon = ({ className, onClick, style }) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, onClick: onClick, style: style, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "8.00002", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.8843 12.3279H12.8694L13.1812 10.2989H10.8843V9.18982C10.8843 8.34704 11.1581 7.59957 11.9417 7.59957H13.2008V5.8291C12.9795 5.799 12.5116 5.7334 11.6275 5.7334C9.78122 5.7334 8.69889 6.71433 8.69889 8.94941V10.2993H6.80078V12.3283H8.6985V18.0001C9.12693 18.0001 9.45521 18.0001 9.84603 18.0001C10.1993 18.0001 10.5652 18.0001 10.8843 18.0001V12.3279Z", fill: "#F3F4F9" })] }));
+};
+exports.default = FacebookIcon;

package/build/modules/opportunity/popup/LinkedInIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+};
+declare const LinkedInIcon: React.FC<Props>;
+export default LinkedInIcon;

package/build/modules/opportunity/popup/LinkedInIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkedInIcon = ({ className, onClick, style }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, onClick: onClick, style: style, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M16.8156 2H3.18125C2.52812 2 2 2.51563 2 3.15313V16.8438C2 17.4813 2.52812 18 3.18125 18H16.8156C17.4688 18 18 17.4813 18 16.8469V3.15313C18 2.51563 17.4688 2 16.8156 2ZM6.74687 15.6344H4.37188V7.99687H6.74687V15.6344ZM5.55938 6.95625C4.79688 6.95625 4.18125 6.34062 4.18125 5.58125C4.18125 4.82188 4.79688 4.20625 5.55938 4.20625C6.31875 4.20625 6.93437 4.82188 6.93437 5.58125C6.93437 6.3375 6.31875 6.95625 5.55938 6.95625ZM15.6344 15.6344H13.2625V11.9219C13.2625 11.0375 13.2469 9.89687 12.0281 9.89687C10.7937 9.89687 10.6062 10.8625 10.6062 11.8594V15.6344H8.2375V7.99687H10.5125V9.04063H10.5437C10.8594 8.44063 11.6344 7.80625 12.7875 7.80625C15.1906 7.80625 15.6344 9.3875 15.6344 11.4438V15.6344Z", fill: "currentColor" }) }));
+};
+exports.default = LinkedInIcon;

package/build/modules/opportunity/popup/LogoXIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+};
+declare const LogoXIcon: React.FC<Props>;
+export default LogoXIcon;

package/build/modules/opportunity/popup/LogoXIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LogoXIcon = ({ className, onClick, style }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, onClick: onClick, style: style, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.01859 10.7009L2.30407 17.2237H4.83554L9.20961 12.2177L13.0639 17.2247L18 17.1978L11.7417 8.9221L17.0824 2.80447L14.5916 2.77661L10.5574 7.37419L7.10591 2.78412L2 2.77858L8.01859 10.7009ZM15.0105 15.7222L13.7331 15.7182L4.95653 4.22827H6.33063L15.0105 15.7222Z", fill: "currentColor" }) }));
+};
+exports.default = LogoXIcon;

package/build/modules/opportunity/popup/OpportunityMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TOpportunity } from '../type';
+type Props = {
+    opportunity: TOpportunity;
+    onClose: () => void;
+};
+export declare const OpportunityMenu: React.FC<Props>;
+export {};

package/build/modules/opportunity/popup/OpportunityMenu.js

@@ -0,0 +1,204 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpportunityMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_share_1 = require("react-share");
+const styled_components_1 = __importDefault(require("styled-components"));
+const vars_1 = require("@ludo.ninja/ui/build/fonts/vars");
+const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ui_1 = require("../../../store/ui");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const CopyIcon_1 = __importDefault(require("./CopyIcon"));
+const FacebookIcon_1 = __importDefault(require("./FacebookIcon"));
+const LinkedInIcon_1 = __importDefault(require("./LinkedInIcon"));
+const LogoXIcon_1 = __importDefault(require("./LogoXIcon"));
+const useCopyOpportunityShareLink_1 = __importDefault(require("../../../api/server-opportunities/mutations/useCopyOpportunityShareLink"));
+const transitionMain = '200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
+const SWrapper = styled_components_1.default.div `
+  margin: -24px;
+  .root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 238px;
+    padding: 8px;
+
+    border-radius: 8px;
+    background: #ffffff;
+    box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.12);
+
+    ${ScreenWidth_1.mediaQuery.mobile} {
+      width: 100%;
+    }
+  }
+
+  .title {
+    display: flex;
+    padding: 10px 8px;
+    align-items: center;
+
+    color: #474b5d;
+    text-align: center;
+
+    /* Desktop/H3 */
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 26px; /* 144.444% */
+  }
+
+  .item {
+    display: flex;
+    padding: 10px 8px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    border-radius: 4px;
+
+    & .shareButton {
+      display: flex;
+      /*padding: 10px 8px;*/
+      align-items: center;
+      gap: 8px;
+    }
+
+    & .typography {
+      color: #12183a;
+    }
+
+    & .icon {
+      color: #b0b2c0;
+    }
+
+    transition: ${transitionMain};
+
+    &:hover {
+      background: #f3f4f9;
+      cursor: pointer;
+
+      & .icon {
+        color: #6048ff;
+      }
+    }
+  }
+
+  .icon {
+    transition: ${transitionMain};
+  }
+
+  .typography {
+    flex-grow: 1;
+    /* Desktop/H5 */
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    transition: ${transitionMain};
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    margin: 8px 0;
+    background-color: #cfd5ea;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin: ${(0, _4k_1.adaptiveValueCalc)(-24)};
+    .root {
+      width: ${(0, _4k_1.adaptiveValueCalc)(238)};
+      padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      box-shadow: 0px ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)}
+        ${(0, _4k_1.adaptiveValueCalc)(-16)} rgba(33, 21, 95, 0.12);
+    }
+
+    .icon svg {
+      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+
+    .title {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(8)};
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(18)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(26)};
+    }
+
+    .item {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(8)};
+      gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+
+      & .shareButton {
+        gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      }
+    }
+
+    .typography {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    }
+
+    .divider {
+      height: ${(0, _4k_1.adaptiveValueCalc)(1)};
+      margin: ${(0, _4k_1.adaptiveValueCalc)(8)} 0;
+    }
+  }
+`;
+const OpportunityMenu = ({ onClose, opportunity }) => {
+    const { copyOpportunityShareLinkAction } = (0, useCopyOpportunityShareLink_1.default)();
+    const opportunityLink = opportunity.shareLink || opportunity?.projectUrl || '';
+    const handleClickMenuItem = (event, item) => {
+        event.stopPropagation();
+        copyOpportunityShareLinkAction({ opportunityId: opportunity.opportunityId });
+        if (item.closeOnClick) {
+            onClose();
+        }
+        item.onClick && item.onClick();
+    };
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const topMenuItems = () => {
+        return [
+            {
+                id: 'copylink',
+                title: 'Copy link',
+                onClick: () => {
+                    opportunityLink && navigator.clipboard.writeText(opportunityLink);
+                    openAlert({
+                        type: type_1.alertVariants.copied,
+                    });
+                },
+                icon: (0, jsx_runtime_1.jsx)(CopyIcon_1.default, {}),
+                closeOnClick: true,
+            },
+        ];
+    };
+    const baseTitle = '🚀 Exciting Opportunity Alert! 💡 Just stumbled upon something incredible you need to check out. ✨';
+    const mainMenuItems = [
+        {
+            id: 'twitter',
+            closeOnClick: true,
+            content: ((0, jsx_runtime_1.jsxs)(react_share_1.TwitterShareButton, { className: 'shareButton', url: opportunityLink, title: `${baseTitle}`, children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(LogoXIcon_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", { className: 'typography', children: "Share on X" })] })),
+        },
+        {
+            id: 'facebook',
+            closeOnClick: true,
+            content: ((0, jsx_runtime_1.jsxs)(react_share_1.FacebookShareButton, { className: 'shareButton', url: opportunityLink, children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(FacebookIcon_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", { className: 'typography', children: "Share on Facebook" })] })),
+        },
+        {
+            id: 'linkedin',
+            closeOnClick: true,
+            content: ((0, jsx_runtime_1.jsxs)(react_share_1.LinkedinShareButton, { className: 'shareButton', url: opportunityLink, children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(LinkedInIcon_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", { className: 'typography', children: "Share on LinkedIn" })] })),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(SWrapper, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'root', children: [(0, jsx_runtime_1.jsx)("div", { className: 'title', children: "Tell a friend about it!" }), topMenuItems().map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'item', onClick: (event) => handleClickMenuItem(event, item), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'icon', children: [" ", item.icon] }), (0, jsx_runtime_1.jsx)("div", { className: 'typography', children: item.title })] }, item.id))), (0, jsx_runtime_1.jsx)("div", { className: 'divider' }), mainMenuItems.map((item) => ((0, jsx_runtime_1.jsx)("div", { className: 'item', onClick: (event) => handleClickMenuItem(event, item), children: item.content }, item.id)))] }) }));
+};
+exports.OpportunityMenu = OpportunityMenu;