@atlaskit/feedback-collector 14.3.3 → 14.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/feedback-collector
 
+## 14.4.0
+
+### Minor Changes
+
+- [`2b6afea21ef37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b6afea21ef37) -
+  Move the privacy policy link out of the label element
+- [`fe108a4620163`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe108a4620163) -
+  Product/App term refresh
+
+## 14.3.4
+
+### Patch Changes
+
+- [`94ba8d27dba35`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94ba8d27dba35) -
+  [ux] enable the submit button by default for a11y, validate and prevent submission if required
+  fields are not complete
+
 ## 14.3.3
 
 ### Patch Changes

package/dist/cjs/components/FeedbackCollector.js

@@ -163,7 +163,7 @@ var FeedbackCollector = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPackageVersion",
     value: function getPackageVersion() {
-      return "14.3.2" || 'Unknown, at least 11.0.0';
+      return "14.3.4" || 'Unknown, at least 11.0.0';
     }
   }, {
     key: "getEntitlementInformation",

package/dist/cjs/components/FeedbackFlag.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _flag = require("@atlaskit/flag");
 var _statusSuccessCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/status-success--check-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../messages");
 var _IntlProviderWithResolvedMessages = require("./IntlProviderWithResolvedMessages");
@@ -24,7 +25,7 @@ var FeedbackFlag = function FeedbackFlag(_ref) {
       label: "Success"
     }),
     id: "feedbackSent",
-    description: description || formatMessage(_messages.messages.feedbackSuccessFlagDescription),
+    description: description || formatMessage((0, _platformFeatureFlags.fg)('product-terminology-refresh') ? _messages.messages.feedbackSuccessFlagDescriptionAppify : _messages.messages.feedbackSuccessFlagDescription),
     title: title || formatMessage(_messages.messages.feedbackSuccessFlagTitle)
   });
 };

package/dist/cjs/components/FeedbackForm.js

@@ -19,6 +19,7 @@ var _checkbox = require("@atlaskit/checkbox");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _link = _interopRequireDefault(require("@atlaskit/link"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
 var _select = _interopRequireDefault(require("@atlaskit/select"));
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
@@ -74,6 +75,10 @@ var FeedbackForm = function FeedbackForm(_ref) {
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
     isSubmitting = _useState0[0],
     setIsSubmitting = _useState0[1];
+  var _useState1 = (0, _react.useState)({}),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    validationErrors = _useState10[0],
+    setValidationErrors = _useState10[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isTypeSelected = function isTypeSelected() {
@@ -81,7 +86,26 @@ var FeedbackForm = function FeedbackForm(_ref) {
   };
   var canShowTextField = isTypeSelected() || !showTypeField;
   var hasDescription = description || hasDescriptionDefaultValue;
-  var isDisabled = disableSubmitButton || (showTypeField ? !isTypeSelected() || !hasDescription : !hasDescription);
+
+  // Feature flag determines validation behavior
+  var useNewValidation = (0, _platformFeatureFlags.fg)('feedback-collector-custom-validation');
+  var isDisabled = useNewValidation ? isSubmitting || disableSubmitButton // New: only disable when submitting or explicitly disabled
+  : disableSubmitButton || (showTypeField ? !isTypeSelected() || !hasDescription : !hasDescription); // Old: disable based on form validation
+
+  var getValidationErrors = function getValidationErrors() {
+    var errors = {};
+
+    // Validate type selection if showTypeField is true
+    if (showTypeField && !isTypeSelected()) {
+      errors.type = formatMessage(_messages.messages.validationErrorTypeRequired);
+    }
+
+    // Validate description if showDefaultTextFields is true
+    if (showDefaultTextFields && !hasDescription) {
+      errors.description = formatMessage(_messages.messages.validationErrorDescriptionRequired);
+    }
+    return errors;
+  };
   var getFieldLabels = function getFieldLabels(record) {
     var _record$bug, _record$comment, _record$suggestion, _record$question, _record$empty, _record$not_relevant, _record$not_accurate, _record$too_slow, _record$unhelpful_lin, _record$other;
     return {
@@ -127,24 +151,42 @@ var FeedbackForm = function FeedbackForm(_ref) {
     shouldScrollInViewport: true
   }, /*#__PURE__*/_react.default.createElement(_form.default, {
     onSubmit: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var errors;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            if (!useNewValidation) {
+              _context.next = 5;
+              break;
+            }
+            // New validation: validate on submit and show errors
+            errors = getValidationErrors(); // If there are validation errors, show them and don't submit
+            if (!(Object.keys(errors).length > 0)) {
+              _context.next = 5;
+              break;
+            }
+            setValidationErrors(errors);
+            return _context.abrupt("return");
+          case 5:
+            // Submit the form (both old and new validation paths reach here)
             setIsSubmitting(true);
-            _context.next = 3;
+            _context.prev = 6;
+            _context.next = 9;
             return onSubmit({
               canBeContacted: canBeContacted,
               description: description,
               enrollInResearchGroup: enrollInResearchGroup,
               type: type
             });
-          case 3:
+          case 9:
+            _context.prev = 9;
             setIsSubmitting(false);
-          case 4:
+            return _context.finish(9);
+          case 12:
           case "end":
             return _context.stop();
         }
-      }, _callee);
+      }, _callee, null, [[6,, 9, 12]]);
     }))
   }, function (_ref3) {
     var formProps = _ref3.formProps;
@@ -166,12 +208,20 @@ var FeedbackForm = function FeedbackForm(_ref) {
       var _ref4$fieldProps = _ref4.fieldProps,
         id = _ref4$fieldProps.id,
         restProps = (0, _objectWithoutProperties2.default)(_ref4$fieldProps, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, restProps, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({}, restProps, {
         onChange: function onChange(option) {
           if (!option || option instanceof Array) {
             return;
           }
           setType(option.value);
+          // Clear validation error when user selects a type (only for new validation)
+          if (useNewValidation && validationErrors.type) {
+            setValidationErrors(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                type: undefined
+              });
+            });
+          }
         },
         menuPortalTarget: document.body,
         styles: {
@@ -187,22 +237,30 @@ var FeedbackForm = function FeedbackForm(_ref) {
         ref: focusRef,
         placeholder: getDefaultPlaceholder(feedbackGroupLabels),
         inputId: id
-      }));
+      })), useNewValidation && validationErrors.type && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, validationErrors.type));
     }) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
       label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(_messages.messages.defaultCustomTextAreaLabel),
       isRequired: true,
       name: "description"
     }, function (_ref5) {
       var fieldProps = _ref5.fieldProps;
-      return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
         name: "foo",
         minimumRows: 6,
         placeholder: summaryPlaceholder || undefined,
         onChange: function onChange(e) {
-          return setDescription(e.target.value);
+          setDescription(e.target.value);
+          // Clear validation error when user types
+          if (useNewValidation && validationErrors.description) {
+            setValidationErrors(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                description: undefined
+              });
+            });
+          }
         },
         value: description
-      }));
+      })), useNewValidation && validationErrors.description && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, validationErrors.description));
     }), !anonymousFeedback && /*#__PURE__*/_react.default.createElement(_form.Fieldset, null, /*#__PURE__*/_react.default.createElement("legend", {
       "aria-hidden": false,
       hidden: true
@@ -210,23 +268,24 @@ var FeedbackForm = function FeedbackForm(_ref) {
       name: "can-be-contacted"
     }, function (_ref6) {
       var fieldProps = _ref6.fieldProps;
-      return /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
         "aria-describedby": undefined // JCA11Y-1988
         ,
-        label: canBeContactedLabel || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.canBeContactedLabel, {
-          values: {
-            a: function a(chunks) {
-              return /*#__PURE__*/_react.default.createElement(_link.default, {
-                href: "https://www.atlassian.com/legal/privacy-policy",
-                target: "_blank"
-              }, chunks);
-            }
-          }
-        })),
+        label: canBeContactedLabel || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _platformFeatureFlags.fg)('product-terminology-refresh') ? _messages.messages.canBeContactedLabelAppify : _messages.messages.canBeContactedLabel),
         onChange: function onChange(event) {
           return setCanBeContacted(event.target.checked);
         }
-      }));
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          paddingInlineStart: "var(--ds-space-300, 24px)",
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          marginInlineStart: "var(--ds-space-050, 4px)"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_link.default, {
+        href: "https://www.atlassian.com/legal/privacy-policy",
+        target: "_blank"
+      }, formatMessage(_messages.messages.privacyPolicy))));
     }), /*#__PURE__*/_react.default.createElement(_form.Field, {
       name: "enroll-in-research-group"
     }, function (_ref7) {

package/dist/cjs/messages.js

@@ -18,9 +18,14 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   canBeContactedLabel: {
     id: 'feedback-collector.can-be-contacted.label',
-    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian products and services. I acknowledge the <a>Atlassian Privacy Policy</a>.',
+    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian products and services. I acknowledge the Atlassian Privacy Policy.',
     description: 'The checkbox label to give consent to be contacted about their feedback'
   },
+  privacyPolicy: {
+    id: 'feedback-collector.privacy-policy',
+    defaultMessage: 'Atlassian Privacy Policy',
+    description: 'The text content for the Privacy Policy link'
+  },
   summaryPlaceholder: {
     id: 'feedback-collector.summary-placeholder',
     defaultMessage: "Let us know what's on your mind",
@@ -155,5 +160,25 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'feedback-collector.default.custom.textarea.label',
     defaultMessage: "What's on your mind?",
     description: 'The textarea label where users can write their suggestion for custom feedback collector'
+  },
+  canBeContactedLabelAppify: {
+    id: 'feedback-collector.can-be-contacted.label-appify',
+    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian apps and services. I acknowledge the <a>Atlassian Privacy Policy</a>.',
+    description: 'The checkbox label to give consent to be contacted about their feedback'
+  },
+  feedbackSuccessFlagDescriptionAppify: {
+    id: 'feedback-collector.success-flag.description-appify',
+    defaultMessage: 'Your valuable feedback helps us continually improve our apps.',
+    description: 'Description shown when feedback is successfully submitted'
+  },
+  validationErrorTypeRequired: {
+    id: 'feedback-collector.validation.type.required',
+    defaultMessage: 'Please select a feedback type',
+    description: 'Error message when feedback type is not selected'
+  },
+  validationErrorDescriptionRequired: {
+    id: 'feedback-collector.validation.description.required',
+    defaultMessage: 'Please provide a description',
+    description: 'Error message when description is not provided'
   }
 });

package/dist/es2019/components/FeedbackCollector.js

@@ -91,7 +91,7 @@ export default class FeedbackCollector extends Component {
     return FeedbackCollector.defaultProps.url;
   }
   getPackageVersion() {
-    return "14.3.2" || 'Unknown, at least 11.0.0';
+    return "14.3.4" || 'Unknown, at least 11.0.0';
   }
   async getEntitlementInformation() {
     var _entitlementDetails, _entitlementDetails2, _productName, _entitlement, _productEntitlement;

package/dist/es2019/components/FeedbackFlag.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { AutoDismissFlag } from '@atlaskit/flag';
 import SuccessIcon from '@atlaskit/icon/core/migration/status-success--check-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { G300 } from '@atlaskit/theme/colors';
 import { messages } from '../messages';
 import { IntlProviderWithResolvedMessages } from './IntlProviderWithResolvedMessages';
@@ -19,7 +20,7 @@ const FeedbackFlag = ({
       label: "Success"
     }),
     id: "feedbackSent",
-    description: description || formatMessage(messages.feedbackSuccessFlagDescription),
+    description: description || formatMessage(fg('product-terminology-refresh') ? messages.feedbackSuccessFlagDescriptionAppify : messages.feedbackSuccessFlagDescription),
     title: title || formatMessage(messages.feedbackSuccessFlagTitle)
   });
 };

package/dist/es2019/components/FeedbackForm.js

@@ -3,9 +3,10 @@ import React, { useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import { Checkbox } from '@atlaskit/checkbox';
-import Form, { Field, Fieldset, RequiredAsterisk } from '@atlaskit/form';
+import Form, { ErrorMessage, Field, Fieldset, RequiredAsterisk } from '@atlaskit/form';
 import Link from '@atlaskit/link';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import SectionMessage from '@atlaskit/section-message';
 import Select from '@atlaskit/select';
 import TextArea from '@atlaskit/textarea';
@@ -39,13 +40,33 @@ const FeedbackForm = ({
   const [enrollInResearchGroup, setEnrollInResearchGroup] = useState(false);
   const [type, setType] = useState('empty');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [validationErrors, setValidationErrors] = useState({});
   const {
     formatMessage
   } = useIntl();
   const isTypeSelected = () => type !== 'empty';
   const canShowTextField = isTypeSelected() || !showTypeField;
   const hasDescription = description || hasDescriptionDefaultValue;
-  const isDisabled = disableSubmitButton || (showTypeField ? !isTypeSelected() || !hasDescription : !hasDescription);
+
+  // Feature flag determines validation behavior
+  const useNewValidation = fg('feedback-collector-custom-validation');
+  const isDisabled = useNewValidation ? isSubmitting || disableSubmitButton // New: only disable when submitting or explicitly disabled
+  : disableSubmitButton || (showTypeField ? !isTypeSelected() || !hasDescription : !hasDescription); // Old: disable based on form validation
+
+  const getValidationErrors = () => {
+    const errors = {};
+
+    // Validate type selection if showTypeField is true
+    if (showTypeField && !isTypeSelected()) {
+      errors.type = formatMessage(messages.validationErrorTypeRequired);
+    }
+
+    // Validate description if showDefaultTextFields is true
+    if (showDefaultTextFields && !hasDescription) {
+      errors.description = formatMessage(messages.validationErrorDescriptionRequired);
+    }
+    return errors;
+  };
   const getFieldLabels = record => {
     var _record$bug, _record$comment, _record$suggestion, _record$question, _record$empty, _record$not_relevant, _record$not_accurate, _record$too_slow, _record$unhelpful_lin, _record$other;
     return {
@@ -91,14 +112,29 @@ const FeedbackForm = ({
     shouldScrollInViewport: true
   }, /*#__PURE__*/React.createElement(Form, {
     onSubmit: async () => {
+      if (useNewValidation) {
+        // New validation: validate on submit and show errors
+        const errors = getValidationErrors();
+
+        // If there are validation errors, show them and don't submit
+        if (Object.keys(errors).length > 0) {
+          setValidationErrors(errors);
+          return;
+        }
+      }
+
+      // Submit the form (both old and new validation paths reach here)
       setIsSubmitting(true);
-      await onSubmit({
-        canBeContacted,
-        description,
-        enrollInResearchGroup,
-        type
-      });
-      setIsSubmitting(false);
+      try {
+        await onSubmit({
+          canBeContacted,
+          description,
+          enrollInResearchGroup,
+          type
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
     }
   }, ({
     formProps
@@ -121,12 +157,19 @@ const FeedbackForm = ({
       id,
       ...restProps
     }
-  }) => /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
     onChange: option => {
       if (!option || option instanceof Array) {
         return;
       }
       setType(option.value);
+      // Clear validation error when user selects a type (only for new validation)
+      if (useNewValidation && validationErrors.type) {
+        setValidationErrors(prev => ({
+          ...prev,
+          type: undefined
+        }));
+      }
     },
     menuPortalTarget: document.body,
     styles: {
@@ -141,38 +184,50 @@ const FeedbackForm = ({
     ref: focusRef,
     placeholder: getDefaultPlaceholder(feedbackGroupLabels),
     inputId: id
-  }))) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+  })), useNewValidation && validationErrors.type && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.type))) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
     label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(messages.defaultCustomTextAreaLabel),
     isRequired: true,
     name: "description"
   }, ({
     fieldProps
-  }) => /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
     name: "foo",
     minimumRows: 6,
     placeholder: summaryPlaceholder || undefined,
-    onChange: e => setDescription(e.target.value),
+    onChange: e => {
+      setDescription(e.target.value);
+      // Clear validation error when user types
+      if (useNewValidation && validationErrors.description) {
+        setValidationErrors(prev => ({
+          ...prev,
+          description: undefined
+        }));
+      }
+    },
     value: description
-  }))), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", {
+  })), useNewValidation && validationErrors.description && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.description))), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", {
     "aria-hidden": false,
     hidden: true
   }, "Atlassian opt-in options"), /*#__PURE__*/React.createElement(Field, {
     name: "can-be-contacted"
   }, ({
     fieldProps
-  }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
     "aria-describedby": undefined // JCA11Y-1988
     ,
-    label: canBeContactedLabel || /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.canBeContactedLabel, {
-      values: {
-        a: chunks => /*#__PURE__*/React.createElement(Link, {
-          href: "https://www.atlassian.com/legal/privacy-policy",
-          target: "_blank"
-        }, chunks)
-      }
-    })),
+    label: canBeContactedLabel || /*#__PURE__*/React.createElement(FormattedMessage, fg('product-terminology-refresh') ? messages.canBeContactedLabelAppify : messages.canBeContactedLabel),
     onChange: event => setCanBeContacted(event.target.checked)
-  }))), /*#__PURE__*/React.createElement(Field, {
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      paddingInlineStart: "var(--ds-space-300, 24px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      marginInlineStart: "var(--ds-space-050, 4px)"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "https://www.atlassian.com/legal/privacy-policy",
+    target: "_blank"
+  }, formatMessage(messages.privacyPolicy))))), /*#__PURE__*/React.createElement(Field, {
     name: "enroll-in-research-group"
   }, ({
     fieldProps

package/dist/es2019/messages.js

@@ -12,9 +12,14 @@ export const messages = defineMessages({
   },
   canBeContactedLabel: {
     id: 'feedback-collector.can-be-contacted.label',
-    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian products and services. I acknowledge the <a>Atlassian Privacy Policy</a>.',
+    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian products and services. I acknowledge the Atlassian Privacy Policy.',
     description: 'The checkbox label to give consent to be contacted about their feedback'
   },
+  privacyPolicy: {
+    id: 'feedback-collector.privacy-policy',
+    defaultMessage: 'Atlassian Privacy Policy',
+    description: 'The text content for the Privacy Policy link'
+  },
   summaryPlaceholder: {
     id: 'feedback-collector.summary-placeholder',
     defaultMessage: "Let us know what's on your mind",
@@ -149,5 +154,25 @@ export const messages = defineMessages({
     id: 'feedback-collector.default.custom.textarea.label',
     defaultMessage: "What's on your mind?",
     description: 'The textarea label where users can write their suggestion for custom feedback collector'
+  },
+  canBeContactedLabelAppify: {
+    id: 'feedback-collector.can-be-contacted.label-appify',
+    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian apps and services. I acknowledge the <a>Atlassian Privacy Policy</a>.',
+    description: 'The checkbox label to give consent to be contacted about their feedback'
+  },
+  feedbackSuccessFlagDescriptionAppify: {
+    id: 'feedback-collector.success-flag.description-appify',
+    defaultMessage: 'Your valuable feedback helps us continually improve our apps.',
+    description: 'Description shown when feedback is successfully submitted'
+  },
+  validationErrorTypeRequired: {
+    id: 'feedback-collector.validation.type.required',
+    defaultMessage: 'Please select a feedback type',
+    description: 'Error message when feedback type is not selected'
+  },
+  validationErrorDescriptionRequired: {
+    id: 'feedback-collector.validation.description.required',
+    defaultMessage: 'Please provide a description',
+    description: 'Error message when description is not provided'
   }
 });

package/dist/esm/components/FeedbackCollector.js

@@ -154,7 +154,7 @@ var FeedbackCollector = /*#__PURE__*/function (_Component) {
   }, {
     key: "getPackageVersion",
     value: function getPackageVersion() {
-      return "14.3.2" || 'Unknown, at least 11.0.0';
+      return "14.3.4" || 'Unknown, at least 11.0.0';
     }
   }, {
     key: "getEntitlementInformation",

package/dist/esm/components/FeedbackFlag.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { AutoDismissFlag } from '@atlaskit/flag';
 import SuccessIcon from '@atlaskit/icon/core/migration/status-success--check-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { G300 } from '@atlaskit/theme/colors';
 import { messages } from '../messages';
 import { IntlProviderWithResolvedMessages } from './IntlProviderWithResolvedMessages';
@@ -17,7 +18,7 @@ var FeedbackFlag = function FeedbackFlag(_ref) {
       label: "Success"
     }),
     id: "feedbackSent",
-    description: description || formatMessage(messages.feedbackSuccessFlagDescription),
+    description: description || formatMessage(fg('product-terminology-refresh') ? messages.feedbackSuccessFlagDescriptionAppify : messages.feedbackSuccessFlagDescription),
     title: title || formatMessage(messages.feedbackSuccessFlagTitle)
   });
 };

package/dist/esm/components/FeedbackForm.js

@@ -12,9 +12,10 @@ import React, { useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import { Checkbox } from '@atlaskit/checkbox';
-import Form, { Field, Fieldset, RequiredAsterisk } from '@atlaskit/form';
+import Form, { ErrorMessage, Field, Fieldset, RequiredAsterisk } from '@atlaskit/form';
 import Link from '@atlaskit/link';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import SectionMessage from '@atlaskit/section-message';
 import Select from '@atlaskit/select';
 import TextArea from '@atlaskit/textarea';
@@ -65,6 +66,10 @@ var FeedbackForm = function FeedbackForm(_ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     isSubmitting = _useState0[0],
     setIsSubmitting = _useState0[1];
+  var _useState1 = useState({}),
+    _useState10 = _slicedToArray(_useState1, 2),
+    validationErrors = _useState10[0],
+    setValidationErrors = _useState10[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isTypeSelected = function isTypeSelected() {
@@ -72,7 +77,26 @@ var FeedbackForm = function FeedbackForm(_ref) {
   };
   var canShowTextField = isTypeSelected() || !showTypeField;
   var hasDescription = description || hasDescriptionDefaultValue;
-  var isDisabled = disableSubmitButton || (showTypeField ? !isTypeSelected() || !hasDescription : !hasDescription);
+
+  // Feature flag determines validation behavior
+  var useNewValidation = fg('feedback-collector-custom-validation');
+  var isDisabled = useNewValidation ? isSubmitting || disableSubmitButton // New: only disable when submitting or explicitly disabled
+  : disableSubmitButton || (showTypeField ? !isTypeSelected() || !hasDescription : !hasDescription); // Old: disable based on form validation
+
+  var getValidationErrors = function getValidationErrors() {
+    var errors = {};
+
+    // Validate type selection if showTypeField is true
+    if (showTypeField && !isTypeSelected()) {
+      errors.type = formatMessage(messages.validationErrorTypeRequired);
+    }
+
+    // Validate description if showDefaultTextFields is true
+    if (showDefaultTextFields && !hasDescription) {
+      errors.description = formatMessage(messages.validationErrorDescriptionRequired);
+    }
+    return errors;
+  };
   var getFieldLabels = function getFieldLabels(record) {
     var _record$bug, _record$comment, _record$suggestion, _record$question, _record$empty, _record$not_relevant, _record$not_accurate, _record$too_slow, _record$unhelpful_lin, _record$other;
     return {
@@ -118,24 +142,42 @@ var FeedbackForm = function FeedbackForm(_ref) {
     shouldScrollInViewport: true
   }, /*#__PURE__*/React.createElement(Form, {
     onSubmit: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var errors;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            if (!useNewValidation) {
+              _context.next = 5;
+              break;
+            }
+            // New validation: validate on submit and show errors
+            errors = getValidationErrors(); // If there are validation errors, show them and don't submit
+            if (!(Object.keys(errors).length > 0)) {
+              _context.next = 5;
+              break;
+            }
+            setValidationErrors(errors);
+            return _context.abrupt("return");
+          case 5:
+            // Submit the form (both old and new validation paths reach here)
             setIsSubmitting(true);
-            _context.next = 3;
+            _context.prev = 6;
+            _context.next = 9;
             return onSubmit({
               canBeContacted: canBeContacted,
               description: description,
               enrollInResearchGroup: enrollInResearchGroup,
               type: type
             });
-          case 3:
+          case 9:
+            _context.prev = 9;
             setIsSubmitting(false);
-          case 4:
+            return _context.finish(9);
+          case 12:
           case "end":
             return _context.stop();
         }
-      }, _callee);
+      }, _callee, null, [[6,, 9, 12]]);
     }))
   }, function (_ref3) {
     var formProps = _ref3.formProps;
@@ -157,12 +199,20 @@ var FeedbackForm = function FeedbackForm(_ref) {
       var _ref4$fieldProps = _ref4.fieldProps,
         id = _ref4$fieldProps.id,
         restProps = _objectWithoutProperties(_ref4$fieldProps, _excluded);
-      return /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, restProps, {
         onChange: function onChange(option) {
           if (!option || option instanceof Array) {
             return;
           }
           setType(option.value);
+          // Clear validation error when user selects a type (only for new validation)
+          if (useNewValidation && validationErrors.type) {
+            setValidationErrors(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                type: undefined
+              });
+            });
+          }
         },
         menuPortalTarget: document.body,
         styles: {
@@ -178,22 +228,30 @@ var FeedbackForm = function FeedbackForm(_ref) {
         ref: focusRef,
         placeholder: getDefaultPlaceholder(feedbackGroupLabels),
         inputId: id
-      }));
+      })), useNewValidation && validationErrors.type && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.type));
     }) : null, showDefaultTextFields && canShowTextField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
       label: showTypeField ? getFieldLabels(feedbackGroupLabels)[type] : customTextAreaLabel || formatMessage(messages.defaultCustomTextAreaLabel),
       isRequired: true,
       name: "description"
     }, function (_ref5) {
       var fieldProps = _ref5.fieldProps;
-      return /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
         name: "foo",
         minimumRows: 6,
         placeholder: summaryPlaceholder || undefined,
         onChange: function onChange(e) {
-          return setDescription(e.target.value);
+          setDescription(e.target.value);
+          // Clear validation error when user types
+          if (useNewValidation && validationErrors.description) {
+            setValidationErrors(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                description: undefined
+              });
+            });
+          }
         },
         value: description
-      }));
+      })), useNewValidation && validationErrors.description && /*#__PURE__*/React.createElement(ErrorMessage, null, validationErrors.description));
     }), !anonymousFeedback && /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement("legend", {
       "aria-hidden": false,
       hidden: true
@@ -201,23 +259,24 @@ var FeedbackForm = function FeedbackForm(_ref) {
       name: "can-be-contacted"
     }, function (_ref6) {
       var fieldProps = _ref6.fieldProps;
-      return /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
         "aria-describedby": undefined // JCA11Y-1988
         ,
-        label: canBeContactedLabel || /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.canBeContactedLabel, {
-          values: {
-            a: function a(chunks) {
-              return /*#__PURE__*/React.createElement(Link, {
-                href: "https://www.atlassian.com/legal/privacy-policy",
-                target: "_blank"
-              }, chunks);
-            }
-          }
-        })),
+        label: canBeContactedLabel || /*#__PURE__*/React.createElement(FormattedMessage, fg('product-terminology-refresh') ? messages.canBeContactedLabelAppify : messages.canBeContactedLabel),
         onChange: function onChange(event) {
           return setCanBeContacted(event.target.checked);
         }
-      }));
+      })), /*#__PURE__*/React.createElement("span", {
+        style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          paddingInlineStart: "var(--ds-space-300, 24px)",
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          marginInlineStart: "var(--ds-space-050, 4px)"
+        }
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: "https://www.atlassian.com/legal/privacy-policy",
+        target: "_blank"
+      }, formatMessage(messages.privacyPolicy))));
     }), /*#__PURE__*/React.createElement(Field, {
       name: "enroll-in-research-group"
     }, function (_ref7) {

package/dist/esm/messages.js

@@ -12,9 +12,14 @@ export var messages = defineMessages({
   },
   canBeContactedLabel: {
     id: 'feedback-collector.can-be-contacted.label',
-    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian products and services. I acknowledge the <a>Atlassian Privacy Policy</a>.',
+    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian products and services. I acknowledge the Atlassian Privacy Policy.',
     description: 'The checkbox label to give consent to be contacted about their feedback'
   },
+  privacyPolicy: {
+    id: 'feedback-collector.privacy-policy',
+    defaultMessage: 'Atlassian Privacy Policy',
+    description: 'The text content for the Privacy Policy link'
+  },
   summaryPlaceholder: {
     id: 'feedback-collector.summary-placeholder',
     defaultMessage: "Let us know what's on your mind",
@@ -149,5 +154,25 @@ export var messages = defineMessages({
     id: 'feedback-collector.default.custom.textarea.label',
     defaultMessage: "What's on your mind?",
     description: 'The textarea label where users can write their suggestion for custom feedback collector'
+  },
+  canBeContactedLabelAppify: {
+    id: 'feedback-collector.can-be-contacted.label-appify',
+    defaultMessage: 'Yes, Atlassian teams can contact me to learn about my experiences to improve Atlassian apps and services. I acknowledge the <a>Atlassian Privacy Policy</a>.',
+    description: 'The checkbox label to give consent to be contacted about their feedback'
+  },
+  feedbackSuccessFlagDescriptionAppify: {
+    id: 'feedback-collector.success-flag.description-appify',
+    defaultMessage: 'Your valuable feedback helps us continually improve our apps.',
+    description: 'Description shown when feedback is successfully submitted'
+  },
+  validationErrorTypeRequired: {
+    id: 'feedback-collector.validation.type.required',
+    defaultMessage: 'Please select a feedback type',
+    description: 'Error message when feedback type is not selected'
+  },
+  validationErrorDescriptionRequired: {
+    id: 'feedback-collector.validation.description.required',
+    defaultMessage: 'Please provide a description',
+    description: 'Error message when description is not provided'
   }
 });

package/dist/types/messages.d.ts

@@ -14,6 +14,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    privacyPolicy: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     summaryPlaceholder: {
         id: string;
         defaultMessage: string;
@@ -149,4 +154,24 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    canBeContactedLabelAppify: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    feedbackSuccessFlagDescriptionAppify: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    validationErrorTypeRequired: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    validationErrorDescriptionRequired: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/messages.d.ts

@@ -14,6 +14,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    privacyPolicy: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     summaryPlaceholder: {
         id: string;
         defaultMessage: string;
@@ -149,4 +154,24 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    canBeContactedLabelAppify: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    feedbackSuccessFlagDescriptionAppify: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    validationErrorTypeRequired: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    validationErrorDescriptionRequired: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/feedback-collector",
-	"version": "14.3.3",
+	"version": "14.4.0",
 	"description": "A component that collects feedback across Atlassian products.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,8 +40,8 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/flag": "^17.3.0",
-		"@atlaskit/form": "^12.1.0",
-		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/form": "^12.2.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -90,6 +90,12 @@
 		},
 		"dst-a11y__replace-anchor-with-link__belugas-feedba": {
 			"type": "boolean"
+		},
+		"product-terminology-refresh": {
+			"type": "boolean"
+		},
+		"feedback-collector-custom-validation": {
+			"type": "boolean"
 		}
 	}
 }