WIP: Arabic localization.

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}