@redacto.io/consent-sdk-react 3.5.0 → 3.6.0

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

@@ -0,0 +1,412 @@
+import { useState } from 'react';
+import { PCTitle, PCCollapse, PCTooltip } from '../../ui';
+import { pcStyles } from '../../styles/pcStyles';
+import { cn } from '../../utils/cn';
+import { PiCaretDownBold } from 'react-icons/pi';
+import { MdLineWeight } from 'react-icons/md';
+
+const getVar = (varName: string): string => `var(${varName})`;
+import StatusBadge from '../../ui/StatusBadge';
+import { useInternalNavigation, type InternalPage } from '../../context/NavigationContext';
+import { useTranslation } from 'react-i18next';
+import type { BadgeType, MenuBadgeProps, SideMenuPCProps } from './types';
+import { badges } from './constants';
+
+export type { DropdownItem, MenuItem, SideMenuPCProps } from './types';
+
+const MenuBadge = ({ type, isDisabled }: MenuBadgeProps) => {
+  const { t } = useTranslation();
+  const badge = badges[type];
+  if (!badge || isDisabled) return null;
+
+  const isNewBadge = type === 'new';
+  const displayText = isNewBadge ? t('badgeNew') : badge.text;
+
+  return (
+    <span
+      style={{
+        marginLeft: pcStyles.mSm.marginLeft,
+        borderRadius: '9999px',
+        paddingLeft: '0.5rem',
+        paddingRight: '0.5rem',
+        paddingTop: '0.125rem',
+        paddingBottom: '0.125rem',
+        fontSize: pcStyles.textXs.fontSize,
+        fontWeight: pcStyles.fontWeightMedium.fontWeight,
+        ...(isNewBadge ? {
+          backgroundColor: getVar('--pc-bg-hover'),
+          color: getVar('--pc-primary'),
+        } : {
+          backgroundColor: getVar('--pc-bg-tertiary'),
+          color: getVar('--pc-text-secondary'),
+        }),
+      }}
+    >
+      {displayText}
+    </span>
+  );
+};
+
+export function SideMenuPC({ menuItems, isCollapsed, onItemSelect }: SideMenuPCProps) {
+  const { currentPage, navigateTo } = useInternalNavigation();
+
+  return (
+    <div
+      className="pc-sidebar-menu-container"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        paddingTop: '0.625rem',
+        paddingBottom: '0.625rem',
+        paddingLeft: '0.5rem',
+        paddingRight: '0.5rem',
+        width: '100%',
+      }}
+    >
+      {menuItems.map((item, index) => {
+        // Check if current page matches this item's href
+        const isActive = item?.href ? currentPage === (item.href as InternalPage) : false;
+        const pathnameExistInDropdowns = item?.dropdownItems?.filter(
+          (dropdownItem) => {
+            return currentPage === (dropdownItem.href as InternalPage);
+          }
+        );
+        const isDropdownOpen = Boolean(pathnameExistInDropdowns?.length);
+
+        // Handler for navigation
+        const handleNavigate = (href: string) => {
+          if (!item.isComingSoon && href) {
+            navigateTo(href as InternalPage);
+            onItemSelect?.();
+          }
+        };
+
+        const renderItemWithTooltip = (content: React.ReactNode) => {
+          if (isCollapsed) {
+            return (
+              <PCTooltip content={item.name} placement="right" color="invert">
+                <div style={{ width: 'fit-content', margin: '0 auto' }}>{content}</div>
+              </PCTooltip>
+            );
+          }
+          return content;
+        };
+
+        return (
+          <div
+            key={item.name + '-' + index}
+            style={{
+              width: '100%',
+              display: 'block',
+              marginBottom: isCollapsed ? '0.875rem' : '0.125rem',
+            }}
+          >
+            {item?.href ? (
+              <>
+                {item?.dropdownItems ? (
+                  <PCCollapse
+                    defaultOpen={isDropdownOpen}
+                  >
+                    {({ open, toggle }) => (
+                      <>
+                        <PCCollapse.Header
+                          open={open}
+                          toggle={toggle}
+                        >
+                          {renderItemWithTooltip(
+                            <div
+                              onClick={!item.isComingSoon ? toggle : undefined}
+                              style={{
+                                position: 'relative',
+                                marginTop: isCollapsed ? 0 : index === 0 ? 0 : '0.1875rem',
+                                marginBottom: isCollapsed ? 0 : '0.1875rem',
+                                ...pcStyles.flex,
+                                ...pcStyles.itemsCenter,
+                                ...pcStyles.justifyCenter,
+                                ...(isCollapsed ? {} : { ...pcStyles.justifyBetween }),
+                                borderRadius: pcStyles.borderRadiusMd,
+                                padding: isCollapsed ? '0.375rem' : '0.5rem 0.625rem',
+                                fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                                cursor: item.isComingSoon ? 'not-allowed' : 'pointer',
+                                color: item.isComingSoon ? getVar('--pc-text-disabled') : isDropdownOpen ? getVar('--pc-primary') : getVar('--pc-text-primary'),
+                                backgroundColor: isDropdownOpen && !item.isComingSoon ? getVar('--pc-bg-hover') : 'transparent',
+                                opacity: item.isComingSoon ? 0.5 : 1,
+                                transition: 'color 0.2s ease, background-color 0.2s ease, padding 0.3s ease, justify-content 0.3s ease',
+                                minHeight: isCollapsed ? '2rem' : '2.25rem',
+                                width: isCollapsed ? 'fit-content' : '100%',
+                                willChange: 'padding, justify-content',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  ...pcStyles.flex,
+                                  ...pcStyles.itemsCenter,
+                                  ...(isCollapsed ? { justifyContent: 'center', width: '100%' } : {}),
+                                  pointerEvents: item.isComingSoon ? 'none' : 'auto',
+                                  transition: 'justify-content 0.3s ease, width 0.3s ease',
+                                  willChange: 'justify-content, width',
+                                }}
+                              >
+                                {item?.icon && (
+                                  <span
+                                    style={{
+                                      marginRight: isCollapsed ? 0 : pcStyles.mSm.marginRight,
+                                      display: 'inline-flex',
+                                      height: '1.25rem',
+                                      width: '1.25rem',
+                                      ...pcStyles.itemsCenter,
+                                      ...pcStyles.justifyCenter,
+                                      borderRadius: pcStyles.borderRadiusMd,
+                                      color: item.isComingSoon ? getVar('--pc-text-disabled') : isDropdownOpen ? getVar('--pc-primary') : getVar('--pc-text-primary'),
+                                      transition: 'margin-right 0.3s ease',
+                                      willChange: 'margin-right',
+                                    }}
+                                  >
+                                    {item.isBatch ? <MdLineWeight size={24} /> : item?.icon}
+                                  </span>
+                                )}
+                                <span style={{
+                                  overflow: 'hidden',
+                                  textOverflow: 'ellipsis',
+                                  whiteSpace: 'nowrap',
+                                  marginLeft: isCollapsed ? 0 : '0.5rem',
+                                  opacity: isCollapsed ? 0 : 1,
+                                  width: isCollapsed ? 0 : 'auto',
+                                  maxWidth: isCollapsed ? 0 : '100%',
+                                  transition: 'opacity 0.3s ease, width 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease',
+                                  willChange: 'opacity, width, max-width, margin-left',
+                                }}>
+                                  {item.name}
+                                  {item.isNew && (
+                                    <MenuBadge
+                                      type="new"
+                                      isDisabled={item.isComingSoon}
+                                    />
+                                  )}
+                                </span>
+                              </div>
+
+                              <div style={{
+                                opacity: (!item.isComingSoon && !isCollapsed) ? 1 : 0,
+                                width: (!item.isComingSoon && !isCollapsed) ? 'auto' : 0,
+                                overflow: 'hidden',
+                                transition: 'opacity 0.3s ease, width 0.3s ease',
+                                willChange: 'opacity, width',
+                                flexShrink: 0,
+                              }}>
+                                {!item.isComingSoon && (
+                                  <PiCaretDownBold
+                                    strokeWidth={3}
+                                    size={14}
+                                    style={{
+                                      transform: open ? 'rotate(0deg)' : 'rotate(-90deg)',
+                                      transition: 'transform 0.2s ease',
+                                      color: getVar('--pc-text-secondary'),
+                                    }}
+                                  />
+                                )}
+                              </div>
+                            </div>
+                          )}
+                        </PCCollapse.Header>
+                        <PCCollapse.Body open={open}>
+                          {!isCollapsed &&
+                            item?.dropdownItems?.map((dropdownItem, index) => {
+                              const isChildActive = currentPage === (dropdownItem.href as InternalPage);
+
+                              return renderItemWithTooltip(
+                                <div
+                                  key={dropdownItem?.name + index}
+                                  onClick={() => handleNavigate(dropdownItem.href)}
+                                  style={{
+                                    marginLeft: '1.25rem',
+                                    marginRight: '0.625rem',
+                                    marginTop: index === 0 ? '0.1875rem' : '0.125rem',
+                                    marginBottom: '0.125rem',
+                                    ...pcStyles.flex,
+                                    ...pcStyles.itemsCenter,
+                                    borderRadius: pcStyles.borderRadiusMd,
+                                    padding: '0.4375rem 0.75rem',
+                                    fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                                    textTransform: 'capitalize',
+                                    cursor: dropdownItem.isComingSoon ? 'not-allowed' : 'pointer',
+                                    color: dropdownItem.isComingSoon ? getVar('--pc-text-disabled') : isChildActive ? getVar('--pc-primary') : getVar('--pc-text-secondary'),
+                                    backgroundColor: isChildActive && !dropdownItem.isComingSoon ? getVar('--pc-bg-hover') : 'transparent',
+                                    opacity: dropdownItem.isComingSoon ? 0.5 : 1,
+                                    transition: 'color 0.2s, background-color 0.2s',
+                                    minHeight: '2rem',
+                                  }}
+                                >
+                                  <div style={{ ...pcStyles.flex, minWidth: 0, flex: 1, ...pcStyles.itemsCenter }}>
+                                    <div style={{ ...pcStyles.flex, minWidth: 0, flex: 1, ...pcStyles.itemsCenter, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                      {dropdownItem?.icon && (
+                                        <span
+                                          style={{
+                                            marginRight: pcStyles.mSm.marginRight,
+                                            display: 'inline-flex',
+                                        height: '1.125rem',
+                                        width: '1.125rem',
+                                            ...pcStyles.itemsCenter,
+                                            ...pcStyles.justifyCenter,
+                                            borderRadius: pcStyles.borderRadiusMd,
+                                            color: dropdownItem.isComingSoon ? getVar('--pc-text-disabled') : isChildActive ? getVar('--pc-primary') : getVar('--pc-text-primary'),
+                                          }}
+                                        >
+                                          {dropdownItem.icon}
+                                        </span>
+                                      )}
+                                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                        {dropdownItem?.name}
+                                      </span>
+                                      {dropdownItem.isNew && (
+                                        <MenuBadge
+                                          type="new"
+                                          isDisabled={dropdownItem.isComingSoon}
+                                        />
+                                      )}
+                                    </div>
+                                    <div style={{ marginLeft: pcStyles.mMd.marginLeft, ...pcStyles.flex, ...pcStyles.itemsCenter }}>
+                                      {dropdownItem?.badge?.length ? (
+                                        <StatusBadge status={dropdownItem?.badge} className="pc-status-badge" />
+                                      ) : (
+                                        <div style={{ width: '1rem' }} />
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                        </PCCollapse.Body>
+                      </>
+                    )}
+                  </PCCollapse>
+                ) : (
+                  renderItemWithTooltip(
+                    <div
+                      key={item.name + '-' + index}
+                      onClick={() => handleNavigate(item.href)}
+                      style={{
+                        position: 'relative',
+                        marginTop: isCollapsed ? 0 : index === 0 ? 0 : '0.1875rem',
+                        marginBottom: isCollapsed ? 0 : '0.1875rem',
+                        ...pcStyles.flex,
+                        ...pcStyles.itemsCenter,
+                        ...pcStyles.justifyCenter,
+                        ...(isCollapsed ? {} : { ...pcStyles.justifyBetween }),
+                        borderRadius: pcStyles.borderRadiusMd,
+                        padding: isCollapsed ? '0.375rem' : '0.5rem 0.625rem',
+                        fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                        textTransform: 'capitalize',
+                        cursor: item.isComingSoon ? 'not-allowed' : 'pointer',
+                        color: item.isComingSoon ? getVar('--pc-text-disabled') : isActive ? getVar('--pc-primary') : getVar('--pc-text-primary'),
+                        backgroundColor: isActive && !item.isComingSoon ? getVar('--pc-bg-hover') : 'transparent',
+                        opacity: item.isComingSoon ? 0.5 : 1,
+                        transition: 'color 0.2s ease, background-color 0.2s ease, padding 0.3s ease, justify-content 0.3s ease',
+                        minHeight: isCollapsed ? '2rem' : '2.25rem',
+                        width: isCollapsed ? 'fit-content' : '100%',
+                        willChange: 'padding, justify-content',
+                      }}
+                    >
+                      <div style={{
+                        ...pcStyles.flex,
+                        ...pcStyles.itemsCenter,
+                        ...(isCollapsed ? { justifyContent: 'center', width: '100%' } : {}),
+                        transition: 'justify-content 0.3s ease, width 0.3s ease',
+                        willChange: 'justify-content, width',
+                      }}>
+                        {item?.icon && (
+                          <span
+                            style={{
+                              marginRight: isCollapsed ? 0 : pcStyles.mSm.marginRight,
+                              display: 'inline-flex',
+                              height: '1.25rem',
+                              width: '1.25rem',
+                              ...pcStyles.itemsCenter,
+                              ...pcStyles.justifyCenter,
+                              borderRadius: pcStyles.borderRadiusMd,
+                              color: item.isComingSoon ? getVar('--pc-text-disabled') : isActive ? getVar('--pc-primary') : getVar('--pc-text-primary'),
+                              transition: 'margin-right 0.3s ease',
+                              willChange: 'margin-right',
+                            }}
+                          >
+                            {item.isBatch ? <MdLineWeight size={24} /> : item?.icon}
+                          </span>
+                        )}
+                        <span style={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          marginLeft: isCollapsed ? 0 : '0.5rem',
+                          opacity: isCollapsed ? 0 : 1,
+                          width: isCollapsed ? 0 : 'auto',
+                          maxWidth: isCollapsed ? 0 : '100%',
+                          transition: 'opacity 0.3s ease, width 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease',
+                          willChange: 'opacity, width, max-width, margin-left',
+                        }}>
+                          {item.name}
+                          {item.isNew && <MenuBadge type="new" />}
+                        </span>
+                      </div>
+                      <div style={{
+                        opacity: (!isCollapsed && item?.badge?.length) ? 1 : 0,
+                        width: (!isCollapsed && item?.badge?.length) ? 'auto' : 0,
+                        overflow: 'hidden',
+                        transition: 'opacity 0.3s ease, width 0.3s ease',
+                        willChange: 'opacity, width',
+                        flexShrink: 0,
+                      }}>
+                        {item?.badge?.length ? <StatusBadge status={item?.badge} className="pc-status-badge" /> : null}
+                      </div>
+                    </div>
+                  )
+                )}
+              </>
+            ) : (
+              <>
+                {isCollapsed ? (
+                  <div
+                    style={{
+                      marginLeft: '0.75rem',
+                      marginRight: '0.75rem',
+                      marginTop: index !== 0 ? '1rem' : '0.5rem',
+                      marginBottom: '0.5rem',
+                      height: '1px',
+                    }}
+                  >
+                    <hr style={{
+                      width: '100%',
+                      backgroundColor: getVar('--pc-border-color'),
+                      border: 'none',
+                      height: '1px',
+                      margin: 0,
+                    }} />
+                  </div>
+                ) : (
+                  <PCTitle
+                    as="h6"
+                    style={{
+                      marginTop: index !== 0 ? '1.25rem' : '0.5rem',
+                      marginBottom: '0.375rem',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      paddingLeft: '1rem',
+                      paddingRight: '1rem',
+                      fontSize: pcStyles.textXs.fontSize,
+                      fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.1em',
+                      color: getVar('--pc-text-secondary'),
+                    }}
+                  >
+                    {item.name}
+                  </PCTitle>
+                )}
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import {
+  IoAlertCircleOutline,
+  IoPulseOutline,
+  IoShieldCheckmarkOutline,
+} from 'react-icons/io5';
+import type { BadgeType, MenuItem } from './types';
+
+export const menuItemsPC: MenuItem[] = [
+  {
+    name: 'Consent Manager',
+    href: 'consent-manager',
+    icon: <IoShieldCheckmarkOutline size={20} />,
+  },
+  {
+    name: 'Grievance',
+    href: 'form',
+    icon: <IoAlertCircleOutline size={20} />,
+  },
+  {
+    name: 'Activity',
+    href: 'activity',
+    icon: <IoPulseOutline size={20} />,
+  },
+];
+
+export const badges: Record<BadgeType, { text: string; className: string }> = {
+  new: {
+    text: 'New',
+    className: 'bg-blue-100 text-blue-500',
+  },
+  coming: {
+    text: '',
+    className: 'visibility-hidden',
+  },
+};
+
+export const LOCAL_STORAGE_KEYS_TO_REMOVE = [
+  'email',
+  'access_token',
+  'i18nextLng',
+  'lang',
+] as const;

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

@@ -0,0 +1 @@
+export { menuItemsPC } from './constants';

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/types.ts

@@ -0,0 +1,40 @@
+import { ReactElement } from 'react';
+
+export type BadgeType = 'new' | 'coming';
+
+export type MenuBadgeProps = {
+  type: BadgeType;
+  isDisabled?: boolean;
+};
+
+export type DropdownItem = {
+  name: string;
+  href: string;
+  badge?: string;
+  isNew?: boolean;
+  isComingSoon?: boolean;
+  icon?: ReactElement;
+};
+
+export type MenuItem = {
+  name: string;
+  href?: string;
+  icon?: ReactElement;
+  isBatch?: boolean;
+  isNew?: boolean;
+  isComingSoon?: boolean;
+  badge?: string;
+  dropdownItems?: DropdownItem[];
+};
+
+export type SideMenuPCProps = {
+  menuItems: MenuItem[];
+  isCollapsed: boolean;
+  onItemSelect?: () => void;
+};
+
+export type SideBarPCProps = {
+  className?: string;
+  isCompact?: boolean;
+  onBack?: 'back' | 'signout';
+};

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/utils.ts

@@ -0,0 +1,38 @@
+import { LOCAL_STORAGE_KEYS_TO_REMOVE } from './constants';
+
+export const clearLocalStorage = () => {
+  try {
+    LOCAL_STORAGE_KEYS_TO_REMOVE.forEach((key) => {
+      sessionStorage.removeItem(key);
+    });
+  } catch {
+    // Silently ignore if sessionStorage is unavailable
+  }
+};
+
+// Alias for clarity - both functions clear sessionStorage
+export const clearSessionStorage = clearLocalStorage;
+
+export const generateOrgSlug = (
+  slug: string | undefined,
+  name: string | undefined
+): string | undefined => {
+  if (slug) return slug;
+  if (!name) return undefined;
+
+  const normalizedName = name.toLowerCase();
+  const parts = normalizedName.split(' ').filter((part) => part.length > 0);
+  return parts.length > 0 ? parts.join('-') : undefined;
+};
+
+/**
+ * Convert a slug to a readable organization name
+ * e.g., "my-org-name" -> "My Org Name"
+ */
+export const slugToOrgName = (slug: string): string => {
+  if (!slug) return '';
+  return slug
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+};

package/src/RedactoPrivacyCenter/components/ThemeTransitionOverlay.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+import { IoSunnyOutline, IoMoonOutline } from 'react-icons/io5';
+import { useTheme } from '../context/theme';
+
+export default function ThemeTransitionOverlay() {
+  const { isTransitioning, targetTheme } = useTheme();
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const iconRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isTransitioning && overlayRef.current && iconRef.current) {
+      const overlay = overlayRef.current;
+      const icon = iconRef.current;
+      
+      // Trigger animation
+      overlay.style.display = 'flex';
+      // Force reflow to ensure display change is applied
+      overlay.offsetHeight;
+      overlay.style.opacity = '1';
+      icon.style.animation = 'none';
+      // Force reflow
+      icon.offsetHeight;
+      icon.style.animation = '';
+      
+      const timeout = setTimeout(() => {
+        if (overlay) {
+          overlay.style.opacity = '0';
+          setTimeout(() => {
+            if (overlay) {
+              overlay.style.display = 'none';
+            }
+          }, 300);
+        }
+      }, 1000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [isTransitioning, targetTheme]);
+
+  if (!targetTheme) return null;
+
+  const Icon = targetTheme === 'light' ? IoSunnyOutline : IoMoonOutline;
+  // Sun: golden yellow, Moon: soft blue/white
+  const iconColor = targetTheme === 'light' ? '#fbbf24' : '#c7d2fe';
+
+  return (
+    <div
+      ref={overlayRef}
+      className="pc-theme-transition-overlay"
+      style={{
+        display: 'none',
+        opacity: 0,
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: 'none',
+        zIndex: 9999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'opacity 0.3s ease',
+      }}
+      aria-hidden="true"
+    >
+      <div
+        ref={iconRef}
+        className={`pc-theme-transition-icon pc-theme-transition-${targetTheme}`}
+        style={{
+          position: 'absolute',
+          bottom: '-150px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          fontSize: '120px',
+          color: iconColor,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Icon size={120} />
+      </div>
+    </div>
+  );
+}