@redacto.io/consent-sdk-react 9.3.0-beta.0 → 9.3.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/privacy-center.js +703 -622
  3. package/dist/privacy-center.mjs +704 -623
  4. package/package.json +1 -1
  5. package/src/RedactoPrivacyCenter/components/Form.tsx +127 -8
  6. package/tests/Form.test.tsx +93 -1
package/dist/privacy-center.js CHANGED
@@ -12778,6 +12778,7 @@ var GRIEVANCE_TAB_IDS = {
12778
12778
  COMPLETED: "completed",
12779
12779
  REJECTED: "rejected"
12780
12780
  };
12781
+ var MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL = 3;
12781
12782
 
12782
12783
  // src/RedactoPrivacyCenter/components/SideMenuBarPC/constants.tsx
12783
12784
  var import_lucide_react4 = require("lucide-react");
@@ -19642,6 +19643,8 @@ function Form({
19642
19643
  const [isLoading, setIsLoading] = (0, import_react40.useState)(false);
19643
19644
  const [isTranslating, setIsTranslating] = (0, import_react40.useState)(false);
19644
19645
  const [isRequestDetailsExpanded, setIsRequestDetailsExpanded] = (0, import_react40.useState)(true);
19646
+ const [isErasureConsentModalOpen, setIsErasureConsentModalOpen] = (0, import_react40.useState)(false);
19647
+ const [revokeConsentOnFulfilment, setRevokeConsentOnFulfilment] = (0, import_react40.useState)(false);
19645
19648
  const resetFileInput = () => {
19646
19649
  if (fileInputRef.current) {
19647
19650
  fileInputRef.current.value = "";
@@ -19868,11 +19871,34 @@ function Form({
19868
19871
  }
19869
19872
  return translatedName;
19870
19873
  }, [data]);
19874
+ const selectedErasurePurposeList = (0, import_react40.useMemo)(
19875
+ () => selectedPurposes.filter((p) => p.selected || p.data_elements.some((de) => de.selected)).map((p) => p.name).filter(Boolean),
19876
+ [selectedPurposes]
19877
+ );
19878
+ const selectedErasurePurposeNames = (0, import_react40.useMemo)(() => {
19879
+ if (selectedErasurePurposeList.length === 0 || selectedErasurePurposeList.length > MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL) {
19880
+ return t("revokeConsentModalYourPurposes");
19881
+ }
19882
+ return selectedErasurePurposeList.join(", ");
19883
+ }, [selectedErasurePurposeList, t]);
19871
19884
  const handleSubmitClick = () => {
19872
19885
  if (!isFormValid) {
19873
19886
  return;
19874
19887
  }
19875
- void handleSubmit(requestType === "erasure" /* ERASURE */);
19888
+ if (requestType === "erasure" /* ERASURE */) {
19889
+ setIsErasureConsentModalOpen(true);
19890
+ return;
19891
+ }
19892
+ setRevokeConsentOnFulfilment(false);
19893
+ void handleSubmit(false);
19894
+ };
19895
+ const handleErasureModalChoice = (revoke) => {
19896
+ setRevokeConsentOnFulfilment(revoke);
19897
+ setIsErasureConsentModalOpen(false);
19898
+ void handleSubmit(revoke);
19899
+ };
19900
+ const handleErasureModalClose = () => {
19901
+ setIsErasureConsentModalOpen(false);
19876
19902
  };
19877
19903
  const handleSubmit = async (revokeConsent = false) => {
19878
19904
  var _a2, _b2, _c2, _d2;
@@ -20168,676 +20194,731 @@ function Form({
20168
20194
  setIsVerifyingContact(false);
20169
20195
  }
20170
20196
  };
20171
- return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children: isSubmitted && submittedCase && !isPopup ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20172
- RequestSubmit,
20173
- {
20174
- result: submittedCase,
20175
- contact: formData == null ? void 0 : formData.contact,
20176
- onCreateRequest
20177
- }
20178
- ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
20179
- !isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20180
- marginTop: 0,
20181
- marginBottom: getVar21("--pc-spacing-sm"),
20182
- lineHeight: 1.5,
20183
- fontSize: pcStyles.textSm.fontSize,
20184
- color: getVar21("--pc-text-secondary")
20185
- }, children: t("description") }),
20186
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20187
- "div",
20197
+ return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
20198
+ isSubmitted && submittedCase && !isPopup ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20199
+ RequestSubmit,
20188
20200
  {
20189
- style: {
20190
- backgroundColor: getVar21("--pc-bg-primary"),
20191
- ...isPopup ? {
20192
- marginTop: 0,
20193
- marginBottom: 0,
20194
- borderRadius: pcStyles.borderRadiusXl
20195
- } : {
20196
- marginTop: pcStyles.mtSm.marginTop,
20197
- marginBottom: pcStyles.mbSm.marginBottom,
20198
- borderRadius: pcStyles.borderRadiusXl,
20199
- border: `1px solid ${getVar21("--pc-border-color")}`,
20200
- boxShadow: getVar21("--pc-shadow-sm")
20201
- }
20202
- },
20203
- children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(FormBlockWrapper, { inputClassName: "mx-auto", children: [
20204
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20205
- "div",
20206
- {
20207
- style: {
20208
- ...pcStyles.flex,
20209
- ...pcStyles.itemsCenter,
20210
- ...pcStyles.justifyBetween,
20211
- backgroundColor: `var(--pc-bg-secondary)`,
20212
- padding: getVar21("--pc-spacing-md"),
20213
- width: "100%",
20214
- overflow: "visible",
20215
- ...isPopup ? {
20216
- position: "sticky",
20217
- top: 0,
20218
- zIndex: 20,
20219
- borderBottom: `1px solid var(--pc-border-color)`
20220
- } : {
20221
- position: "relative",
20222
- borderRadius: `${getVar21("--pc-border-radius-lg")} ${getVar21("--pc-border-radius-lg")} 0 0`
20223
- }
20224
- },
20225
- className: "pc-padding-responsive",
20226
- children: [
20227
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20228
- fontSize: pcStyles.textSm.fontSize,
20229
- fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20230
- color: `var(--pc-text-primary)`,
20231
- margin: 0,
20232
- whiteSpace: "nowrap",
20233
- flexShrink: 0,
20234
- flexGrow: 0
20235
- }, className: "pc-text-responsive", children: t("raiseDataRequest") }),
20236
- isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20237
- PCButton,
20238
- {
20239
- variant: "text",
20240
- onClick: onClose,
20241
- style: { padding: 0, flexShrink: 0, marginLeft: "auto" },
20242
- children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiX, { size: 20 })
20243
- }
20244
- )
20245
- ]
20201
+ result: submittedCase,
20202
+ contact: formData == null ? void 0 : formData.contact,
20203
+ onCreateRequest,
20204
+ revokeConsentOnFulfilment,
20205
+ revokedPurposeNames: selectedErasurePurposeNames
20206
+ }
20207
+ ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
20208
+ !isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20209
+ marginTop: 0,
20210
+ marginBottom: getVar21("--pc-spacing-sm"),
20211
+ lineHeight: 1.5,
20212
+ fontSize: pcStyles.textSm.fontSize,
20213
+ color: getVar21("--pc-text-secondary")
20214
+ }, children: t("description") }),
20215
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20216
+ "div",
20217
+ {
20218
+ style: {
20219
+ backgroundColor: getVar21("--pc-bg-primary"),
20220
+ ...isPopup ? {
20221
+ marginTop: 0,
20222
+ marginBottom: 0,
20223
+ borderRadius: pcStyles.borderRadiusXl
20224
+ } : {
20225
+ marginTop: pcStyles.mtSm.marginTop,
20226
+ marginBottom: pcStyles.mbSm.marginBottom,
20227
+ borderRadius: pcStyles.borderRadiusXl,
20228
+ border: `1px solid ${getVar21("--pc-border-color")}`,
20229
+ boxShadow: getVar21("--pc-shadow-sm")
20246
20230
  }
20247
- ),
20248
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20249
- "div",
20250
- {
20251
- style: {
20252
- ...pcStyles.flex,
20253
- ...pcStyles.flexCol,
20254
- gap: getVar21("--pc-spacing-lg"),
20255
- padding: getVar21("--pc-spacing-lg")
20256
- },
20257
- className: "pc-padding-responsive pc-spacing-responsive",
20258
- children: [
20259
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: {
20231
+ },
20232
+ children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(FormBlockWrapper, { inputClassName: "mx-auto", children: [
20233
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20234
+ "div",
20235
+ {
20236
+ style: {
20260
20237
  ...pcStyles.flex,
20238
+ ...pcStyles.itemsCenter,
20239
+ ...pcStyles.justifyBetween,
20240
+ backgroundColor: `var(--pc-bg-secondary)`,
20241
+ padding: getVar21("--pc-spacing-md"),
20261
20242
  width: "100%",
20262
- ...pcStyles.itemsEnd,
20263
- gap: getVar21("--pc-spacing-sm"),
20264
- flexWrap: "wrap"
20265
- }, children: [
20243
+ overflow: "visible",
20244
+ ...isPopup ? {
20245
+ position: "sticky",
20246
+ top: 0,
20247
+ zIndex: 20,
20248
+ borderBottom: `1px solid var(--pc-border-color)`
20249
+ } : {
20250
+ position: "relative",
20251
+ borderRadius: `${getVar21("--pc-border-radius-lg")} ${getVar21("--pc-border-radius-lg")} 0 0`
20252
+ }
20253
+ },
20254
+ className: "pc-padding-responsive",
20255
+ children: [
20256
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20257
+ fontSize: pcStyles.textSm.fontSize,
20258
+ fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20259
+ color: `var(--pc-text-primary)`,
20260
+ margin: 0,
20261
+ whiteSpace: "nowrap",
20262
+ flexShrink: 0,
20263
+ flexGrow: 0
20264
+ }, className: "pc-text-responsive", children: t("raiseDataRequest") }),
20265
+ isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20266
+ PCButton,
20267
+ {
20268
+ variant: "text",
20269
+ onClick: onClose,
20270
+ style: { padding: 0, flexShrink: 0, marginLeft: "auto" },
20271
+ children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiX, { size: 20 })
20272
+ }
20273
+ )
20274
+ ]
20275
+ }
20276
+ ),
20277
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20278
+ "div",
20279
+ {
20280
+ style: {
20281
+ ...pcStyles.flex,
20282
+ ...pcStyles.flexCol,
20283
+ gap: getVar21("--pc-spacing-lg"),
20284
+ padding: getVar21("--pc-spacing-lg")
20285
+ },
20286
+ className: "pc-padding-responsive pc-spacing-responsive",
20287
+ children: [
20288
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: {
20289
+ ...pcStyles.flex,
20290
+ width: "100%",
20291
+ ...pcStyles.itemsEnd,
20292
+ gap: getVar21("--pc-spacing-sm"),
20293
+ flexWrap: "wrap"
20294
+ }, children: [
20295
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20296
+ PCInput,
20297
+ {
20298
+ style: { flex: 1, minWidth: "200px" },
20299
+ label: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
20300
+ t("contact"),
20301
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20302
+ ] }),
20303
+ placeholder: t("contactPlaceholder"),
20304
+ value: formData.contact,
20305
+ readOnly: !isPopup,
20306
+ onChange: (e) => {
20307
+ if (!isPopup) {
20308
+ return;
20309
+ }
20310
+ ;
20311
+ setFormData({
20312
+ ...formData,
20313
+ contact: e.target.value
20314
+ });
20315
+ setIsPopupFormEnabled(false);
20316
+ }
20317
+ }
20318
+ ),
20319
+ isPopup && !isPopupFormEnabled && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { ...pcStyles.flex, ...pcStyles.justifyEnd }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20320
+ PCButton,
20321
+ {
20322
+ size: "sm",
20323
+ onClick: handleVerifyContact,
20324
+ style: { height: "2.25rem", flexShrink: 0 },
20325
+ disabled: !formData.contact || isVerifyingContact,
20326
+ children: isVerifyingContact ? t("verifying") : t("verify")
20327
+ }
20328
+ ) })
20329
+ ] }),
20266
20330
  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20267
- PCInput,
20331
+ PCSelect,
20268
20332
  {
20269
- style: { flex: 1, minWidth: "200px" },
20270
20333
  label: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
20271
- t("contact"),
20334
+ t("requestType"),
20272
20335
  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20273
20336
  ] }),
20274
- placeholder: t("contactPlaceholder"),
20275
- value: formData.contact,
20276
- readOnly: !isPopup,
20277
- onChange: (e) => {
20278
- if (!isPopup) {
20279
- return;
20337
+ options: Object.values(RequestTypeEnum).map((type) => ({
20338
+ value: type,
20339
+ label: requestTypeLabels[type]
20340
+ })),
20341
+ value: Object.values(RequestTypeEnum).map((type) => ({
20342
+ value: type,
20343
+ label: requestTypeLabels[type]
20344
+ })).find((opt) => opt.value === requestType) || null,
20345
+ onChange: (value) => {
20346
+ if (value) {
20347
+ setRequestType(value.value);
20348
+ setTimePeriod("");
20349
+ setIsRequestDetailsExpanded(true);
20280
20350
  }
20281
- ;
20282
- setFormData({
20283
- ...formData,
20284
- contact: e.target.value
20285
- });
20286
- setIsPopupFormEnabled(false);
20287
- }
20351
+ },
20352
+ placeholder: t("selectRequestType"),
20353
+ disabled: isPopup && !isPopupFormEnabled
20288
20354
  }
20289
20355
  ),
20290
- isPopup && !isPopupFormEnabled && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { ...pcStyles.flex, ...pcStyles.justifyEnd }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20291
- PCButton,
20356
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20357
+ "div",
20292
20358
  {
20293
- size: "sm",
20294
- onClick: handleVerifyContact,
20295
- style: { height: "2.25rem", flexShrink: 0 },
20296
- disabled: !formData.contact || isVerifyingContact,
20297
- children: isVerifyingContact ? t("verifying") : t("verify")
20298
- }
20299
- ) })
20300
- ] }),
20301
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20302
- PCSelect,
20303
- {
20304
- label: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
20305
- t("requestType"),
20306
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20307
- ] }),
20308
- options: Object.values(RequestTypeEnum).map((type) => ({
20309
- value: type,
20310
- label: requestTypeLabels[type]
20311
- })),
20312
- value: Object.values(RequestTypeEnum).map((type) => ({
20313
- value: type,
20314
- label: requestTypeLabels[type]
20315
- })).find((opt) => opt.value === requestType) || null,
20316
- onChange: (value) => {
20317
- if (value) {
20318
- setRequestType(value.value);
20319
- setTimePeriod("");
20320
- setIsRequestDetailsExpanded(true);
20321
- }
20322
- },
20323
- placeholder: t("selectRequestType"),
20324
- disabled: isPopup && !isPopupFormEnabled
20325
- }
20326
- ),
20327
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20328
- "div",
20329
- {
20330
- style: {
20331
- ...pcStyles.flex,
20332
- ...pcStyles.flexCol,
20333
- borderRadius: pcStyles.borderRadiusLg,
20334
- border: `1px solid ${getVar21("--pc-border-color")}`,
20335
- backgroundColor: getVar21("--pc-bg-secondary"),
20336
- overflow: "hidden",
20337
- ...isPopup && !isPopupFormEnabled ? {
20338
- pointerEvents: "none",
20339
- opacity: 0.6
20340
- } : {}
20341
- },
20342
- children: [
20343
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: {
20359
+ style: {
20344
20360
  ...pcStyles.flex,
20345
- ...pcStyles.itemsCenter,
20346
- ...pcStyles.justifyBetween,
20347
- padding: getVar21("--pc-spacing-md"),
20348
- borderBottom: isRequestDetailsExpanded ? `1px solid ${getVar21("--pc-border-color")}` : "none"
20349
- }, children: [
20350
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { style: {
20351
- fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20352
- color: `var(--pc-text-primary)`,
20353
- fontSize: pcStyles.textSm.fontSize,
20354
- margin: 0
20361
+ ...pcStyles.flexCol,
20362
+ borderRadius: pcStyles.borderRadiusLg,
20363
+ border: `1px solid ${getVar21("--pc-border-color")}`,
20364
+ backgroundColor: getVar21("--pc-bg-secondary"),
20365
+ overflow: "hidden",
20366
+ ...isPopup && !isPopupFormEnabled ? {
20367
+ pointerEvents: "none",
20368
+ opacity: 0.6
20369
+ } : {}
20370
+ },
20371
+ children: [
20372
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: {
20373
+ ...pcStyles.flex,
20374
+ ...pcStyles.itemsCenter,
20375
+ ...pcStyles.justifyBetween,
20376
+ padding: getVar21("--pc-spacing-md"),
20377
+ borderBottom: isRequestDetailsExpanded ? `1px solid ${getVar21("--pc-border-color")}` : "none"
20355
20378
  }, children: [
20356
- t("requestDetails"),
20357
- " ",
20358
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20379
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { style: {
20380
+ fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20381
+ color: `var(--pc-text-primary)`,
20382
+ fontSize: pcStyles.textSm.fontSize,
20383
+ margin: 0
20384
+ }, children: [
20385
+ t("requestDetails"),
20386
+ " ",
20387
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20388
+ ] }),
20389
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20390
+ PCButton,
20391
+ {
20392
+ variant: "text",
20393
+ size: "sm",
20394
+ style: { height: "auto", padding: 0, color: "var(--pc-text-secondary)", flexShrink: 0 },
20395
+ onClick: () => setIsRequestDetailsExpanded(
20396
+ !isRequestDetailsExpanded
20397
+ ),
20398
+ children: isRequestDetailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiChevronUp, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiChevronDown, { size: 20 })
20399
+ }
20400
+ )
20359
20401
  ] }),
20360
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20361
- PCButton,
20402
+ isRequestDetailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: {
20403
+ padding: getVar21("--pc-spacing-md")
20404
+ }, children: isProductScopedRequestType(requestType) ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20405
+ "div",
20362
20406
  {
20363
- variant: "text",
20364
- size: "sm",
20365
- style: { height: "auto", padding: 0, color: "var(--pc-text-secondary)", flexShrink: 0 },
20366
- onClick: () => setIsRequestDetailsExpanded(
20367
- !isRequestDetailsExpanded
20368
- ),
20369
- children: isRequestDetailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiChevronUp, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiChevronDown, { size: 20 })
20370
- }
20371
- )
20372
- ] }),
20373
- isRequestDetailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: {
20374
- padding: getVar21("--pc-spacing-md")
20375
- }, children: isProductScopedRequestType(requestType) ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20376
- "div",
20377
- {
20378
- style: {
20379
- ...pcStyles.flex,
20380
- ...pcStyles.flexCol,
20381
- gap: getVar21("--pc-spacing-md")
20382
- },
20383
- children: [
20384
- !skipProductStep && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20385
- ProductSelectionSection,
20386
- {
20387
- directGroups: (_b = data == null ? void 0 : data.direct_groups) != null ? _b : [],
20388
- nominatedGroups: (_c = data == null ? void 0 : data.nominated_groups) != null ? _c : [],
20389
- selectedProductKey,
20390
- onSelect: handleProductSelect,
20391
- requestTypeLabel: requestTypeLabels[requestType],
20392
- isTranslating
20393
- }
20394
- ),
20395
- selectedGroup && (() => {
20396
- var _a2, _b2;
20397
- const key = productGroupKey(selectedGroup);
20398
- const isCorrection = requestType === "CORRECTION" /* CORRECTION */;
20399
- const groupDataElements = isCorrection ? buildGroupDataElements(selectedGroup) : [];
20400
- const nominatorLabel = selectedGroup.nominator ? (_b2 = (_a2 = selectedGroup.nominator.name) != null ? _a2 : selectedGroup.nominator.email) != null ? _b2 : "" : "";
20401
- return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20402
- "div",
20407
+ style: {
20408
+ ...pcStyles.flex,
20409
+ ...pcStyles.flexCol,
20410
+ gap: getVar21("--pc-spacing-md")
20411
+ },
20412
+ children: [
20413
+ !skipProductStep && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20414
+ ProductSelectionSection,
20403
20415
  {
20404
- className: "pc-product-purpose-panel",
20405
- "data-testid": `per-product-purposes-${key}`,
20406
- children: [
20407
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-product-purpose-panel-header", children: [
20408
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-product-purpose-panel-title-row", children: [
20416
+ directGroups: (_b = data == null ? void 0 : data.direct_groups) != null ? _b : [],
20417
+ nominatedGroups: (_c = data == null ? void 0 : data.nominated_groups) != null ? _c : [],
20418
+ selectedProductKey,
20419
+ onSelect: handleProductSelect,
20420
+ requestTypeLabel: requestTypeLabels[requestType],
20421
+ isTranslating
20422
+ }
20423
+ ),
20424
+ selectedGroup && (() => {
20425
+ var _a2, _b2;
20426
+ const key = productGroupKey(selectedGroup);
20427
+ const isCorrection = requestType === "CORRECTION" /* CORRECTION */;
20428
+ const groupDataElements = isCorrection ? buildGroupDataElements(selectedGroup) : [];
20429
+ const nominatorLabel = selectedGroup.nominator ? (_b2 = (_a2 = selectedGroup.nominator.name) != null ? _a2 : selectedGroup.nominator.email) != null ? _b2 : "" : "";
20430
+ return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20431
+ "div",
20432
+ {
20433
+ className: "pc-product-purpose-panel",
20434
+ "data-testid": `per-product-purposes-${key}`,
20435
+ children: [
20436
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-product-purpose-panel-header", children: [
20437
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-product-purpose-panel-title-row", children: [
20438
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20439
+ PCText,
20440
+ {
20441
+ as: "span",
20442
+ size: "base",
20443
+ weight: "semibold",
20444
+ color: "primary",
20445
+ className: "pc-product-purpose-panel-title",
20446
+ children: selectedGroup.product_name
20447
+ }
20448
+ ),
20449
+ selectedGroup.nominator && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20450
+ PCText,
20451
+ {
20452
+ as: "span",
20453
+ size: "xs",
20454
+ weight: "medium",
20455
+ color: "secondary",
20456
+ className: "pc-product-purpose-panel-nominator",
20457
+ children: t("actingOnBehalfOfShort", {
20458
+ nominator: nominatorLabel
20459
+ })
20460
+ }
20461
+ )
20462
+ ] }),
20409
20463
  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20410
- PCText,
20411
- {
20412
- as: "span",
20413
- size: "base",
20414
- weight: "semibold",
20415
- color: "primary",
20416
- className: "pc-product-purpose-panel-title",
20417
- children: selectedGroup.product_name
20418
- }
20419
- ),
20420
- selectedGroup.nominator && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20421
20464
  PCText,
20422
20465
  {
20423
20466
  as: "span",
20424
20467
  size: "xs",
20425
- weight: "medium",
20426
20468
  color: "secondary",
20427
- className: "pc-product-purpose-panel-nominator",
20428
- children: t("actingOnBehalfOfShort", {
20429
- nominator: nominatorLabel
20430
- })
20469
+ className: "pc-product-purpose-panel-subtitle",
20470
+ children: t("selectPurposesForThisProduct")
20431
20471
  }
20432
20472
  )
20433
20473
  ] }),
20434
20474
  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20435
- PCText,
20475
+ "div",
20436
20476
  {
20437
- as: "span",
20438
- size: "xs",
20439
- color: "secondary",
20440
- className: "pc-product-purpose-panel-subtitle",
20441
- children: t("selectPurposesForThisProduct")
20477
+ className: "pc-product-purpose-panel-body",
20478
+ "data-testid": `per-product-purposes-body-${key}`,
20479
+ children: isCorrection ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20480
+ CorrectionDataSection,
20481
+ {
20482
+ dataElements: groupDataElements,
20483
+ selected: selectedCorrectionElements,
20484
+ setSelected: setSelectedCorrectionElements,
20485
+ correctionValues,
20486
+ setCorrectionValues,
20487
+ isTranslating
20488
+ }
20489
+ ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20490
+ PurposeSelectionSection,
20491
+ {
20492
+ purposes: selectedPurposes,
20493
+ setPurposes: setSelectedPurposes,
20494
+ requestType,
20495
+ isTranslating
20496
+ }
20497
+ )
20442
20498
  }
20443
20499
  )
20444
- ] }),
20445
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20446
- "div",
20447
- {
20448
- className: "pc-product-purpose-panel-body",
20449
- "data-testid": `per-product-purposes-body-${key}`,
20450
- children: isCorrection ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20451
- CorrectionDataSection,
20500
+ ]
20501
+ }
20502
+ );
20503
+ })()
20504
+ ]
20505
+ }
20506
+ ) : requestType === "grievance" /* GRIEVANCE */ ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20507
+ GrievanceDataSection,
20508
+ {
20509
+ grievanceOptions,
20510
+ selectedGrievances,
20511
+ setSelectedGrievances,
20512
+ isTranslating
20513
+ }
20514
+ ) : requestType === "nomination" /* NOMINATION */ ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20515
+ NominationDataSection,
20516
+ {
20517
+ nominationData,
20518
+ setNominationData,
20519
+ isTranslating
20520
+ }
20521
+ ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20522
+ "div",
20523
+ {
20524
+ style: {
20525
+ color: getVar21("--pc-text-secondary"),
20526
+ ...isPopup ? {
20527
+ padding: getVar21("--pc-spacing-md")
20528
+ } : {
20529
+ ...pcStyles.flex,
20530
+ height: "8rem",
20531
+ ...pcStyles.itemsCenter,
20532
+ ...pcStyles.justifyCenter,
20533
+ padding: getVar21("--pc-spacing-lg")
20534
+ },
20535
+ textAlign: "center"
20536
+ },
20537
+ children: t("selectRequestType")
20538
+ }
20539
+ ) })
20540
+ ]
20541
+ }
20542
+ ),
20543
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20544
+ "div",
20545
+ {
20546
+ style: {
20547
+ ...pcStyles.flex,
20548
+ ...pcStyles.flexCol,
20549
+ gap: getVar21("--pc-spacing-sm"),
20550
+ ...isPopup && !isPopupFormEnabled ? {
20551
+ pointerEvents: "none",
20552
+ opacity: 0.6
20553
+ } : {}
20554
+ },
20555
+ children: [
20556
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20557
+ fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20558
+ color: `var(--pc-text-primary)`,
20559
+ fontSize: pcStyles.textSm.fontSize,
20560
+ margin: 0
20561
+ }, children: t("supportingDocumentation") }),
20562
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20563
+ "input",
20564
+ {
20565
+ ref: fileInputRef,
20566
+ id: "privacy-file-upload",
20567
+ type: "file",
20568
+ onChange: (e) => handleFileChange(e),
20569
+ style: { display: "none" }
20570
+ }
20571
+ ),
20572
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20573
+ "div",
20574
+ {
20575
+ style: {
20576
+ ...pcStyles.flex,
20577
+ flexWrap: "wrap",
20578
+ ...pcStyles.itemsStart,
20579
+ borderRadius: pcStyles.borderRadiusMd,
20580
+ border: `1px solid var(--pc-border-color)`,
20581
+ backgroundColor: `var(--pc-bg-secondary)`,
20582
+ padding: getVar21("--pc-spacing-md"),
20583
+ minHeight: "100px",
20584
+ ...isPopup ? {
20585
+ gap: "0.5rem",
20586
+ ...pcStyles.overflowYAuto
20587
+ } : {
20588
+ gap: getVar21("--pc-spacing-sm")
20589
+ }
20590
+ },
20591
+ children: [
20592
+ isDocument && uploadedDocuments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20593
+ "div",
20594
+ {
20595
+ style: {
20596
+ ...pcStyles.flex,
20597
+ ...pcStyles.gapSm,
20598
+ ...isPopup ? { flexWrap: "wrap" } : {},
20599
+ width: "100%"
20600
+ },
20601
+ children: uploadedDocuments.map((doc) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20602
+ "div",
20603
+ {
20604
+ style: {
20605
+ position: "relative",
20606
+ ...pcStyles.flex,
20607
+ ...pcStyles.itemsCenter,
20608
+ ...pcStyles.gapXs,
20609
+ borderRadius: pcStyles.borderRadiusMd,
20610
+ border: `1px solid var(--pc-border-color)`,
20611
+ backgroundColor: `var(--pc-bg-primary)`,
20612
+ padding: getVar21("--pc-spacing-sm")
20613
+ },
20614
+ children: [
20615
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20616
+ "img",
20452
20617
  {
20453
- dataElements: groupDataElements,
20454
- selected: selectedCorrectionElements,
20455
- setSelected: setSelectedCorrectionElements,
20456
- correctionValues,
20457
- setCorrectionValues,
20458
- isTranslating
20618
+ src: fileAttach_default,
20619
+ alt: "fileAttach",
20620
+ width: 24,
20621
+ height: 24
20459
20622
  }
20460
- ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20461
- PurposeSelectionSection,
20623
+ ),
20624
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20625
+ "p",
20626
+ {
20627
+ style: {
20628
+ fontWeight: pcStyles.fontWeightMedium.fontWeight,
20629
+ color: `var(--pc-text-primary)`,
20630
+ ...isPopup ? {
20631
+ maxWidth: "100px",
20632
+ overflow: "hidden",
20633
+ textOverflow: "ellipsis",
20634
+ whiteSpace: "nowrap",
20635
+ fontSize: pcStyles.textXs.fontSize
20636
+ } : {
20637
+ fontSize: pcStyles.textSm.fontSize
20638
+ }
20639
+ },
20640
+ children: doc.name
20641
+ }
20642
+ ),
20643
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20644
+ "div",
20462
20645
  {
20463
- purposes: selectedPurposes,
20464
- setPurposes: setSelectedPurposes,
20465
- requestType,
20466
- isTranslating
20646
+ style: {
20647
+ position: "absolute",
20648
+ right: "-0.25rem",
20649
+ top: "-0.5rem",
20650
+ cursor: "pointer"
20651
+ },
20652
+ onClick: (e) => {
20653
+ e.stopPropagation();
20654
+ handleRemoveDocument(doc.uuid);
20655
+ },
20656
+ children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: {
20657
+ borderRadius: "50%",
20658
+ border: `1px solid var(--pc-border-color)`,
20659
+ backgroundColor: `var(--pc-bg-secondary)`,
20660
+ padding: "0.125rem"
20661
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_ai.AiOutlineClose, { size: 12, style: { color: "var(--pc-error)" } }) })
20467
20662
  }
20468
20663
  )
20664
+ ]
20665
+ },
20666
+ doc.uuid
20667
+ ))
20668
+ }
20669
+ ),
20670
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: {
20671
+ width: uploadedDocuments.length > 0 ? "auto" : "100%",
20672
+ ...pcStyles.flex,
20673
+ ...pcStyles.itemsCenter,
20674
+ ...pcStyles.justifyCenter,
20675
+ minHeight: uploadedDocuments.length > 0 ? "auto" : "100px"
20676
+ }, children: isDocumentUploading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: {
20677
+ padding: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-lg"),
20678
+ borderRadius: pcStyles.borderRadiusMd,
20679
+ border: uploadedDocuments.length > 0 ? `1px solid var(--pc-border-color)` : "none",
20680
+ backgroundColor: `var(--pc-bg-primary)`,
20681
+ fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20682
+ color: `var(--pc-text-primary)`,
20683
+ ...pcStyles.flex,
20684
+ ...pcStyles.itemsCenter,
20685
+ ...pcStyles.justifyCenter,
20686
+ gap: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-md"),
20687
+ width: "auto"
20688
+ }, children: [
20689
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PCLoader, { variant: "spinner", size: "sm" }),
20690
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: t("uploading") })
20691
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20692
+ "div",
20693
+ {
20694
+ style: {
20695
+ ...pcStyles.flex,
20696
+ width: uploadedDocuments.length > 0 ? "auto" : "100%",
20697
+ cursor: "pointer",
20698
+ ...pcStyles.itemsCenter,
20699
+ ...pcStyles.justifyCenter,
20700
+ gap: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-md"),
20701
+ borderRadius: pcStyles.borderRadiusMd,
20702
+ padding: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-lg"),
20703
+ border: uploadedDocuments.length > 0 ? `1px solid var(--pc-border-color)` : "none",
20704
+ backgroundColor: uploadedDocuments.length > 0 ? `var(--pc-bg-primary)` : "transparent",
20705
+ transition: "all 0.2s ease"
20706
+ },
20707
+ onMouseEnter: (e) => {
20708
+ e.currentTarget.style.backgroundColor = uploadedDocuments.length > 0 ? `var(--pc-bg-hover)` : `var(--pc-bg-hover)`;
20709
+ if (uploadedDocuments.length > 0) {
20710
+ e.currentTarget.style.borderColor = `var(--pc-primary)`;
20711
+ }
20712
+ },
20713
+ onMouseLeave: (e) => {
20714
+ e.currentTarget.style.backgroundColor = uploadedDocuments.length > 0 ? `var(--pc-bg-primary)` : "transparent";
20715
+ if (uploadedDocuments.length > 0) {
20716
+ e.currentTarget.style.borderColor = `var(--pc-border-color)`;
20717
+ }
20718
+ },
20719
+ role: "button",
20720
+ tabIndex: 0,
20721
+ "aria-label": t("uploadFile"),
20722
+ onClick: () => {
20723
+ var _a2;
20724
+ return (_a2 = document.getElementById("privacy-file-upload")) == null ? void 0 : _a2.click();
20725
+ },
20726
+ onKeyDown: (e) => {
20727
+ var _a2;
20728
+ if (e.key === "Enter" || e.key === " ") {
20729
+ e.preventDefault();
20730
+ (_a2 = document.getElementById("privacy-file-upload")) == null ? void 0 : _a2.click();
20731
+ }
20732
+ },
20733
+ children: uploadedDocuments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
20734
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20735
+ "img",
20736
+ {
20737
+ src: uploadFileIcon_default,
20738
+ width: 44,
20739
+ height: 44,
20740
+ alt: "upload"
20469
20741
  }
20470
- )
20471
- ]
20742
+ ) }),
20743
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: {
20744
+ color: "var(--pc-text-secondary)",
20745
+ fontSize: pcStyles.textSm.fontSize
20746
+ }, children: t("uploadFile") })
20747
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, ...pcStyles.gapSm }, children: [
20748
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20749
+ import_pi4.PiUploadBold,
20750
+ {
20751
+ size: isPopup ? 20 : 16,
20752
+ style: { color: "var(--pc-text-secondary)" }
20753
+ }
20754
+ ),
20755
+ !isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20756
+ fontWeight: pcStyles.fontWeightMedium.fontWeight,
20757
+ color: `var(--pc-text-primary)`
20758
+ }, children: t("uploadFileButton") })
20759
+ ] })
20472
20760
  }
20473
- );
20474
- })()
20475
- ]
20476
- }
20477
- ) : requestType === "grievance" /* GRIEVANCE */ ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20478
- GrievanceDataSection,
20479
- {
20480
- grievanceOptions,
20481
- selectedGrievances,
20482
- setSelectedGrievances,
20483
- isTranslating
20761
+ ) })
20762
+ ]
20763
+ }
20764
+ )
20765
+ ]
20766
+ }
20767
+ ),
20768
+ requestType === "ACCESS" /* ACCESS */ && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20769
+ PCSelect,
20770
+ {
20771
+ label: t("timePeriod"),
20772
+ options: timePeriodOptions,
20773
+ value: timePeriodOptions.find(
20774
+ (opt) => opt.value === timePeriod
20775
+ ) || null,
20776
+ onChange: (value) => {
20777
+ if (value) {
20778
+ setTimePeriod(value.value);
20484
20779
  }
20485
- ) : requestType === "nomination" /* NOMINATION */ ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20486
- NominationDataSection,
20487
- {
20488
- nominationData,
20489
- setNominationData,
20490
- isTranslating
20780
+ },
20781
+ disabled: isPopup && !isPopupFormEnabled
20782
+ }
20783
+ ),
20784
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20785
+ PCTextarea,
20786
+ {
20787
+ label: t("additionalNote"),
20788
+ placeholder: t("reasonOptional"),
20789
+ value: formData.additionalNote,
20790
+ onChange: (e) => setFormData({
20791
+ ...formData,
20792
+ additionalNote: e.target.value
20793
+ }),
20794
+ style: isPopup ? { minHeight: "60px" } : {},
20795
+ disabled: isPopup && !isPopupFormEnabled
20796
+ }
20797
+ ),
20798
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20799
+ PCCheckbox,
20800
+ {
20801
+ size: "sm",
20802
+ label: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
20803
+ t("confirmCheckBox"),
20804
+ " ",
20805
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20806
+ ] }),
20807
+ checked: formData.confirmCheckBox,
20808
+ onChange: (e) => setFormData({
20809
+ ...formData,
20810
+ confirmCheckBox: e.target.checked
20811
+ }),
20812
+ disabled: isPopup && !isPopupFormEnabled
20813
+ }
20814
+ ),
20815
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20816
+ "div",
20817
+ {
20818
+ style: {
20819
+ ...pcStyles.flex,
20820
+ ...pcStyles.flexRow,
20821
+ ...pcStyles.justifyEnd,
20822
+ gap: getVar21("--pc-spacing-sm"),
20823
+ ...isPopup ? {
20824
+ position: "sticky",
20825
+ bottom: 0,
20826
+ left: 0,
20827
+ right: 0,
20828
+ zIndex: 20,
20829
+ borderTop: `1px solid ${getVar21("--pc-border-color")}`,
20830
+ backgroundColor: getVar21("--pc-bg-primary"),
20831
+ padding: "0.75rem",
20832
+ marginLeft: "-0.75rem",
20833
+ marginRight: "-0.75rem"
20834
+ } : {
20835
+ marginTop: pcStyles.mtMd.marginTop
20491
20836
  }
20492
- ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20493
- "div",
20494
- {
20495
- style: {
20496
- color: getVar21("--pc-text-secondary"),
20497
- ...isPopup ? {
20498
- padding: getVar21("--pc-spacing-md")
20499
- } : {
20837
+ },
20838
+ className: "pc-flex-responsive pc-spacing-responsive",
20839
+ children: [
20840
+ isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PCButton, { variant: "secondary", onClick: onClose, style: { flexShrink: 0 }, children: (_d = t("cancel")) != null ? _d : "Cancel" }),
20841
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20842
+ PCButton,
20843
+ {
20844
+ variant: "primary",
20845
+ onClick: handleSubmitClick,
20846
+ disabled: !isFormValid || isLoading,
20847
+ isLoading,
20848
+ style: {
20500
20849
  ...pcStyles.flex,
20501
- height: "8rem",
20502
20850
  ...pcStyles.itemsCenter,
20503
20851
  ...pcStyles.justifyCenter,
20504
- padding: getVar21("--pc-spacing-lg")
20852
+ minWidth: "120px",
20853
+ flexShrink: 0,
20854
+ opacity: !isFormValid || isLoading ? 0.5 : 1,
20855
+ cursor: !isFormValid || isLoading ? "not-allowed" : isLoading ? "wait" : "pointer"
20505
20856
  },
20506
- textAlign: "center"
20507
- },
20508
- children: t("selectRequestType")
20509
- }
20510
- ) })
20511
- ]
20512
- }
20513
- ),
20514
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20515
- "div",
20516
- {
20517
- style: {
20518
- ...pcStyles.flex,
20519
- ...pcStyles.flexCol,
20520
- gap: getVar21("--pc-spacing-sm"),
20521
- ...isPopup && !isPopupFormEnabled ? {
20522
- pointerEvents: "none",
20523
- opacity: 0.6
20524
- } : {}
20525
- },
20526
- children: [
20527
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20528
- fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20529
- color: `var(--pc-text-primary)`,
20530
- fontSize: pcStyles.textSm.fontSize,
20531
- margin: 0
20532
- }, children: t("supportingDocumentation") }),
20533
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20534
- "input",
20535
- {
20536
- ref: fileInputRef,
20537
- id: "privacy-file-upload",
20538
- type: "file",
20539
- onChange: (e) => handleFileChange(e),
20540
- style: { display: "none" }
20541
- }
20542
- ),
20543
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20544
- "div",
20545
- {
20546
- style: {
20547
- ...pcStyles.flex,
20548
- flexWrap: "wrap",
20549
- ...pcStyles.itemsStart,
20550
- borderRadius: pcStyles.borderRadiusMd,
20551
- border: `1px solid var(--pc-border-color)`,
20552
- backgroundColor: `var(--pc-bg-secondary)`,
20553
- padding: getVar21("--pc-spacing-md"),
20554
- minHeight: "100px",
20555
- ...isPopup ? {
20556
- gap: "0.5rem",
20557
- ...pcStyles.overflowYAuto
20558
- } : {
20559
- gap: getVar21("--pc-spacing-sm")
20560
- }
20561
- },
20562
- children: [
20563
- isDocument && uploadedDocuments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20564
- "div",
20565
- {
20566
- style: {
20567
- ...pcStyles.flex,
20568
- ...pcStyles.gapSm,
20569
- ...isPopup ? { flexWrap: "wrap" } : {},
20570
- width: "100%"
20571
- },
20572
- children: uploadedDocuments.map((doc) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20573
- "div",
20574
- {
20575
- style: {
20576
- position: "relative",
20577
- ...pcStyles.flex,
20578
- ...pcStyles.itemsCenter,
20579
- ...pcStyles.gapXs,
20580
- borderRadius: pcStyles.borderRadiusMd,
20581
- border: `1px solid var(--pc-border-color)`,
20582
- backgroundColor: `var(--pc-bg-primary)`,
20583
- padding: getVar21("--pc-spacing-sm")
20584
- },
20585
- children: [
20586
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20587
- "img",
20588
- {
20589
- src: fileAttach_default,
20590
- alt: "fileAttach",
20591
- width: 24,
20592
- height: 24
20593
- }
20594
- ),
20595
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20596
- "p",
20597
- {
20598
- style: {
20599
- fontWeight: pcStyles.fontWeightMedium.fontWeight,
20600
- color: `var(--pc-text-primary)`,
20601
- ...isPopup ? {
20602
- maxWidth: "100px",
20603
- overflow: "hidden",
20604
- textOverflow: "ellipsis",
20605
- whiteSpace: "nowrap",
20606
- fontSize: pcStyles.textXs.fontSize
20607
- } : {
20608
- fontSize: pcStyles.textSm.fontSize
20609
- }
20610
- },
20611
- children: doc.name
20612
- }
20613
- ),
20614
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20615
- "div",
20616
- {
20617
- style: {
20618
- position: "absolute",
20619
- right: "-0.25rem",
20620
- top: "-0.5rem",
20621
- cursor: "pointer"
20622
- },
20623
- onClick: (e) => {
20624
- e.stopPropagation();
20625
- handleRemoveDocument(doc.uuid);
20626
- },
20627
- children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: {
20628
- borderRadius: "50%",
20629
- border: `1px solid var(--pc-border-color)`,
20630
- backgroundColor: `var(--pc-bg-secondary)`,
20631
- padding: "0.125rem"
20632
- }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_ai.AiOutlineClose, { size: 12, style: { color: "var(--pc-error)" } }) })
20633
- }
20634
- )
20635
- ]
20636
- },
20637
- doc.uuid
20638
- ))
20639
- }
20640
- ),
20641
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: {
20642
- width: uploadedDocuments.length > 0 ? "auto" : "100%",
20643
- ...pcStyles.flex,
20644
- ...pcStyles.itemsCenter,
20645
- ...pcStyles.justifyCenter,
20646
- minHeight: uploadedDocuments.length > 0 ? "auto" : "100px"
20647
- }, children: isDocumentUploading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: {
20648
- padding: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-lg"),
20649
- borderRadius: pcStyles.borderRadiusMd,
20650
- border: uploadedDocuments.length > 0 ? `1px solid var(--pc-border-color)` : "none",
20651
- backgroundColor: `var(--pc-bg-primary)`,
20652
- fontWeight: pcStyles.fontWeightSemibold.fontWeight,
20653
- color: `var(--pc-text-primary)`,
20654
- ...pcStyles.flex,
20655
- ...pcStyles.itemsCenter,
20656
- ...pcStyles.justifyCenter,
20657
- gap: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-md"),
20658
- width: "auto"
20659
- }, children: [
20660
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PCLoader, { variant: "spinner", size: "sm" }),
20661
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: t("uploading") })
20662
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20663
- "div",
20664
- {
20665
- style: {
20666
- ...pcStyles.flex,
20667
- width: uploadedDocuments.length > 0 ? "auto" : "100%",
20668
- cursor: "pointer",
20669
- ...pcStyles.itemsCenter,
20670
- ...pcStyles.justifyCenter,
20671
- gap: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-md"),
20672
- borderRadius: pcStyles.borderRadiusMd,
20673
- padding: uploadedDocuments.length > 0 ? getVar21("--pc-spacing-sm") : getVar21("--pc-spacing-lg"),
20674
- border: uploadedDocuments.length > 0 ? `1px solid var(--pc-border-color)` : "none",
20675
- backgroundColor: uploadedDocuments.length > 0 ? `var(--pc-bg-primary)` : "transparent",
20676
- transition: "all 0.2s ease"
20677
- },
20678
- onMouseEnter: (e) => {
20679
- e.currentTarget.style.backgroundColor = uploadedDocuments.length > 0 ? `var(--pc-bg-hover)` : `var(--pc-bg-hover)`;
20680
- if (uploadedDocuments.length > 0) {
20681
- e.currentTarget.style.borderColor = `var(--pc-primary)`;
20682
- }
20683
- },
20684
- onMouseLeave: (e) => {
20685
- e.currentTarget.style.backgroundColor = uploadedDocuments.length > 0 ? `var(--pc-bg-primary)` : "transparent";
20686
- if (uploadedDocuments.length > 0) {
20687
- e.currentTarget.style.borderColor = `var(--pc-border-color)`;
20688
- }
20689
- },
20690
- role: "button",
20691
- tabIndex: 0,
20692
- "aria-label": t("uploadFile"),
20693
- onClick: () => {
20694
- var _a2;
20695
- return (_a2 = document.getElementById("privacy-file-upload")) == null ? void 0 : _a2.click();
20696
- },
20697
- onKeyDown: (e) => {
20698
- var _a2;
20699
- if (e.key === "Enter" || e.key === " ") {
20700
- e.preventDefault();
20701
- (_a2 = document.getElementById("privacy-file-upload")) == null ? void 0 : _a2.click();
20702
- }
20703
- },
20704
- children: uploadedDocuments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
20705
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20706
- "img",
20707
- {
20708
- src: uploadFileIcon_default,
20709
- width: 44,
20710
- height: 44,
20711
- alt: "upload"
20712
- }
20713
- ) }),
20714
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: {
20715
- color: "var(--pc-text-secondary)",
20716
- fontSize: pcStyles.textSm.fontSize
20717
- }, children: t("uploadFile") })
20718
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, ...pcStyles.gapSm }, children: [
20719
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20720
- import_pi4.PiUploadBold,
20721
- {
20722
- size: isPopup ? 20 : 16,
20723
- style: { color: "var(--pc-text-secondary)" }
20724
- }
20725
- ),
20726
- !isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { style: {
20727
- fontWeight: pcStyles.fontWeightMedium.fontWeight,
20728
- color: `var(--pc-text-primary)`
20729
- }, children: t("uploadFileButton") })
20730
- ] })
20731
- }
20732
- ) })
20733
- ]
20734
- }
20735
- )
20736
- ]
20737
- }
20738
- ),
20739
- requestType === "ACCESS" /* ACCESS */ && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20740
- PCSelect,
20741
- {
20742
- label: t("timePeriod"),
20743
- options: timePeriodOptions,
20744
- value: timePeriodOptions.find(
20745
- (opt) => opt.value === timePeriod
20746
- ) || null,
20747
- onChange: (value) => {
20748
- if (value) {
20749
- setTimePeriod(value.value);
20750
- }
20751
- },
20752
- disabled: isPopup && !isPopupFormEnabled
20753
- }
20754
- ),
20755
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20756
- PCTextarea,
20757
- {
20758
- label: t("additionalNote"),
20759
- placeholder: t("reasonOptional"),
20760
- value: formData.additionalNote,
20761
- onChange: (e) => setFormData({
20762
- ...formData,
20763
- additionalNote: e.target.value
20764
- }),
20765
- style: isPopup ? { minHeight: "60px" } : {},
20766
- disabled: isPopup && !isPopupFormEnabled
20767
- }
20768
- ),
20769
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20770
- PCCheckbox,
20771
- {
20772
- size: "sm",
20773
- label: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
20774
- t("confirmCheckBox"),
20775
- " ",
20776
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { color: getVar21("--pc-error") }, children: "*" })
20777
- ] }),
20778
- checked: formData.confirmCheckBox,
20779
- onChange: (e) => setFormData({
20780
- ...formData,
20781
- confirmCheckBox: e.target.checked
20782
- }),
20783
- disabled: isPopup && !isPopupFormEnabled
20784
- }
20785
- ),
20786
- /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
20787
- "div",
20788
- {
20789
- style: {
20790
- ...pcStyles.flex,
20791
- ...pcStyles.flexRow,
20792
- ...pcStyles.justifyEnd,
20793
- gap: getVar21("--pc-spacing-sm"),
20794
- ...isPopup ? {
20795
- position: "sticky",
20796
- bottom: 0,
20797
- left: 0,
20798
- right: 0,
20799
- zIndex: 20,
20800
- borderTop: `1px solid ${getVar21("--pc-border-color")}`,
20801
- backgroundColor: getVar21("--pc-bg-primary"),
20802
- padding: "0.75rem",
20803
- marginLeft: "-0.75rem",
20804
- marginRight: "-0.75rem"
20805
- } : {
20806
- marginTop: pcStyles.mtMd.marginTop
20807
- }
20808
- },
20809
- className: "pc-flex-responsive pc-spacing-responsive",
20810
- children: [
20811
- isPopup && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PCButton, { variant: "secondary", onClick: onClose, style: { flexShrink: 0 }, children: (_d = t("cancel")) != null ? _d : "Cancel" }),
20812
- /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20813
- PCButton,
20814
- {
20815
- variant: "primary",
20816
- onClick: handleSubmitClick,
20817
- disabled: !isFormValid || isLoading,
20818
- isLoading,
20819
- style: {
20820
- ...pcStyles.flex,
20821
- ...pcStyles.itemsCenter,
20822
- ...pcStyles.justifyCenter,
20823
- minWidth: "120px",
20824
- flexShrink: 0,
20825
- opacity: !isFormValid || isLoading ? 0.5 : 1,
20826
- cursor: !isFormValid || isLoading ? "not-allowed" : isLoading ? "wait" : "pointer"
20827
- },
20828
- children: t("submit")
20829
- }
20830
- )
20831
- ]
20832
- }
20833
- )
20834
- ]
20857
+ children: t("submit")
20858
+ }
20859
+ )
20860
+ ]
20861
+ }
20862
+ )
20863
+ ]
20864
+ }
20865
+ )
20866
+ ] })
20867
+ }
20868
+ )
20869
+ ] }) }),
20870
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20871
+ PCModal,
20872
+ {
20873
+ isOpen: isErasureConsentModalOpen,
20874
+ onClose: handleErasureModalClose,
20875
+ size: "md",
20876
+ showCloseButton: false,
20877
+ footer: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-erasure-modal-footer", children: [
20878
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20879
+ PCButton,
20880
+ {
20881
+ variant: "secondary",
20882
+ onClick: () => handleErasureModalChoice(false),
20883
+ disabled: isLoading,
20884
+ children: t("revokeConsentNo")
20885
+ }
20886
+ ),
20887
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20888
+ PCButton,
20889
+ {
20890
+ variant: "primary",
20891
+ onClick: () => handleErasureModalChoice(true),
20892
+ disabled: isLoading,
20893
+ isLoading,
20894
+ children: t("revokeConsentYes")
20835
20895
  }
20836
20896
  )
20897
+ ] }),
20898
+ children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-erasure-modal-content", children: [
20899
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-erasure-modal-header", children: [
20900
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "pc-erasure-modal-icon", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_fi.FiAlertCircle, { size: 24 }) }),
20901
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pc-erasure-modal-title", children: t("revokeConsentModalTitle") }),
20902
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pc-erasure-modal-question", children: t("revokeConsentModalQuestion") })
20903
+ ] }),
20904
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "pc-erasure-modal-purposes", children: [
20905
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pc-erasure-modal-purposes-label", children: t("revokeConsentModalPurposesLabel") }),
20906
+ selectedErasurePurposeList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
20907
+ selectedErasurePurposeList.slice(0, MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL).map((name) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "pc-erasure-modal-purpose-item", children: name }, name)),
20908
+ selectedErasurePurposeList.length > MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pc-erasure-modal-purposes-placeholder", children: t("revokeConsentModalAndMore", {
20909
+ count: selectedErasurePurposeList.length - MAX_DISPLAYED_PURPOSE_NAMES_IN_ERASURE_MODAL
20910
+ }) })
20911
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pc-erasure-modal-purposes-placeholder", children: t("revokeConsentModalYourPurposes") })
20912
+ ] }),
20913
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "pc-erasure-modal-warning", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { className: "pc-erasure-modal-warning-text", children: [
20914
+ /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pc-erasure-modal-warning-label", children: t("revokeConsentModalIfYesLabel") }),
20915
+ " ",
20916
+ t("revokeConsentModalIfYesBody")
20917
+ ] }) })
20837
20918
  ] })
20838
20919
  }
20839
20920
  )
20840
- ] }) }) });
20921
+ ] });
20841
20922
  }
20842
20923
 
20843
20924
  // src/RedactoPrivacyCenter/components/CaseHistory.tsx