"use strict";

exports.__esModule = true;
exports._CustomFieldForm = exports.CustomFieldForm = void 0;
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _react2 = require("@wix/bex-core/react");
var _CustomFieldTypeDropdown = require("./CustomFieldTypeDropdown");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Trans = require("../Trans");
var _mobx = require("mobx");
var _CustomFieldFormPiiFields = require("./CustomFieldFormPiiFields");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldModal/CustomFieldForm.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const _CustomFieldForm = props => {
  var _defaultPermissions$i, _defaultPermissions$s, _defaultPermissions$i2, _defaultPermissions$s2;
  const {
    state
  } = props;
  const {
    form: {
      $: {
        key,
        type,
        name,
        readApps,
        readUsers,
        writeApps,
        writeUsers,
        containsPii
      }
    },
    errorToastConfig,
    disabledFields: {
      permissions
    },
    mode,
    settings,
    customFieldModalBiReporter,
    generateUniqueKey,
    setKeyFieldIfNotDirty,
    dataExtensionState: {
      defaultPermissions
    }
  } = state;
  const {
    reportAdvancedSettingsClick,
    reportKeyFormFieldChange
  } = customFieldModalBiReporter;
  const {
    translate: t,
    environment: {
      language
    }
  } = (0, _react2.useWixPatternsContainer)();
  (0, _react.useEffect)(() => customFieldModalBiReporter.init(), []);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: 552,
    direction: "vertical",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 5
    }
  }, errorToastConfig && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    position: "absolute",
    top: "24px",
    left: "49%",
    transform: "translateX(-50%)",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.FloatingNotification, {
    dataHook: "custom-field-modal-error-state",
    type: "destructive",
    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 25
      }
    }),
    text: errorToastConfig.message,
    textButtonProps: (errorToastConfig == null ? void 0 : errorToastConfig.action) && {
      label: errorToastConfig.action.text,
      onClick: () => {
        var _errorToastConfig$act;
        return errorToastConfig == null || (_errorToastConfig$act = errorToastConfig.action) == null || _errorToastConfig$act.onClick == null ? void 0 : _errorToastConfig$act.onClick();
      }
    },
    onClose: () => {
      (0, _mobx.runInAction)(() => {
        state.errorToastConfig = undefined;
      });
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 11
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    paddingLeft: "SP1",
    paddingRight: "SP1",
    direction: "vertical",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 6,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
    dataHook: "custom-field-modal-field-type",
    required: true,
    label: t('cairo.customFields.addCustomField.modal.fieldType'),
    status: type.hasError ? 'error' : undefined,
    statusMessage: type.error,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 94,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_CustomFieldTypeDropdown.CustomFieldTypeDropdown, {
    state: state,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 15
    }
  }), mode === 'edit' && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 103,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "tiny",
    secondary: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 104,
      columnNumber: 19
    }
  }, t('cairo.customFields.editCustomField.fieldType.tooltip'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 6,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 111,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
    dataHook: "custom-field-modal-field-name",
    required: true,
    label: t('cairo.customFields.addCustomField.modal.fieldName'),
    status: name.hasError ? 'error' : undefined,
    statusMessage: name.error,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 112,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
    dataHook: "custom-field-modal-name",
    onChange: e => {
      name.onChange(e.target.value);
      setKeyFieldIfNotDirty(generateUniqueKey(e.target.value));
    },
    value: name.value,
    maxLength: 64,
    placeholder: state.namePlaceholder,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 119,
      columnNumber: 15
    }
  }))), state.dataExtensionState.containsPii && /*#__PURE__*/_react.default.createElement(_CustomFieldFormPiiFields.PiiFormFields, {
    containsPii: {
      value: containsPii.value,
      onChange: containsPii.onChange
    },
    mode: mode,
    language: language,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 13
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP4",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 142,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    dataHook: "custom-field-modal-settings-button",
    size: "small",
    suffixIcon: settings.isOn ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronUp, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 146,
        columnNumber: 41
      }
    }) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronDown, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 146,
        columnNumber: 57
      }
    }),
    onClick: () => settings.toggle(),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 143,
      columnNumber: 11
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings'))), /*#__PURE__*/_react.default.createElement(_designSystem.Collapse, {
    open: settings.isOn,
    onExpandAnimationEnd: () => {
      reportAdvancedSettingsClick('Open');
    },
    onCollapseAnimationEnd: () => {
      reportAdvancedSettingsClick('Close');
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 152,
      columnNumber: 9
    }
  }, (!(defaultPermissions != null && (_defaultPermissions$i = defaultPermissions.installedApps) != null && _defaultPermissions$i.hide) || !(defaultPermissions != null && (_defaultPermissions$s = defaultPermissions.siteVisitors) != null && _defaultPermissions$s.hide)) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP4",
    direction: "vertical",
    width: "320px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 163,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 164,
      columnNumber: 15
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.readPermissions')), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "tiny",
    light: true,
    secondary: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 169,
      columnNumber: 15
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip'))), !(defaultPermissions != null && (_defaultPermissions$i2 = defaultPermissions.installedApps) != null && _defaultPermissions$i2.hide) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP3",
    dataHook: "custom-field-modal-apps-section",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 177,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 178,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 4,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 179,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 180,
      columnNumber: 19
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 181,
      columnNumber: 21
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.externalApps')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
    size: "small",
    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
      i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 189,
        columnNumber: 25
      }
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 186,
      columnNumber: 21
    }
  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 2,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 194,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
    dataHook: "custom-field-modal-read-apps",
    disabled: mode === 'edit' && permissions.read.apps,
    size: "small",
    onChange: () => {
      readApps.onChange(!readApps.value);
    },
    checked: readApps.value,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 195,
      columnNumber: 19
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.read'))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 2,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 209,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
    dataHook: "custom-field-modal-write-apps",
    disabled: mode === 'edit' && permissions.write.apps,
    size: "small",
    onChange: () => {
      writeApps.onChange(!writeApps.value);
    },
    checked: writeApps.value,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      columnNumber: 19
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.write'))))), !(defaultPermissions != null && (_defaultPermissions$s2 = defaultPermissions.siteVisitors) != null && _defaultPermissions$s2.hide) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP2",
    dataHook: "custom-field-modal-users-section",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 229,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 230,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 4,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 231,
      columnNumber: 19
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 232,
      columnNumber: 21
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 233,
      columnNumber: 23
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
    size: "small",
    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
      i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip",
      components: {
        learnMore: /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
          underline: "always",
          skin: "light",
          size: "small",
          as: "a",
          rel: "noopener",
          target: "_blank",
          href: `https://support.wix.com/${language}/article/cms-about-datasets`,
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 245,
            columnNumber: 33
          }
        })
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 241,
        columnNumber: 27
      }
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 238,
      columnNumber: 23
    }
  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 2,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 261,
      columnNumber: 19
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
    dataHook: "custom-field-modal-read-users",
    disabled: mode === 'edit' && permissions.read.users,
    size: "small",
    onChange: () => {
      readUsers.onChange(!readUsers.value);
    },
    checked: readUsers.value,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 262,
      columnNumber: 21
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.read'))), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 2,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 276,
      columnNumber: 19
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
    dataHook: "custom-field-modal-write-users",
    disabled: mode === 'edit' && permissions.write.users,
    size: "small",
    onChange: () => {
      writeUsers.onChange(!writeUsers.value);
    },
    checked: writeUsers.value,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 277,
      columnNumber: 21
    }
  }, t('cairo.customFields.addCustomField.modal.advancedSettings.write'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 293,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "tiny",
    light: true,
    secondary: true,
    dataHook: "permissions-note",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 294,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
    i18nKey: "cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note",
    components: {
      learnMore: /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
        size: "tiny",
        as: "a",
        rel: "noopener",
        target: "_blank",
        href: `https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 299,
          columnNumber: 25
        }
      })
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 295,
      columnNumber: 19
    }
  })))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 313,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP3",
    marginBottom: "SP3",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 314,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 315,
      columnNumber: 15
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
    dataHook: "custom-field-modal-field-key",
    required: true,
    label: t('cairo.customFields.addCustomField.modal.advancedSettings.key.title'),
    status: key.hasError ? 'error' : undefined,
    statusMessage: key.error,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 318,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 327,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 6,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 328,
      columnNumber: 17
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
    dataHook: "custom-field-modal-key",
    disabled: mode === 'edit',
    value: key.value,
    onChange: e => {
      key.onChange(e.target.value.toLowerCase());
      reportKeyFormFieldChange();
    },
    placeholder: t('cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder'),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 329,
      columnNumber: 19
    }
  })))), !key.hasError && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    marginTop: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 346,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "tiny",
    secondary: true,
    dataHook: "custom-field-modal-fieldKey-tooltip",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 347,
      columnNumber: 17
    }
  }, mode === 'new' ? t('cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip') : t('cairo.customFields.editCustomField.fieldKey.tooltip')))))));
};
exports._CustomFieldForm = _CustomFieldForm;
const CustomFieldForm = exports.CustomFieldForm = (0, _mobxReactLite.observer)(_CustomFieldForm);
//# sourceMappingURL=CustomFieldForm.js.map