@bigbinary/neeto-molecules 3.16.0 → 3.16.1-beta

package/dist/ShareViaLink.js

@@ -1,8 +1,10 @@
-import { isPresent, slugify, noop } from '@bigbinary/neeto-cist';
-import { omit } from 'ramda';
+import { isPresent, noop, slugify } from '@bigbinary/neeto-cist';
+import { Link as Link$1, useLocation, useHistory, useRouteMatch, Switch, Route } from 'react-router-dom';
 import classnames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
-import { useTranslation, Trans } from 'react-i18next';
+import { omit } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import Container from './Container.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default, { useRef, useCallback, useEffect, useState, createElement } from 'react';
@@ -19,6 +21,9 @@ import Facebook from '@bigbinary/neeto-icons/Facebook';
 import Linkedin from '@bigbinary/neeto-icons/Linkedin';
 import Twitter from '@bigbinary/neeto-icons/Twitter';
 import * as yup from 'yup';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils/general';
 import { n } from './inject-css-DmrvuTKK.js';
 import { dayjs } from '@bigbinary/neeto-commons-frontend/utils';
@@ -27,15 +32,28 @@ import Modal from '@bigbinary/neetoui/Modal';
 import Input$1 from '@bigbinary/neetoui/Input';
 import Select from '@bigbinary/neetoui/Select';
 import DatePicker from '@bigbinary/neetoui/DatePicker';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Link as Link$1 } from 'react-router-dom';
-import '@babel/runtime/helpers/objectWithoutProperties';
+import Share from '@bigbinary/neeto-icons/Share';
+import QrCode from '@bigbinary/neeto-icons/QrCode';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
+import CardLayout from './CardLayout.js';
+import Header$1 from './Header.js';
+import './index-DAYCJu79.js';
+import './_commonjsHelpers-BFTU3MAI.js';
 import '@bigbinary/neeto-icons/Copy';
 import '@bigbinary/neeto-icons/Check';
 import '@bigbinary/neeto-icons/MenuHorizontal';
 import '@bigbinary/neeto-icons/MenuVertical';
 import '@bigbinary/neetoui/Dropdown';
 import '@bigbinary/neetoui/Tooltip';
+import './Breadcrumbs.js';
+import './HelpPopover.js';
+import '@bigbinary/neetoui/Popover';
+import './Search.js';
+import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
+import '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
+import '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
+import '@bigbinary/neeto-icons/Search';
 
 var ExpiryNotice = function ExpiryNotice(_ref) {
   var expiryConfiguration = _ref.expiryConfiguration;
@@ -98,6 +116,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);
 };
@@ -137,8 +198,8 @@ var PATH_VALIDATION_SCHEMA = yup.object().shape({
   path: yup.string().required(t("neetoMolecules.shareViaLink.editUrl.validationError")).matches(/^[A-Za-z0-9]([\w/-])*$/, 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}";
-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}";
+n(css$1,{});
 
 var Header = Pane.Header,
   Body = Pane.Body,
@@ -395,13 +456,13 @@ var Link = function Link(_ref) {
     "data-cy": "link-block",
     "data-testid": "link-block",
     children: /*#__PURE__*/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__*/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__*/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__*/jsx(CopyToClipboardButton, {
           "data-cy": "link-copy-button",
           "data-testid": "link-copy-button",
@@ -467,6 +528,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 ? noop : _ref$onClick,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var Component = isPresent(link) ? Link$1 : "div";
+  return /*#__PURE__*/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__*/jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [Icon && /*#__PURE__*/jsx(Icon, {
+        className: "neeto-ui-text-gray-500 flex-shrink-0",
+        size: 24
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "min-w-0 flex-grow break-words",
+        style: "h5",
+        children: title
+      })]
+    }), description && /*#__PURE__*/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 = useLocation();
+  var history = useHistory();
+  var _useTranslation = 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 = isPresent(moreOptions);
+  return /*#__PURE__*/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__*/createElement(Card, {
+        Icon: Icon,
+        description: description,
+        link: link,
+        onClick: onClick,
+        title: title,
+        "data-cy": dataCy,
+        "data-testid": dataCy,
+        key: link
+      });
+    }), !disableShareSocialMedia && /*#__PURE__*/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__*/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 ? noop : _ref$handleEdit,
+    _ref$handleRegenerate = _ref.handleRegenerate,
+    handleRegenerate = _ref$handleRegenerate === void 0 ? 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 = useTranslation(),
+    t = _useTranslation.t;
+  var shouldShowShareBlock = !disableQRDownload || !disableShareSocialMedia || isPresent(moreOptions);
+  return /*#__PURE__*/jsx(Container, {
+    className: "neeto-ui-bg-gray-100 neeto-molecule-share-landing-page",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "mx-auto w-full max-w-5xl py-10",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-cy": "share-your-meeting-heading",
+        lineHeight: "tight",
+        style: "h2",
+        className: classnames({
+          "mb-2": isPresent(description),
+          "mb-6": !isPresent(description)
+        }),
+        children: title || t("neetoMolecules.shareViaLink.title", {
+          productName: globalProps.appName
+        })
+      }), description && /*#__PURE__*/jsx(Typography, {
+        className: "mb-6",
+        "data-cy": "share-your-meeting-heading",
+        lineHeight: "normal",
+        style: "body1",
+        children: description
+      }), /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-rounded-lg neeto-ui-bg-white p-6 sm:p-8",
+        "data-testid": "share-via-link",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "space-y-4",
+            children: urls.map(function (urlOption) {
+              return /*#__PURE__*/createElement(Link, {
+                enabledOptions: enabledOptions,
+                entityName: entityName,
+                handleEdit: handleEdit,
+                handleRegenerate: handleRegenerate,
+                isLoading: isLoading,
+                editUrlProps: omit(["url"], urlOption),
+                key: urlOption.url,
+                previewUrl: urlOption.previewUrl,
+                url: urlOption.url
+              });
+            })
+          }), isPresent(publicLinkExpiryConfiguration) && /*#__PURE__*/jsx(ExpiryNotice, {
+            expiryConfiguration: publicLinkExpiryConfiguration
+          })]
+        }), shouldShowShareBlock && /*#__PURE__*/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;
@@ -1328,172 +1570,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 = 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: slugify(name)
     });
   };
-  return /*#__PURE__*/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__*/jsx(Typography, {
-      lineHeight: "normal",
-      style: "body2",
-      weight: "medium",
-      children: /*#__PURE__*/jsx(Trans, {
-        i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
-        components: {
-          button: /*#__PURE__*/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__*/jsxs(Container, {
+    className: "neeto-molecules-embed-qr-code-landing-page py-8",
+    children: [/*#__PURE__*/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__*/jsx(Header$1, {
+      className: "py-0",
+      title: t("neetoMolecules.shareViaLink.qrCode.title")
+    }), /*#__PURE__*/jsx(CardLayout, {
+      description: description,
+      title: title,
+      actionBlock: /*#__PURE__*/jsxs("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: [/*#__PURE__*/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__*/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__*/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__*/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 = isPresent(link) ? Link$1 : "div";
-  return /*#__PURE__*/jsx(Component, {
-    "data-cy": dataCy,
-    to: link,
-    onClick: function onClick(event) {
-      event.preventDefault();
-      _onClick === null || _onClick === void 0 || _onClick(event);
-    },
-    children: /*#__PURE__*/jsx(Typography, {
-      style: "body3",
-      weight: "medium",
-      className: classnames("break-words", {
-        "neeto-ui-text-accent-800": isPresent(_onClick) || 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}";
+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 = 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 = isPresent(moreOptions);
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col divide-y sm:flex-row sm:gap-6 sm:divide-x sm:divide-y-0",
-    children: [hasMoreOptions && /*#__PURE__*/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 = isPresent(link) ? Link$1 : "div";
-        return /*#__PURE__*/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__*/jsxs("div", {
-          className: "flex flex-row gap-2",
-          children: [/*#__PURE__*/jsx(Icon, {
-            className: "neeto-ui-text-gray-500 flex-shrink-0",
-            size: 24
-          }), /*#__PURE__*/jsxs("div", {
-            className: "flex flex-col gap-1",
-            children: [/*#__PURE__*/jsx(Typography, {
-              className: "group-hover:underline",
-              style: "body2",
-              weight: "medium",
-              children: title
-            }), subtitleProps && /*#__PURE__*/jsx(Subtitle, _objectSpread({}, subtitleProps))]
-          })]
-        }));
-      })
-    }), !disableShareSocialMedia && /*#__PURE__*/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__*/jsx(Typography, {
-        className: "neeto-ui-text-gray-800",
-        lineHeight: "normal",
-        style: "body2",
-        weight: "medium",
-        children: t("neetoMolecules.shareViaLink.socialMediaShare.title")
-      }), /*#__PURE__*/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__*/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__*/jsxs(Container, {
+    className: "neeto-molecules-social-share-landing-page py-8",
+    children: [/*#__PURE__*/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__*/jsx(Header$1, {
+      className: "py-0",
+      title: t("neetoMolecules.shareViaLink.socialMediaShare.title")
+    }), /*#__PURE__*/jsx(CardLayout, {
+      description: description,
+      title: title,
+      actionBlock: /*#__PURE__*/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__*/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__*/jsx(Icon, {
-              size: 24
+            href: generateShareUrl({
+              url: url,
+              title: socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.postTitle
             })
-          }, key);
+          }, /*#__PURE__*/jsx(Icon, {
+            size: 24
+          }));
         })
-      })]
-    }), !disableQRDownload && /*#__PURE__*/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 ? {
@@ -1508,46 +1722,71 @@ var ShareViaLink = function ShareViaLink(_ref) {
     handleEdit = _ref$handleEdit === void 0 ? noop : _ref$handleEdit,
     _ref$handleRegenerate = _ref.handleRegenerate,
     handleRegenerate = _ref$handleRegenerate === void 0 ? 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__*/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__*/jsxs("div", {
-      className: "space-y-1",
-      children: [/*#__PURE__*/jsx("div", {
-        className: "space-y-4",
-        children: urls.map(function (urlOption) {
-          return /*#__PURE__*/createElement(Link, {
-            enabledOptions: enabledOptions,
-            entityName: entityName,
-            handleEdit: handleEdit,
-            handleRegenerate: handleRegenerate,
-            isLoading: isLoading,
-            editUrlProps: omit(["url"], urlOption),
-            key: urlOption.url,
-            previewUrl: urlOption.previewUrl,
-            url: urlOption.url
-          });
-        })
-      }), isPresent(publicLinkExpiryConfiguration) && /*#__PURE__*/jsx(ExpiryNotice, {
-        expiryConfiguration: publicLinkExpiryConfiguration
-      })]
-    }), isOtherShareOptionsEnabled && /*#__PURE__*/jsx(ShareBlock, {
-      disableQRDownload: disableQRDownload,
-      disableShareSocialMedia: disableShareSocialMedia,
-      entity: entity,
-      moreOptions: moreOptions,
-      postTitle: socialMediaPostTitle,
-      url: urls[0].url
+  var _useRouteMatch = useRouteMatch(),
+    sharePath = _useRouteMatch.path,
+    shareUrl = _useRouteMatch.url;
+  return /*#__PURE__*/jsxs(Switch, {
+    children: [/*#__PURE__*/jsx(Route, {
+      exact: true,
+      path: sharePath,
+      render: function render() {
+        return /*#__PURE__*/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__*/jsx(Route, {
+      exact: true,
+      path: "".concat(sharePath, "/qrcode"),
+      render: function render() {
+        return /*#__PURE__*/jsx(QRCode, {
+          entity: entity,
+          qrCodeProps: qrCodeProps,
+          shareUrl: shareUrl,
+          url: urls[0].url
+        });
+      }
+    }), /*#__PURE__*/jsx(Route, {
+      exact: true,
+      path: "".concat(sharePath, "/social-media"),
+      render: function render() {
+        return /*#__PURE__*/jsx(SocialMedia, {
+          shareUrl: shareUrl,
+          socialMediaProps: socialMediaProps,
+          url: urls[0].url
+        });
+      }
+    }), isPresent(moreOptions) && moreOptions.map(function (_ref2) {
+      var link = _ref2.link,
+        element = _ref2.element;
+      if (!isPresent(link)) return null;
+      return /*#__PURE__*/jsx(Route, {
+        exact: true,
+        path: link,
+        children: element
+      }, link);
     })]
   });
 };