@redacto.io/consent-sdk-react 4.0.0 → 5.0.0

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -0,0 +1,304 @@
+import { Suspense, useState, useEffect, useCallback } from 'react';
+import SideBarPC from './SideMenuBarPC/SideBarPC';
+import Footer from '../ui/Footer';
+import ThemeToggle from '../ui/ThemeToggle';
+import ThemeTransitionOverlay from './ThemeTransitionOverlay';
+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';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function PrivacyCenterLayout({
+  children,
+  sidebarClassName,
+  contentClassName,
+  onBack,
+}: PrivacyCenterLayoutProps) {
+  const { t } = useTranslation();
+  const { currentPage } = useInternalNavigation();
+  const { pageChromeOverride } = 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>}>
+        <ThemeTransitionOverlay />
+        <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'),
+          }} className="pc-content-wrapper">
+            {/* Top Navbar with Theme Toggle */}
+            <nav style={{
+              position: 'fixed',
+              top: 0,
+              zIndex: 50,
+              ...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, width 0.3s ease, left 0.3s ease',
+              willChange: 'background-color, border-color, width, left',
+            }} className="pc-navbar">
+              <div
+                className="pc-navbar-page-meta"
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  minWidth: 0,
+                  flex: 1,
+                  gap: '0.125rem',
+                }}
+              >
+                <p
+                  className="pc-navbar-title"
+                  style={{
+                    margin: 0,
+                    color: getVar('--pc-text-primary'),
+                    fontSize: '1rem',
+                    fontWeight: 600,
+                    lineHeight: 1.3,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  {t(pageChrome.titleKey)}
+                </p>
+                {pageChrome.descriptionKey && (
+                  <p
+                    className="pc-navbar-description"
+                    style={{
+                      margin: 0,
+                      color: getVar('--pc-text-secondary'),
+                      fontSize: '0.8125rem',
+                      lineHeight: 1.35,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {t(pageChrome.descriptionKey)}
+                  </p>
+                )}
+              </div>
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                flexShrink: 0,
+              }} className="pc-navbar-actions">
+                <PCSelect
+                  size="sm"
+                  searchable
+                  searchPlaceholder={t('searchPlaceholder')}
+                  noOptionsMessage={t('noOptionsFound')}
+                  style={{
+                    width: 'auto',
+                    minWidth: '92px',
+                    maxWidth: '136px',
+                    flexShrink: 0,
+                  }}
+                  options={languageOptions}
+                  value={languageOptions.find((opt) => opt.value === locale) || null}
+                  onChange={handleLanguageChange}
+                />
+                <ThemeToggle />
+              </div>
+            </nav>
+            <div style={{
+              ...pcStyles.flex,
+              ...pcStyles.flexCol,
+              flexGrow: 1,
+              paddingLeft: 'var(--pc-content-padding-left, 0.75rem)',
+              paddingRight: 'var(--pc-content-padding-right, 0.75rem)',
+              paddingTop: 'var(--pc-content-padding-top, 4rem)',
+              minWidth: 0,
+              backgroundColor: getVar('--pc-bg-shell'),
+            }} className="pc-content-container">
+              <div style={{
+                minHeight: '100vh',
+                width: '100%',
+              }}>
+                <div style={{
+                  ...pcStyles.flex,
+                  ...pcStyles.flexCol,
+                  height: '100%',
+                  minHeight: '100vh',
+                  ...pcStyles.justifyBetween,
+                  ...pcStyles.gapMd,
+                  paddingLeft: '0.5rem',
+                  paddingRight: '0.5rem',
+                  paddingTop: '1rem',
+                  paddingBottom: '1rem',
+                }}>
+                  <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.625rem;
+          --pc-navbar-padding-bottom: 0.625rem;
+          left: var(--pc-sidebar-offset) !important;
+          width: calc(100% - var(--pc-sidebar-offset)) !important;
+          transition: left 0.3s ease, width 0.3s ease !important;
+        }
+
+        .pc-content-container {
+          --pc-content-padding-left: 0.75rem;
+          --pc-content-padding-right: 0.75rem;
+          --pc-content-padding-top: 4rem;
+        }
+
+        .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.625rem;
+            --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: 4rem;
+          }
+        }
+        @media (min-width: 768px) {
+          .pc-navbar {
+            --pc-navbar-padding-left: 1rem;
+            --pc-navbar-padding-right: 1rem;
+            --pc-navbar-padding-top: 0.75rem;
+            --pc-navbar-padding-bottom: 0.75rem;
+          }
+          .pc-navbar-description {
+            display: block;
+          }
+          .pc-content-container {
+            --pc-content-padding-top: 4.5rem;
+          }
+        }
+        @media (min-width: 768px) {
+          .pc-navbar-title {
+            font-size: 1.0625rem;
+          }
+          .pc-navbar-description {
+            font-size: 0.8125rem;
+          }
+          .pc-content-container {
+            --pc-content-padding-left: 1.25rem;
+            --pc-content-padding-right: 1.25rem;
+            --pc-content-padding-top: 4.5rem;
+          }
+        }
+        @media (min-width: 1024px) {
+          .pc-content-container {
+            --pc-content-padding-left: 1.5rem;
+            --pc-content-padding-right: 1.5rem;
+            --pc-content-padding-top: 4.75rem;
+          }
+        }
+      `}</style>
+      </Suspense>
+    </LocaleContext.Provider>
+  );
+}

package/src/RedactoPrivacyCenter/components/RequestSubmit.tsx

@@ -0,0 +1,232 @@
+import character from '../assets/character.svg';
+import greenTick from '../assets/greenTick.svg';
+import sentImg from '../assets/sentImg.svg';
+import { useTranslation } from 'react-i18next';
+import { PCButton, PCText } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import type { RequestSubmitProps } from './types';
+import { Mail } from 'lucide-react';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export default function RequestSubmit({
+  caseId,
+  contact,
+  onCreateRequest,
+  revokeConsentOnFulfilment,
+  revokedPurposeNames,
+}: RequestSubmitProps) {
+  const { t } = useTranslation();
+  return (
+    <div style={{ marginTop: pcStyles.mtMd.marginTop, position: 'relative' }}>
+      <img
+        src={sentImg}
+        alt="sent"
+        className="pc-hidden-xs"
+        style={{
+          position: 'absolute',
+          right: '0.75rem',
+          top: '0.75rem',
+          height: '3rem',
+          width: '3rem',
+          opacity: 0.65,
+          filter: 'brightness(0) saturate(100%) invert(var(--pc-icon-filter, 0))',
+        }}
+      />
+      <div style={{
+        ...pcStyles.card,
+        borderRadius: pcStyles.borderRadiusXl,
+        padding: pcStyles.pLg.padding,
+        position: 'relative',
+        ...pcStyles.bgPrimary,
+        border: `1px solid ${pcStyles.borderColor}`,
+      }} className="pc-padding-responsive">
+        <div style={{
+          ...pcStyles.flex,
+          ...pcStyles.flexCol,
+          ...pcStyles.itemsStart,
+          ...pcStyles.gapMd,
+        }} className="pc-flex-responsive">
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsStart,
+            ...pcStyles.gapMd,
+            width: '100%',
+          }}>
+            <div style={{
+              height: '2.5rem',
+              width: '2.5rem',
+              flexShrink: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              backgroundColor: `${getVar('--pc-success')}33`,
+              padding: '0.375rem',
+            }}>
+              <img
+                src={greenTick}
+                alt="success"
+                style={{
+                  height: '1.5rem',
+                  width: '1.5rem',
+                }}
+              />
+            </div>
+            <div style={{ minWidth: 0, flex: 1 }}>
+              <PCText
+                size="base"
+                weight="semibold"
+                style={{
+                  marginBottom: pcStyles.mbXs.marginBottom,
+                }}
+                className="pc-text-responsive"
+              >
+                {t('requestSubmittedSuccessfully')}
+              </PCText>
+              <PCText
+                size="sm"
+                weight="medium"
+                color="secondary"
+                style={{
+                  marginBottom: pcStyles.mbMd.marginBottom,
+                }}
+              >
+                {t('thankYouForSubmittingYourRequest')}.
+              </PCText>
+              <div style={{
+                marginTop: pcStyles.mtMd.marginTop,
+                padding: pcStyles.pSm.padding,
+                ...pcStyles.bgSecondary,
+                borderRadius: pcStyles.borderRadiusMd,
+                border: `1px solid ${pcStyles.borderColor}`,
+              }}>
+                <PCText
+                  size="base"
+                  weight="bold"
+                  style={{
+                    color: pcStyles.primary,
+                    wordBreak: 'break-word',
+                    marginBottom: pcStyles.mbXs.marginBottom,
+                  }}
+                  className="pc-text-responsive"
+                >
+                  {t('caseID')}: {caseId}
+                </PCText>
+                <PCText
+                  size="xs"
+                  weight="medium"
+                  color="secondary"
+                >
+                  {t('saveThisID')}.
+                </PCText>
+              </div>
+              <div style={{
+                ...pcStyles.flex,
+                ...pcStyles.itemsStart,
+                ...pcStyles.gapSm,
+                marginTop: pcStyles.mtMd.marginTop,
+                padding: '0.5rem 0.625rem',
+                ...pcStyles.bgSecondary,
+                borderRadius: pcStyles.borderRadiusMd,
+              }}>
+                <Mail
+                  size={16}
+                  style={{
+                    flexShrink: 0,
+                    color: getVar('--pc-text-secondary'),
+                    marginTop: '2px',
+                  }}
+                />
+                <PCText
+                  size="xs"
+                  weight="medium"
+                  color="secondary"
+                  style={{
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  {t('confirmationSentTo')}: {contact}
+                </PCText>
+              </div>
+              <PCText
+                size="xs"
+                weight="medium"
+                color="secondary"
+                style={{
+                  marginTop: pcStyles.mtMd.marginTop,
+                }}
+              >
+                {t('processRequest')}.
+              </PCText>
+              {revokeConsentOnFulfilment && (
+                <div className="pc-request-submit-revoke-notice">
+                  <PCText
+                    size="xs"
+                    weight="medium"
+                    className="pc-request-submit-revoke-notice-text"
+                  >
+                    {t('erasureConsentRevokeNotice', {
+                      purposes: revokedPurposeNames,
+                    })}
+                  </PCText>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="pc-hidden-xs pc-block-md" style={{ width: '100%' }}>
+            <img
+              src={character}
+              alt="character"
+              style={{
+                margin: '0 auto',
+                height: '6rem',
+                width: '6rem',
+                display: 'block',
+                filter: 'brightness(0) saturate(100%) invert(var(--pc-icon-filter, 0))',
+                opacity: 0.9,
+              }}
+            />
+            <div style={{
+              marginTop: pcStyles.mtMd.marginTop,
+              ...pcStyles.flex,
+              ...pcStyles.justifyCenter
+            }}>
+              <PCButton
+                variant="primary"
+                size="sm"
+                onClick={onCreateRequest}
+                className="pc-w-full-mobile"
+              >
+                {t('backToHome')}
+              </PCButton>
+            </div>
+          </div>
+        </div>
+        <div className="pc-block-xs pc-hidden-md" style={{ marginTop: pcStyles.mtMd.marginTop }}>
+          <div style={{ ...pcStyles.flex, ...pcStyles.justifyCenter }}>
+            <PCButton
+              variant="primary"
+              size="sm"
+              onClick={onCreateRequest}
+              style={{ width: '100%' }}
+            >
+              {t('backToHome')}
+            </PCButton>
+          </div>
+        </div>
+      </div>
+      <PCText
+        size="xs"
+        weight="medium"
+        color="tertiary"
+        style={{
+          marginTop: pcStyles.mtLg.marginTop,
+          textAlign: 'center',
+        }}
+      >
+        {t('yourDataIsSafeWithUs')}.
+      </PCText>
+    </div>
+  );
+}