@redacto.io/consent-sdk-react 10.0.0-beta.9 → 10.0.0

package/src/RedactoPrivacyCenter/components/RequestSubmit.tsx

@@ -1,270 +0,0 @@
-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})`;
-
-/**
- * Success surface shown after a case is submitted. Always renders a
- * single Case-ID card — the form's 1-form -> 1-case contract means
- * there is no fan-out and no partial-failure surface to maintain.
- *
- * The product label above the case ID is rendered only when the
- * result carries one (product-scoped request types: ACCESS / ERASURE
- * / CORRECTION). Nomination and grievance leave the field empty and
- * the label is omitted.
- */
-export default function RequestSubmit({
-  result,
-  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}`,
-                }}
-              >
-                {result.product_name !== '' && (
-                  <PCText
-                    size="sm"
-                    weight="medium"
-                    style={{
-                      marginBottom: pcStyles.mbXs.marginBottom,
-                      wordBreak: 'break-word',
-                    }}
-                  >
-                    {result.product_name}
-                  </PCText>
-                )}
-                <PCText
-                  size="base"
-                  weight="bold"
-                  style={{
-                    color: pcStyles.primary,
-                    wordBreak: 'break-word',
-                    marginBottom: pcStyles.mbXs.marginBottom,
-                  }}
-                  className="pc-text-responsive"
-                >
-                  {t('caseID')}: {result.case_id}
-                </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>
-  );
-}

package/src/RedactoPrivacyCenter/components/SelectUser.tsx

@@ -1,95 +0,0 @@
-import { ChevronRight } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { PCText, PCTitle } from '../ui';
-import type { SelectUserProps } from '../lib/types';
-
-/**
- * "Choose your profile" picker, shown when the signed-in contact maps to more
- * than one data principal (shared contact). Selecting one re-scopes the session
- * to that principal uuid. Purely presentational — SelectUserGate owns the fetch
- * and the re-scope. Structural styles live in styles/injectStyles.ts
- * (.pc-select-user*).
- */
-export const SelectUser = ({
-  candidates,
-  onSelect,
-  busyOrgUserId,
-  error,
-}: SelectUserProps) => {
-  const { t } = useTranslation();
-
-  // A candidate with no uuid can't be selected (it's the value we submit),
-  // so drop it rather than render an unclickable row.
-  const selectable = candidates.filter((candidate) => candidate.uuid);
-
-  return (
-    <div className="pc-select-user">
-      <div className="pc-select-user__header">
-        <PCTitle as="h2">{t('chooseYourProfile')}</PCTitle>
-        <PCText as="p" size="base" color="secondary" align="center">
-          {t('loginIdentifierLinkedToMultipleProfiles')}
-        </PCText>
-      </div>
-
-      <div className="pc-select-user__list">
-        {selectable.map((candidate) => {
-          const principalUuid = candidate.uuid || '';
-          const email = candidate.primary_email || '';
-          const mobile = candidate.primary_mobile || '';
-          const orgUserId = candidate.org_user_id || '';
-          // org_user_id is unique per principal (ledger-enforced within the
-          // org/workspace), so it leads the row as the reliable way to tell
-          // shared-contact profiles apart when the email/mobile are identical.
-          // Fall back to a contact when a principal has no org_user_id, so the
-          // row still shows something identifiable.
-          const primaryLabel = orgUserId
-            ? t('userIdLabel', { id: orgUserId })
-            : email || mobile || candidate.uuid;
-          // Email and mobile drop below the id. Skip any value that already
-          // surfaced as the primary label (the fallback case) or duplicates the
-          // other contact, so we never echo the same value twice.
-          const secondaryLabels = [email, mobile].filter(
-            (value, index, all) =>
-              value !== '' &&
-              value !== primaryLabel &&
-              all.indexOf(value) === index
-          );
-          const isBusy = busyOrgUserId === principalUuid;
-          return (
-            <button
-              key={candidate.uuid}
-              type="button"
-              className="pc-select-user__item"
-              onClick={() => onSelect(principalUuid)}
-              disabled={!principalUuid || busyOrgUserId !== null}
-            >
-              <span className="pc-select-user__item-text">
-                <span className="pc-select-user__item-primary">
-                  {primaryLabel}
-                </span>
-                {secondaryLabels.map((label) => (
-                  <span key={label} className="pc-select-user__item-secondary">
-                    {label}
-                  </span>
-                ))}
-              </span>
-              {isBusy ? (
-                <span className="pc-select-user__item-status">
-                  {t('signingInEllipsis')}
-                </span>
-              ) : (
-                <ChevronRight size={18} className="pc-select-user__item-chevron" />
-              )}
-            </button>
-          );
-        })}
-      </div>
-
-      {error ? (
-        <p className="pc-select-user__error" role="alert">
-          {error}
-        </p>
-      ) : null}
-    </div>
-  );
-};

package/src/RedactoPrivacyCenter/components/SelectUserGate.tsx

@@ -1,195 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { useOrganization } from '../context/OrganizationContext';
-import { useBaseUrl } from '../context/BaseUrlContext';
-import { useAuth } from '../context/AuthContext';
-import { ProfileSwitchProvider } from '../context/ProfileSwitchContext';
-import { PCLoader } from '../ui';
-import { decodeJwtToken } from '../lib/utils';
-import { isSandboxMode } from '../lib/sandbox';
-import type {
-  GatePhase,
-  IdentityCandidate,
-  SelectUserGateProps,
-} from '../lib/types';
-import { PICKED_ORG_USER_KEY } from './constant';
-import { SelectUser } from './SelectUser';
-
-/**
- * Shared-contact profile gate. On mount it asks the backend which principals
- * share the signed-in contact; when more than one exists (and the session isn't
- * already pinned to a chosen one), it renders the "choose your profile" picker
- * instead of the consent view. Picking re-scopes the session via updateTokens,
- * then renders children. It sits OUTSIDE DataAvailabilityProvider so no consent
- * fetch runs against an unscoped token, and degrades to children on any error.
- *
- * Once resolved it also exposes `switchProfile` via ProfileSwitchContext, so a
- * signed-in shared contact can re-open the picker and move to another profile.
- */
-export const SelectUserGate = ({ children }: SelectUserGateProps) => {
-  const { t } = useTranslation();
-  const { organization } = useOrganization();
-  const organizationId = organization?.uuid || '';
-  const workspaceId = organization?.workspaces?.[0]?.uuid || '';
-  const { consentClient } = useBaseUrl();
-  const { accessToken, updateTokens } = useAuth();
-
-  const [phase, setPhase] = useState<GatePhase>('checking');
-  const [candidates, setCandidates] = useState<IdentityCandidate[]>([]);
-  const [busyOrgUserId, setBusyOrgUserId] = useState<string | null>(null);
-  const [selectError, setSelectError] = useState<string | null>(null);
-
-  // The token's principal. Routine refreshes (checkAndRefreshAuth,
-  // refreshOtpToken) hand back a fresh token string for the SAME principal;
-  // keying the gate check off this decoded id rather than the raw token keeps
-  // those refreshes from re-running the check and flashing the picker/spinner.
-  const tokenOrgUserId =
-    (decodeJwtToken(accessToken)?.user_data?.org_user_id as string) || '';
-
-  useEffect(() => {
-    let cancelled = false;
-
-    // Sandbox PoC: there is no JWT and no shared-contact concept — the subject is
-    // fixed by props. Skip the identity lookup and render children directly.
-    if (isSandboxMode()) {
-      setPhase('resolved');
-      return;
-    }
-
-    if (!organizationId || !workspaceId || !accessToken) {
-      setPhase('resolved');
-      return;
-    }
-
-    // Already pinned to a chosen principal this session? Pass straight through
-    // to children — but STILL resolve the sibling list in the background so the
-    // user menu can offer "switch profile". The default/unscoped token has
-    // org_user_id = the contact and no stored pick, so the picker still shows.
-    const picked =
-      typeof window !== 'undefined'
-        ? sessionStorage.getItem(PICKED_ORG_USER_KEY)
-        : null;
-    const isPinned = Boolean(picked) && picked === tokenOrgUserId;
-
-    // Only block on the spinner when the picker might actually open; a pinned
-    // session renders children immediately and resolves siblings quietly.
-    setPhase(isPinned ? 'resolved' : 'checking');
-    (async () => {
-      try {
-        const res = await consentClient.listIdentities({
-          organisationUuid: organizationId,
-          workspaceUuid: workspaceId,
-          authToken: accessToken,
-        });
-        if (cancelled) {
-          return;
-        }
-        const list = res?.identities ?? [];
-        setCandidates(list);
-        if (list.length > 1 && !isPinned) {
-          setPhase('picking');
-        } else {
-          setPhase('resolved');
-        }
-      } catch {
-        // Ledger/endpoint unavailable — never block the Privacy Center.
-        if (!cancelled) {
-          setCandidates([]);
-          setPhase('resolved');
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-    // consentClient is a stable factory result; re-running on its identity would
-    // risk a loop. Re-evaluate only when the tenant or the token's principal
-    // changes — not on every raw-token refresh. accessToken is read inside for
-    // the fetch but intentionally omitted so same-principal refreshes are no-ops.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [organizationId, workspaceId, tokenOrgUserId]);
-
-  const handleSelect = async (principalUuid: string) => {
-    if (!principalUuid || busyOrgUserId) {
-      return;
-    }
-    setBusyOrgUserId(principalUuid);
-    setSelectError(null);
-    try {
-      const res = await consentClient.selectPrincipal(
-        {
-          organisationUuid: organizationId,
-          workspaceUuid: workspaceId,
-          authToken: accessToken,
-        },
-        principalUuid,
-      );
-      if (!res?.token || !res?.refresh_token) {
-        throw new Error('select-principal returned no tokens');
-      }
-      // The picker selects by opaque uuid, but the "already pinned" check
-      // compares against the token's own org_user_id. Derive the pin from the
-      // NEW token so it matches on later reloads — it's the signed-in
-      // principal's own id, not a co-principal's, so nothing leaks.
-      if (typeof window !== 'undefined') {
-        const pinnedOrgUserId = decodeJwtToken(res.token)?.user_data
-          ?.org_user_id as string | undefined;
-        if (pinnedOrgUserId) {
-          sessionStorage.setItem(PICKED_ORG_USER_KEY, pinnedOrgUserId);
-        }
-      }
-      // Resolve before swapping the token so the picker doesn't flash back.
-      setPhase('resolved');
-      updateTokens(res.token, res.refresh_token);
-    } catch {
-      setBusyOrgUserId(null);
-      setSelectError(t('couldNotSwitchProfile'));
-    }
-  };
-
-  // Re-open the picker so a shared contact can move to another of its profiles.
-  // Drops the session pin and shows the picker with the already-loaded
-  // candidates; picking re-scopes the token exactly like the first choice.
-  const switchProfile = useCallback(() => {
-    if (typeof window !== 'undefined') {
-      sessionStorage.removeItem(PICKED_ORG_USER_KEY);
-    }
-    setSelectError(null);
-    setBusyOrgUserId(null);
-    setPhase('picking');
-  }, []);
-
-  const switchValue = useMemo(
-    () => ({ canSwitch: candidates.length > 1, switchProfile }),
-    [candidates.length, switchProfile],
-  );
-
-  let inner: ReactNode;
-  if (phase === 'checking') {
-    inner = (
-      <div className="pc-select-user-loading">
-        <PCLoader variant="spinner" color="info" size="lg" />
-      </div>
-    );
-  } else if (phase === 'picking') {
-    inner = (
-      <SelectUser
-        candidates={candidates}
-        onSelect={handleSelect}
-        busyOrgUserId={busyOrgUserId}
-        error={selectError}
-      />
-    );
-  } else {
-    inner = <>{children}</>;
-  }
-
-  return <ProfileSwitchProvider value={switchValue}>{inner}</ProfileSwitchProvider>;
-};

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

@@ -1,25 +0,0 @@
-import { Activity, MessageCircleWarning, ReceiptText, ShieldCheck } from 'lucide-react';
-import type { MenuItem } from './types';
-
-export const menuItemsPC: MenuItem[] = [
-  {
-    name: 'Consent Manager',
-    href: 'consent-manager',
-    icon: <ShieldCheck size={18} strokeWidth={1.75} />,
-  },
-  {
-    name: 'Grievance',
-    href: 'form',
-    icon: <MessageCircleWarning size={18} strokeWidth={1.75} />,
-  },
-  {
-    name: 'Activity',
-    href: 'activity',
-    icon: <Activity size={18} strokeWidth={1.75} />,
-  },
-  {
-    name: 'My Receipt',
-    href: 'receipts',
-    icon: <ReceiptText size={18} strokeWidth={1.75} />,
-  },
-];

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

@@ -1,21 +0,0 @@
-import type { ReactElement } from 'react';
-
-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[];
-};