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

package/src/RedactoPrivacyCenter/components/CaseDetailsModal.tsx

@@ -1,469 +0,0 @@
-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>
-  );
-}