Add modal to change "min channel age"

It'll be easier to handle through a modal -- we won't need to debounce the values, and it also clears up the clutter from 'settingsCreator'

static/app-strings.json

@@ -2197,5 +2197,8 @@
   "When do you want to go live?": "When do you want to go live?",
   "Anytime": "Anytime",
   "Scheduled Time": "Scheduled Time",
+  "Set minimum channel age": "Set minimum channel age",
+  "Note that the restriction can only be applied to channels created after Feb 8th, 2022.": "Note that the restriction can only be applied to channels created after Feb 8th, 2022.",
+  "No limit": "No limit",
   "--end--": "--end--"
 }

ui/constants/modal_types.js

@@ -42,6 +42,7 @@ export const IMAGE_UPLOAD = 'image_upload';
 export const MOBILE_SEARCH = 'mobile_search';
 export const VIEW_IMAGE = 'view_image';
 export const BLOCK_CHANNEL = 'block_channel';
+export const MIN_CHANNEL_AGE = 'min_channel_age';
 export const COLLECTION_ADD = 'collection_add';
 export const COLLECTION_DELETE = 'collection_delete';
 export const CONFIRM_REMOVE_CARD = 'CONFIRM_REMOVE_CARD';

ui/modal/modalMinChannelAge/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import ModalMinChannelAge from './view';
+import { doHideModal } from 'redux/actions/app';
+
+const perform = {
+  doHideModal,
+};
+
+export default connect(null, perform)(ModalMinChannelAge);

ui/modal/modalMinChannelAge/view.jsx

@@ -0,0 +1,76 @@
+// @flow
+import React from 'react';
+import moment from 'moment';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import { FormField } from 'component/common/form-components/form-field';
+import FormFieldDuration from 'component/formFieldDuration';
+import { Modal } from 'modal/modal';
+
+const CHANNEL_AGE_LIMIT_MIN_DATE = new Date('February 8, 2022 00:00:00');
+const LIMITATION_WARNING = 'Note that the restriction can only be applied to channels created after Feb 8th, 2022.';
+
+type Props = {
+  onConfirm: (limitInMinutes: number, closeModal: () => void) => void,
+  doHideModal: () => void,
+};
+
+export default function ModalMinChannelAge(props: Props) {
+  const { onConfirm, doHideModal } = props;
+
+  const [showLimitationWarning, setShowLimitationWarning] = React.useState('');
+  const [limitDisabled, setLimitDisabled] = React.useState(false);
+  const [minChannelAgeInput, setMinChannelAgeInput] = React.useState('');
+  const [minChannelAgeMinutes, setMinChannelAgeMinutes] = React.useState(-1);
+  const inputOk = limitDisabled || minChannelAgeMinutes > 0;
+
+  function handleOnClick() {
+    if (onConfirm) {
+      onConfirm(limitDisabled ? 0 : minChannelAgeMinutes, doHideModal);
+    }
+  }
+
+  function handleOnInputResolved(valueInSeconds) {
+    if (valueInSeconds > 0) {
+      const minCreationDate = moment().subtract(valueInSeconds, 'seconds').toDate();
+      setShowLimitationWarning(minCreationDate.getTime() < CHANNEL_AGE_LIMIT_MIN_DATE.getTime());
+      setMinChannelAgeMinutes(Math.ceil(valueInSeconds / 60));
+    } else {
+      setShowLimitationWarning(false);
+      setMinChannelAgeMinutes(-1);
+    }
+  }
+
+  return (
+    <Modal isOpen type="card" onAborted={doHideModal}>
+      <Card
+        title={__('Set minimum channel age')}
+        body={
+          <>
+            <FormFieldDuration
+              name="time_since_first_comment"
+              value={minChannelAgeInput}
+              disabled={limitDisabled}
+              onChange={(e) => setMinChannelAgeInput(e.target.value)}
+              onResolve={handleOnInputResolved}
+            />
+            {showLimitationWarning && !limitDisabled && <p className="help--warning">{__(LIMITATION_WARNING)}</p>}
+            <FormField
+              type="checkbox"
+              name="no_limit"
+              label={__('No limit')}
+              checked={limitDisabled}
+              onChange={() => setLimitDisabled(!limitDisabled)}
+            />
+          </>
+        }
+        actions={
+          <div className="section__actions">
+            <Button button="primary" label={__('OK')} onClick={handleOnClick} disabled={!inputOk} />
+            <Button button="link" label={__('Cancel')} onClick={doHideModal} />
+          </div>
+        }
+      />
+    </Modal>
+  );
+}

ui/modal/modalRouter/view.jsx

@@ -45,6 +45,9 @@ const ModalImageUpload = lazyImport(() => import('modal/modalImageUpload' /* web
 const ModalMassTipsUnlock = lazyImport(() =>
   import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */)
 );
+const ModalMinChannelAge = lazyImport(() =>
+  import('modal/modalMinChannelAge' /* webpackChunkName: "modalMinChannelAge" */)
+);
 const ModalMobileSearch = lazyImport(() =>
   import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */)
 );
@@ -169,6 +172,8 @@ function getModal(id) {
       return ModalMassTipsUnlock;
     case MODALS.BLOCK_CHANNEL:
       return ModalBlockChannel;
+    case MODALS.MIN_CHANNEL_AGE:
+      return ModalMinChannelAge;
     case MODALS.COLLECTION_ADD:
       return ModalClaimCollectionAdd;
     case MODALS.COLLECTION_DELETE: