@bigbinary/neeto-molecules 3.16.0 → 3.16.1-beta

package/dist/cjs/ShareViaLink.js

@@ -1,10 +1,12 @@
 'use strict';
 
 var neetoCist = require('@bigbinary/neeto-cist');
-var ramda = require('ramda');
+var reactRouterDom = require('react-router-dom');
 var classnames = require('classnames');
 var Typography = require('@bigbinary/neetoui/Typography');
+var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var Container = require('./Container.js');
 var jsxRuntime = require('react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
@@ -21,6 +23,9 @@ var Facebook = require('@bigbinary/neeto-icons/Facebook');
 var Linkedin = require('@bigbinary/neeto-icons/Linkedin');
 var Twitter = require('@bigbinary/neeto-icons/Twitter');
 var yup = require('yup');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var general = require('@bigbinary/neeto-commons-frontend/utils/general');
 var injectCss = require('./inject-css-vQvjPR2x.js');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
@@ -29,15 +34,28 @@ var Modal = require('@bigbinary/neetoui/Modal');
 var Input$1 = require('@bigbinary/neetoui/Input');
 var Select = require('@bigbinary/neetoui/Select');
 var DatePicker = require('@bigbinary/neetoui/DatePicker');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var reactRouterDom = require('react-router-dom');
-require('@babel/runtime/helpers/objectWithoutProperties');
+var Share = require('@bigbinary/neeto-icons/Share');
+var QrCode = require('@bigbinary/neeto-icons/QrCode');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var CardLayout = require('./CardLayout.js');
+var Header$1 = require('./Header.js');
+require('./index-JY2zVpnv.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
 require('@bigbinary/neeto-icons/Copy');
 require('@bigbinary/neeto-icons/Check');
 require('@bigbinary/neeto-icons/MenuHorizontal');
 require('@bigbinary/neeto-icons/MenuVertical');
 require('@bigbinary/neetoui/Dropdown');
 require('@bigbinary/neetoui/Tooltip');
+require('./Breadcrumbs.js');
+require('./HelpPopover.js');
+require('@bigbinary/neetoui/Popover');
+require('./Search.js');
+require('@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce');
+require('@bigbinary/neeto-commons-frontend/react-utils/useQueryParams');
+require('@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect');
+require('@bigbinary/neeto-icons/Search');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -119,6 +137,49 @@ var downloadCanvas = function downloadCanvas(canvas) {
   element.click();
   element.remove();
 };
+var copyCanvasToClipboard = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, handleDownloadQRCode) {
+    var blob, clipboardItem;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (canvas) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          _context.prev = 2;
+          _context.next = 5;
+          return new Promise(function (resolve) {
+            return canvas.toBlob(resolve);
+          });
+        case 5:
+          blob = _context.sent;
+          if (blob) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return");
+        case 8:
+          clipboardItem = new ClipboardItem(_defineProperty({}, blob.type, blob));
+          navigator.clipboard.write([clipboardItem]);
+          _context.next = 15;
+          break;
+        case 12:
+          _context.prev = 12;
+          _context.t0 = _context["catch"](2);
+          handleDownloadQRCode();
+        case 15:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 12]]);
+  }));
+  return function copyCanvasToClipboard(_x, _x2) {
+    return _ref4.apply(this, arguments);
+  };
+}();
 var getPathname = function getPathname(url) {
   return new URL(url).pathname.slice(1);
 };
@@ -158,8 +219,8 @@ var PATH_VALIDATION_SCHEMA = yup__namespace.object().shape({
   path: yup__namespace.string().required(i18next.t("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, i18next.t("neetoMolecules.shareViaLink.editUrl.validationError"))
 });
 
-var css = ".no-padding .neeto-ui-input.neeto-ui-input--medium input{padding:0}.no-padding .neeto-ui-input__prefix{color:rgb(var(--neeto-ui-gray-600))!important}";
-injectCss.n(css,{});
+var css$1 = ".no-padding .neeto-ui-input.neeto-ui-input--medium input{padding:0}.no-padding .neeto-ui-input__prefix{color:rgb(var(--neeto-ui-gray-600))!important}";
+injectCss.n(css$1,{});
 
 var Header = Pane.Header,
   Body = Pane.Body,
@@ -416,13 +477,13 @@ var Link = function Link(_ref) {
     "data-cy": "link-block",
     "data-testid": "link-block",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1",
+      className: "flex flex-col gap-2 sm:flex-row sm:items-center",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "neeto-ui-rounded-md neeto-ui-border-gray-200 relative min-w-0 flex-grow truncate border p-2 leading-none",
+        className: "neeto-ui-rounded-md neeto-ui-border-gray-300 relative min-w-0 flex-grow truncate border p-2 leading-none",
         "data-cy": "nui-input-field",
         children: url
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex w-full flex-shrink-0 items-center gap-1 sm:w-auto",
+        className: "flex w-full flex-shrink-0 items-center gap-2 sm:w-auto",
         children: [/*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
           "data-cy": "link-copy-button",
           "data-testid": "link-copy-button",
@@ -488,6 +549,187 @@ var Link = function Link(_ref) {
   });
 };
 
+var _excluded = ["title", "link", "description", "Icon", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Card = function Card(_ref) {
+  var title = _ref.title,
+    link = _ref.link,
+    description = _ref.description,
+    Icon = _ref.Icon,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var Component = neetoCist.isPresent(link) ? reactRouterDom.Link : "div";
+  return /*#__PURE__*/jsxRuntime.jsxs(Component, _objectSpread(_objectSpread({
+    onClick: onClick,
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-molecules-share-landing__card flex cursor-pointer flex-col gap-3 border p-3",
+    to: link
+  }, otherProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        className: "neeto-ui-text-gray-500 flex-shrink-0",
+        size: 24
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "min-w-0 flex-grow break-words",
+        style: "h5",
+        children: title
+      })]
+    }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      className: "break-words",
+      lineHeight: "normal",
+      style: "body2",
+      children: description
+    })]
+  }));
+};
+
+var ShareBlock = function ShareBlock(_ref) {
+  var moreOptions = _ref.moreOptions,
+    disableShareSocialMedia = _ref.disableShareSocialMedia,
+    disableQRDownload = _ref.disableQRDownload,
+    socialMediaProps = _ref.socialMediaProps,
+    qrCodeProps = _ref.qrCodeProps,
+    entity = _ref.entity;
+  var location = reactRouterDom.useLocation();
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleNavigate = function handleNavigate(subPath) {
+    // eslint-disable-next-line @bigbinary/neeto/use-common-routes
+    history.push("".concat(location.pathname, "/").concat(subPath));
+  };
+  var hasMoreOptions = neetoCist.isPresent(moreOptions);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-ui-border-gray-200 mt-8 grid grid-cols-1 gap-4 border-t pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+    children: [hasMoreOptions && moreOptions.map(function (_ref2) {
+      var title = _ref2.title,
+        link = _ref2.link,
+        Icon = _ref2.icon,
+        onClick = _ref2.onClick,
+        dataCy = _ref2.dataCy,
+        description = _ref2.description;
+      return /*#__PURE__*/React.createElement(Card, {
+        Icon: Icon,
+        description: description,
+        link: link,
+        onClick: onClick,
+        title: title,
+        "data-cy": dataCy,
+        "data-testid": dataCy,
+        key: link
+      });
+    }), !disableShareSocialMedia && /*#__PURE__*/jsxRuntime.jsx(Card, {
+      Icon: Share,
+      "data-cy": "social-share-card",
+      "data-testid": "social-share-card",
+      description: (socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.cardDescription) || t("neetoMolecules.shareViaLink.socialMediaShare.description"),
+      title: (socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.cardTitle) || t("neetoMolecules.shareViaLink.socialMediaShare.title"),
+      onClick: function onClick() {
+        return handleNavigate("social-media");
+      }
+    }), !disableQRDownload && entity && /*#__PURE__*/jsxRuntime.jsx(Card, {
+      Icon: QrCode,
+      "data-cy": "qr-code-card",
+      "data-testid": "qr-code-card",
+      description: (qrCodeProps === null || qrCodeProps === void 0 ? void 0 : qrCodeProps.cardDescription) || t("neetoMolecules.shareViaLink.qrCode.description"),
+      title: (qrCodeProps === null || qrCodeProps === void 0 ? void 0 : qrCodeProps.cardTitle) || t("neetoMolecules.shareViaLink.qrCode.title"),
+      onClick: function onClick() {
+        return handleNavigate("qrcode");
+      }
+    })]
+  });
+};
+
+var MainPanel = function MainPanel(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    qrCodeProps = _ref.qrCodeProps,
+    socialMediaProps = _ref.socialMediaProps,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$enabledOptions = _ref.enabledOptions,
+    enabledOptions = _ref$enabledOptions === void 0 ? {
+      regenerate: false,
+      edit: false
+    } : _ref$enabledOptions,
+    _ref$urls = _ref.urls,
+    urls = _ref$urls === void 0 ? [] : _ref$urls,
+    entity = _ref.entity,
+    entityName = _ref.entityName,
+    _ref$handleEdit = _ref.handleEdit,
+    handleEdit = _ref$handleEdit === void 0 ? neetoCist.noop : _ref$handleEdit,
+    _ref$handleRegenerate = _ref.handleRegenerate,
+    handleRegenerate = _ref$handleRegenerate === void 0 ? neetoCist.noop : _ref$handleRegenerate,
+    moreOptions = _ref.moreOptions,
+    _ref$disableShareSoci = _ref.disableShareSocialMedia,
+    disableShareSocialMedia = _ref$disableShareSoci === void 0 ? false : _ref$disableShareSoci,
+    _ref$disableQRDownloa = _ref.disableQRDownload,
+    disableQRDownload = _ref$disableQRDownloa === void 0 ? false : _ref$disableQRDownloa,
+    _ref$publicLinkExpiry = _ref.publicLinkExpiryConfiguration,
+    publicLinkExpiryConfiguration = _ref$publicLinkExpiry === void 0 ? {} : _ref$publicLinkExpiry;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var shouldShowShareBlock = !disableQRDownload || !disableShareSocialMedia || neetoCist.isPresent(moreOptions);
+  return /*#__PURE__*/jsxRuntime.jsx(Container, {
+    className: "neeto-ui-bg-gray-100 neeto-molecule-share-landing-page",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "mx-auto w-full max-w-5xl py-10",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        "data-cy": "share-your-meeting-heading",
+        lineHeight: "tight",
+        style: "h2",
+        className: classnames({
+          "mb-2": neetoCist.isPresent(description),
+          "mb-6": !neetoCist.isPresent(description)
+        }),
+        children: title || t("neetoMolecules.shareViaLink.title", {
+          productName: globalProps.appName
+        })
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "mb-6",
+        "data-cy": "share-your-meeting-heading",
+        lineHeight: "normal",
+        style: "body1",
+        children: description
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-rounded-lg neeto-ui-bg-white p-6 sm:p-8",
+        "data-testid": "share-via-link",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "space-y-4",
+            children: urls.map(function (urlOption) {
+              return /*#__PURE__*/React.createElement(Link, {
+                enabledOptions: enabledOptions,
+                entityName: entityName,
+                handleEdit: handleEdit,
+                handleRegenerate: handleRegenerate,
+                isLoading: isLoading,
+                editUrlProps: ramda.omit(["url"], urlOption),
+                key: urlOption.url,
+                previewUrl: urlOption.previewUrl,
+                url: urlOption.url
+              });
+            })
+          }), neetoCist.isPresent(publicLinkExpiryConfiguration) && /*#__PURE__*/jsxRuntime.jsx(ExpiryNotice, {
+            expiryConfiguration: publicLinkExpiryConfiguration
+          })]
+        }), shouldShowShareBlock && /*#__PURE__*/jsxRuntime.jsx(ShareBlock, {
+          disableQRDownload: disableQRDownload,
+          disableShareSocialMedia: disableShareSocialMedia,
+          entity: entity,
+          moreOptions: moreOptions,
+          qrCodeProps: qrCodeProps,
+          socialMediaProps: socialMediaProps,
+          url: urls[0].url
+        })]
+      })]
+    })
+  });
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -1349,172 +1591,144 @@ var QRCode$1 = (props) => {
 
 var QRCode = function QRCode(_ref) {
   var entity = _ref.entity,
-    url = _ref.url;
+    qrCodeProps = _ref.qrCodeProps,
+    url = _ref.url,
+    shareUrl = _ref.shareUrl;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   if (!entity) return null;
   var id = entity.id,
     name = entity.name;
   var canvasId = "qrcode-share-".concat(id);
-  var handleDownload = function handleDownload() {
+  var handleDownloadQRCode = function handleDownloadQRCode() {
     var canvas = document.getElementById(canvasId);
     if (canvas) downloadCanvas(canvas, {
       name: neetoCist.slugify(name)
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "neeto-ui-border-gray-200 flex flex-col justify-start space-y-2 border-t py-3 pl-8 sm:space-y-4 sm:border-l sm:py-2 sm:pl-6",
-    "data-cy": "qr-download-block",
-    "data-testid": "qr-download-block",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      lineHeight: "normal",
-      style: "body2",
-      weight: "medium",
-      children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-        i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
-        components: {
-          button: /*#__PURE__*/jsxRuntime.jsx(Button, {
-            "data-cy": "qr-code-download-button",
-            "data-testid": "qr-code-download-button",
-            style: "link",
-            onClick: handleDownload
-          })
-        }
+  var handleCopyQRCode = function handleCopyQRCode() {
+    var canvas = document.getElementById(canvasId);
+    if (canvas) copyCanvasToClipboard(canvas, handleDownloadQRCode);
+  };
+  var title = (qrCodeProps === null || qrCodeProps === void 0 ? void 0 : qrCodeProps.pageTitle) || (qrCodeProps === null || qrCodeProps === void 0 ? void 0 : qrCodeProps.cardTitle) || t("neetoMolecules.shareViaLink.qrCode.title");
+  var description = (qrCodeProps === null || qrCodeProps === void 0 ? void 0 : qrCodeProps.pageDescription) || (qrCodeProps === null || qrCodeProps === void 0 ? void 0 : qrCodeProps.cardDescription) || t("neetoMolecules.shareViaLink.qrCode.description");
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    className: "neeto-molecules-embed-qr-code-landing-page py-8",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "mb-4",
+      "data-cy": "back-button",
+      "data-testid": "back-button",
+      icon: LeftArrow,
+      iconPosition: "left",
+      label: t("neetoMolecules.productEmbed.backToShare"),
+      size: "small",
+      style: "link",
+      to: shareUrl
+    }), /*#__PURE__*/jsxRuntime.jsx(Header$1, {
+      className: "py-0",
+      title: t("neetoMolecules.shareViaLink.qrCode.title")
+    }), /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
+      description: description,
+      title: title,
+      actionBlock: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+          "data-cy": "qr-code-download-button",
+          "data-testid": "qr-code-download-button",
+          label: t("neetoMolecules.shareViaLink.qrCode.download"),
+          style: "primary",
+          onClick: handleDownloadQRCode
+        }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
+          "data-cy": "qr-code-copy-button",
+          "data-testid": "qr-code-copy-button",
+          label: t("neetoMolecules.shareViaLink.qrCode.copy"),
+          style: "secondary",
+          onClick: handleCopyQRCode
+        })]
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx(QRCode$1, {
+        className: "mt-6 cursor-pointer",
+        "data-cy": "qr-code-image",
+        "data-testid": "qr-code-image",
+        id: canvasId,
+        size: 160,
+        style: {
+          width: 160,
+          height: 160
+        },
+        value: url,
+        onClick: handleDownloadQRCode
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(QRCode$1, {
-      className: "cursor-pointer",
-      "data-cy": "qr-code-image",
-      "data-testid": canvasId,
-      id: canvasId,
-      size: 256,
-      style: {
-        width: 80,
-        height: 80
-      },
-      value: url,
-      onClick: handleDownload
     })]
   });
 };
 
-var Subtitle = function Subtitle(_ref) {
-  var link = _ref.link,
-    dataCy = _ref.dataCy,
-    _onClick = _ref.onClick,
-    subtitle = _ref.subtitle;
-  var Component = neetoCist.isPresent(link) ? reactRouterDom.Link : "div";
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    "data-cy": dataCy,
-    to: link,
-    onClick: function onClick(event) {
-      event.preventDefault();
-      _onClick === null || _onClick === void 0 || _onClick(event);
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-      style: "body3",
-      weight: "medium",
-      className: classnames("break-words", {
-        "neeto-ui-text-accent-800": neetoCist.isPresent(_onClick) || neetoCist.isPresent(link)
-      }),
-      children: subtitle
-    })
-  });
-};
+var css = ".neeto-molecules-share-landing__card{outline:1px solid rgb(var(--neeto-ui-white))!important;transition:all .3s!important}.neeto-molecules-share-landing__card:hover{border-color:rgb(var(--neeto-ui-primary-500))!important;outline:1px solid rgb(var(--neeto-ui-primary-500))!important}";
+injectCss.n(css,{});
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ShareBlock = function ShareBlock(_ref) {
-  var entity = _ref.entity,
-    postTitle = _ref.postTitle,
+var SocialMedia = function SocialMedia(_ref) {
+  var socialMediaProps = _ref.socialMediaProps,
     url = _ref.url,
-    moreOptions = _ref.moreOptions,
-    disableShareSocialMedia = _ref.disableShareSocialMedia,
-    disableQRDownload = _ref.disableQRDownload;
+    shareUrl = _ref.shareUrl;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var socialMediaButtonClasses = "neeto-ui-bg-gray-200 hover:neeto-ui-bg-gray-300 flex h-10 w-10 cursor-pointer items-center justify-center neeto-ui-rounded-md transition-colors duration-300 ease-in-out";
-  var hasMoreOptions = neetoCist.isPresent(moreOptions);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col divide-y sm:flex-row sm:gap-6 sm:divide-x sm:divide-y-0",
-    children: [hasMoreOptions && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "max-w-md divide-y",
-      children: moreOptions.map(function (_ref2, index) {
-        var title = _ref2.title,
-          link = _ref2.link,
-          Icon = _ref2.icon,
-          onClick = _ref2.onClick,
-          dataCy = _ref2.dataCy,
-          subtitleProps = _ref2.subtitleProps;
-        var Component = neetoCist.isPresent(link) ? reactRouterDom.Link : "div";
-        return /*#__PURE__*/React.createElement(Component, {
-          onClick: onClick,
-          "data-cy": dataCy,
-          key: link,
-          to: link,
-          className: classnames("neeto-ui-border-gray-200 flex cursor-pointer items-center gap-x-2 border-t py-3", {
-            "border-none": index === 0
-          })
-        }, /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-row gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
-            className: "neeto-ui-text-gray-500 flex-shrink-0",
-            size: 24
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-1",
-            children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-              className: "group-hover:underline",
-              style: "body2",
-              weight: "medium",
-              children: title
-            }), subtitleProps && /*#__PURE__*/jsxRuntime.jsx(Subtitle, _objectSpread({}, subtitleProps))]
-          })]
-        }));
-      })
-    }), !disableShareSocialMedia && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-cy": "social-media-block",
-      "data-testid": "social-media-block",
-      className: classnames("neeto-ui-border-gray-200 space-y-2 border-t py-3 sm:space-y-4 sm:border-l sm:py-2", {
-        "pl-8 sm:pl-6": hasMoreOptions
-      }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "neeto-ui-text-gray-800",
-        lineHeight: "normal",
-        style: "body2",
-        weight: "medium",
-        children: t("neetoMolecules.shareViaLink.socialMediaShare.title")
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex gap-4",
-        children: Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-            key = _ref4[0],
-            _ref4$ = _ref4[1],
-            label = _ref4$.label,
-            Icon = _ref4$.icon,
-            generateShareUrl = _ref4$.generateShareUrl;
-          return /*#__PURE__*/jsxRuntime.jsx("a", {
-            className: socialMediaButtonClasses,
+  var title = (socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.pageTitle) || (socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.cardTitle) || t("neetoMolecules.shareViaLink.socialMediaShare.title");
+  var description = (socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.pageDescription) || (socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.cardDescription) || t("neetoMolecules.shareViaLink.socialMediaShare.description");
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    className: "neeto-molecules-social-share-landing-page py-8",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: "mb-4",
+      "data-cy": "back-button",
+      "data-testid": "back-button",
+      icon: LeftArrow,
+      iconPosition: "left",
+      label: t("neetoMolecules.productEmbed.backToShare"),
+      size: "small",
+      style: "link",
+      to: shareUrl
+    }), /*#__PURE__*/jsxRuntime.jsx(Header$1, {
+      className: "py-0",
+      title: t("neetoMolecules.shareViaLink.socialMediaShare.title")
+    }), /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
+      description: description,
+      title: title,
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: Object.entries(SOCIAL_MEDIA_OPTIONS).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            key = _ref3[0],
+            _ref3$ = _ref3[1],
+            label = _ref3$.label,
+            Icon = _ref3$.icon,
+            generateShareUrl = _ref3$.generateShareUrl;
+          return /*#__PURE__*/React.createElement(Button, {
+            label: label,
             "data-cy": "social-media-button-".concat(key),
             "data-testid": "social-media-button-".concat(key),
-            href: generateShareUrl({
-              url: url,
-              title: postTitle
-            }),
+            icon: Icon,
+            iconPosition: "right",
+            key: key,
             rel: "noopener noreferrer",
+            style: "tertiary",
             target: "_blank",
-            title: label,
-            children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-              size: 24
+            href: generateShareUrl({
+              url: url,
+              title: socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.postTitle
             })
-          }, key);
+          }, /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            size: 24
+          }));
         })
-      })]
-    }), !disableQRDownload && /*#__PURE__*/jsxRuntime.jsx(QRCode, {
-      entity: entity,
-      url: url
+      })
     })]
   });
 };
 
+/* eslint-disable @bigbinary/neeto/use-common-routes */
 var ShareViaLink = function ShareViaLink(_ref) {
-  var _ref$isLoading = _ref.isLoading,
+  var title = _ref.title,
+    description = _ref.description,
+    _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$enabledOptions = _ref.enabledOptions,
     enabledOptions = _ref$enabledOptions === void 0 ? {
@@ -1529,46 +1743,71 @@ var ShareViaLink = function ShareViaLink(_ref) {
     handleEdit = _ref$handleEdit === void 0 ? neetoCist.noop : _ref$handleEdit,
     _ref$handleRegenerate = _ref.handleRegenerate,
     handleRegenerate = _ref$handleRegenerate === void 0 ? neetoCist.noop : _ref$handleRegenerate,
-    socialMediaPostTitle = _ref.socialMediaPostTitle,
-    moreOptions = _ref.moreOptions,
-    _ref$isOtherShareOpti = _ref.isOtherShareOptionsEnabled,
-    isOtherShareOptionsEnabled = _ref$isOtherShareOpti === void 0 ? true : _ref$isOtherShareOpti,
     _ref$disableShareSoci = _ref.disableShareSocialMedia,
     disableShareSocialMedia = _ref$disableShareSoci === void 0 ? false : _ref$disableShareSoci,
     _ref$disableQRDownloa = _ref.disableQRDownload,
     disableQRDownload = _ref$disableQRDownloa === void 0 ? false : _ref$disableQRDownloa,
+    socialMediaProps = _ref.socialMediaProps,
+    qrCodeProps = _ref.qrCodeProps,
+    moreOptions = _ref.moreOptions,
     _ref$publicLinkExpiry = _ref.publicLinkExpiryConfiguration,
     publicLinkExpiryConfiguration = _ref$publicLinkExpiry === void 0 ? {} : _ref$publicLinkExpiry;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white col-span-2 space-y-4 border p-6 sm:p-8",
-    "data-testid": "share-via-link",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "space-y-1",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "space-y-4",
-        children: urls.map(function (urlOption) {
-          return /*#__PURE__*/React.createElement(Link, {
-            enabledOptions: enabledOptions,
-            entityName: entityName,
-            handleEdit: handleEdit,
-            handleRegenerate: handleRegenerate,
-            isLoading: isLoading,
-            editUrlProps: ramda.omit(["url"], urlOption),
-            key: urlOption.url,
-            previewUrl: urlOption.previewUrl,
-            url: urlOption.url
-          });
-        })
-      }), neetoCist.isPresent(publicLinkExpiryConfiguration) && /*#__PURE__*/jsxRuntime.jsx(ExpiryNotice, {
-        expiryConfiguration: publicLinkExpiryConfiguration
-      })]
-    }), isOtherShareOptionsEnabled && /*#__PURE__*/jsxRuntime.jsx(ShareBlock, {
-      disableQRDownload: disableQRDownload,
-      disableShareSocialMedia: disableShareSocialMedia,
-      entity: entity,
-      moreOptions: moreOptions,
-      postTitle: socialMediaPostTitle,
-      url: urls[0].url
+  var _useRouteMatch = reactRouterDom.useRouteMatch(),
+    sharePath = _useRouteMatch.path,
+    shareUrl = _useRouteMatch.url;
+  return /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      exact: true,
+      path: sharePath,
+      render: function render() {
+        return /*#__PURE__*/jsxRuntime.jsx(MainPanel, {
+          description: description,
+          disableQRDownload: disableQRDownload,
+          disableShareSocialMedia: disableShareSocialMedia,
+          enabledOptions: enabledOptions,
+          entity: entity,
+          entityName: entityName,
+          handleEdit: handleEdit,
+          handleRegenerate: handleRegenerate,
+          isLoading: isLoading,
+          moreOptions: moreOptions,
+          publicLinkExpiryConfiguration: publicLinkExpiryConfiguration,
+          qrCodeProps: qrCodeProps,
+          socialMediaProps: socialMediaProps,
+          title: title,
+          urls: urls
+        });
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      exact: true,
+      path: "".concat(sharePath, "/qrcode"),
+      render: function render() {
+        return /*#__PURE__*/jsxRuntime.jsx(QRCode, {
+          entity: entity,
+          qrCodeProps: qrCodeProps,
+          shareUrl: shareUrl,
+          url: urls[0].url
+        });
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+      exact: true,
+      path: "".concat(sharePath, "/social-media"),
+      render: function render() {
+        return /*#__PURE__*/jsxRuntime.jsx(SocialMedia, {
+          shareUrl: shareUrl,
+          socialMediaProps: socialMediaProps,
+          url: urls[0].url
+        });
+      }
+    }), neetoCist.isPresent(moreOptions) && moreOptions.map(function (_ref2) {
+      var link = _ref2.link,
+        element = _ref2.element;
+      if (!neetoCist.isPresent(link)) return null;
+      return /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Route, {
+        exact: true,
+        path: link,
+        children: element
+      }, link);
     })]
   });
 };