Merge pull request #27 from infinum/feature/buckaroo-fixes

Last changes before 0.1.0

src/blocks/components/new-section/new-section.js

@@ -0,0 +1,14 @@
+import { BaseControl } from '@wordpress/components';
+
+export const NewSection = (props) => {
+  const {
+    label,
+  } = props;
+
+  return (
+    <BaseControl>
+      <hr />
+      <div className={'notice-title'}>{label}</div>
+    </BaseControl>
+  );
+};

src/blocks/components/select/components/select-options.js

@@ -9,6 +9,7 @@ export const SelectOptions = (props) => {
       preventSending,
       prefillData,
       prefillDataSource,
+      showName = true,
     },
     actions: {
       onChangeName,
@@ -31,7 +32,7 @@ export const SelectOptions = (props) => {
   return (
     <PanelBody title={__('Select Settings', 'eightshift-forms')}>
 
-      {onChangeName &&
+      {onChangeName && showName &&
         <TextControl
           label={__('Name', 'eightshift-forms')}
           value={name}

src/blocks/custom/checkbox/components/checkbox-options.js

@@ -13,6 +13,8 @@ export const CheckboxOptions = (props) => {
       isReadOnly,
       isRequired,
       preventSending,
+      showName = true,
+      showValue = true,
     },
     actions: {
       onChangeName,
@@ -29,15 +31,15 @@ export const CheckboxOptions = (props) => {
 
   return (
     <PanelBody title={__('Checkbox Settings', 'eightshift-forms')}>
-      {onChangeName &&
+      {onChangeName && showName &&
         <TextControl
           label={__('Name', 'eightshift-forms')}
           value={name}
           onChange={onChangeName}
         />
       }
 
-      {onChangeValue &&
+      {onChangeValue && showValue &&
         <TextControl
           label={__('Value', 'eightshift-forms')}
           value={value}

src/blocks/custom/checkbox/manifest.json

@@ -16,9 +16,17 @@
     "name": {
       "type": "string"
     },
+    "showName": {
+      "type": "boolean",
+      "default": true
+    },
     "value": {
       "type": "string"
     },
+    "showValue": {
+      "type": "boolean",
+      "default": true
+    },
     "id": {
       "type": "string"
     },

src/blocks/custom/form/assets/form.js

@@ -23,20 +23,15 @@ export class Form {
     this.DATA_ATTR_BUCKAROO_SERVICE = 'data-buckaroo-service';
     this.DATA_ATTR_SUCCESSFULLY_SUBMITTED = 'data-form-successfully-submitted';
     this.DATA_ATTR_FIELD_DONT_SEND = 'data-do-not-send';
+    this.DATA_ATTR_REDIRECT_URL_SUCCESS = 'data-redirect-on-success';
     this.EVENT_SUBMIT = 'ef-submit';
     this.STATE_IS_LOADING = false;
     this.CLASS_FORM_SUBMITTING = 'form-submitting';
     this.CLASS_HIDE_SPINNER = 'hide-spinner';
     this.CLASS_HIDE_MESSAGE = 'is-form-message-hidden';
     this.CLASS_HIDE_OVERLAY = 'hide-form-overlay';
 
-    // Get form type from class.
-    this.formType = this.form.getAttribute(this.DATA_ATTR_FORM_TYPE);
-    this.formTypesComplex = this.form.getAttribute(this.DATA_ATTR_FORM_TYPES_COMPLEX) || null;
-    this.formTypesComplex = this.formTypesComplex ? this.formTypesComplex.split(',') : [];
-    this.formTypesComplexRedirect = this.form.getAttribute(this.DATA_ATTR_FORM_TYPES_COMPLEX_REDIRECT) || null;
-    this.formTypesComplexRedirect = this.formTypesComplexRedirect ? this.formTypesComplexRedirect.split(',') : [];
-    this.isComplex = this.form.hasAttribute(this.DATA_ATTR_IS_FORM_COMPLEX);
+    this.updateAllElements();
 
     this.siteUrl = window.eightshiftForms.siteUrl;
     this.internalServerErrorMessage = window.eightshiftForms.internalServerError;
@@ -71,6 +66,7 @@ export class Form {
   init() {
     this.form.addEventListener('submit', async (e) => {
       this.startLoading();
+      this.updateAllElements();
 
       if (!this.isComplex) {
         const { isSuccess, response } = await this.submitFormSimple(e, this.formType);
@@ -83,6 +79,8 @@ export class Form {
           this.showErrorMessages(this.errors);
         }
         this.endLoading(isSuccess);
+
+        this.maybeRedirect(isSuccess);
       } else {
 
         // Submit to all regular routes in parallel.
@@ -115,10 +113,46 @@ export class Form {
         }
 
         this.endLoading(isComplexSuccess);
+
+        this.maybeRedirect(isComplexSuccess);
       }
     });
   }
 
+  /**
+   * Updates form types and all it's configuration. We need to extract this and do it during initialization +
+   * before submit because this configuration could be manipulated inside a project.
+   */
+  updateAllElements() {
+
+    // Get form type from class.
+    this.formType = this.form.getAttribute(this.DATA_ATTR_FORM_TYPE);
+    this.formTypesComplex = this.form.getAttribute(this.DATA_ATTR_FORM_TYPES_COMPLEX) || null;
+    this.formTypesComplex = this.formTypesComplex ? this.formTypesComplex.split(',') : [];
+    this.formTypesComplexRedirect = this.form.getAttribute(this.DATA_ATTR_FORM_TYPES_COMPLEX_REDIRECT) || null;
+    this.formTypesComplexRedirect = this.formTypesComplexRedirect ? this.formTypesComplexRedirect.split(',') : [];
+    this.isComplex = this.form.hasAttribute(this.DATA_ATTR_IS_FORM_COMPLEX);
+
+    // Redirection
+    this.shouldRedirect = this.form.hasAttribute(this.DATA_ATTR_REDIRECT_URL_SUCCESS);
+    if (this.shouldRedirect) {
+      this.redirectUrlSuccess = this.form.getAttribute(this.DATA_ATTR_REDIRECT_URL_SUCCESS) || '';
+    }
+  }
+
+  /**
+   * Redirects user on success if needed.
+   *
+   * @param {boolean} success Is form successfully submitted
+   */
+  maybeRedirect(success) {
+    if (!success || !this.shouldRedirect || !this.redirectUrlSuccess) {
+      return;
+    }
+
+    window.location.href = this.redirectUrlSuccess;
+  }
+
   /**
    * Submits the form for a single type.
    *
@@ -303,6 +337,11 @@ export class Form {
         return false;
       }
 
+      // Filter out unchecked checkboxes buttons.
+      if (formElem.getAttribute('type') === 'checkbox' && !formElem.checked) {
+        return false;
+      }
+
       return formElem.name && (!formElem.hasAttribute(this.DATA_ATTR_FIELD_DONT_SEND));
     }).map((formElem) => {
       return {

src/blocks/custom/form/components/cant-have-multiple-redirects-notice.js

@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+import { Notice } from '@wordpress/components';
+
+export const CantHaveMultipleRedirects = (props) => {
+  const {
+    dismissError,
+    forSelects = false,
+  } = props;
+
+  return (
+    <Notice status="error" onRemove={dismissError}>
+      {forSelects &&
+        __('Unable to select type that redirects since redirection on success is already enabled.', 'eightshift-forms')
+      }
+      {!forSelects &&
+        __('Unable to redirect user since one of the form types already redirects.', 'eightshift-forms')
+      }
+    </Notice>
+  );
+};

src/blocks/custom/form/components/form-buckaroo-options.js

@@ -1,18 +1,22 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { SelectControl, TextControl, TextareaControl, BaseControl } from '@wordpress/components';
+import { SelectControl, TextControl, TextareaControl, BaseControl, ToggleControl } from '@wordpress/components';
 
 
 export const FormBuckarooOptions = (props) => {
   const {
     blockClass,
     service,
+    paymentDescription,
     emandateDescription,
     sequenceType,
+    isSequenceTypeOnFrontend,
     redirectUrl,
     redirectUrlError,
     redirectUrlReject,
+    onChangeIsSequenceTypeOnFrontend,
     onChangeService,
+    onChangePaymentDescription,
     onChangeEmandateDescription,
     onChangeSequenceType,
     onChangeRedirectUrl,
@@ -74,7 +78,15 @@ export const FormBuckarooOptions = (props) => {
           </div>
         </BaseControl>
       }
-      {onChangeSequenceType && service === 'emandate' &&
+      {onChangeIsSequenceTypeOnFrontend && service === 'emandate' &&
+        <ToggleControl
+          label={__('Allow user to set Recurring / One time in form?', 'eightshift-forms')}
+          help={__('If enabled you need to allow the user to select the recurring / one-time on frontend. You need to add a pre-defined field for this OR a field with name "sequence-type" to the form.', 'eightshift-forms')}
+          checked={isSequenceTypeOnFrontend}
+          onChange={onChangeIsSequenceTypeOnFrontend}
+        />
+      }
+      {onChangeSequenceType && !isSequenceTypeOnFrontend && service === 'emandate' &&
         <SelectControl
           label={__('Recurring / One off?', 'eightshift-forms')}
           help={__('Set if this form will create a recurring or one-off emandate.', 'eightshift-forms')}
@@ -84,13 +96,25 @@ export const FormBuckarooOptions = (props) => {
         />
       }
 
+
+      {onChangePaymentDescription &&
+        <TextareaControl
+          label={__('Payment description', 'eightshift-forms')}
+          value={paymentDescription}
+          help={__('A description of for this transaction', 'eightshift-forms')}
+          onChange={onChangePaymentDescription}
+        />
+      }
+
       {onChangeEmandateDescription && service === 'emandate' &&
         <TextareaControl
-          label={__('Emandate description', 'eightshift-forms')}
+          label={__('Emandate reason', 'eightshift-forms')}
           value={emandateDescription}
           help={__('A description of the (purpose) of the emandate. This will be shown in the emandate information of the customers\' bank account. Max 70 characters.', 'eightshift-forms')}
           onChange={(newValue) => {
-            onChangeEmandateDescription(newValue.substring(0, MAX_CHARS_IN_EMANDATE_DESCRIPTION_FIELD));
+            if (newValue.length > 0) {
+              onChangeEmandateDescription(newValue.substring(0, MAX_CHARS_IN_EMANDATE_DESCRIPTION_FIELD));
+            }
           }}
         />
       }

src/blocks/custom/form/components/form-email-options.js

@@ -1,7 +1,8 @@
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { TextControl, BaseControl } from '@wordpress/components';
+import { TextControl, BaseControl, ToggleControl } from '@wordpress/components';
 import { RichText } from '@wordpress/block-editor';
+import { NewSection } from '../../../components/new-section/new-section';
 
 export const FormEmailOptions = (props) => {
   const {
@@ -10,14 +11,23 @@ export const FormEmailOptions = (props) => {
     subject,
     message = '',
     additionalHeaders,
+    sendConfirmationToSender,
+    confirmationMessage,
+    confirmationSubject,
     onChangeTo,
     onChangeSubject,
     onChangeMessage,
     onChangeAdditionalHeaders,
+    onChangeSendConfirmationToSender,
+    onChangeConfirmationMessage,
+    onChangeConfirmationSubject,
   } = props;
 
   return (
     <Fragment>
+      <NewSection
+        label={__('Admin email settings', 'eightshift-forms')}
+      />
       {onChangeTo &&
         <TextControl
           label={__('To', 'eightshift-forms')}
@@ -60,6 +70,38 @@ export const FormEmailOptions = (props) => {
           />
         </BaseControl>
       }
+      <NewSection
+        label={__('Confirmation email settings', 'eightshift-forms')}
+      />
+      {onChangeSendConfirmationToSender &&
+        <ToggleControl
+          label={__('Send email confirmation to sender?', 'eightshift-forms')}
+          help={__('If enabled, an email will be sent to the user after filling out this form.', 'eightshift-forms')}
+          checked={sendConfirmationToSender}
+          onChange={onChangeSendConfirmationToSender}
+        />
+      }
+      {onChangeConfirmationSubject && sendConfirmationToSender &&
+        <TextControl
+          label={__('Subject', 'eightshift-forms')}
+          help={__('Subject of the confirmation email.', 'eightshift-forms')}
+          value={confirmationSubject}
+          onChange={onChangeConfirmationSubject}
+        />
+      }
+      {onChangeConfirmationMessage && sendConfirmationToSender &&
+        <BaseControl
+          label={__('Message', 'eightshift-forms')}
+          help={__('Message which is sent to user on form submit. Remember you can use placeholders.', 'eightshift-forms')}
+        >
+          <RichText
+            className={richTextClass}
+            placeholder={__('Add your message', 'eightshift-forms')}
+            onChange={onChangeConfirmationMessage}
+            value={confirmationMessage}
+          />
+        </BaseControl>
+      }
     </Fragment>
   );
 };