@licklist/design 0.78.5-dev.35 → 0.78.5-dev.37

package/dist/v2/navigation/DashboardLayout/TopNavigation.js

@@ -4,6 +4,7 @@ import './TopNavigation.scss.js';
 import img from './assets/BookedLogo_Mark.png.js';
 import { UserAvatar } from '../../components/UserAvatar/UserAvatar.js';
 import { Tooltip } from '../../components/Tooltip/Tooltip.js';
+import { UserPanel } from '../../components/UserPanel/UserPanel.js';
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -298,7 +299,7 @@ var CloseIcon = function() {
     });
 };
 var TopNavigation = function(param) {
-    var _param_sidebarCollapsed = param.sidebarCollapsed, sidebarCollapsed = _param_sidebarCollapsed === void 0 ? false : _param_sidebarCollapsed, onSidebarToggle = param.onSidebarToggle, _param_userInitials = param.userInitials, userInitials = _param_userInitials === void 0 ? 'U' : _param_userInitials, _param_userName = param.userName, userName = _param_userName === void 0 ? 'User' : _param_userName, userAvatarUrl = param.userAvatarUrl, _param_inboxCount = param.inboxCount, inboxCount = _param_inboxCount === void 0 ? 0 : _param_inboxCount, _param_notificationCount = param.notificationCount, notificationCount = _param_notificationCount === void 0 ? 0 : _param_notificationCount, onUserClick = param.onUserClick, onInboxClick = param.onInboxClick, onNotificationClick = param.onNotificationClick, onHelpClick = param.onHelpClick, _param_mobileMenuOpen = param.mobileMenuOpen, mobileMenuOpen = _param_mobileMenuOpen === void 0 ? false : _param_mobileMenuOpen, onMobileMenuToggle = param.onMobileMenuToggle, _param_sidebarToggleDisabled = param.sidebarToggleDisabled, sidebarToggleDisabled = _param_sidebarToggleDisabled === void 0 ? false : _param_sidebarToggleDisabled, userPanelOpen = param.userPanelOpen;
+    var _param_sidebarCollapsed = param.sidebarCollapsed, sidebarCollapsed = _param_sidebarCollapsed === void 0 ? false : _param_sidebarCollapsed, onSidebarToggle = param.onSidebarToggle, _param_userInitials = param.userInitials, userInitials = _param_userInitials === void 0 ? 'U' : _param_userInitials, _param_userName = param.userName, userName = _param_userName === void 0 ? 'User' : _param_userName, userEmail = param.userEmail, userAvatarUrl = param.userAvatarUrl, userId = param.userId, userRole = param.userRole, _param_inboxCount = param.inboxCount, inboxCount = _param_inboxCount === void 0 ? 0 : _param_inboxCount, _param_notificationCount = param.notificationCount, notificationCount = _param_notificationCount === void 0 ? 0 : _param_notificationCount, onUserClick = param.onUserClick, onInboxClick = param.onInboxClick, onNotificationClick = param.onNotificationClick, onHelpClick = param.onHelpClick, onProfileClick = param.onProfileClick, onLogoutClick = param.onLogoutClick, _param_mobileMenuOpen = param.mobileMenuOpen, mobileMenuOpen = _param_mobileMenuOpen === void 0 ? false : _param_mobileMenuOpen, onMobileMenuToggle = param.onMobileMenuToggle, _param_sidebarToggleDisabled = param.sidebarToggleDisabled, sidebarToggleDisabled = _param_sidebarToggleDisabled === void 0 ? false : _param_sidebarToggleDisabled, _param_userPanelOpen = param.userPanelOpen, userPanelOpen = _param_userPanelOpen === void 0 ? false : _param_userPanelOpen;
     var _useState = _sliced_to_array(useState(null), 2), hoveredItem = _useState[0], setHoveredItem = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isNotificationActive = _useState1[0], setIsNotificationActive = _useState1[1];
     var handleUserClick = function() {
@@ -445,6 +446,20 @@ var TopNavigation = function(param) {
                         })
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsx(UserPanel, {
+                isOpen: userPanelOpen,
+                onClose: function() {
+                    return onUserClick === null || onUserClick === void 0 ? void 0 : onUserClick();
+                },
+                userName: userName,
+                email: userEmail,
+                initials: userInitials,
+                avatarUrl: userAvatarUrl,
+                userNumber: userId,
+                userRole: userRole,
+                onProfileClick: onProfileClick,
+                onLogoutClick: onLogoutClick
             })
         ]
     });

package/dist/v2/navigation/DashboardLayout/index.d.ts

@@ -1,5 +1,5 @@
 export { DashboardLayout, type DashboardLayoutProps, type DestinationType } from './DashboardLayout';
-export { ProviderSidebar, type ProviderSidebarProps } from './ProviderSidebar';
+export { ProviderSidebar, type ProviderSidebarProps, type NavItem, HomeIcon, FlowsIcon, InventoryIcon, LoyaltyIcon, CustomersIcon, ReportsIcon, AnalyticsIcon, MarketingIcon, WaiversIcon, SettingsIcon, } from './ProviderSidebar';
 export { AdminSidebar, type AdminSidebarProps } from './AdminSidebar';
 export { TopNavigation, type TopNavigationProps } from './TopNavigation';
 export { DashboardFooter, type DashboardFooterProps } from './DashboardFooter';

package/dist/v2/navigation/DashboardLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACpG,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACpG,OAAO,EACH,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,YAAY,GACf,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACxE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.35",
+  "version": "0.78.5-dev.37",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
+    "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
   },
   "author": "Yaroslav Havryliv",
   "license": "MIT",
   "type": "module",
-  "homepage": "https://bitbucket.org/artelogicsoft/licklist_design#readme",
+  "homepage": "https://bitbucket.org/bookedit-licklist/licklist_design#readme",
   "description": "",
   "scripts": {
     "start": "storybook dev -p 9009",

package/src/auth/Authorizer.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useState, useCallback } from 'react'
-import { matchPath, useLocation } from 'react-router-dom'
+import { matchPath, useLocation, useNavigate } from 'react-router-dom'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import { ROUTES, MATCH_ROUTE_PATTERNS } from '@licklist/core/dist/Config'
 import useAuthApi from '@licklist/plugins/dist/hooks/Api/useAuthApi'
@@ -18,6 +18,7 @@ function Authorizer(props: AuthorizerProps) {
   const { useProfile } = useAuthApi()
 
   const { pathname } = useLocation()
+  const navigate = useNavigate()
 
   // This will re-fetch user's profile
   const profile = useProfile()
@@ -54,38 +55,41 @@ function Authorizer(props: AuthorizerProps) {
       return
     }
 
-    if (
-      [
-        ROUTES.LOGIN_PAGE,
-        ROUTES.REGISTER_PAGE,
-        ROUTES.PRIVACY_PAGE,
-        ROUTES.TERMS_PAGE,
-        ROUTES.PRIVACY_FACTS_PAGE,
-        ROUTES.CHANGE_PASSWORD,
-        ROUTES.FORGOT_PASSWORD,
-        ROUTES.SSO_LOGIN,
-        ROUTES.MAINTENANCE_PAGE,
-        ...matchedPathPatternUrls(),
-      ].includes(pathname)
-    ) {
-      setIsValidated(() => true)
+    const publicRoutes = [
+      ROUTES.LOGIN_PAGE,
+      ROUTES.REGISTER_PAGE,
+      ROUTES.PRIVACY_PAGE,
+      ROUTES.TERMS_PAGE,
+      ROUTES.PRIVACY_FACTS_PAGE,
+      ROUTES.CHANGE_PASSWORD,
+      ROUTES.FORGOT_PASSWORD,
+      ROUTES.SSO_LOGIN,
+      ROUTES.MAINTENANCE_PAGE,
+      ...matchedPathPatternUrls(),
+    ]
+
+    // If we're on a public route (e.g. /login), mark as validated and never redirect
+    if (publicRoutes.includes(pathname)) {
+      setIsValidated(true)
       return
     }
 
     const route = RouteService.getCurrentRoute()
 
-    RouteService.redirectTo(
-      [ROUTES.MAINTENANCE_PAGE, `returnUrl=${escape(route)}`].join('?'),
+    navigate(
+      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join('?'),
+      { replace: true },
     )
   }, [
     auth.secrets,
     user.profile,
     profile.data,
-    matchedPathPatternUrls,
     profile.isError,
     profile.isLoading,
     profile.isFetching,
     pathname,
+    matchedPathPatternUrls,
+    navigate,
   ])
 
   if (profile.isFetching || profile.isLoading || !isValidated)

package/src/v2/components/NPSScore/NPSScore.scss

@@ -0,0 +1,330 @@
+.nps-score {
+    width: 100%;
+    margin-top: 24px;
+
+    &__container {
+        background: var(--surfaces-main-surface-secondary, #F4F4F7);
+        border-radius: 16px;
+        padding: 24px;
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    }
+
+    &__question {
+        font-family: var(--font-family-sans);
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0 0 16px 0;
+    }
+
+    &__labels {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        span {
+            font-family: var(--font-family-sans);
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--labels-main-label-secondary, #626A90);
+        }
+
+        &--desktop {
+            display: none;
+
+            @media (min-width: 768px) {
+                display: flex;
+            }
+        }
+
+        &--mobile {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 12px;
+
+            @media (min-width: 768px) {
+                display: none;
+            }
+        }
+    }
+
+    &__label-icon {
+        color: var(--fills-main-fill-secondary, #626A90);
+        flex-shrink: 0;
+    }
+
+    &__buttons {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(10, 1fr);
+        }
+    }
+
+    &__button {
+        height: 48px;
+        border-radius: 12px;
+        font-family: var(--font-family-sans);
+        font-size: 18px;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        color: var(--labels-main-label-primary, #121E52);
+
+        &:hover:not(&--selected) {
+            background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+        }
+
+        &--selected {
+            background: var(--fills-main-fill-primary, #14215A);
+            border-color: transparent;
+            color: #FFFFFF;
+        }
+    }
+
+    &__expanded {
+        margin-top: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        animation: nps-fade-in 0.2s ease;
+    }
+
+    &__field {
+        &--roles {
+            padding-top: 16px;
+        }
+    }
+
+    &__field-label {
+        display: block;
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--labels-main-label-primary, #121E52);
+        margin-bottom: 8px;
+    }
+
+    &__field-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+    }
+
+    &__optional {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+    }
+
+    &__textarea {
+        width: 100%;
+        min-height: 100px;
+        padding: 12px;
+        border-radius: 8px;
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-primary, #121E52);
+        resize: vertical;
+        box-sizing: border-box;
+
+        &::placeholder {
+            color: var(--labels-main-label-tertiary, #9CA3AF);
+        }
+
+        &:focus {
+            outline: none;
+            border-color: var(--fills-main-fill-primary, #14215A);
+        }
+
+        &--error {
+            border-color: var(--fills-main-fill-danger, #DC2626);
+        }
+    }
+
+    &__hint {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 4px 0 0 0;
+    }
+
+    &__error {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--fills-main-fill-danger, #DC2626);
+        margin: 4px 0 0 0;
+    }
+
+    &__add-comment {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--labels-main-label-action, #2563EB);
+        text-decoration: underline;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: var(--labels-main-label-action-hover, #1D4ED8);
+        }
+    }
+
+    &__roles {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 12px;
+
+        @media (min-width: 640px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    &__role {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        position: relative;
+    }
+
+    &__role-input {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid var(--borders-main-border-primary, #E8E9EF);
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        margin: 0;
+        cursor: pointer;
+        flex-shrink: 0;
+        position: relative;
+        transition: border-color 0.2s ease;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--fills-main-fill-primary, #14215A);
+            transition: transform 0.2s ease;
+        }
+
+        &:checked {
+            border-color: var(--fills-main-fill-primary, #14215A);
+
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--fills-main-fill-primary-opacity, rgba(20, 33, 90, 0.2));
+        }
+    }
+
+    &__role-radio {
+        display: none;
+    }
+
+    &__role-label {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-primary, #121E52);
+    }
+
+    &__submit {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 12px 24px;
+        border-radius: 8px;
+        border: none;
+        background: var(--fills-main-fill-primary, #14215A);
+        color: #FFFFFF;
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        width: fit-content;
+
+        &:hover:not(:disabled) {
+            background: var(--fills-main-fill-primary-hover, #1a2a6e);
+        }
+
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    }
+
+    &__success {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+        text-align: center;
+    }
+
+    &__success-icon {
+        color: var(--fills-main-fill-success, #10B981);
+        margin-bottom: 16px;
+    }
+
+    &__success-title {
+        font-family: var(--font-family-sans);
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0 0 8px 0;
+    }
+
+    &__success-message {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 0;
+    }
+}
+
+@keyframes nps-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/v2/components/NPSScore/NPSScore.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { NPSScore } from './NPSScore'
+
+const meta: Meta<typeof NPSScore> = {
+    title: 'v2/Components/NPSScore',
+    component: NPSScore,
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        firstName: { control: 'text' },
+        onSubmit: { action: 'submitted' },
+        onDismiss: { action: 'dismissed' },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof NPSScore>
+
+export const Default: Story = {
+    args: {
+        firstName: 'Godwin',
+        onSubmit: (data) => {
+            console.log('NPS Submitted:', data)
+            return Promise.resolve()
+        },
+    },
+}