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

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -0,0 +1,330 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PCButton, PCText, PCModal, PCAccordion, PCBadge, PCCheckbox } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { ChevronDownIcon } from 'lucide-react';
+import { PiWarningCircleBold } from 'react-icons/pi';
+import type { ModifyConsentModalProps } from './types';
+import { ConsentStatusEnum } from '../lib/types';
+import type { ConsentAction } from '../lib/types';
+
+export const ModifyConsentModal = ({
+  isOpen,
+  onClose,
+  selectedRecord,
+  isLoading,
+  onManageConsent,
+}: ModifyConsentModalProps) => {
+  const { t } = useTranslation();
+  const [isAccordionOpen, setIsAccordionOpen] = useState(false);
+  const [selectedDataElementUuids, setSelectedDataElementUuids] = useState<string[]>([]);
+
+  const nominatorInfo = selectedRecord?.nominator_info;
+  const nominatorLabel = nominatorInfo?.name || nominatorInfo?.email || nominatorInfo?.org_user_id || null;
+
+  const actionConfig = useMemo(() => {
+    if (!selectedRecord) return null;
+
+    const status = selectedRecord.status;
+
+    if (status === ConsentStatusEnum.ACTIVE) {
+      return {
+        action: 'revoke' as ConsentAction,
+        buttonLabel: t('revokeConsent'),
+        buttonVariant: 'danger' as const,
+        warningMessage: t('revokeConsentWarning'),
+        description: nominatorLabel
+          ? t('aboutToModifyConsentOnBehalf', { nominator: nominatorLabel })
+          : t('aboutToModifyConsent'),
+      };
+    }
+
+    if (status === ConsentStatusEnum.WITHDRAWN) {
+      return {
+        action: 'regrant' as ConsentAction,
+        buttonLabel: t('regrantConsent'),
+        buttonVariant: 'primary' as const,
+        warningMessage: t('regrantConsentWarning'),
+        description: nominatorLabel
+          ? t('aboutToRegrantConsentOnBehalf', { nominator: nominatorLabel })
+          : t('aboutToRegrantConsent'),
+      };
+    }
+
+    if (status === ConsentStatusEnum.EXPIRED) {
+      return {
+        action: 'renew' as ConsentAction,
+        buttonLabel: t('renewConsent'),
+        buttonVariant: 'primary' as const,
+        warningMessage: t('renewConsentWarning'),
+        description: nominatorLabel
+          ? t('aboutToRenewConsentOnBehalf', { nominator: nominatorLabel })
+          : t('aboutToRenewConsent'),
+      };
+    }
+
+    // DECLINED or unknown statuses — no action available
+    return null;
+  }, [selectedRecord, t, nominatorLabel]);
+
+  const isRegrantAction = actionConfig?.action === 'regrant';
+
+  useEffect(() => {
+    setIsAccordionOpen(isRegrantAction);
+  }, [selectedRecord, isRegrantAction]);
+
+  const regrantEligibleDataElements = useMemo(
+    () =>
+      (selectedRecord?.data_elements || []).filter(
+        (element) => Boolean(element?.uuid) && element.enabled
+      ),
+    [selectedRecord]
+  );
+
+  const requiredDataElementUuids = useMemo(
+    () =>
+      regrantEligibleDataElements
+        .filter((element) => element.required)
+        .map((element) => element.uuid),
+    [regrantEligibleDataElements]
+  );
+
+  const requiredDataElementUuidSet = useMemo(
+    () => new Set(requiredDataElementUuids),
+    [requiredDataElementUuids]
+  );
+
+  useEffect(() => {
+    if (isRegrantAction) {
+      setSelectedDataElementUuids(regrantEligibleDataElements.map((element) => element.uuid));
+      return;
+    }
+    setSelectedDataElementUuids([]);
+  }, [isRegrantAction, regrantEligibleDataElements]);
+
+  const toggleDataElementSelection = (uuid: string, checked: boolean) => {
+    if (requiredDataElementUuidSet.has(uuid)) {
+      return;
+    }
+    setSelectedDataElementUuids((prev) => {
+      if (checked) {
+        return prev.includes(uuid) ? prev : [...prev, uuid];
+      }
+      return prev.filter((item) => item !== uuid);
+    });
+  };
+
+  return (
+    <PCModal
+      isOpen={isOpen}
+      onClose={onClose}
+      closeAriaLabel={t('closeModal')}
+      title={
+        <PCText size="base" weight="semibold">
+          {t('modifyConsent')}
+        </PCText>
+      }
+    >
+      <div style={{ padding: pcStyles.pMd.padding }}>
+        {selectedRecord && !actionConfig && (
+          <PCText size="sm" weight="medium" color="tertiary" style={{ textAlign: 'center', padding: pcStyles.pMd.padding }}>
+            {t('noActionsAvailable', 'No actions available for this record.')}
+          </PCText>
+        )}
+        {selectedRecord && actionConfig && (
+          <>
+            <PCText size="sm" weight="medium" color="secondary" style={{ marginBottom: pcStyles.mbMd.marginBottom }}>
+              {actionConfig.description}
+            </PCText>
+            <div style={{
+              marginTop: pcStyles.mtMd.marginTop,
+              borderRadius: pcStyles.borderRadiusMd,
+              ...pcStyles.bgSecondary,
+              border: `1px solid ${pcStyles.borderColor}`,
+              padding: pcStyles.pMd.padding,
+              ...pcStyles.overflowHidden,
+            }}>
+              <PCAccordion style={{ border: 'none', borderRadius: 0 }}>
+                <PCAccordion.Header
+                  open={isAccordionOpen}
+                  onToggle={() => setIsAccordionOpen(!isAccordionOpen)}
+                >
+                  {({ open }) => (
+                    <>
+                      <div style={{ flex: 1 }}>
+                        <p style={{
+                          marginBottom: pcStyles.mbXs.marginBottom,
+                          fontSize: pcStyles.textBase.fontSize,
+                          fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                          color: pcStyles.textPrimary.color,
+                        }}>
+                          {selectedRecord.purpose}
+                        </p>
+                        <p style={{
+                          textAlign: 'left',
+                          fontSize: pcStyles.textSm.fontSize,
+                          fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                          color: pcStyles.textSecondary.color,
+                          margin: 0,
+                        }}>
+                          {selectedRecord.purpose_description}
+                        </p>
+                      </div>
+                      <ChevronDownIcon
+                        size={20}
+                        style={{
+                          transform: open ? 'rotate(0deg)' : 'rotate(-90deg)',
+                          transition: 'transform 0.3s',
+                          color: pcStyles.textSecondary.color,
+                          flexShrink: 0,
+                          marginLeft: pcStyles.mlSm.marginLeft,
+                        }}
+                      />
+                    </>
+                  )}
+                </PCAccordion.Header>
+
+                <PCAccordion.Body open={isAccordionOpen}>
+                  <div style={{
+                    marginTop: pcStyles.mtSm.marginTop,
+                    paddingTop: pcStyles.ptSm.paddingTop,
+                    ...(!isRegrantAction && { borderTop: `1px solid ${pcStyles.borderColor}` }),
+                  }}>
+                    {isRegrantAction && regrantEligibleDataElements.length > 0 ? (
+                      <div>
+                        <PCText
+                          size="sm"
+                          color="secondary"
+                          style={{ marginTop: 0, marginBottom: pcStyles.mbSm.marginBottom }}
+                        >
+                          {t(
+                            'selectDataElementsForRegrant',
+                            'Select the data elements you want to regrant consent for.'
+                          )}
+                        </PCText>
+                        <div style={{ display: 'grid', gap: pcStyles.gapSm.gap }}>
+                          {regrantEligibleDataElements.map((element) => {
+                            const isRequired = requiredDataElementUuidSet.has(element.uuid);
+                            const isChecked = isRequired || selectedDataElementUuids.includes(element.uuid);
+
+                            return (
+                              <PCCheckbox
+                                key={element.uuid}
+                                size="md"
+                                checked={isChecked}
+                                disabled={isRequired}
+                                onChange={(event) =>
+                                  toggleDataElementSelection(element.uuid, event.target.checked)
+                                }
+                                label={
+                                  isRequired
+                                    ? `${element.name} (${t('mandatory', 'Mandatory')})`
+                                    : element.name
+                                }
+                                labelClassName="text-sm"
+                                style={{ accentColor: pcStyles.primary }}
+                              />
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ) : Array.isArray(selectedRecord.data_elements) &&
+                      selectedRecord.data_elements.filter((el) => el.selected).length > 0 ? (
+                      selectedRecord.data_elements
+                        .filter((el) => el.selected)
+                        .map((i, index, filteredArray) => (
+                          <div
+                            key={index}
+                            style={{
+                              ...pcStyles.flex,
+                              ...pcStyles.itemsCenter,
+                              paddingBottom: index < filteredArray.length - 1 ? pcStyles.pbXs.paddingBottom : 0,
+                              marginBottom: index < filteredArray.length - 1 ? pcStyles.mbXs.marginBottom : 0,
+                            }}
+                          >
+                            <PCBadge renderAsDot size="sm">{''}</PCBadge>
+                            <span style={{
+                              marginLeft: pcStyles.mlSm.marginLeft,
+                              fontSize: pcStyles.textSm.fontSize,
+                              color: pcStyles.textPrimary.color,
+                              fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                            }}>
+                              {i.name}
+                            </span>
+                          </div>
+                        ))
+                    ) : (
+                      <PCText size="sm" color="tertiary">
+                        {t('noDataElementsAvailable')}
+                      </PCText>
+                    )}
+                  </div>
+                </PCAccordion.Body>
+              </PCAccordion>
+            </div>
+            <div style={{
+              marginTop: pcStyles.mtLg.marginTop,
+              ...pcStyles.flex,
+              ...pcStyles.itemsStart,
+              ...pcStyles.gapSm,
+              borderRadius: pcStyles.borderRadiusMd,
+              border: `1px solid ${pcStyles.warningBorder}`,
+              backgroundColor: pcStyles.warningBg,
+              padding: pcStyles.pMd.padding,
+              lineHeight: 1.5,
+            }}>
+              <PiWarningCircleBold
+                size={20}
+                style={{
+                  flexShrink: 0,
+                  color: pcStyles.warningText,
+                  marginTop: '2px',
+                }}
+              />
+              <span style={{
+                fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                fontSize: pcStyles.textSm.fontSize,
+                color: pcStyles.warningText,
+              }}>
+                {actionConfig.warningMessage}
+              </span>
+            </div>
+
+            <div style={{
+              marginTop: pcStyles.mtLg.marginTop,
+              ...pcStyles.flex,
+              ...pcStyles.flexRow,
+              ...pcStyles.gapSm,
+              ...pcStyles.justifyEnd,
+            }}>
+              <PCButton variant="outline" onClick={onClose}>
+                {t('cancel')}
+              </PCButton>
+              <PCButton
+                isLoading={isLoading}
+                disabled={
+                  !selectedRecord.purpose_uuid ||
+                  (isRegrantAction && selectedDataElementUuids.length === 0)
+                }
+                variant={actionConfig.buttonVariant}
+                onClick={() => {
+                  if (selectedRecord.purpose_uuid) {
+                    const nomContact = selectedRecord.nominator_info?.email || selectedRecord.nominator_info?.org_user_id || undefined;
+                    onManageConsent(
+                      selectedRecord.purpose_uuid,
+                      actionConfig.action,
+                      nomContact,
+                      isRegrantAction ? selectedDataElementUuids : undefined
+                    );
+                  }
+                }}
+              >
+                {actionConfig.buttonLabel}
+              </PCButton>
+            </div>
+          </>
+        )}
+      </div>
+    </PCModal>
+  );
+};

package/src/RedactoPrivacyCenter/components/Pagination.tsx

@@ -0,0 +1,140 @@
+import { useTranslation } from 'react-i18next';
+import { PCActionIcon, PCSelect, PCText } from '../ui';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+import { cn } from '../utils/cn';
+import { pcStyles } from '../styles/pcStyles';
+import { PAGE_SIZE_OPTIONS } from './constant';
+import type { PaginationProps } from './types';
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  totalRecords,
+  pageSize,
+  onPageChange,
+  onPageSizeChange,
+  className,
+}: PaginationProps) {
+  const { t } = useTranslation();
+  const handlePageChange = (newPageIndex: number) => {
+    onPageChange(newPageIndex + 1);
+  };
+
+  const currentPageSizeOption = PAGE_SIZE_OPTIONS.find(opt => opt.value === pageSize) || PAGE_SIZE_OPTIONS[1];
+
+  return (
+    <div className={cn("pc-flex-responsive", className)} style={{
+      ...pcStyles.flex,
+      ...pcStyles.gapMd,
+      ...pcStyles.itemsCenter,
+      ...pcStyles.justifyBetween,
+    }}>
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.gapMd,
+        width: '100%',
+        flexShrink: 0,
+      }} className="pc-flex-responsive">
+        <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
+          <PCText size="xs" color="secondary" className="pc-hidden-xs pc-block-sm">
+            {t('rowsPerPage')}
+          </PCText>
+          <PCSelect
+            size="sm"
+            options={PAGE_SIZE_OPTIONS}
+            value={currentPageSizeOption}
+            onChange={(v) => {
+              if (v) {
+                const newSize = Number(v.value);
+                onPageSizeChange(newSize);
+              }
+            }}
+            style={{ width: '48px' }}
+          />
+        </div>
+        <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
+          <PCText size="xs" color="secondary">
+            {t('totalRecords', { count: totalRecords })}
+          </PCText>
+        </div>
+      </div>
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.justifyEnd,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.gapSm,
+        width: '100%',
+      }} className="pc-flex-responsive">
+        <div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.gapSm }}>
+          <PCText size="xs" color="secondary">
+            {t('pageOf', { current: totalPages === 0 ? 0 : currentPage, total: totalPages })}
+          </PCText>
+        </div>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: '0.375rem',
+        }}>
+          <PCActionIcon
+            size="sm"
+            variant="outline"
+            aria-label={t('goToFirstPage')}
+            onClick={() => handlePageChange(0)}
+            disabled={currentPage === 1}
+            style={{
+              borderRadius: '0.5rem',
+              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            }}
+          >
+            <ChevronsLeft size={14} />
+          </PCActionIcon>
+          <PCActionIcon
+            size="sm"
+            variant="outline"
+            aria-label={t('goToPreviousPage')}
+            onClick={() => handlePageChange(currentPage - 2)}
+            disabled={currentPage === 1}
+            style={{
+              borderRadius: '0.5rem',
+              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            }}
+          >
+            <ChevronLeft size={14} />
+          </PCActionIcon>
+          <PCActionIcon
+            size="sm"
+            variant="outline"
+            aria-label={t('goToNextPage')}
+            onClick={() => handlePageChange(currentPage)}
+            disabled={totalRecords === 0 || currentPage === totalPages}
+            style={{
+              borderRadius: '0.5rem',
+              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            }}
+          >
+            <ChevronRight size={14} />
+          </PCActionIcon>
+          <PCActionIcon
+            size="sm"
+            variant="outline"
+            aria-label={t('goToLastPage')}
+            onClick={() => handlePageChange(totalPages - 1)}
+            disabled={totalRecords === 0 || currentPage === totalPages}
+            style={{
+              borderRadius: '0.5rem',
+              boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+            }}
+          >
+            <ChevronsRight size={14} />
+          </PCActionIcon>
+        </div>
+      </div>
+    </div>
+  );
+}