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

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -1,350 +0,0 @@
-import { Suspense, useState, useEffect, useCallback } from 'react';
-import SideBarPC from './SideMenuBarPC/SideBarPC';
-import Footer from '../ui/Footer';
-import { PCSelect } from '../ui';
-import { useTranslation } from 'react-i18next';
-import { PAGE_CHROME_BY_PAGE, languageOptions } from '../lib/constants';
-import { LocaleContext } from '../context/LocaleContext';
-import { useInternalNavigation } from '../context/NavigationContext';
-import { usePageChrome } from '../context/PageChromeContext';
-import i18n from '../lib/i18n';
-import { pcStyles } from '../styles/pcStyles';
-import type { PrivacyCenterLayoutProps } from './types';
-import { NotificationBell } from './NotificationHub/NotificationBell';
-import { getVar } from '../lib/utils';
-import { Globe2 } from 'lucide-react';
-
-export default function PrivacyCenterLayout({
-  children,
-  sidebarClassName,
-  contentClassName,
-  onBack,
-}: PrivacyCenterLayoutProps) {
-  const { t } = useTranslation();
-  const { currentPage } = useInternalNavigation();
-  const { pageChromeOverride, headerStatus } = usePageChrome();
-  const [locale, setLocale] = useState(i18n.language);
-  const pageChrome = pageChromeOverride ?? PAGE_CHROME_BY_PAGE[currentPage];
-
-  const handleLanguageChange = useCallback((value: unknown) => {
-    const langValue = value as { value: string; label: string };
-    i18n.changeLanguage(langValue.value);
-  }, []);
-
-  useEffect(() => {
-    const handleLanguageChanged = () => setLocale(i18n.language);
-    i18n.on('languageChanged', handleLanguageChanged);
-    return () => i18n.off('languageChanged', handleLanguageChanged);
-  }, []);
-
-  return (
-    <LocaleContext.Provider value={{ locale, setLocale }}>
-      <Suspense fallback={<div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, minHeight: '100vh' }}>{t('loadingEllipsis')}</div>}>
-        <main
-          className="pc-root"
-          style={{
-            ...pcStyles.flex,
-            minHeight: '100vh',
-            flexGrow: 1,
-            position: 'relative',
-            backgroundColor: getVar('--pc-bg-shell'),
-          }}
-        >
-          <SideBarPC className={sidebarClassName} onBack={onBack} />
-          <div style={{
-            ...pcStyles.flex,
-            ...pcStyles.flexCol,
-            flex: 1,
-            minWidth: 0,
-            backgroundColor: getVar('--pc-bg-shell'),
-            minHeight: 0,
-          }} className="pc-content-wrapper">
-            {/* Top Navbar with Theme Toggle */}
-            <nav style={{
-              position: 'relative',
-              ...pcStyles.flex,
-              ...pcStyles.itemsCenter,
-              ...pcStyles.justifyBetween,
-              gap: '0.75rem',
-              backgroundColor: getVar('--pc-bg-shell'),
-              paddingLeft: 'var(--pc-navbar-padding-left, 0.75rem)',
-              paddingRight: 'var(--pc-navbar-padding-right, 0.75rem)',
-              paddingTop: 'var(--pc-navbar-padding-top, 0.625rem)',
-              paddingBottom: 'var(--pc-navbar-padding-bottom, 0.625rem)',
-              transition: 'background-color 0.3s ease, border-color 0.3s ease',
-              willChange: 'background-color, border-color',
-            }} className="pc-navbar">
-              <div
-                className="pc-navbar-page-meta"
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  minWidth: 0,
-                  flex: 1,
-                  gap: '0.1875rem',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', minWidth: 0 }}>
-                  <p
-                    className="pc-navbar-title"
-                    style={{
-                      margin: 0,
-                      color: getVar('--pc-text-primary'),
-                      fontSize: '1.0625rem',
-                      fontWeight: 700,
-                      lineHeight: 1.2,
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {t(pageChrome.titleKey)}
-                  </p>
-                  {headerStatus && (
-                    <span
-                      style={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        flexShrink: 0,
-                        borderRadius: '9999px',
-                        gap: '0.375rem',
-                        padding: '0.25rem 0.75rem',
-                        fontSize: '0.625rem',
-                        fontWeight: 600,
-                        lineHeight: 1.2,
-                        border: `1px solid ${
-                          headerStatus.variant === 'success'
-                            ? 'rgba(16, 185, 129, 0.35)'
-                            : 'rgba(245, 158, 11, 0.35)'
-                        }`,
-                        backgroundColor:
-                          headerStatus.variant === 'success'
-                            ? 'rgba(16, 185, 129, 0.1)'
-                            : '#fff7ed',
-                        color:
-                          headerStatus.variant === 'success'
-                            ? getVar('--pc-success')
-                            : '#d97706',
-                      }}
-                    >
-                      <span
-                        aria-hidden="true"
-                        style={{
-                          width: '0.4375rem',
-                          height: '0.4375rem',
-                          borderRadius: '9999px',
-                          backgroundColor:
-                            headerStatus.variant === 'success'
-                              ? getVar('--pc-success')
-                              : '#d97706',
-                        }}
-                      />
-                      {headerStatus.label}
-                    </span>
-                  )}
-                </div>
-                {pageChrome.descriptionKey && (
-                  <p
-                    className="pc-navbar-description"
-                    style={{
-                      margin: 0,
-                      color: getVar('--pc-text-secondary'),
-                      fontSize: '0.75rem',
-                      lineHeight: 1.2,
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {t(pageChrome.descriptionKey)}
-                  </p>
-                )}
-              </div>
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.375rem',
-                flexShrink: 0,
-              }} className="pc-navbar-actions">
-                <PCSelect
-                  className="pc-navbar-language-select"
-                  size="sm"
-                  searchable
-                  prefix={<Globe2 size={12} strokeWidth={1.8} />}
-                  searchPlaceholder={t('searchPlaceholder')}
-                  noOptionsMessage={t('noOptionsFound')}
-                  style={{
-                    width: 'auto',
-                    minWidth: '120px',
-                    maxWidth: 'min(65vw, 320px)',
-                    flexShrink: 0,
-                  }}
-                  options={languageOptions}
-                  value={languageOptions.find((opt) => opt.value === locale) || null}
-                  onChange={handleLanguageChange}
-                />
-                <NotificationBell />
-              </div>
-            </nav>
-            <div style={{
-              ...pcStyles.flex,
-              ...pcStyles.flexCol,
-              flex: 1,
-              minHeight: 0,
-              paddingLeft: 'var(--pc-content-padding-left, 0.75rem)',
-              paddingRight: 'var(--pc-content-padding-right, 0.75rem)',
-              paddingTop: 'var(--pc-content-padding-top, 0)',
-              minWidth: 0,
-              backgroundColor: getVar('--pc-bg-shell'),
-            }} className="pc-content-container">
-              <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                flex: 1,
-                minHeight: 0,
-                width: '100%',
-              }}>
-                <div style={{
-                  ...pcStyles.flex,
-                  ...pcStyles.flexCol,
-                  flex: 1,
-                  minHeight: 0,
-                  ...pcStyles.justifyBetween,
-                  ...pcStyles.gapSm,
-                  paddingTop: '0.625rem',
-                  paddingBottom: '0.75rem',
-                }}>
-                  <div className={contentClassName} style={{ width: '100%' }}>{children}</div>
-                  <div style={{
-                    ...pcStyles.flex,
-                    width: '100%',
-                    ...pcStyles.itemsCenter,
-                    ...pcStyles.justifyCenter,
-                  }}>
-                    <Footer />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-        <style>{`
-        /* Layout sizing is driven by a single sidebar offset variable.
-           This prevents overlap when zoom changes effective breakpoints. */
-        .pc-content-wrapper {
-          --pc-sidebar-offset: 0px;
-          margin-left: var(--pc-sidebar-offset) !important;
-          width: calc(100% - var(--pc-sidebar-offset)) !important;
-          min-width: 0 !important;
-          transition: margin-left 0.3s ease, width 0.3s ease !important;
-        }
-
-        .pc-navbar {
-          --pc-navbar-padding-left: 0.75rem;
-          --pc-navbar-padding-right: 0.75rem;
-          --pc-navbar-padding-top: 0.875rem;
-          --pc-navbar-padding-bottom: 0.75rem;
-        }
-
-        .pc-content-container {
-          --pc-content-padding-left: 0.75rem;
-          --pc-content-padding-right: 0.75rem;
-          --pc-content-padding-top: 0;
-        }
-
-        .pc-navbar-page-meta {
-          min-width: 0;
-          max-width: 100%;
-          padding-right: 0.5rem;
-        }
-
-        .pc-navbar-title,
-        .pc-navbar-description {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        /* Medium screens (768px+): Sidebar visible, collapsed by default */
-        @media (min-width: 768px) {
-          .pc-sidebar ~ .pc-content-wrapper {
-            --pc-sidebar-offset: var(--pc-sidebar-collapsed-width, 80px);
-          }
-          .pc-sidebar:not(.pc-sidebar-collapsed) ~ .pc-content-wrapper {
-            --pc-sidebar-offset: var(--pc-sidebar-expanded-width, 300px);
-          }
-        }
-
-        /* 2XL screens (1536px+): Sidebar expands to 320px in injected styles */
-        @media (min-width: 1536px) {
-          .pc-sidebar:not(.pc-sidebar-collapsed) ~ .pc-content-wrapper {
-            --pc-sidebar-offset: var(--pc-sidebar-expanded-width-2xl, 320px);
-          }
-        }
-        
-        /* Responsive padding for navbar */
-        @media (max-width: 767px) {
-          .pc-navbar {
-            --pc-navbar-padding-left: 3.75rem;
-            --pc-navbar-padding-right: 0.75rem;
-            --pc-navbar-padding-top: 0.75rem;
-            --pc-navbar-padding-bottom: 0.625rem;
-          }
-          .pc-navbar-description {
-            display: none;
-          }
-          .pc-navbar-page-meta {
-            max-width: calc(100% - 8.25rem);
-            padding-right: 0.25rem;
-          }
-          .pc-navbar-actions {
-            gap: 0.375rem;
-          }
-          .pc-content-container {
-            --pc-content-padding-top: 0;
-          }
-        }
-        @media (min-width: 768px) {
-          .pc-navbar {
-            --pc-navbar-padding-left: 1.25rem;
-            --pc-navbar-padding-right: 1.25rem;
-            --pc-navbar-padding-top: 0.875rem;
-            --pc-navbar-padding-bottom: 0.75rem;
-          }
-          .pc-navbar-description {
-            display: block;
-          }
-          .pc-content-container {
-            --pc-content-padding-top: 0;
-          }
-        }
-        @media (min-width: 768px) {
-          .pc-navbar-title {
-            font-size: 1.0625rem;
-          }
-          .pc-navbar-description {
-            font-size: 0.6875rem;
-          }
-          .pc-content-container {
-            --pc-content-padding-left: 1.25rem;
-            --pc-content-padding-right: 1.25rem;
-            --pc-content-padding-top: 0;
-          }
-        }
-        @media (min-width: 1024px) {
-          .pc-navbar {
-            --pc-navbar-padding-left: 1.5rem;
-            --pc-navbar-padding-right: 1.5rem;
-          }
-          .pc-content-container {
-            --pc-content-padding-left: 1.5rem;
-            --pc-content-padding-right: 1.5rem;
-            --pc-content-padding-top: 0;
-          }
-        }
-      `}</style>
-      </Suspense>
-    </LocaleContext.Provider>
-  );
-}