WIP: Arabic localization.

client/src/common/registerWizard.js

@@ -1,16 +1,16 @@
+import intl from 'react-intl-universal';
 
-
-export const registerWizardSteps = [
+export const getSetupWizardSteps = () => [
   {
-    label: 'payment_or_trial',
+    label: intl.get('Plans & Payment'),
   },
   {
-    label: 'initializing',
+    label: intl.get('Initializing'),
   },
   {
-    label: 'getting_started',
+    label: intl.get('Getting started'),
   },
   {
-    label: 'congratulations',
+    label: intl.get('Congratulations'),
   },
 ];

client/src/components/Dashboard/DashboardFooter.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import footerLinks from 'config/footerLinks';
+import { getFooterLinks } from 'config/footerLinks';
 import { For } from 'components';
 
 function FooterLinkItem({ title, link }) {
@@ -14,6 +13,8 @@ function FooterLinkItem({ title, link }) {
 }
 
 export default function DashboardFooter() {
+  const footerLinks = getFooterLinks();
+
   return (
     <div class="dashboard__footer">
       <div class="footer-links">

client/src/config/footerLinks.js

@@ -1,29 +1,28 @@
+import intl from 'react-intl-universal';
 
-
-
-export default [
+export const getFooterLinks = () => [
   {
-    title: 'Blog',
+    title: intl.get('blog'),
     link: '#',
   },
   {
-    title: 'Support',
+    title: intl.get('support'),
     link: '#',
   },
   {
-    title: 'Status',
+    title: intl.get('service_status'),
     link: '#',
   },
   {
-    title: 'Pricing',
+    title: intl.get('pricing'),
     link: '#',
   },
   {
-    title: 'Solution Partner Program',
+    title: intl.get('reseller_partner'),
     link: '#',
   },
   {
-    title: 'Docs',
+    title: intl.get('docs'),
     link: '#',
   },
   {

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);

client/src/lang/en/index.js

@@ -1067,6 +1067,6 @@ export default {
   cash_flow_statement: 'Cash Flow Statement',
   statement_of_cash_flow: 'Statement of Cash Flow ',
   inventory_item_details: 'Inventory Item Details',
-  congratulations: 'Congratulations'
+  congratulations: 'Congratulations',
 };
 

client/src/lang/en/index.json

@@ -578,9 +578,9 @@
   "plan_slug": "Plan slug",
   "billing": "Billing",
   "the_billing_has_been_created_successfully": "The billing has been created successfully.",
-  "select_a_plan": "{order}. Select a plan",
-  "choose_your_billing": "{order}. Choose your billing",
-  "payment_methods": "{order}. Payment methods",
+  "select_a_plan": "Select a plan",
+  "choose_your_billing": "Choose your billing",
+  "payment_methods": "Payment methods",
   "usage": "Usage",
   "basic": "Basic",
   "license": "License",
@@ -626,9 +626,6 @@
   "note_you_can_change_your_preferences_later_in_dashboard_if_needed": "Note: You can change your preferences later in dashboard, if needed.",
   "save_continue": "Save & Continue",
   "organization_register": "Organization Register",
-  "getting_started": "Getting started",
-  "payment_or_trial": "Payment or trial",
-  "initializing": "Initializing",
   "fiscal_year_": "Fiscal year",
   "welcome": "Welcome ",
   "sign_out": "Sign out",
@@ -1080,21 +1077,9 @@
   "dr": "Dr.",
   "all_accounts_": "All Accounts",
   "search": "Search...",
-  "starter": "Starter",
-  "sale_and_purchase_invoices": "Sale and purchase invoices.",
-  "customers_vendors_accounts": "Customers/vendors accounts.",
-  "expense_tracking": "Expense tracking.",
-  "for_one_user_and_accountant": "For one user and accountant.",
-  "all_capital_starter_features": "All Capital Starter features.",
-  "multi_currency": "Multi-currency.",
-  "purchase_and_sell_orders": "Purchase and sell orders.",
-  "inventory_management": "Inventory management.",
-  "three_users_with_your_accountant": "Three users with your accountant.",
-  "advanced_financial_reports": "Advanced financial reports.",
-  "all_capital_essential_features": "All Capital Essential features.",
-  "track_multi_branches_and_locations": "Track multi-branches and locations.",
-  "projects_accounting_and_timesheets": "Projects accounting and timesheets.",
-  "accounting_dimensions": "Accounting dimensions",
+  "Starter": "Starter",
+  "Essential": "Essential",
+  "Enterprise": "Enterprise",
   "libya": "Libya",
   "mm_dd_yy": "MM/DD/YY",
   "dd_mm_yy": "DD/MM/YY",
@@ -1121,5 +1106,34 @@
   "something_went_wrong": "Something went wrong!",
   "please_refresh_the_page": "Please refresh the page",
   "waiting_to_redirect": "Waiting to redirect",
-  "refresh_the_page_if_redirect_not_worked": "Refresh the page if redirect not worked."
+  "refresh_the_page_if_redirect_not_worked": "Refresh the page if redirect not worked.",
+  "blog": "Blog",
+  "support": "Support",
+  "service_status": "Service Status",
+  "pricing": "Pricing",
+  "reseller_partner": "Reseller Partner",
+  "docs": "Docs",
+  "Pleasse enter your voucher number that you received from reseller.": "Pleasse enter your voucher number that you received from reseller.",
+  "Sale and purchase invoices.": "Sale and purchase invoices.",
+  "Customers/vendors accounts.": "Customers/vendors accounts.",
+  "Expenses tracking.": "Expenses tracking.",
+  "Manual journals.": "Manual journals.",
+  "Financial reports.": "Financial reports.",
+  "All Capital Starter features.": "All Capital Starter features.",
+  "Multi-currency.": "Multi-currency.",
+  "Purchase and sell orders.": "Purchase and sell orders.",
+  "Inventory management.": "Inventory management.",
+  "Three users with your accountant.": "Three users with your accountant.",
+  "Advanced financial reports.": "Advanced financial reports.",
+  "All Capital Essential features.": "All Capital Essential features.",
+  "Track multi-branches and locations.": "Track multi-branches and locations.",
+  "Projects accounting and timesheets.": "Projects accounting and timesheets.",
+  "Accounting dimensions.": "Accounting dimensions.",
+  "For one user and accountant.": "For one user and accountant.",
+  "Monthly": "Monthly",
+  "Yearly": "Yearly",
+  "Plans & Payment": "Plans & Payment",
+  "Initializing": "Initializing",
+  "Getting started": "Getting started",
+  "Congratulations": "Congratulations"
 }

client/src/routes/register.js

@@ -1,7 +1,6 @@
 import LazyLoader from 'components/LazyLoader';
 
 export default [
-  
   {
     path: '/register/subscription',
     component: LazyLoader({

client/src/store/plans/plans.actions.js

@@ -0,0 +1,5 @@
+import t from 'store/types';
+
+export const initSubscriptionPlans = () => ({
+  type: t.INIT_SUBSCRIPTION_PLANS
+});

client/src/store/plans/plans.reducer.js

@@ -1,52 +1,84 @@
 import { createReducer } from '@reduxjs/toolkit';
+import intl from 'react-intl-universal';
+import t from 'store/types';
+
+const getSubscriptionPlans = () => [
+  {
+    name: intl.get('Starter'),
+    slug: 'starter',
+    description: [
+      intl.get('Sale and purchase invoices.'),
+      intl.get('Customers/vendors accounts.'),
+      intl.get('Expenses tracking'),
+      intl.get('Manual journals.'),
+      intl.get('Financial reports.'),
+      intl.get('For one user and accountant.'),
+    ],
+    price: {
+      month: '100',
+      year: '1,200',
+    },
+    currencyCode: 'LYD',
+  },
+  {
+    name: intl.get('Essential'),
+    slug: 'plus',
+    description: [
+      intl.get('All Capital Starter features.'),
+      intl.get('Multi-currency.'),
+      intl.get('Purchase and sell orders.'),
+      intl.get('Inventory management.'),
+      intl.get('Three users with your accountant.'),
+      intl.get('Advanced financial reports.'),
+    ],
+    price: {
+      month: '200',
+      year: '2,400',
+    },
+    currencyCode: 'LYD',
+  },
+  {
+    name: intl.get('Enterprise'),
+    slug: 'enterprise',
+    description: [
+      intl.get('All Capital Essential features.'),
+      intl.get('Track multi-branches and locations.'),
+      intl.get('Projects accounting and timesheets.'),
+      intl.get('Accounting dimensions.'),
+    ],
+    price: {
+      month: '300',
+      year: '3,400',
+    },
+    currencyCode: 'LYD',
+  },
+];
+
+const getSubscriptionPeriods = () => [
+  {
+    slug: 'month',
+    label: intl.get('Monthly'),
+  },
+  {
+    slug: 'year',
+    label: intl.get('Yearly'),
+  },
+];
 
 const initialState = {
-  plans: [
-    {
-      name: 'Free',
-      slug: 'free',
-      description: [
-        'Sales/purchases module.',
-        'Expense module.',
-        'Inventory module.',
-        'Unlimited status pages.',
-        'Unlimited status pages.',
-      ],
-      price: {
-        month: '100',
-        year: '1200',
-      },
-      currencyCode: 'LYD',
-    },
-    {
-      name: 'Pro',
-      slug: 'pro',
-      description: [
-        'Sales/purchases module.',
-        'Expense module.',
-        'Inventory module.',
-        'Unlimited status pages.',
-        'Unlimited status pages.',
-      ],
-      price: {
-        month: '200',
-        year: '2400',
-      },
-      currencyCode: 'LYD',
-    },
-  ],
-  periods: [
-    {
-      slug: 'month',
-      label: 'Monthly',
-    },
-    {
-      slug: 'year',
-      label: 'Yearly',
-    },
-  ],
+  plans: [],
+  periods: [],
 };
 
 export default createReducer(initialState, {
+  /**
+   * Initialize the subscription plans.
+   */
+  [t.INIT_SUBSCRIPTION_PLANS]: (state) => {
+    const plans = getSubscriptionPlans();
+    const periods = getSubscriptionPeriods();
 
+    state.plans = plans;
+    state.periods = periods;
+  },
 });

client/src/store/plans/plans.types.js

@@ -0,0 +1,4 @@
+
+export default {
+  INIT_SUBSCRIPTION_PLANS: 'INIT_SUBSCRIPTION_PLANS',
+};

client/src/store/types.js

@@ -27,6 +27,7 @@ import paymentMades from './PaymentMades/paymentMades.type';
 import organizations from './organizations/organizations.types';
 import subscription from './subscription/subscription.types';
 import inventoryAdjustments from './inventoryAdjustments/inventoryAdjustment.type';
+import plans from './plans/plans.types';
 
 export default {
   ...authentication,
@@ -57,5 +58,6 @@ export default {
   ...paymentMades,
   ...organizations,
   ...subscription,
-  ...inventoryAdjustments
+  ...inventoryAdjustments,
+  ...plans
 };

client/src/style/pages/Setup/SetupPage.scss

@@ -1,5 +1,5 @@
 .setup-page {
-  max-width: 1400px;
+  max-width: 1600px;
 
   &__right-section {
     display: flex;
@@ -26,7 +26,7 @@
   }
 
   &__content {
-    width: 70%;
+    width: 100%;
     padding-bottom: 40px;
   }
 
@@ -127,7 +127,6 @@
 
 .setup-page-steps {
   &-container {
-    width: 80%;
     margin: 0 auto;
     padding: 50px 0 0;
   }
@@ -167,13 +166,15 @@
       display: none;
     }
     &.is-active {
+      text-decoration: underline;
+
       &::before {
         background-color: #75859c;
       }
       ~ li {
         &:before,
         &:after {
-          background: #ebebeb;
+          background: #e0e0e0;
         }
       }
       p.wizard-info {

client/src/style/pages/Setup/Subscription.scss

@@ -1,7 +1,6 @@
 
 .setup-subscription-form{
-  max-width: 800px;
   margin: 0 auto;
-  padding: 0 60px;
+  padding: 0 80px;
   margin-top: 40px;
 }

client/src/style/pages/Subscription/BillingPlans.scss

@@ -1,12 +1,16 @@
 
 .billing-plans{
+  
+  .paragraph{
+    font-size: 15px;
+  }
 
   &__section{
-    margin-bottom: 35px;
+    margin-bottom: 40px;
 
     .title{
-      font-size: 22px;
-      font-weight: 500;
+      font-size: 20px;
+      font-weight: 600;
       color: #6b7382;
       margin-top: 0;
       margin-bottom: 12px;

client/src/style/pages/Subscription/PlanRadio.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   width: 215px;
-  height: 267px;
+  min-height: 277px;
   border-radius: 5px;
   padding: 15px;
   border: 1px solid #dcdcdc;
@@ -32,10 +32,10 @@
   &__name {
     background: #3657ff;
     border-radius: 3px;
-    padding: 2px 8px 2px 8px;
+    padding: 2px 10px;
     font-size: 13px;
     color: #fff;
-    margin-bottom: 16px;
+    margin-bottom: 18px;
     height: 21px;
     text-transform: uppercase;
   }
@@ -47,13 +47,23 @@
       list-style: none;
 
       li{
+        position: relative;
+        padding-left: 12px;
         margin-bottom: 9px;
+
+        &:before{
+          content: '-';
+          position: absolute;
+          left: 0;
+          opacity: 0.6;
+        }
       }
     }
   }
   &__price {
     margin-top: auto;
     font-size: 15px;
+    padding-top: 10px;
   }
   &__amount {
     font-weight: 600;