+
+ {
+ createInterpolateElement(
+ sprintf(
+ /* translators: %s: domain. */
+ __( 'Are you sure you wish to delete, %1$s? This action cannot be undone.', 'darkmatterplugin' ),
+ domain
+ ),
+ {
+ strong: ,
+ }
+ )
+ }
+
+ {
+ isPrimary && (
+ <>
+
+ {
+ createInterpolateElement(
+ sprintf(
+ /* translators: %s: domain. */
+ __( '%1$s, is a primary domain, and deleting this domain can negatively impact visitors to your website and SEO.', 'darkmatterplugin' ),
+ domain
+ ),
+ {
+ strong: ,
+ }
+ )
+ }
+
+ {
+ setForceDelete( ! forceDelete );
+ } }
+ checked={ forceDelete }
+ />
+
+ )
+ }
+
+
+
+
+
+
+ );
+};
diff --git a/assets/js/components/domain/modals/NewDomain.js b/assets/js/components/domain/modals/NewDomain.js
new file mode 100644
index 00000000..9f6edb90
--- /dev/null
+++ b/assets/js/components/domain/modals/NewDomain.js
@@ -0,0 +1,202 @@
+/**
+ * To cut down on transformations and because the REST API is powered by PHP, we disable the camelcase for ES Lint.
+ */
+/* eslint-disable camelcase */
+
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ Modal,
+ Notice,
+ TextControl,
+ ToggleControl,
+} from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const NEW_DOMAIN_DEFAULT = {
+ domain: '',
+ is_primary: false,
+ is_https: true,
+ is_active: true,
+ type: 1,
+ notices: [],
+};
+
+const NewDomainModal = ( props ) => {
+ const { addDomain, onClose } = props;
+
+ const [ newDomain, setNewDomain ] = useState( NEW_DOMAIN_DEFAULT );
+
+ const closeModal = ( domain = null ) => {
+ setNewDomain( NEW_DOMAIN_DEFAULT );
+
+ /**
+ * Handle the supplied onClose event handler.
+ */
+ if ( onClose ) {
+ onClose( domain );
+ }
+ };
+
+ const submitForm = async ( e ) => {
+ e.preventDefault();
+
+ let message = {};
+ const unknownError = {
+ id: `notice-${ Date.now() }`,
+ message: __( 'An unknown error has occurred.', 'darkmatterplugin' ),
+ status: 'error',
+ };
+
+ try {
+ const response = await addDomain( newDomain, true );
+ closeModal( response );
+
+ return;
+ } catch ( _error ) {
+ if ( _error.code ) {
+ switch ( _error.code ) {
+ case 'exists':
+ message = {
+ id: `notice-${ Date.now() }`,
+ message: _error.message,
+ status: 'error',
+ };
+
+ break;
+ case 'primary':
+ message = {
+ id: `notice-${ Date.now() }`,
+ message: _error.message,
+ status: 'warning',
+ };
+
+ break;
+ default:
+ message = unknownError;
+ }
+ }
+ }
+
+ setNewDomain( {
+ ...newDomain,
+ notices: [
+ ...notices,
+ { ...message },
+ ],
+ } );
+ };
+
+ const {
+ domain,
+ is_primary,
+ is_https,
+ is_active,
+ notices,
+ } = newDomain;
+
+ return (
+ <>
+