@bigbinary/neeto-molecules 3.16.1-beta → 3.16.2

package/dist/ShareViaLink.js

@@ -1,10 +1,8 @@
-import { isPresent, noop, slugify } from '@bigbinary/neeto-cist';
-import { Link as Link$1, useLocation, useHistory, useRouteMatch, Switch, Route } from 'react-router-dom';
+import { isPresent, slugify, noop } from '@bigbinary/neeto-cist';
+import { omit } from 'ramda';
 import classnames from 'classnames';
 import Typography from '@bigbinary/neetoui/Typography';
-import { omit } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import Container from './Container.js';
+import { useTranslation, Trans } from 'react-i18next';
 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';
@@ -21,9 +19,6 @@ 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';
@@ -32,28 +27,15 @@ 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 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 _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Link as Link$1 } from 'react-router-dom';
+import '@babel/runtime/helpers/objectWithoutProperties';
 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;
@@ -116,49 +98,6 @@ 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);
 };
@@ -198,8 +137,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$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 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 Header = Pane.Header,
   Body = Pane.Body,
@@ -456,13 +395,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",
+      className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-1",
       children: [/*#__PURE__*/jsx("div", {
-        className: "neeto-ui-rounded-md neeto-ui-border-gray-300 relative min-w-0 flex-grow truncate border p-2 leading-none",
+        className: "neeto-ui-rounded-md neeto-ui-border-gray-200 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-2 sm:w-auto",
+        className: "flex w-full flex-shrink-0 items-center gap-1 sm:w-auto",
         children: [/*#__PURE__*/jsx(CopyToClipboardButton, {
           "data-cy": "link-copy-button",
           "data-testid": "link-copy-button",
@@ -528,187 +467,6 @@ 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;
@@ -1570,144 +1328,172 @@ var QRCode$1 = (props) => {
 
 var QRCode = function QRCode(_ref) {
   var entity = _ref.entity,
-    qrCodeProps = _ref.qrCodeProps,
-    url = _ref.url,
-    shareUrl = _ref.shareUrl;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+    url = _ref.url;
   if (!entity) return null;
   var id = entity.id,
     name = entity.name;
   var canvasId = "qrcode-share-".concat(id);
-  var handleDownloadQRCode = function handleDownloadQRCode() {
+  var handleDownload = function handleDownload() {
     var canvas = document.getElementById(canvasId);
     if (canvas) downloadCanvas(canvas, {
       name: slugify(name)
     });
   };
-  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
+  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
+          })
+        }
       })
+    }), /*#__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 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,{});
+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 SocialMedia = function SocialMedia(_ref) {
-  var socialMediaProps = _ref.socialMediaProps,
+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,
     url = _ref.url,
-    shareUrl = _ref.shareUrl;
+    moreOptions = _ref.moreOptions,
+    disableShareSocialMedia = _ref.disableShareSocialMedia,
+    disableQRDownload = _ref.disableQRDownload;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  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,
+  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,
             "data-cy": "social-media-button-".concat(key),
             "data-testid": "social-media-button-".concat(key),
-            icon: Icon,
-            iconPosition: "right",
-            key: key,
-            rel: "noopener noreferrer",
-            style: "tertiary",
-            target: "_blank",
             href: generateShareUrl({
               url: url,
-              title: socialMediaProps === null || socialMediaProps === void 0 ? void 0 : socialMediaProps.postTitle
+              title: postTitle
+            }),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            title: label,
+            children: /*#__PURE__*/jsx(Icon, {
+              size: 24
             })
-          }, /*#__PURE__*/jsx(Icon, {
-            size: 24
-          }));
+          }, key);
         })
-      })
+      })]
+    }), !disableQRDownload && /*#__PURE__*/jsx(QRCode, {
+      entity: entity,
+      url: url
     })]
   });
 };
 
-/* eslint-disable @bigbinary/neeto/use-common-routes */
 var ShareViaLink = function ShareViaLink(_ref) {
-  var title = _ref.title,
-    description = _ref.description,
-    _ref$isLoading = _ref.isLoading,
+  var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$enabledOptions = _ref.enabledOptions,
     enabledOptions = _ref$enabledOptions === void 0 ? {
@@ -1722,71 +1508,46 @@ 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;
-  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);
+  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
     })]
   });
 };