@licklist/design 0.78.18 → 0.78.20

package/src/Maintenance/SkeletonSidebar.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+import "./Maintenance.scss";
+
+export const SkeletonSidebar: React.FC = () => {
+  const skeletonItems = Array.from({ length: 10 });
+
+  return (
+    <div className="figmas-admin-sidebar figmas-admin-sidebar--expanded">
+      <div className="figmas-admin-sidebar__top">
+        <div className="figmas-admin-sidebar__links">
+          <div className="figmas-admin-sidebar__section-label">
+            <svg xmlns="http://www.w3.org/2000/svg" width="124" height="32" viewBox="0 0 124 32" fill="none">
+                <path d="M9.52321 6.23162C11.6312 4.06995 12.6151 3.51115 13.7979 3.14351C14.9807 2.77588 16.1903 2.77588 17.3731 3.14351C18.5559 3.51115 19.5398 4.06995 21.6478 6.23162L25.0943 9.76587C27.2023 11.9275 27.7473 12.9365 28.1058 14.1494C28.4643 15.3623 28.4643 16.6028 28.1058 17.8157C27.7473 19.0286 27.2023 20.0375 25.0943 22.1992L21.6478 25.7335C19.5398 27.8951 18.556 28.4539 17.3731 28.8216C16.1903 29.1892 14.9807 29.1892 13.7979 28.8216C12.6151 28.4539 11.6312 27.8951 9.52321 25.7335L6.07672 22.1992C3.96872 20.0375 3.4238 19.0286 3.06529 17.8157C2.70679 16.6028 2.70679 15.3623 3.06529 14.1494C3.4238 12.9365 3.96872 11.9275 6.07672 9.76587L9.52321 6.23162ZM11.4177 8.07385L7.92219 11.6583C6.27888 13.3435 5.82902 14.0256 5.56297 14.9257C5.35408 15.6325 5.35408 16.3326 5.56297 17.0394C5.82636 17.9305 6.2699 18.608 7.87325 20.2565L11.4177 23.8912C13.0253 25.5354 13.6859 25.9902 14.555 26.2603C15.2442 26.4745 15.9269 26.4745 16.6161 26.2603C17.4939 25.9875 18.1591 25.5262 19.8024 23.841L23.2489 20.3068C24.8922 18.6216 25.342 17.9395 25.6081 17.0394C25.817 16.3326 25.817 15.6325 25.6081 14.9257C25.342 14.0256 24.8922 13.3435 23.2489 11.6583L19.8024 8.12408C18.1591 6.43893 17.4939 5.97761 16.6161 5.70479C15.9269 5.49057 15.2442 5.49057 14.555 5.70479C13.6859 5.97488 13.0253 6.42972 11.4177 8.07385ZM20.0103 14.7102C20.711 13.9916 21.8471 13.9916 22.5478 14.7102C23.2486 15.4287 23.2486 16.5937 22.5478 17.3123L16.8961 23.108C16.1954 23.8265 15.0593 23.8265 14.3586 23.108L13.5334 22.2618C13.3792 22.1036 13.3393 22.0298 13.3131 21.941C13.2868 21.8523 13.2868 21.7615 13.3131 21.6728C13.3393 21.584 13.3792 21.5102 13.5334 21.352L20.0103 14.7102ZM10.575 17.927C10.7437 17.7539 10.9728 17.6569 11.2114 17.6575L14.5124 17.6653C14.6926 17.6657 14.8383 17.8159 14.8379 18.0006C14.8377 18.0874 14.8047 18.1706 14.7458 18.2329L14.5717 18.4168L12.5131 20.509C12.3218 20.7035 12.0131 20.7028 11.8226 20.5074L10.575 19.228C10.2246 18.8687 10.2246 18.2862 10.575 17.927Z" fill="#D2D5E3" />
+                <path d="M51.535 11.5924C53.1724 11.5924 54.4499 12.0267 55.3675 12.8952C56.285 13.7637 56.7438 14.9579 56.7438 16.4778V18.7577C56.7438 20.35 56.2815 21.6057 55.3569 22.5249C54.4323 23.4441 53.1583 23.9037 51.535 23.9037C49.9117 23.9037 48.6377 23.4694 47.7131 22.6009C46.7885 21.7324 46.3262 20.5382 46.3262 19.0183V16.7384C46.3262 15.1461 46.7885 13.8904 47.7131 12.9712C48.6377 12.052 49.9117 11.5924 51.535 11.5924ZM63.1171 11.5924C64.7546 11.5924 66.0321 12.0267 66.9496 12.8952C67.8672 13.7637 68.3259 14.9579 68.3259 16.4778V18.7577C68.3259 20.35 67.8636 21.6057 66.939 22.5249C66.0144 23.4441 64.7405 23.9037 63.1171 23.9037C61.4938 23.9037 60.2198 23.4694 59.2952 22.6009C58.3706 21.7324 57.9083 20.5382 57.9083 19.0183V16.7384C57.9083 15.1461 58.3706 13.8904 59.2952 12.9712C60.2198 12.052 61.4938 11.5924 63.1171 11.5924ZM86.0062 11.5924C87.5166 11.5924 88.7235 12.0448 89.6269 12.9495C90.5303 13.8542 90.982 15.1461 90.982 16.8252V17.8458C90.982 18.1932 90.922 18.4175 90.8021 18.5189C90.6821 18.6202 90.4386 18.6709 90.0716 18.6709H84.164V18.7577C84.164 19.6118 84.2981 20.2306 84.5663 20.6142C84.8345 20.9978 85.3498 21.1896 86.112 21.1896C86.479 21.1896 86.7861 21.1389 87.0331 21.0376C87.2801 20.9363 87.4813 20.7336 87.6366 20.4296C87.7071 20.2849 87.7954 20.1763 87.9012 20.1039C88.0071 20.0315 88.1941 19.9954 88.4623 19.9954H90.1139C90.3962 19.9954 90.5868 20.0496 90.6856 20.1582C90.7844 20.2668 90.8338 20.4369 90.8338 20.6685C90.8338 20.9869 90.7597 21.2945 90.6115 21.5913C90.4633 21.888 90.2974 22.145 90.1139 22.3621C89.6622 22.8977 89.0658 23.2885 88.3247 23.5346C87.5836 23.7807 86.7967 23.9037 85.9638 23.9037C84.3264 23.9037 83.063 23.4803 82.1737 22.6335C81.2844 21.7867 80.8397 20.5237 80.8397 18.8446V16.7818C80.8397 15.1461 81.295 13.8723 82.2054 12.9603C83.1159 12.0484 84.3828 11.5924 86.0062 11.5924ZM101.548 8.14001C101.915 8.14001 102.158 8.1943 102.278 8.30286C102.398 8.41143 102.458 8.63218 102.458 8.96511V18.9966C102.458 20.5165 101.989 21.7143 101.05 22.5901C100.112 23.4658 98.8235 23.9037 97.186 23.9037C95.5768 23.9037 94.3169 23.4658 93.4065 22.5901C92.496 21.7143 92.0407 20.4948 92.0407 18.9314V16.5647C92.0407 15.0303 92.436 13.818 93.2265 12.9277C94.017 12.0375 95.0968 11.5924 96.4661 11.5924C97.6377 11.5924 98.5129 11.8891 99.0917 12.4826V8.96511C99.0917 8.63218 99.1516 8.41143 99.2716 8.30286C99.3916 8.1943 99.6351 8.14001 100.002 8.14001H101.548ZM115.569 8.7303C115.936 8.7303 116.179 8.78458 116.299 8.89315C116.419 9.00171 116.479 9.22246 116.479 9.5554V11.9221H118.025C118.35 11.9221 118.569 11.9764 118.681 12.085C118.794 12.1935 118.851 12.3998 118.851 12.7038V13.7894C118.851 14.1224 118.794 14.3468 118.681 14.4626C118.569 14.5784 118.35 14.6363 118.025 14.6363H116.479V19.196C116.479 19.7171 116.564 20.0935 116.733 20.3251C116.903 20.5567 117.185 20.6725 117.58 20.6725H117.94C118.293 20.6725 118.526 20.7268 118.639 20.8353C118.752 20.9439 118.809 21.1647 118.809 21.4976V22.8221C118.809 23.1405 118.752 23.3541 118.639 23.4626C118.526 23.5712 118.286 23.6255 117.919 23.6255H116.882C115.527 23.6255 114.56 23.3215 113.981 22.7135C113.402 22.1056 113.113 21.0995 113.113 19.6954V9.5554C113.113 9.22246 113.173 9.00171 113.293 8.89315C113.413 8.78458 113.656 8.7303 114.023 8.7303H115.569ZM40.0375 8.14001C43.2701 8.14001 44.8864 9.4428 44.8864 12.0484V12.3306C44.8864 13.0978 44.7064 13.7746 44.3464 14.3608C43.9865 14.9471 43.5101 15.3415 42.9172 15.5442C43.623 15.7179 44.1912 16.1087 44.6217 16.7167C45.0522 17.3246 45.2675 18.0339 45.2675 18.8446V19.192C45.2675 20.7119 44.8229 21.8265 43.9335 22.5358C43.0442 23.2451 41.6397 23.5997 39.7199 23.5997H35.3158C34.9487 23.5997 34.7052 23.5454 34.5853 23.4369C34.4653 23.3283 34.4053 23.1076 34.4053 22.7746V8.96511C34.4053 8.63218 34.4653 8.41143 34.5853 8.30286C34.7052 8.1943 34.9487 8.14001 35.3158 8.14001H40.0375ZM72.3066 8.14001C72.6736 8.14001 72.9171 8.1943 73.0371 8.30286C73.1571 8.41143 73.2171 8.63218 73.2171 8.96511V16.2607L76.372 12.5043C76.612 12.2148 76.7814 12.0411 76.8802 11.9832C76.979 11.9253 77.1413 11.8964 77.3672 11.8964H79.5058C79.8869 11.8964 80.0775 12.0556 80.0775 12.3741C80.0775 12.5333 79.9998 12.6925 79.8445 12.8518L76.7955 16.2824L80.3527 22.6444C80.4656 22.847 80.5221 23.0135 80.5221 23.1438C80.5221 23.4477 80.3104 23.5997 79.8869 23.5997H77.8118C77.5578 23.5997 77.3637 23.5563 77.2296 23.4694C77.0955 23.3826 76.9649 23.2234 76.8378 22.9918L74.5299 18.6709L73.2171 20.1473V22.7746C73.2171 23.1076 73.1571 23.3283 73.0371 23.4369C72.9171 23.5454 72.6736 23.5997 72.3066 23.5997H70.8456C70.4786 23.5997 70.2351 23.5454 70.1151 23.4369C69.9951 23.3283 69.9351 23.1076 69.9351 22.7746V8.96511C69.9351 8.63218 69.9951 8.41143 70.1151 8.30286C70.2351 8.1943 70.4786 8.14001 70.8456 8.14001H72.3066ZM110.187 14.2522C110.554 14.2522 110.797 14.3065 110.917 14.4151C111.037 14.5237 111.097 14.7444 111.097 15.0773L111.076 22.7529C111.076 23.0859 111.016 23.3066 110.896 23.4152C110.776 23.5237 110.533 23.578 110.166 23.578H108.62C108.253 23.578 108.009 23.5237 107.889 23.4152C107.769 23.3066 107.709 23.0859 107.709 22.7529L107.731 15.0773C107.731 14.7444 107.791 14.5237 107.911 14.4151C108.031 14.3065 108.274 14.2522 108.641 14.2522H110.187ZM51.5985 14.3065C50.9915 14.3065 50.5222 14.5056 50.1904 14.9036C49.8587 15.3017 49.6929 15.8771 49.6929 16.6298V18.8663C49.6929 20.4151 50.2857 21.1896 51.4715 21.1896C52.0926 21.1896 52.5655 20.9905 52.8901 20.5925C53.2148 20.1944 53.3771 19.619 53.3771 18.8663V16.6298C53.3771 15.081 52.7843 14.3065 51.5985 14.3065ZM63.1807 14.3065C62.5737 14.3065 62.1043 14.5056 61.7726 14.9036C61.4409 15.3017 61.275 15.8771 61.275 16.6298V18.8663C61.275 20.4151 61.8679 21.1896 63.0536 21.1896C63.6747 21.1896 64.1476 20.9905 64.4723 20.5925C64.7969 20.1944 64.9593 19.619 64.9593 18.8663V16.6298C64.9593 15.081 64.3664 14.3065 63.1807 14.3065ZM97.186 14.3065C96.0003 14.3065 95.4074 15.081 95.4074 16.6298V18.8663C95.4074 19.619 95.5662 20.1944 95.8838 20.5925C96.2014 20.9905 96.6637 21.1896 97.2707 21.1896C98.4847 21.1896 99.0917 20.4151 99.0917 18.8663V16.6298C99.0917 15.8771 98.9293 15.3017 98.6047 14.9036C98.28 14.5056 97.8071 14.3065 97.186 14.3065ZM40.0587 17.0858H37.8143V20.625H39.8258C41.0821 20.625 41.7103 20.0967 41.7103 19.04V18.6491C41.7103 18.1425 41.5691 17.7553 41.2868 17.4875C41.0045 17.2197 40.5951 17.0858 40.0587 17.0858ZM85.8791 14.2414C85.3709 14.2414 84.9686 14.4006 84.6722 14.7191C84.3758 15.0375 84.2134 15.5804 84.1852 16.3476H87.5942C87.5801 15.6238 87.4425 15.0918 87.1813 14.7516C86.9202 14.4115 86.4861 14.2414 85.8791 14.2414ZM39.5929 11.1147H37.8143V14.3282H39.7411C40.828 14.3282 41.3715 13.8288 41.3715 12.83V12.4826C41.3715 11.5707 40.7786 11.1147 39.5929 11.1147ZM109.693 8.7303C110.172 8.7303 110.346 8.78233 110.521 8.88003C110.696 8.97774 110.834 9.12111 110.928 9.3038C111.021 9.48649 111.071 9.66769 111.071 10.1674V10.9844C111.071 11.4841 111.021 11.6653 110.928 11.848C110.834 12.0307 110.696 12.1741 110.521 12.2718C110.346 12.3695 110.172 12.4215 109.693 12.4215H108.91C108.431 12.4215 108.257 12.3695 108.082 12.2718C107.906 12.1741 107.769 12.0307 107.675 11.848C107.582 11.6653 107.532 11.4841 107.532 10.9844V10.1674C107.532 9.66769 107.582 9.48649 107.675 9.3038C107.769 9.12111 107.906 8.97774 108.082 8.88003C108.257 8.78233 108.431 8.7303 108.91 8.7303H109.693Z" fill="#D2D5E3" />
+            </svg>
+          </div>
+
+          <div className="figmas-admin-sidebar__section-label">
+            <div className="figmas-admin-sidebar__link-item">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="47"
+                height="47"
+                viewBox="0 0 47 47"
+                fill="none"
+              >
+                <circle cx="23.5" cy="23.5" r="23" fill="white" stroke="#E8E9EF" />
+              </svg>
+
+              <div className="venue-skeleton-items">
+                <Skeleton className="venue-skeleton-item" width={87} height={15} />
+                <h6 className="venue-name">Venue ID:</h6>
+              </div>
+            </div>
+          </div>
+
+          {skeletonItems.map((_, index) => (
+            <div className="figmas-admin-sidebar__section-label" key={index}>
+              <div className="figmas-admin-sidebar__link-item">
+                <Skeleton
+                  circle
+                  className="venue-skeleton-item"
+                  width={24}
+                  height={24}
+                />
+                <Skeleton className="skeleton-item" width={87} height={15} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/PageNotFound/PageNotFound.scss

@@ -0,0 +1,8 @@
+
+.page-not-found-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    background: var(--surfaces-main-background-secondary, #FFFFFF);
+
+}

package/src/PageNotFound/PageNotFound.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { PageNotFound } from './PageNotFound'
+export default {
+    title: 'Maintenance/Page Not Found',
+    component: PageNotFound,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof PageNotFound>
+
+export const Desktop: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'desktop' },
+  },
+}
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+}

package/src/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+//import { SkeletonSidebar } from "../Maintenance/SkeletonSidebar";
+import { MaintenancePage } from "../Maintenance/MaintenancePage";
+
+export type AppContext = 'dashboard' | 'app' | 'admin' | 'iframe'
+
+interface PageNotFoundProps {
+  app?: AppContext;
+  buttonLabel?: string;
+  onButtonClick?: () => void;
+}
+
+export const PageNotFound: React.FC<PageNotFoundProps> = ({ app, buttonLabel, onButtonClick }) => {
+  const defaultLabels: Record<AppContext, string> = {
+    dashboard: 'Back to Dashboard',
+    app: 'Back to App',
+    admin: 'Back to Admin',
+    iframe: 'Back',
+  }
+
+  const resolvedLabel = buttonLabel ?? (app ? defaultLabels[app] : 'Back')
+  const handleClick = onButtonClick ?? (() => (window.location.href = "/"))
+
+  return (
+    <div>
+      <div className="page-not-found-container">
+{/* We are not using the sidebar for now. It will be enabled when we have the sidebar ready.
+        <SkeletonSidebar />
+*/}
+        <MaintenancePage
+          svg={<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+            <path d="M18 50H22V48H40V44H44V48H48V52H22V54H18V52H15.9863C14.8893 51.9997 14.0001 51.0894 14 50.0166V44H18V50ZM22 44H18V40H22V44ZM49.999 44H46V38H49.999V44ZM18 40H14V30H18V40ZM54 38H50V34H54V38ZM46 34H42V30H46V34ZM14 30H10V26H14V30ZM49.999 22V30H46V24H38V22H40V18H38V16H36V12H40L49.999 22ZM22 14H26V12H32V16H26V18H22V16H16V20H18V26H14V20H12V16H14V13.9834C14.0001 12.888 14.8951 12 15.9971 12H22V14ZM38 22H34V18H38V22Z" fill="#626A90" />
+          </svg>}
+          title="Page not found."
+          subheading="It looks like that page doesn’t exist."
+          body="Typing in the URL again or retrace your steps. If you continue to experience problems contact your account manager."
+          buttonLabel={resolvedLabel}
+          onButtonClick={handleClick}
+        />
+      </div>
+    </div>
+  )
+}

package/src/PageNotFound/index.ts

@@ -0,0 +1 @@
+export { PageNotFound } from './PageNotFound'

package/src/UnderMaintenance/UnderMaintenance.scss

@@ -0,0 +1,6 @@
+.under-maintenance-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    background: var(--surfaces-main-background-secondary, #FFFFFF);
+}

package/src/UnderMaintenance/UnderMaintenance.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { UnderMaintenance } from './UnderMaintenance'
+export default {
+    title: 'Maintenance/Under Maintenance',
+    component: UnderMaintenance,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof UnderMaintenance>
+
+export const Desktop: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'desktop' },
+  },
+}
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+}

package/src/UnderMaintenance/UnderMaintenance.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import './UnderMaintenance.scss'
+import { SkeletonSidebar } from "../Maintenance/SkeletonSidebar";
+import { MaintenancePage } from "../Maintenance/MaintenancePage";
+export const UnderMaintenance: React.FC = () => {
+    return (
+        <div>
+            <div className="under-maintenance-container" style={{ display: 'flex', height: '100vh', width: '100vw', background: 'var(--surfaces-main-background-secondary, #FFFFFF)' }}>
+                <SkeletonSidebar />
+                <MaintenancePage
+                    svg={<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+                        <path d="M32 12C43.0456 12 52 20.9543 52 32C52 43.0456 43.0456 52 32 52C20.9543 52 12 43.0456 12 32C12 20.9543 20.9543 12 32 12ZM32 16C23.1634 16 16 23.1634 16 32C16 40.8366 23.1634 48 32 48C40.8366 48 48 40.8366 48 32C48 23.1634 40.8366 16 32 16ZM32 32C37.5228 32 42 36.4772 42 42H38C38 38.6863 35.3137 36 32 36C28.6863 36 26 38.6863 26 42H22C22 36.4772 26.4772 32 32 32ZM27 24C28.6569 24 30 25.3431 30 27C30 28.6569 28.6569 30 27 30C25.3431 30 24 28.6569 24 27C24 25.3431 25.3431 24 27 24ZM37 24C38.6569 24 40 25.3431 40 27C40 28.6569 38.6569 30 37 30C35.3431 30 34 28.6569 34 27C34 25.3431 35.3431 24 37 24Z" fill="#626A90" />
+                    </svg>}
+                    title="Oops, we didn’t want you to see us like this."
+                    subheading="We are undergoing maintenance at the moment and will be back online shortly. Sorry for any inconvenience."
+                />
+            </div>
+
+        </div>
+    )
+
+}

package/src/UnderMaintenance/index.ts

@@ -0,0 +1 @@
+export { UnderMaintenance } from './UnderMaintenance'

package/src/auth/Auth.stories.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from 'react'
 import { Meta, Story } from '@storybook/react-vite'
+import { createBrowserHistory } from 'history'
+import history from '@licklist/plugins/dist/services/History/History'
 import UserProvider from '@licklist/plugins/dist/context/user/providers/UserProvider'
 import InviteProvider from '@licklist/plugins/dist/context/user/providers/InviteProvider'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
@@ -10,16 +12,48 @@ export default {
   title: 'Auth',
 } as Meta
 
+// Initialize history synchronously before the component renders
+if (history && !history.location) {
+  try {
+    const browserHistory = createBrowserHistory()
+    Object.assign(history, {
+      location: browserHistory.location,
+      action: browserHistory.action,
+      length: browserHistory.length,
+      push: browserHistory.push,
+      replace: browserHistory.replace,
+      go: browserHistory.go,
+      goBack: browserHistory.goBack,
+      goForward: browserHistory.goForward,
+      block: browserHistory.block,
+      listen: browserHistory.listen,
+    })
+  } catch (e) {
+    // Fallback: set a basic location
+    Object.defineProperty(history, 'location', {
+      value: {
+        pathname: '/',
+        search: '',
+        hash: '',
+        state: null,
+        key: 'default',
+      },
+      writable: true,
+    })
+  }
+}
+
 export const RouterComponent: Story<RouterProps> = (args) => (
   <Router {...args} />
 )
+RouterComponent.parameters = {
+  excludeRouter: true,
+}
 export const AuthorizerComponent: Story<AuthorizerProps> = (args) => (
   <>
     <UserProvider>
       <InviteProvider>
-        <Router>
-          <AuthorizerWrapper {...args} />
-        </Router>
+        <AuthorizerWrapper {...args} />
       </InviteProvider>
     </UserProvider>
   </>

package/src/auth/Authorizer.tsx

@@ -64,6 +64,7 @@ function Authorizer(props: AuthorizerProps) {
         ROUTES.CHANGE_PASSWORD,
         ROUTES.FORGOT_PASSWORD,
         ROUTES.SSO_LOGIN,
+        ROUTES.MAINTENANCE_PAGE,
         ...matchedPathPatternUrls(),
       ].includes(pathname)
     ) {
@@ -73,8 +74,8 @@ function Authorizer(props: AuthorizerProps) {
 
     const route = RouteService.getCurrentRoute()
 
-    RouteService.cleanRedirect(
-      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'),
+    RouteService.redirectTo(
+      [ROUTES.MAINTENANCE_PAGE, `returnUrl=${escape(route)}`].join('?'),
     )
   }, [
     auth.secrets,

package/src/auth/ChangePassword/ChangePassword.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react-vite'
-import { Router } from '../Router'
 import { ChangePasswordComponent } from './ChangePasswordComponent'
 import {
   ChangePasswordFormComponent,
@@ -16,10 +15,4 @@ export const ChangePassword: Story<{}> = (args) => (
 
 export const ChangePasswordForm: Story<ChangePasswordFormComponentProps> = (
   args,
-) => (
-  <>
-    <Router>
-      <ChangePasswordFormComponent {...args} />
-    </Router>
-  </>
-)
+) => <ChangePasswordFormComponent {...args} />

package/src/auth/Login/Login.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react-vite'
-import { Router } from '../Router'
 import { LoginComponent } from './LoginComponent'
 import {
   LoginFormComponent,
@@ -29,9 +28,5 @@ export const Login: StoryObj<typeof LoginComponent> = {
 }
 
 export const LoginForm: StoryObj<LoginFormComponentProps> = {
-  render: (args) => (
-    <Router>
-      <LoginFormComponent {...args} />
-    </Router>
-  ),
+  render: (args) => <LoginFormComponent {...args} />,
 }

package/src/auth/Logout/Logout.stories.tsx

@@ -20,6 +20,9 @@ export const LogoutComponent: Story = () => (
     </MemoryRouter>
   </UserProvider>
 )
+LogoutComponent.parameters = {
+  excludeRouter: true,
+}
 
 function LoggedPage() {
   const user = useUser()

package/src/auth/Register/Register.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, Story } from '@storybook/react-vite'
 import { useForm } from 'react-hook-form'
 // TODO: Replace knobs with controls
-import { Router } from '../Router'
 import {
   BirthDateFormComponent,
   BirthDateFormComponentProps,
@@ -40,15 +39,12 @@ export const BirthDateForm: Story<BirthDateFormComponentProps> = (args) => {
   )
 }
 export const RegisterForm: Story<RegisterFormComponentProps> = (args) => (
-  <>
-    <Router>
-      <RegisterFormComponent {...args} />
-    </Router>
-  </>
+  <RegisterFormComponent {...args} />
 )
 
 export const Register: Story<{}> = (args) => {
-  const showSocialLinks = boolean('showSocialLinks', false)
+  // TODO: Replace with Storybook controls
+  const showSocialLinks = false
 
   return <RegisterComponent {...args} showSocialLinks={showSocialLinks} />
 }

package/src/auth/ResetPassword/ResetPassword.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react-vite'
-import { Router } from '../Router'
 import { ResetPasswordComponent } from './ResetPasswordComponent'
 import {
   ResetPasswordFormComponent,
@@ -15,10 +14,4 @@ export const ResetPassword: Story<{}> = (args) => (
 )
 export const ResetPasswordForm: Story<ResetPasswordFormComponentProps> = (
   args,
-) => (
-  <>
-    <Router>
-      <ResetPasswordFormComponent {...args} />
-    </Router>
-  </>
-)
+) => <ResetPasswordFormComponent {...args} />

package/src/auth/Social/Social.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react-vite'
-import { Router } from '../Router'
 import { SocialCallbackComponent } from './SocialCallbackComponent'
 import {
   SocialFormComponent,
@@ -14,9 +13,5 @@ export const SocialForm: Story<SocialFormComponentProps> = (args) => (
   <SocialFormComponent {...args} />
 )
 export const SocialCallback: Story<{}> = (args) => (
-  <>
-    <Router>
-      <SocialCallbackComponent {...args} />
-    </Router>
-  </>
+  <SocialCallbackComponent {...args} />
 )

package/src/collapsible-input-group/CollapsibleInputGroup.stories.tsx

@@ -1,5 +1,8 @@
-import { Meta, Story } from '@storybook/react-vite'
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react-vite'
 import { Accordion } from 'react-bootstrap'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import { FormProvider, useForm } from 'react-hook-form'
 import {
   CategoriesInput,
@@ -38,6 +41,7 @@ const defaultValues: CategoriesInputValues &
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
   workingHours: [
     { start: '08:00', end: '18:00', description: 'Description' },
     undefined,
@@ -45,12 +49,48 @@ const defaultValues: CategoriesInputValues &
   ],
 }
 
+// Mock timezone data for Storybook
+const mockTimezones = [
+  { id: 1, name: 'Europe/London' },
+  { id: 2, name: 'America/New_York' },
+  { id: 3, name: 'America/Los_Angeles' },
+  { id: 4, name: 'Europe/Paris' },
+  { id: 5, name: 'Asia/Tokyo' },
+]
+
+// Decorator to mock timezone query data
+const withMockedTimezones = (Story) => {
+  const QueryClientWrapper = () => {
+    const queryClient = useQueryClient()
+
+    // Pre-populate the query cache with mock data before render
+    // Try multiple possible query key formats
+    React.useLayoutEffect(() => {
+      const possibleKeys = [
+        ['/api/timezones', 'all'],
+        ['timezones', '/api/timezones', 'all'],
+        ['timeZone', '/api/timezones'],
+        ['/api/timezones'],
+      ]
+
+      possibleKeys.forEach((key) => {
+        queryClient.setQueryData(key, mockTimezones)
+      })
+    }, [queryClient])
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
+}
+
 export default {
   title: 'CollapsibleInputGroup',
   component: CollapsibleInputGroup,
+  decorators: [withMockedTimezones],
 } as Meta
 
-const Template: Story<CollapsibleInputGroupProps> = (args) => {
+const Template: StoryFn<CollapsibleInputGroupProps> = (args) => {
   const form = useForm({ defaultValues })
   return (
     <FormProvider {...form}>
@@ -77,13 +117,41 @@ Categories.args = {
   label: 'Categories',
 }
 
+// Location-specific decorator with better query mocking
+const withLocationMock = (Story) => {
+  const LocationWrapper = () => {
+    const queryClient = useQueryClient()
+    const path = '/api/timezones' as TimeZonePath
+
+    // Set query data synchronously before first render
+    // Try all possible query key formats
+    const queryKeys = [
+      [path, 'all'],
+      ['timezones', path, 'all'],
+      ['timeZone', path],
+      [path],
+      ['useTimeZoneApi', path, 'all'],
+    ]
+
+    queryKeys.forEach((key) => {
+      queryClient.setQueryData(key, mockTimezones)
+    })
+
+
+    return <Story />
+  }
+
+  return <LocationWrapper />
+}
+
 export const Location = Template.bind({})
 Location.args = {
   eventKey: 'location',
-  children: <LocationInput />,
-  description: <LocationInputDescription />,
+  children: <LocationInput path={'/api/timezones' as TimeZonePath} />,
+  description: <LocationInputDescription path={'/api/timezones' as TimeZonePath} />,
   label: 'Location',
 }
+Location.decorators = [withLocationMock]
 
 export const WorkingHours = Template.bind({})
 WorkingHours.args = {

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

@@ -1063,7 +1063,8 @@ const defaultProductSets = [
 
 export const Default: Story<EditEventFormProps> = (args) => {
   // @todo: rewrite story to use actions instead of addon-knobs
-  const hasPermission = boolean('hasPermission', true)
+  // TODO: Replace with Storybook controls
+  const hasPermission = true
   const [editProductSetId, setEditProductSetId] = useState<string>()
   return (
     <div className='edit-event-dialog'>

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.stories.tsx

@@ -14,7 +14,8 @@ export default {
 
 export const Default: Story<EditRecurrentEventModalProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false)
-  const isEditRecurrentEventModal = boolean('isEditRecurrentEventModal', false)
+  // TODO: Replace with Storybook controls
+  const isEditRecurrentEventModal = false
 
   return (
     <div>
@@ -31,7 +32,7 @@ export const Default: Story<EditRecurrentEventModalProps> = (args) => {
 
 Default.args = {
   isOpen: false,
-  onHide: () => {},
+  onHide: () => { },
   title: 'Some title',
   onSubmit: (data) => console.log(data),
 }

package/src/events/event-card/EventCard.stories.tsx

@@ -10,9 +10,10 @@ export default {
 } as Meta
 
 export const Default: Story<EventCardProps> = () => {
-  const showImage = boolean('showImage', true)
+  // TODO: Replace with Storybook controls
+  const showImage = true
   // @todo: rewrite story to use actions instead of addon-knobs
-  const hasPermission = boolean('hasPermission', true)
+  const hasPermission = true
 
   return (
     <div style={{ maxWidth: '34rem' }}>

package/src/events/event-statistic-modal/EventStatisticModal.stories.tsx

@@ -13,7 +13,8 @@ export default {
 
 export const Default: Story<EventStatisticModalProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false)
-  const isEmptyEventStatistic = boolean('isEmptyEventStatistic', false)
+  // TODO: Replace with Storybook controls
+  const isEmptyEventStatistic = false
 
   return (
     <div>

package/src/events/event-venue-map/EventVenueMap.stories.tsx

@@ -20,7 +20,8 @@ export const EventVenueMapComponent: Story<EventVenueMapProps> = (args) => {
       productUuid: 'product-1',
     },
   ])
-  const editMode = boolean('editMode', false)
+  // TODO: Replace with Storybook controls
+  const editMode = false
 
   return (
     <div style={{ width: window.innerWidth, height: window.innerHeight }}>
@@ -66,4 +67,10 @@ EventVenueMapComponent.args = {
       yCoordinate: 250,
     },
   ],
+  onPointsChange: (value) => {
+    console.log('onPointsChange called with:', value)
+  },
+  onPointClick: (pointId) => {
+    console.log('onPointClick called with:', pointId)
+  },
 }

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -51,7 +51,7 @@ export const ProductWithModifierSetModal = ({
           <div
             className={clsx(
               'manual-booking-container',
-              !product.images.length && 'tw-mt-8',
+              !product.images?.length && 'tw-mt-8',
             )}
           >
             <div className='manual-booking-header'>
@@ -60,10 +60,10 @@ export const ProductWithModifierSetModal = ({
                 description={product.description}
                 className={clsx(
                   'iframe-event__product-description',
-                  !product.images.length && 'mt-6',
+                  !product.images?.length && 'mt-6',
                 )}
                 classNameProductModal='d-block'
-                images={product.images}
+                images={product.images || []}
                 isRequired={product.isRequired}
                 canExpand
                 isModal

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ModifierSetControll.tsx

@@ -131,14 +131,14 @@ export const ModifiersSetControl = ({
 
   const radioButtonDefaultModifier = currentOrderModifiersSets
     .find((modifier) =>
-      modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId),
+      modifierSet.modifiers?.some((rl) => rl.id === modifier.modifierId),
     )
     ?.modifierId.toString()
 
   return (
     <>
       {modifierSet?.maxItems === 1 &&
-      modifiers.every((modifier) => modifier.maxItems === 1) ? (
+        modifiers.every((modifier) => modifier.maxItems === 1) ? (
         <>
           <Controller
             name={`${productId}.modifier`}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.tsx

@@ -74,7 +74,7 @@ export const ProductControl = ({
                     <ModifiersSetControl
                       modifierSet={modifierSet}
                       productId={product.id}
-                      modifiers={modifierSet.modifiers}
+                      modifiers={modifierSet.modifiers || []}
                       isEditMode={!!editOrderModifier?.modifiers}
                       orderProductModifierSets={editOrderModifier?.modifiers}
                       isLoading={isLoading}

package/src/iframe/custom-fields/components/CustomDateField.stories.tsx

@@ -33,8 +33,9 @@ export const Default: Story<any> = () => {
   })
   const { handleSubmit, register } = formProps
 
-  const isRequired = boolean('isRequired', false)
-  const isLoading = boolean('isLoading', false)
+  // TODO: Replace with Storybook controls
+  const isRequired = false
+  const isLoading = false
 
   const currentField = useMemo(
     () => ({