@redacto.io/consent-sdk-react 7.3.0 → 8.1.0

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/SideBarPC.tsx

@@ -1,489 +0,0 @@
-import { cn } from '../../utils/cn';
-import SimpleBar from '../../ui/SimpleBar';
-import { PCText, PCAvatar, PCButton, PCActionIcon } from '../../ui';
-import { PCTooltip } from '../../ui/PCTooltip';
-import { pcStyles } from '../../styles/pcStyles';
-import { useState, useEffect, useCallback, useMemo, type CSSProperties } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  IoArrowBackOutline,
-  IoChevronBackOutline,
-  IoChevronForwardOutline,
-  IoCloseOutline,
-  IoLogOutOutline,
-  IoMenuOutline,
-} from 'react-icons/io5';
-
-const getVar = (varName: string): string => `var(${varName})`;
-import { SideMenuPC } from './SideMenuPC';
-import { useMenuItemsPC } from '../../lib/constants';
-import { useOrganization } from '../../context/OrganizationContext';
-import { useBranding } from '../../context/BrandingContext';
-import type { SideBarPCProps } from './types';
-import { signOutPrivacyCenter } from '../../lib/utils';
-
-export default function SideBarPC({
-  className,
-  isCompact = false,
-  onBack,
-}: SideBarPCProps) {
-  const { t } = useTranslation();
-  const menuItems = useMenuItemsPC();
-  const [isCollapsed, setIsCollapsed] = useState(true); // Always start collapsed
-  const [isMobileOpen, setIsMobileOpen] = useState(false);
-  const [isDesktopHovered, setIsDesktopHovered] = useState(false);
-  const [email, setEmail] = useState<string>('');
-  // const [isSigningOut, setIsSigningOut] = useState(false);
-  const { organization } = useOrganization();
-  const branding = useBranding();
-
-  useEffect(() => {
-    setEmail(sessionStorage.getItem('email') || '');
-  }, []);
-
-  // const handleSignOut = useCallback(async () => {
-  //   setIsSigningOut(true);
-  //   signOutPrivacyCenter();
-  //   // Sign out handled - parent component should handle navigation/error
-  //   setIsSigningOut(false);
-  // }, []);
-
-  const handleDesktopToggle = useCallback(() => {
-    if (!isCompact && !isMobileOpen) {
-      setIsCollapsed((prev) => !prev);
-    }
-  }, [isCompact, isMobileOpen]);
-
-  const handleMobileToggle = useCallback(() => {
-    setIsMobileOpen((prev) => !prev);
-  }, []);
-
-  const handleMobileClose = useCallback(() => {
-    setIsMobileOpen(false);
-  }, []);
-
-  const handleMenuItemSelect = useCallback(() => {
-    if (isMobileOpen) {
-      setIsMobileOpen(false);
-      return;
-    }
-
-    if (!isCompact) {
-      setIsCollapsed(true);
-    }
-  }, [isCompact, isMobileOpen]);
-
-  const handleDesktopMouseEnter = useCallback(() => {
-    if (!isMobileOpen) {
-      setIsDesktopHovered(true);
-    }
-  }, [isMobileOpen]);
-
-  const handleDesktopMouseLeave = useCallback(() => {
-    setIsDesktopHovered(false);
-  }, []);
-
-  // Close mobile menu when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (
-        isMobileOpen &&
-        !target.closest('aside') &&
-        !target.closest('[data-mobile-menu-button]')
-      ) {
-        setIsMobileOpen(false);
-      }
-    };
-
-    if (isMobileOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      // Prevent body scroll when mobile menu is open
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.body.style.overflow = '';
-    };
-  }, [isMobileOpen]);
-
-  const organizationName = organization?.name || '';
-  const displayName = branding?.brand_name || organizationName;
-  const isExpanded = isMobileOpen || !isCollapsed;
-
-  const sidebarClassName = useMemo(
-    () =>
-      cn(
-        className,
-        isCollapsed && 'pc-sidebar-collapsed'
-      ),
-    [isCollapsed, className]
-  );
-
-  const sidebarStyle = useMemo<CSSProperties>(
-    () => ({
-      position: 'fixed',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      zIndex: 1100,
-      backgroundColor: getVar('--pc-bg-shell'),
-      boxShadow: getVar('--pc-sidebar-shadow'),
-      transition: 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease',
-      display: 'flex',
-      flexDirection: 'column',
-      overflowY: 'hidden',
-      overflowX: 'visible',
-      boxSizing: 'border-box',
-      height: '100vh',
-      willChange: 'width',
-      // Width will be controlled by CSS classes, but set default inline for non-desktop
-      width: isMobileOpen
-        ? getVar('--pc-sidebar-mobile-width')
-        : isCollapsed
-          ? getVar('--pc-sidebar-collapsed-width')
-          : getVar('--pc-sidebar-expanded-width'),
-    }),
-    [isCollapsed, isMobileOpen]
-  );
-
-  const headerTextStyle = useMemo(
-    () => ({
-      overflow: 'hidden',
-      transition: 'opacity 0.3s ease, width 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease',
-      flex: 1,
-      minWidth: 0,
-      willChange: 'opacity, width, max-width, margin-left',
-      ...(isMobileOpen || !isCollapsed ? {
-        opacity: 1,
-        maxWidth: '100%',
-        width: 'auto',
-        marginLeft: '0.75rem',
-      } : {
-        width: 0,
-        opacity: 0,
-        maxWidth: 0,
-        marginLeft: 0,
-      }),
-    }),
-    [isCollapsed, isMobileOpen]
-  );
-
-  const emailContainerStyle = useMemo(
-    () => ({
-      overflow: 'hidden',
-      transition: 'all 0.3s',
-      ...(isMobileOpen || !isCollapsed ? {
-        height: email ? 'auto' : 0,
-        opacity: email ? 1 : 0,
-        marginBottom: email ? '0.5rem' : 0,
-      } : {
-        height: 0,
-        opacity: 0,
-        marginBottom: 0,
-      }),
-    }),
-    [isCollapsed, isMobileOpen, email]
-  );
-
-  const buttonStyle = useMemo(
-    () => ({
-      height: 'auto',
-      minHeight: '2.25rem',
-      width: '100%',
-      justifyContent: (isMobileOpen || !isCollapsed) ? 'flex-start' : 'center',
-      padding: 0,
-      fontWeight: pcStyles.fontWeightMedium.fontWeight,
-      color: getVar('--pc-text-primary'),
-      outline: 'none',
-      transition: 'all 0.3s',
-      alignItems: 'center',
-      display: 'flex',
-    }),
-    [isCollapsed, isMobileOpen]
-  );
-
-  const handleBack = useCallback(() => {
-    if (onBack === 'back') {
-      window.history.back();
-    } else if (onBack === 'signout') {
-      signOutPrivacyCenter();
-      // Redirect to previous page after clearing cookies and sessionStorage
-      window.history.back();
-    }
-  }, [onBack]);
-
-  const footerActionLabel = onBack === 'back' ? t('back') : t('signOut');
-  const footerActionIconSize = !isMobileOpen && isCollapsed ? 19 : 18;
-  const footerActionIcon =
-    onBack === 'back' ? (
-      <IoArrowBackOutline size={footerActionIconSize} style={{ flexShrink: 0 }} />
-    ) : (
-      <IoLogOutOutline size={footerActionIconSize} style={{ flexShrink: 0 }} />
-    );
-
-  return (
-    <>
-      {!isCompact && !isMobileOpen && (
-        <PCActionIcon
-          variant="outline"
-          aria-label={isCollapsed ? t('expandSidebar') : t('collapseSidebar')}
-          className="pc-sidebar-toggle-desktop pc-hidden-xs pc-hidden-sm pc-flex-md"
-          data-collapsed={isCollapsed ? 'true' : 'false'}
-          data-visible={(!isCollapsed || isDesktopHovered) ? 'true' : 'false'}
-          style={{
-            position: 'fixed',
-            top: '28px',
-            zIndex: 2000,
-            width: '28px',
-            height: '28px',
-            borderRadius: '9999px',
-            borderColor: getVar('--pc-border-color'),
-            backgroundColor: getVar('--pc-bg-primary'),
-            color: getVar('--pc-text-secondary'),
-            boxShadow: '0 10px 24px rgba(15, 23, 42, 0.14)',
-          }}
-          onMouseEnter={handleDesktopMouseEnter}
-          onMouseLeave={handleDesktopMouseLeave}
-          onClick={handleDesktopToggle}
-        >
-          {isCollapsed ? (
-            <IoChevronForwardOutline size={14} />
-          ) : (
-            <IoChevronBackOutline size={14} />
-          )}
-        </PCActionIcon>
-      )}
-
-      {/* Mobile Menu Button - visible only on mobile when sidebar is closed */}
-      {!isMobileOpen && (
-        <PCActionIcon
-          data-mobile-menu-button
-          aria-label={t('openSidebarMenu')}
-          variant="default"
-          style={{
-            position: 'fixed',
-            left: '0.75rem',
-            top: '0.75rem',
-            zIndex: 992,
-            height: '2.25rem',
-            width: '2.25rem',
-            padding: 0,
-            color: getVar('--pc-text-primary'),
-          }}
-          className="pc-hidden-md"
-          onClick={handleMobileToggle}
-        >
-          <IoMenuOutline size={20} />
-        </PCActionIcon>
-      )}
-
-      {/* Mobile Overlay */}
-      <div
-        className="pc-hidden-md pc-mobile-overlay"
-        data-open={isMobileOpen}
-        style={{
-          position: 'fixed',
-          inset: 0,
-          zIndex: 990,
-          backgroundColor: getVar('--pc-bg-overlay'),
-        }}
-        onClick={handleMobileClose}
-        aria-hidden={!isMobileOpen}
-      />
-
-      {/* Sidebar */}
-      <aside
-        style={sidebarStyle}
-        className={cn(sidebarClassName, 'pc-sidebar')}
-        data-mobile-open={isMobileOpen}
-        onMouseEnter={handleDesktopMouseEnter}
-        onMouseLeave={handleDesktopMouseLeave}
-      >
-        {/* Sidebar Header */}
-        <div style={{
-          flexShrink: 0,
-          ...pcStyles.flex,
-          minHeight: '56px',
-          height: '56px',
-          ...pcStyles.itemsCenter,
-          ...(isMobileOpen || !isCollapsed ? { ...pcStyles.justifyBetween } : { ...pcStyles.justifyCenter }),
-          backgroundColor: getVar('--pc-bg-shell'),
-          paddingLeft: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
-          paddingRight: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
-          transition: 'padding-left 0.3s ease, padding-right 0.3s ease, justify-content 0.3s ease',
-          willChange: 'padding-left, padding-right',
-        }}>
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.itemsCenter,
-            ...(isMobileOpen || !isCollapsed ? { flex: 1, minWidth: 0 } : { justifyContent: 'center', width: '100%' }),
-            transition: 'flex 0.3s ease, min-width 0.3s ease, justify-content 0.3s ease, width 0.3s ease',
-            willChange: 'flex, min-width, justify-content, width',
-          }}>
-            <div style={{
-              flexShrink: 0,
-              transition: 'transform 0.3s ease',
-              willChange: 'transform',
-            }}>
-              {isExpanded && branding?.logo_url ? (
-                <img
-                  src={branding.logo_url}
-                  alt={displayName}
-                  style={{ height: '32px', width: 'auto', maxWidth: '160px', objectFit: 'contain', display: 'block' }}
-                />
-              ) : branding?.icon_url ? (
-                <PCAvatar src={branding.icon_url} name={displayName} color="info" size="md" />
-              ) : (
-                <PCAvatar name={displayName} color="info" size="md" />
-              )}
-            </div>
-            <div style={headerTextStyle}>
-              <PCText style={{
-                whiteSpace: 'nowrap',
-                fontSize: pcStyles.textBase.fontSize,
-                fontWeight: pcStyles.fontWeightSemibold.fontWeight,
-                letterSpacing: '-0.025em',
-                color: getVar('--pc-text-primary'),
-                transition: 'opacity 0.3s ease, transform 0.3s ease',
-                willChange: 'opacity, transform',
-              }}>
-                {displayName}
-              </PCText>
-            </div>
-          </div>
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.itemsCenter,
-            flexShrink: 0,
-            opacity: (isMobileOpen || !isCollapsed) ? 1 : 0,
-            width: (isMobileOpen || !isCollapsed) ? 'auto' : 0,
-            overflow: 'hidden',
-            transition: 'opacity 0.3s ease, width 0.3s ease',
-            willChange: 'opacity, width',
-            pointerEvents: (isMobileOpen || !isCollapsed) ? 'auto' : 'none',
-          }}>
-            <PCActionIcon
-              variant="default"
-              style={{ color: getVar('--pc-text-primary') }}
-              className="pc-hidden-md"
-              onClick={handleMobileClose}
-              aria-label={t('closeSidebarMenu')}
-            >
-              <IoCloseOutline size={20} />
-            </PCActionIcon>
-          </div>
-        </div>
-
-        <div style={{
-          flex: 1,
-          minHeight: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          position: 'relative',
-        }}>
-          <SimpleBar style={{
-            flex: 1,
-            minHeight: 0,
-            height: '100%',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-          }}>
-            <SideMenuPC
-              menuItems={menuItems}
-              isCollapsed={isMobileOpen ? false : isCollapsed}
-              onItemSelect={handleMenuItemSelect}
-            />
-          </SimpleBar>
-        </div>
-
-        <div style={{
-          flexShrink: 0,
-          backgroundColor: getVar('--pc-bg-shell'),
-          paddingTop: '0.75rem',
-          paddingBottom: '0.75rem',
-          paddingLeft: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
-          paddingRight: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
-          minHeight: 'fit-content',
-          transition: 'padding-left 0.3s ease, padding-right 0.3s ease',
-          willChange: 'padding-left, padding-right',
-        }}>
-          <div style={emailContainerStyle}>
-            <PCText size="sm" color="secondary" style={{
-              maxWidth: '100%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              fontSize: pcStyles.textXs.fontSize,
-              color: getVar('--pc-text-secondary'),
-              lineHeight: 1.5,
-            }}>
-              {email}
-            </PCText>
-          </div>
-          {onBack && (
-            !isMobileOpen && isCollapsed ? (
-              <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <PCTooltip content={footerActionLabel} placement="right" color="invert">
-                  <div style={{ width: 'fit-content', margin: '0 auto' }}>
-                    <PCButton
-                      variant="text"
-                      onClick={handleBack}
-                      aria-label={footerActionLabel}
-                      style={{
-                        ...buttonStyle,
-                        width: '2.25rem',
-                        height: '2.25rem',
-                        minHeight: '2.25rem',
-                        padding: 0,
-                        marginTop: email ? '0.5rem' : 0,
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        fontSize: pcStyles.textSm.fontSize,
-                      }}
-                    >
-                      {footerActionIcon}
-                    </PCButton>
-                  </div>
-                </PCTooltip>
-              </div>
-            ) : (
-              <PCButton
-                variant="text"
-                onClick={handleBack}
-                aria-label={footerActionLabel}
-                style={{
-                  ...buttonStyle,
-                  width: '100%',
-                  padding: '0.4375rem 0',
-                  marginTop: email && (isMobileOpen || !isCollapsed) ? '0.5rem' : 0,
-                  justifyContent: (isMobileOpen || !isCollapsed) ? 'flex-start' : 'center',
-                  fontSize: pcStyles.textSm.fontSize,
-                  minHeight: 'auto',
-                }}
-              >
-                <span
-                  style={{
-                    marginRight: (isMobileOpen || !isCollapsed) ? '0.625rem' : 0,
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  {footerActionIcon}
-                </span>
-                {(isMobileOpen || !isCollapsed) && (
-                  <span style={{ whiteSpace: 'nowrap', lineHeight: 1.5 }}>{footerActionLabel}</span>
-                )}
-              </PCButton>
-            )
-          )}
-        </div>
-      </aside>
-    </>
-  );
-}