WIP: Arabic localization.

client/src/containers/Authentication/Login.js

@@ -15,7 +15,7 @@ import { LoginSchema, transformLoginErrorsToToasts } from './utils';
  */
 export default function Login() {
   const { mutateAsync: loginMutate } = useAuthLogin();
-  
+
   const handleSubmit = (values, { setSubmitting }) => {
     loginMutate({
       crediential: values.crediential,

client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js

@@ -31,7 +31,7 @@ function PaymentViaLicenseForm({
     <Form>
       <div className={CLASSES.DIALOG_BODY}>
         <p>
-          <T id={'please_enter_your_preferred_payment_method_below'} />
+          <T id={'Pleasse enter your voucher number that you received from reseller.'} />
         </p>
 
         <FastField name="license_code">

client/src/containers/Setup/SetupLeftSection.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, For } from 'components';
 import { FormattedMessage as T } from 'components';
 
-import footerLinks from 'config/footerLinks';
+import { getFooterLinks } from 'config/footerLinks';
 import { useAuthActions, useAuthOrganizationId } from 'hooks/state';
 
 function FooterLinkItem({ title, link }) {
@@ -20,6 +20,10 @@ export default function SetupLeftSection() {
   const { setLogout } = useAuthActions();
   const organizationId = useAuthOrganizationId();
 
+  // Retrieve the footer links.
+  const footerLinks = getFooterLinks();
+
+  // Handle logout link click.
   const onClickLogout = () => {
     setLogout();
   };

client/src/containers/Setup/SetupSubscription.js

@@ -1,22 +1,32 @@
 import React from 'react';
 import { Formik } from 'formik';
+import * as R from 'ramda';
 
 import 'style/pages/Setup/Subscription.scss';
 
 import SetupSubscriptionForm from './SetupSubscriptionForm';
 import { getSubscriptionFormSchema } from './SubscriptionForm.schema';
+import withSubscriptionPlansActions from '../Subscriptions/withSubscriptionPlansActions';
 
 /**
  * Subscription step of wizard setup.
  */
-export default function SetupSubscription() {
+function SetupSubscription({
+  // #withSubscriptionPlansActions
+  initSubscriptionPlans
+}) {
+  React.useEffect(() => {
+    initSubscriptionPlans();
+  }, [
+    initSubscriptionPlans
+  ]);
+
   // Initial values.
   const initialValues = {
-    plan_slug: 'free',
+    plan_slug: 'starter',
     period: 'month',
     license_code: '',
   };
-
   // Handle form submit.
   const handleSubmit = () => {};
 
@@ -32,4 +42,8 @@ export default function SetupSubscription() {
       />
     </div>
   );
-}
+}
+
+export default R.compose(
+  withSubscriptionPlansActions,
+)(SetupSubscription);

client/src/containers/Setup/WizardSetupSteps.js

@@ -1,24 +1,28 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'components';
-import { registerWizardSteps } from 'common/registerWizard';
+import { getSetupWizardSteps } from 'common/registerWizard';
 
 function WizardSetupStep({ label, isActive = false }) {
   return (
     <li className={classNames({ 'is-active': isActive })}>
       <p className={'wizard-info'}>
-        <T id={label} />
+        { label }
       </p>
     </li>
   );
 }
 
+/**
+ * Setup wizard setups.
+ */
 export default function WizardSetupSteps({ currentStep = 1 }) {
+  const setupWizardSetups = getSetupWizardSteps();
+
   return (
     <div className={'setup-page-steps-container'}>
       <div className={'setup-page-steps'}>
         <ul>
-          {registerWizardSteps.map((step, index) => (
+          {setupWizardSetups.map((step, index) => (
             <WizardSetupStep
               label={step.label}
               isActive={index + 1 === currentStep}

client/src/containers/Subscriptions/BillingPlansForm.js

@@ -15,15 +15,15 @@ export default function BillingPlansForm() {
   return (
     <div class="billing-plans">
       <BillingPlansInput
-        title={intl.get('select_a_plan', { order: 1 })}
+        title={intl.get('select_a_plan')}
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
       <BillingPeriodsInput
-        title={intl.get('choose_your_billing', { order: 2 })}
+        title={intl.get('choose_your_billing')}
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
       <BillingPaymentMethod
-        title={intl.get('payment_methods', { order: 3 })}
+        title={intl.get('payment_methods')}
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
     </div>

client/src/containers/Subscriptions/BillingPlansInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import BillingPlan from './BillingPlan';
 
 import withPlans from './withPlans';
@@ -16,7 +16,7 @@ function BillingPlans({ plans, title, description, selectedOption }) {
         <p className="paragraph">{description}</p>
       </div>
 
-      <FastField name={'plan_slug'}>
+      <Field name={'plan_slug'}>
         {({ form: { setFieldValue }, field: { value } }) => (
           <div className={'plan-radios'}>
             {plans.map((plan) => (
@@ -33,7 +33,7 @@ function BillingPlans({ plans, title, description, selectedOption }) {
             ))}
           </div>
         )}
-      </FastField>
+      </Field>
     </section>
   );
 }

client/src/containers/Subscriptions/withSubscriptionPlansActions.js

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