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

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -970,6 +970,617 @@ export const injectPCStyles = () => {
       }
     }
 
+    /* ─── Case Details Page ───────────────────────────────────────────────── */
+
+    .pc-case-page {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
+
+    .pc-case-back {
+      margin-bottom: 1rem;
+    }
+
+    .pc-case-back-btn {
+      padding-left: 0;
+      color: var(--pc-text-secondary);
+    }
+
+    .pc-case-back-icon {
+      margin-right: 0.5rem;
+    }
+
+    .pc-case-header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.75rem 0;
+      border-bottom: 1px solid var(--pc-border-color);
+      font-size: var(--pc-font-size-sm);
+      color: var(--pc-text-secondary);
+    }
+
+    .pc-case-header-id {
+      font-weight: var(--pc-font-weight-semibold);
+      color: var(--pc-text-primary);
+    }
+
+    .pc-case-header-overdue {
+      color: #dc2626;
+    }
+
+    .pc-case-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--pc-border-color);
+    }
+
+    .pc-case-tab {
+      padding: 0.75rem 1.25rem;
+      font-size: var(--pc-font-size-sm);
+      font-weight: var(--pc-font-weight-medium);
+      color: var(--pc-text-secondary);
+      border: none;
+      border-bottom: 2px solid transparent;
+      background: transparent;
+      cursor: pointer;
+      margin-bottom: -1px;
+      transition: all 0.15s;
+    }
+
+    .pc-case-tab--active {
+      font-weight: var(--pc-font-weight-semibold);
+      color: var(--pc-primary);
+      border-bottom-color: var(--pc-primary);
+    }
+
+    .pc-case-tab-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    /* ─── Messages Tab ─────────────────────────────────────────────────── */
+
+    .pc-messages-container {
+      display: flex;
+      flex-direction: column;
+      min-height: 30vh;
+      max-height: 60vh;
+      border: 1px solid var(--pc-border-color);
+      border-radius: 0.5rem;
+      overflow: hidden;
+      margin-top: 1rem;
+      background-color: var(--pc-bg-primary);
+    }
+
+    .pc-messages-notice {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.625rem 1rem;
+      font-size: var(--pc-font-size-sm);
+      flex-shrink: 0;
+    }
+
+    .pc-messages-notice-text {
+      flex: 1;
+    }
+
+    .pc-messages-refresh-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+      transition: opacity 0.15s;
+    }
+
+    .pc-messages-refresh-btn:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+
+    .pc-messages-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      min-height: 0;
+    }
+
+    .pc-messages-center {
+      display: flex;
+      justify-content: center;
+      padding: 3rem 0;
+    }
+
+    .pc-messages-center-text {
+      text-align: center;
+      padding: 3rem 0;
+    }
+
+    .pc-messages-empty {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+      padding: 3rem 0;
+    }
+
+    .pc-messages-empty-icon {
+      opacity: 0.3;
+      color: var(--pc-text-secondary);
+    }
+
+    /* ─── Message Composer ─────────────────────────────────────────────── */
+
+    .pc-composer {
+      border-top: 1px solid var(--pc-border-color);
+      background-color: var(--pc-bg-primary);
+      flex-shrink: 0;
+    }
+
+    .pc-composer-pending-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem 0;
+    }
+
+    .pc-composer-pending-pill {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.25rem 0.75rem;
+      background-color: var(--pc-bg-secondary);
+      border: 1px solid var(--pc-border-color);
+      border-radius: 1rem;
+      font-size: var(--pc-font-size-xs);
+      color: var(--pc-text-primary);
+    }
+
+    .pc-composer-pending-size {
+      color: var(--pc-text-secondary);
+    }
+
+    .pc-composer-remove-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--pc-text-secondary);
+      padding: 0;
+      line-height: 1;
+    }
+
+    .pc-composer-textarea-wrap {
+      padding: 0.75rem 1rem 0;
+    }
+
+    .pc-composer-textarea {
+      width: 100%;
+      resize: none;
+      outline: none;
+      font-size: var(--pc-font-size-sm);
+      color: var(--pc-text-primary);
+      background-color: transparent;
+      font-family: inherit;
+      line-height: 1.5;
+      border: 1px solid var(--pc-border-color);
+      border-radius: 0.5rem;
+    }
+
+    .pc-composer-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 1rem 0.75rem;
+    }
+
+    .pc-composer-btn {
+      gap: 0.375rem;
+      width: auto;
+    }
+
+    .pc-composer-footer {
+      text-align: center;
+      padding: 0.375rem;
+      font-size: var(--pc-font-size-xs);
+      color: var(--pc-text-secondary);
+      border-top: 1px solid var(--pc-border-color);
+    }
+
+    /* ─── Chat Bubble ──────────────────────────────────────────────────── */
+
+    .pc-chat-bubble-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .pc-chat-bubble-wrap--sent {
+      align-items: flex-end;
+    }
+
+    .pc-chat-bubble-wrap--received {
+      align-items: flex-start;
+    }
+
+    .pc-chat-sender {
+      font-size: var(--pc-font-size-xs);
+      color: var(--pc-text-secondary);
+    }
+
+    .pc-chat-bubble {
+      max-width: 70%;
+      padding: 0.625rem 0.875rem;
+      font-size: var(--pc-font-size-sm);
+      line-height: 1.5;
+      word-break: break-word;
+    }
+
+    .pc-chat-bubble--sent {
+      border-radius: 1rem 0.25rem 1rem 1rem;
+      background-color: var(--pc-primary);
+      color: #ffffff;
+    }
+
+    .pc-chat-bubble--received {
+      border-radius: 0.25rem 1rem 1rem 1rem;
+      background-color: var(--pc-bg-secondary);
+      color: var(--pc-text-primary);
+      border: 1px solid var(--pc-border-color);
+    }
+
+    /* ─── Attachment Card ──────────────────────────────────────────────── */
+
+    .pc-attachment-card {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.625rem 0.875rem;
+      background-color: var(--pc-bg-secondary);
+      border: 1px solid var(--pc-border-color);
+      border-radius: 0.5rem;
+      max-width: 320px;
+    }
+
+    .pc-attachment-icon {
+      color: var(--pc-primary);
+      flex-shrink: 0;
+    }
+
+    .pc-attachment-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .pc-attachment-name {
+      font-size: var(--pc-font-size-sm);
+      font-weight: var(--pc-font-weight-medium);
+      color: var(--pc-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .pc-attachment-size {
+      font-size: var(--pc-font-size-xs);
+      color: var(--pc-text-secondary);
+    }
+
+    .pc-attachment-download {
+      color: var(--pc-text-secondary);
+      flex-shrink: 0;
+    }
+
+    /* ─── Document Request Card ────────────────────────────────────────── */
+
+    .pc-doc-request-card {
+      border-radius: 0.75rem;
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      max-width: 480px;
+    }
+
+    .pc-doc-request-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .pc-doc-request-icon {
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+
+    .pc-doc-request-title {
+      font-weight: var(--pc-font-weight-semibold);
+      font-size: var(--pc-font-size-sm);
+    }
+
+    .pc-doc-request-accepted {
+      font-size: var(--pc-font-size-xs);
+      margin-top: 0.125rem;
+    }
+
+    .pc-doc-request-status {
+      margin-left: auto;
+      font-size: var(--pc-font-size-xs);
+      font-weight: var(--pc-font-weight-medium);
+      white-space: nowrap;
+      padding: 0.125rem 0.5rem;
+      border-radius: 0.375rem;
+    }
+
+    .pc-doc-request-upload-btn {
+      width: 100%;
+      justify-content: center;
+      gap: 0.375rem;
+      border-style: solid;
+    }
+
+    .pc-doc-request-rejection {
+      font-size: var(--pc-font-size-xs);
+      padding: 0.375rem 0.625rem;
+      border-radius: 0.375rem;
+    }
+
+    /* ─── Status Event ─────────────────────────────────────────────────── */
+
+    .pc-status-event {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.25rem;
+    }
+
+    .pc-status-event-pill {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border-radius: 1rem;
+      font-size: var(--pc-font-size-sm);
+      font-weight: var(--pc-font-weight-medium);
+    }
+
+    .pc-status-event-sub {
+      font-size: var(--pc-font-size-xs);
+      opacity: 0.85;
+    }
+
+    .pc-status-event-time {
+      font-size: var(--pc-font-size-xs);
+      color: var(--pc-text-secondary);
+    }
+
+    /* ─── Request Details Tab ──────────────────────────────────────────── */
+
+    .pc-request-details {
+      display: flex;
+      flex-direction: column;
+      gap: var(--pc-spacing-xl);
+      padding: var(--pc-spacing-xl) var(--pc-spacing-lg);
+      overflow-y: auto;
+    }
+
+    /* Summary card row: each field sits in a subtle card */
+    .pc-request-summary-card {
+      background-color: var(--pc-bg-secondary);
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      padding: var(--pc-spacing-lg);
+    }
+
+    .pc-request-summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: var(--pc-spacing-lg);
+    }
+
+    .pc-request-field-label {
+      margin-bottom: 0.375rem;
+    }
+
+    .pc-request-field-value {
+      color: var(--pc-text-primary);
+    }
+
+    .pc-request-field-value--capitalize {
+      text-transform: capitalize;
+      color: var(--pc-text-primary);
+    }
+
+    /* Description block */
+    .pc-request-description {
+      background-color: var(--pc-bg-secondary);
+      padding: var(--pc-spacing-lg);
+      border-radius: var(--pc-border-radius-lg);
+      border: 1px solid var(--pc-border-color);
+    }
+
+    .pc-request-description-title {
+      margin-bottom: var(--pc-spacing-sm);
+      color: var(--pc-text-primary);
+    }
+
+    .pc-request-description-text {
+      line-height: 1.7;
+    }
+
+    /* Specifics section */
+    .pc-request-specifics {
+      display: flex;
+      flex-direction: column;
+      gap: var(--pc-spacing-xl);
+    }
+
+    .pc-request-section-divider {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .pc-request-section-divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background-color: var(--pc-border-color);
+    }
+
+    .pc-request-section-title {
+      font-size: var(--pc-font-size-xs);
+      font-weight: var(--pc-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--pc-text-secondary);
+      margin: 0;
+      white-space: nowrap;
+    }
+
+    .pc-request-section-heading {
+      margin-bottom: var(--pc-spacing-sm);
+      color: var(--pc-text-primary);
+      font-size: var(--pc-font-size-sm);
+    }
+
+    /* Purpose cards */
+    .pc-request-purpose-list {
+      list-style-type: none;
+      padding-left: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--pc-spacing-sm);
+    }
+
+    .pc-request-purpose-item {
+      padding: var(--pc-spacing-lg);
+      background-color: var(--pc-bg-secondary);
+      border-radius: var(--pc-border-radius-lg);
+      border: 1px solid var(--pc-border-color);
+      transition: box-shadow 0.15s ease;
+    }
+
+    .pc-request-purpose-item:hover {
+      box-shadow: var(--pc-shadow-sm);
+    }
+
+    .pc-request-purpose-name {
+      font-weight: var(--pc-font-weight-semibold);
+      font-size: var(--pc-font-size-sm);
+      color: var(--pc-text-primary);
+      margin-bottom: 0.25rem;
+    }
+
+    .pc-request-purpose-desc {
+      color: var(--pc-text-secondary);
+      font-size: var(--pc-font-size-xs);
+      margin-bottom: var(--pc-spacing-sm);
+      line-height: 1.6;
+    }
+
+    .pc-request-data-elements {
+      margin-top: var(--pc-spacing-sm);
+      padding-top: var(--pc-spacing-sm);
+      border-top: 1px solid var(--pc-border-color);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--pc-spacing-xs);
+    }
+
+    /* Correction data table */
+    .pc-request-table-wrap {
+      min-width: 100%;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      overflow: hidden;
+      background-color: var(--pc-bg-primary);
+    }
+
+    .pc-request-table {
+      width: 100%;
+      font-size: var(--pc-font-size-sm);
+    }
+
+    .pc-request-table-header {
+      background-color: var(--pc-bg-secondary);
+    }
+
+    .pc-request-table-head {
+      padding: 0.625rem 1rem;
+      white-space: nowrap;
+      color: var(--pc-text-secondary);
+      font-weight: var(--pc-font-weight-semibold);
+      font-size: var(--pc-font-size-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+
+    .pc-request-table-row {
+      border-bottom: 1px solid var(--pc-border-color);
+    }
+
+    .pc-request-table-row:last-child {
+      border-bottom: none;
+    }
+
+    .pc-request-table-cell {
+      padding: 0.75rem 1rem;
+      font-size: var(--pc-font-size-sm);
+    }
+
+    .pc-request-table-cell--name {
+      font-weight: var(--pc-font-weight-medium);
+      color: var(--pc-text-primary);
+    }
+
+    .pc-request-table-cell--value {
+      color: var(--pc-text-secondary);
+      word-break: break-word;
+    }
+
+    /* Nomination card */
+    .pc-request-nomination-card {
+      background-color: var(--pc-bg-secondary);
+      padding: var(--pc-spacing-lg);
+      border-radius: var(--pc-border-radius-lg);
+      border: 1px solid var(--pc-border-color);
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: var(--pc-spacing-md);
+    }
+
+    .pc-request-nomination-field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    /* Grievance badges */
+    .pc-request-grievance-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--pc-spacing-xs);
+    }
+
+    .pc-hidden {
+      display: none;
+    }
+
     /* Case Details Modal Responsive Styles */
     .pc-case-details-content {
       padding: 1rem !important;
@@ -993,6 +1604,120 @@ export const injectPCStyles = () => {
         grid-template-columns: repeat(4, 1fr) !important;
       }
     }
+
+    /* ─── Erasure Consent Modal ────────────────────────────────────────── */
+
+    .pc-erasure-modal-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--pc-spacing-lg);
+    }
+
+    .pc-erasure-modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--pc-spacing-sm);
+      width: 100%;
+      flex-wrap: wrap;
+    }
+
+    .pc-erasure-modal-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--pc-spacing-sm);
+    }
+
+    .pc-erasure-modal-icon {
+      flex-shrink: 0;
+      width: 3rem;
+      height: 3rem;
+      border-radius: 50%;
+      background-color: color-mix(in srgb, var(--pc-primary) 10%, transparent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--pc-primary);
+    }
+
+    .pc-erasure-modal-title {
+      margin: 0;
+      font-size: var(--pc-font-size-lg);
+      font-weight: var(--pc-font-weight-semibold);
+      color: var(--pc-text-primary);
+    }
+
+    .pc-erasure-modal-question {
+      margin: 0;
+      max-width: 28rem;
+      font-size: var(--pc-font-size-sm);
+      color: var(--pc-text-secondary);
+      line-height: 1.5;
+    }
+
+    .pc-erasure-modal-purposes {
+      border-radius: var(--pc-border-radius-md);
+      border: 1px solid var(--pc-border-color);
+      background-color: var(--pc-bg-secondary);
+      padding: var(--pc-spacing-md);
+      display: flex;
+      flex-direction: column;
+      gap: var(--pc-spacing-sm);
+    }
+
+    .pc-erasure-modal-purposes-label {
+      margin: 0;
+      font-size: var(--pc-font-size-xs);
+      font-weight: var(--pc-font-weight-semibold);
+      color: var(--pc-text-secondary);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+
+    .pc-erasure-modal-purpose-item {
+      font-size: var(--pc-font-size-sm);
+      font-weight: var(--pc-font-weight-semibold);
+      color: var(--pc-text-primary);
+      word-break: break-word;
+    }
+
+    .pc-erasure-modal-purposes-placeholder {
+      font-size: var(--pc-font-size-sm);
+      color: var(--pc-text-secondary);
+    }
+
+    .pc-erasure-modal-warning {
+      border-radius: var(--pc-border-radius-md);
+      border: 1px solid var(--pc-warning);
+      background-color: color-mix(in srgb, var(--pc-warning) 10%, transparent);
+      padding: var(--pc-spacing-md);
+    }
+
+    .pc-erasure-modal-warning-text {
+      margin: 0;
+      font-size: var(--pc-font-size-sm);
+      color: var(--pc-text-primary);
+      line-height: 1.5;
+    }
+
+    .pc-erasure-modal-warning-label {
+      font-weight: var(--pc-font-weight-semibold);
+    }
+
+    /* ─── Request Submit: Revoke Consent Notice ────────────────────────── */
+
+    .pc-request-submit-revoke-notice {
+      margin-top: var(--pc-spacing-md);
+      padding: var(--pc-spacing-sm);
+      border-radius: var(--pc-border-radius-md);
+      border: 1px solid var(--pc-warning);
+      background-color: color-mix(in srgb, var(--pc-warning) 10%, transparent);
+    }
+
+    .pc-request-submit-revoke-notice-text {
+      color: var(--pc-text-primary);
+    }
   `;
 
   document.head.appendChild(style);