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

package/src/RedactoPrivacyCenter/components/CaseDetailsModal.tsx

@@ -0,0 +1,469 @@
+import { useTranslation } from 'react-i18next';
+import { PCModal, PCTitle, PCText, PCButton, PCBadge, PCTable } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import { formatDate } from './utils';
+import type { CaseDetailsModalProps } from './types';
+
+const getVar = (varName: string): string => `var(${varName})`;
+const getCaseStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'info' | 'secondary' => {
+  const n = status.toLowerCase().replace(/_/g, '');
+  if (n === 'completed') return 'success';
+  if (n === 'rejected' || n === 'declined') return 'error';
+  if (n === 'processing' || n === 'inprogress' || n === 'expired') return 'warning';
+  if (n === 'initiated') return 'info';
+  return 'secondary';
+};
+const formatCaseStatus = (s: string) =>
+  s.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+export default function CaseDetailsModal({
+  isOpen,
+  onClose,
+  selectedCase,
+}: CaseDetailsModalProps) {
+  const { t } = useTranslation();
+
+  if (!selectedCase) return null;
+
+  const { request_details } = selectedCase;
+
+  return (
+    <PCModal
+      isOpen={isOpen}
+      onClose={onClose}
+      closeAriaLabel={t('closeModal')}
+      size="lg"
+      title={
+        <div style={{ minWidth: 0, flex: 1, paddingRight: getVar('--pc-spacing-sm') }}>
+          <PCTitle as="h4" style={{ fontSize: pcStyles.textBase.fontSize, color: getVar('--pc-text-primary') }}>
+            {t('caseDetails')}
+          </PCTitle>
+          <PCText
+            size="xs"
+            color="secondary"
+            style={{
+              marginTop: pcStyles.mtXs.marginTop,
+              wordBreak: 'break-all',
+            }}
+          >
+            {t('caseID')}: <span style={{ fontWeight: pcStyles.fontWeightMedium.fontWeight, color: getVar('--pc-text-primary') }}>
+              {selectedCase.case_id}
+            </span>
+          </PCText>
+        </div>
+      }
+    >
+      <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, height: '100%' }}>
+        <div
+          className="pc-case-details-content"
+          style={{
+            ...pcStyles.flex,
+            ...pcStyles.flexCol,
+            gap: pcStyles.gapLg.gap,
+            padding: pcStyles.pLg.padding,
+            ...pcStyles.overflowYAuto,
+            maxHeight: 'calc(80vh - 140px)',
+          }}
+        >
+          {/* Basic Information Grid */}
+          <div
+            className="pc-case-details-grid"
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: pcStyles.gapMd.gap,
+            }}
+          >
+            <div>
+              <PCText
+                size="xs"
+                weight="medium"
+                color="secondary"
+                style={{ marginBottom: pcStyles.mbXs.marginBottom }}
+              >
+                {t('requestType')}
+              </PCText>
+              <PCText
+                size="sm"
+                weight="medium"
+                style={{
+                  textTransform: 'capitalize',
+                  color: getVar('--pc-text-primary'),
+                }}
+              >
+                {selectedCase.request_type_display || selectedCase.request_type.replace('_', ' ')}
+              </PCText>
+            </div>
+            <div>
+              <PCText
+                size="xs"
+                weight="medium"
+                color="secondary"
+                style={{ marginBottom: pcStyles.mbXs.marginBottom }}
+              >
+                {t('status')}
+              </PCText>
+              <PCBadge
+                variant={getCaseStatusVariant(selectedCase.status)}
+                size="sm"
+                className="pc-status-badge"
+              >
+                {selectedCase.status_display || formatCaseStatus(selectedCase.status)}
+              </PCBadge>
+            </div>
+            <div>
+              <PCText
+                size="xs"
+                weight="medium"
+                color="secondary"
+                style={{ marginBottom: pcStyles.mbXs.marginBottom }}
+              >
+                {t('createdAt')}
+              </PCText>
+              <PCText
+                size="sm"
+                weight="medium"
+                style={{ color: getVar('--pc-text-primary') }}
+              >
+                {formatDate(selectedCase.created_at)}
+              </PCText>
+            </div>
+            {selectedCase.completed_at && (
+              <div>
+                <PCText
+                  size="xs"
+                  weight="medium"
+                  color="secondary"
+                  style={{ marginBottom: pcStyles.mbXs.marginBottom }}
+                >
+                  {t('completedAt')}
+                </PCText>
+                <PCText
+                  size="sm"
+                  weight="medium"
+                  style={{ color: getVar('--pc-text-primary') }}
+                >
+                  {formatDate(selectedCase.completed_at)}
+                </PCText>
+              </div>
+            )}
+          </div>
+
+          {/* Description Section */}
+          {(selectedCase.description_display || selectedCase.description) && (
+            <div
+              style={{
+                backgroundColor: getVar('--pc-bg-secondary'),
+                padding: pcStyles.pMd.padding,
+                borderRadius: pcStyles.borderRadiusLg,
+                border: `1px solid ${getVar('--pc-border-color')}`,
+              }}
+            >
+              <PCText
+                size="sm"
+                weight="semibold"
+                style={{
+                  marginBottom: pcStyles.mbSm.marginBottom,
+                  color: getVar('--pc-text-primary'),
+                }}
+              >
+                {t('description')}
+              </PCText>
+              <PCText
+                size="sm"
+                color="secondary"
+                style={{ lineHeight: '1.6' }}
+              >
+                {selectedCase.description_display || selectedCase.description}
+              </PCText>
+            </div>
+          )}
+
+          {/* Request Specifics Section */}
+          {request_details && (
+            <div style={{ ...pcStyles.flex, ...pcStyles.flexCol, gap: pcStyles.gapLg.gap }}>
+              <PCTitle
+                as="h6"
+                style={{
+                  fontSize: pcStyles.textSm.fontSize,
+                  fontWeight: pcStyles.fontWeightBold.fontWeight,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                  color: getVar('--pc-text-secondary'),
+                  marginBottom: pcStyles.mbXs.marginBottom,
+                }}
+              >
+                {t('requestSpecifics')}
+              </PCTitle>
+
+              {/* Purposes Section */}
+              {request_details.purposes && request_details.purposes.length > 0 && (
+                <div>
+                  <PCText
+                    weight="semibold"
+                    style={{
+                      marginBottom: pcStyles.mbMd.marginBottom,
+                      color: getVar('--pc-text-primary'),
+                    }}
+                  >
+                    {t('purposesInvolved')}
+                  </PCText>
+                  <ul
+                    style={{
+                      listStyleType: 'none',
+                      paddingLeft: 0,
+                      ...pcStyles.flex,
+                      ...pcStyles.flexCol,
+                      gap: pcStyles.gapMd.gap,
+                    }}
+                  >
+                    {request_details.purposes.map((p: any, idx: number) => (
+                      <li
+                        key={idx}
+                        style={{
+                          padding: pcStyles.pMd.padding,
+                          backgroundColor: getVar('--pc-bg-secondary'),
+                          borderRadius: pcStyles.borderRadiusMd,
+                          border: `1px solid ${getVar('--pc-border-color')}`,
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                            color: getVar('--pc-text-primary'),
+                            marginBottom: pcStyles.mbXs.marginBottom,
+                          }}
+                        >
+                          {p.purpose?.name}
+                        </div>
+                        {p.purpose?.description && (
+                          <div
+                            style={{
+                              color: getVar('--pc-text-secondary'),
+                              fontSize: pcStyles.textSm.fontSize,
+                              marginBottom: pcStyles.mbSm.marginBottom,
+                              lineHeight: '1.5',
+                            }}
+                          >
+                            {p.purpose.description}
+                          </div>
+                        )}
+                        {p.purpose?.data_elements && p.purpose.data_elements.some((de: any) => de.selected) && (
+                          <div
+                            style={{
+                              marginTop: pcStyles.mtSm.marginTop,
+                              ...pcStyles.flex,
+                              flexWrap: 'wrap',
+                              gap: pcStyles.gapSm.gap
+                            }}
+                          >
+                            {p.purpose.data_elements
+                              .filter((de: any) => de.selected)
+                              .map((de: any, dIdx: number) => (
+                                <PCBadge key={dIdx} variant="secondary" size="sm" className="pc-status-badge">
+                                  {de.name}
+                                </PCBadge>
+                              ))}
+                          </div>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              {/* Correction Data Table */}
+              {request_details.correction_data && request_details.correction_data.length > 0 && (
+                <div>
+                  <PCText
+                    weight="semibold"
+                    style={{
+                      marginBottom: pcStyles.mbMd.marginBottom,
+                      fontSize: pcStyles.textSm.fontSize,
+                      color: getVar('--pc-text-primary'),
+                    }}
+                  >
+                    {t('dataToCorrect')}
+                  </PCText>
+                  <div style={{ ...pcStyles.overflowXAuto }}>
+                    <div
+                      style={{
+                        minWidth: '100%',
+                        border: `1px solid ${getVar('--pc-border-color')}`,
+                        borderRadius: pcStyles.borderRadiusLg,
+                        overflow: 'hidden',
+                        backgroundColor: getVar('--pc-bg-primary'),
+                      }}
+                    >
+                      <PCTable style={{ width: '100%', fontSize: pcStyles.textXs.fontSize }}>
+                        <PCTable.Header style={{ backgroundColor: getVar('--pc-bg-secondary') }}>
+                          <PCTable.Row>
+                            <PCTable.Head
+                              style={{
+                                padding: '0.75rem 1rem',
+                                whiteSpace: 'nowrap',
+                                color: getVar('--pc-text-secondary'),
+                                fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                                fontSize: pcStyles.textSm.fontSize,
+                              }}
+                            >
+                              {t('field')}
+                            </PCTable.Head>
+                            <PCTable.Head
+                              style={{
+                                padding: '0.75rem 1rem',
+                                whiteSpace: 'nowrap',
+                                color: getVar('--pc-text-secondary'),
+                                fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                                fontSize: pcStyles.textSm.fontSize,
+                              }}
+                            >
+                              {t('currentValue')}
+                            </PCTable.Head>
+                            <PCTable.Head
+                              style={{
+                                padding: '0.75rem 1rem',
+                                whiteSpace: 'nowrap',
+                                color: getVar('--pc-text-secondary'),
+                                fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                                fontSize: pcStyles.textSm.fontSize,
+                              }}
+                            >
+                              {t('newValue')}
+                            </PCTable.Head>
+                          </PCTable.Row>
+                        </PCTable.Header>
+                        <PCTable.Body>
+                          {request_details.correction_data.map((item: any, idx: number) => (
+                            <PCTable.Row
+                              key={idx}
+                              style={{
+                                borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+                              }}
+                            >
+                              <PCTable.Cell
+                                style={{
+                                  padding: '0.75rem 1rem',
+                                  fontWeight: pcStyles.fontWeightMedium.fontWeight,
+                                  color: getVar('--pc-text-primary'),
+                                }}
+                              >
+                                {item.name}
+                              </PCTable.Cell>
+                              <PCTable.Cell
+                                style={{
+                                  padding: '0.75rem 1rem',
+                                  color: getVar('--pc-text-secondary'),
+                                  wordBreak: 'break-word',
+                                }}
+                              >
+                                {item.curr_value || '-'}
+                              </PCTable.Cell>
+                              <PCTable.Cell
+                                style={{
+                                  padding: '0.75rem 1rem',
+                                  color: getVar('--pc-text-secondary'),
+                                  wordBreak: 'break-word',
+                                }}
+                              >
+                                {item.new_value || '-'}
+                              </PCTable.Cell>
+                            </PCTable.Row>
+                          ))}
+                        </PCTable.Body>
+                      </PCTable>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Nomination Data */}
+              {request_details.nomination_data && (
+                <div>
+                  <PCText
+                    weight="semibold"
+                    style={{
+                      marginBottom: pcStyles.mbMd.marginBottom,
+                      color: getVar('--pc-text-primary'),
+                    }}
+                  >
+                    {t('nomination')}
+                  </PCText>
+                  <div
+                    style={{
+                      backgroundColor: getVar('--pc-bg-secondary'),
+                      padding: pcStyles.pMd.padding,
+                      borderRadius: pcStyles.borderRadiusMd,
+                      border: `1px solid ${getVar('--pc-border-color')}`,
+                      ...pcStyles.flex,
+                      ...pcStyles.flexCol,
+                      gap: pcStyles.gapSm.gap,
+                    }}
+                  >
+                    <div>
+                      <PCText size="xs" weight="medium" color="secondary">
+                        {t('nomineeEmail')}
+                      </PCText>
+                      <PCText size="sm" style={{ color: getVar('--pc-text-primary') }}>
+                        {request_details.nomination_data.nominee_email || '-'}
+                      </PCText>
+                    </div>
+                    <div>
+                      <PCText size="xs" weight="medium" color="secondary">
+                        {t('nomineeMobile')}
+                      </PCText>
+                      <PCText size="sm" style={{ color: getVar('--pc-text-primary') }}>
+                        {request_details.nomination_data.nominee_mobile || '-'}
+                      </PCText>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Grievance Types */}
+              {request_details.grievance_types && request_details.grievance_types.length > 0 && (
+                <div>
+                  <PCText
+                    weight="semibold"
+                    style={{
+                      marginBottom: pcStyles.mbMd.marginBottom,
+                      color: getVar('--pc-text-primary'),
+                    }}
+                  >
+                    {t('grievanceTypes')}
+                  </PCText>
+                  <div style={{ ...pcStyles.flex, flexWrap: 'wrap', gap: pcStyles.gapSm.gap }}>
+                    {request_details.grievance_types.map((g: any, idx: number) => (
+                      <PCBadge key={idx} variant="secondary" size="sm" className="pc-status-badge">
+                        {g.grievance?.replace('_', ' ')}
+                      </PCBadge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div
+          style={{
+            padding: `${getVar('--pc-spacing-md')} ${getVar('--pc-spacing-lg')}`,
+            ...pcStyles.flex,
+            ...pcStyles.justifyEnd,
+            backgroundColor: 'transparent',
+            marginTop: 'auto',
+          }}
+        >
+          <PCButton
+            variant="outline"
+            onClick={onClose}
+            size="sm"
+          >
+            {t('close')}
+          </PCButton>
+        </div>
+      </div>
+    </PCModal>
+  );
+}