feat: retrieve organization subscriptions list api.

feat: subscriptions reducers.

client/src/containers/Setup/SetupLeftSection.js

@@ -43,14 +43,18 @@ function SetupLeftSection({
         <p className={'content__text'}>
           <T id={'you_have_a_bigcapital_account'} />
         </p>
+        <span class="content__divider"></span>
 
         <div className={'content__organization'}>
-          <span class="organization-id">Your oragnization ID: <span class="id">{ currentOrganizationId }</span>,</span><br />
-          <span class="signout"><a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a></span>
+          <span class="organization-id">
+            Your oragnization ID: <span class="id">{ currentOrganizationId }</span>,
+          </span>
+          <br />
+          <span class="signout">
+            <a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a>
+          </span>
         </div>
 
-        <span class="content__divider"></span>
-
         <div className={'content__footer'}>
           <div className={'content__contact-info'}> 
             <p><T id={'we_re_here_to_help'} /> {'+21892-791-8381'}</p>

client/src/containers/Setup/SetupOrganizationForm.js

@@ -16,16 +16,20 @@ import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { DateInput } from '@blueprintjs/datetime';
+import { withWizard } from 'react-albus';
 import { momentFormatter, tansformDateValue } from 'utils';
 import { ListSelect, ErrorMessage, FieldRequiredHint } from 'components';
-import { useHistory } from 'react-router-dom';
 
 import withSettingsActions from 'containers/Settings/withSettingsActions';
 import withOrganizationActions from 'containers/Organization/withOrganizationActions';
 
 import { compose, optionsMapToArray } from 'utils';
 
-function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
+function SetupOrganizationForm({
+  requestSubmitOptions,
+  requestOrganizationSeed,
+  wizard,
+}) {
   const { formatMessage } = useIntl();
   const [selected, setSelected] = useState();
 
@@ -130,7 +134,7 @@ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
     name: Yup.string()
       .required()
       .label(formatMessage({ id: 'organization_name_' })),
-    date_start: Yup.date()
+    financial_date_start: Yup.date()
       .required()
       .label(formatMessage({ id: 'date_start_' })),
     base_currency: Yup.string()
@@ -148,7 +152,7 @@ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
   const initialValues = useMemo(
     () => ({
       name: '',
-      date_start: moment(new Date()).format('YYYY-MM-DD'),
+      financial_date_start: moment(new Date()).format('YYYY-MM-DD'),
       base_currency: '',
       language: '',
       fiscal_year: '',
@@ -176,7 +180,11 @@ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
         return { key: option.key, ...option, group: 'organization' };
       });
       requestSubmitOptions({ options })
+        .then(() => {
+          return requestOrganizationSeed();
+        })
         .then((response) => {
+          wizard.next();
           setSubmitting(false);
         })
         .catch((erros) => {
@@ -220,29 +228,29 @@ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
   const handleDateChange = useCallback(
     (date) => {
       const formatted = moment(date).format('YYYY-MM-DD');
-      setFieldValue('date_start', formatted);
+      setFieldValue('financial_date_start', formatted);
     },
     [setFieldValue],
   );
 
   return (
-    <div className={'register-organizaton-form'}>
-      <div className={'register-org-title'}>
-        <h2>
+    <div className={'setup-organization'}>
+      <div className={'setup-organization__title-wrap'}>
+        <h1>
           <T id={'let_s_get_started'} />
-        </h2>
-        <p>
+        </h1>
+        <p class="paragraph">
           <T id={'tell_the_system_a_little_bit_about_your_organization'} />
         </p>
       </div>
 
-      <form onClick={handleSubmit}>
+      <form class="setup-organization__form" onClick={handleSubmit}>
         <h3>
           <T id={'organization_details'} />
         </h3>
 
         <FormGroup
-          label={<T id={'name'} />}
+          label={<T id={'legal_organization_name'} />}
           labelInfo={<FieldRequiredHint />}
           className={'form-group--name'}
           intent={errors.name && touched.name && Intent.DANGER}
@@ -258,15 +266,15 @@ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
         <FormGroup
           label={<T id={'financial_starting_date'} />}
           labelInfo={<FieldRequiredHint />}
-          intent={errors.date_start && touched.date_start && Intent.DANGER}
+          intent={errors.financial_date_start && touched.financial_date_start && Intent.DANGER}
           helperText={
-            <ErrorMessage name="date_start" {...{ errors, touched }} />
+            <ErrorMessage name="financial_date_start" {...{ errors, touched }} />
           }
           className={classNames('form-group--select-list', Classes.FILL)}
         >
           <DateInput
             {...momentFormatter('MMMM Do YYYY')}
-            value={tansformDateValue(values.date_start)}
+            value={tansformDateValue(values.financial_date_start)}
             onChange={handleDateChange}
             popoverProps={{ position: Position.BOTTOM, minimal: true }}
           />
@@ -410,4 +418,5 @@ function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
 export default compose(
   withSettingsActions,
   withOrganizationActions,
+  withWizard,
 )(SetupOrganizationForm);

client/src/containers/Setup/SetupRightSection.js

@@ -5,6 +5,7 @@ import { useHistory } from "react-router-dom";
 import { connect } from 'react-redux';
 
 import WizardSetupSteps from './WizardSetupSteps';
+import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
 
 import SetupSubscriptionForm from './SetupSubscriptionForm';
 import SetupOrganizationForm from './SetupOrganizationForm';
@@ -23,16 +24,18 @@ function SetupRightSection ({
 
   // #withOrganization
   isOrganizationInitialized,
-  isOrganizationSubscribed: hasSubscriptions,
-  isOrganizationSeeded
+  isOrganizationSeeded,
+
+  // #withSubscriptions
+  isSubscriptionActive
 }) {
   const history = useHistory();
 
   const handleSkip = useCallback(({ step, push }) => {
     const scenarios = [
-      { condition: !hasSubscriptions, redirectTo: 'subscription' },
-      { condition: hasSubscriptions && !isOrganizationInitialized, redirectTo: 'initializing' },
-      { condition: hasSubscriptions && !isOrganizationSeeded, redirectTo: 'organization' },
+      { condition: !isSubscriptionActive, redirectTo: 'subscription' },
+      { condition: isSubscriptionActive && !isOrganizationInitialized, redirectTo: 'initializing' },
+      { condition: isSubscriptionActive && !isOrganizationSeeded, redirectTo: 'organization' },
     ];
     const scenario = scenarios.find((scenario) => scenario.condition);
 
@@ -40,7 +43,7 @@ function SetupRightSection ({
       push(scenario.redirectTo);
     }
   }, [
-    hasSubscriptions,
+    isSubscriptionActive,
     isOrganizationInitialized,
     isOrganizationSeeded,
   ]);
@@ -92,12 +95,15 @@ export default compose(
   withOrganization(({
     organization,
     isOrganizationInitialized,
-    isOrganizationSubscribed,
     isOrganizationSeeded,
   }) => ({
     organization,
     isOrganizationInitialized,
-    isOrganizationSubscribed,
     isOrganizationSeeded,
   })),
+  withSubscriptions(({
+    isSubscriptionActive,
+  }) => ({
+    isSubscriptionActive
+  }), 'main'),
 )(SetupRightSection);

client/src/containers/Setup/SetupSubscriptionForm.js

@@ -3,10 +3,11 @@ import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Button, Intent } from '@blueprintjs/core';
+import { withWizard } from 'react-albus';
+import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
 import BillingPlans from 'containers/Subscriptions/billingPlans';
 import BillingPeriods from 'containers/Subscriptions/billingPeriods';
 import { BillingPaymentmethod } from 'containers/Subscriptions/billingPaymentmethod';
-
 import withBillingActions from 'containers/Subscriptions/withBillingActions';
 import { compose } from 'utils';
 
@@ -14,18 +15,23 @@ import { compose } from 'utils';
  * Subscription step of wizard setup.
  */
 function SetupSubscriptionForm({
-  //#withBillingActions
+  // #withBillingActions
   requestSubmitBilling,
+
+  // #withWizard
+  wizard,
+
+  // #withSubscriptionsActions
+  requestFetchSubscriptions
 }) {
   const { formatMessage } = useIntl();
-
   const validationSchema = Yup.object().shape({
     plan_slug: Yup.string()
       .required()
       .label(formatMessage({ id: 'plan_slug' })),
     license_code: Yup.string()
-      .min(7)
-      .max(7)
+      .min(10)
+      .max(10)
       .required()
       .label(formatMessage({ id: 'license_code_' }))
       .trim(),
@@ -48,6 +54,10 @@ function SetupSubscriptionForm({
     onSubmit: (values, { setSubmitting, setErrors }) => {
       requestSubmitBilling(values)
         .then((response) => {
+          return requestFetchSubscriptions();
+        })
+        .then(() => {
+          wizard.next();
           setSubmitting(false);
         })
         .catch((errors) => {
@@ -76,4 +86,8 @@ function SetupSubscriptionForm({
   );
 }
 
-export default compose(withBillingActions)(SetupSubscriptionForm);
+export default compose(
+  withBillingActions,
+  withWizard,
+  withSubscriptionsActions,
+)(SetupSubscriptionForm);

client/src/containers/Subscriptions/billingPeriods.js

@@ -45,7 +45,7 @@ function BillingPeriods({ formik, title, selected = 1 }) {
 
   return (
     <section class="billing-section">
-      <h1 className={'bg-title'}>
+      <h1>
         <T id={title} />
       </h1>
       <p className='paragraph'>

client/src/containers/Subscriptions/billingPlans.js

@@ -62,7 +62,7 @@ function BillingPlans({ formik, title, selected = 1 }) {
 
   return (
     <section class="billing-section">
-      <h1 className={'bg-title'}>
+      <h1>
         <T id={title} />
       </h1>
       <p className='paragraph'>

client/src/containers/Subscriptions/withSubscriptions.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import {
+  isSubscriptionOnTrialFactory,
+  isSubscriptionInactiveFactory,
+  isSubscriptionActiveFactory,
+} from 'store/subscription/subscription.selectors';
+
+export default (mapState, slug) => {
+  const isSubscriptionOnTrial = isSubscriptionOnTrialFactory(slug);
+  const isSubscriptionInactive = isSubscriptionInactiveFactory(slug);
+  const isSubscriptionActive = isSubscriptionActiveFactory(slug);
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      isSubscriptionOnTrial: isSubscriptionOnTrial(state, props),
+      isSubscriptionInactive: isSubscriptionInactive(state, props),
+      isSubscriptionActive: isSubscriptionActive(state, props),
+    };
+    return (mapState) ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Subscriptions/withSubscriptionsActions.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { 
+  fetchSubscriptions,
+} from 'store/subscription/subscription.actions'
+
+const mapDispatchToProps = (dispatch) => ({
+  requestFetchSubscriptions: () => dispatch(fetchSubscriptions()),
+});
+
+export default connect(null, mapDispatchToProps);