From 87c903d0f37376d42d79f9d1f6927b5455f09b4d Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Tue, 22 Jun 2021 12:11:55 +0200 Subject: [PATCH] WIP: Arabic localization. --- client/src/common/registerWizard.js | 12 +- .../components/Dashboard/DashboardFooter.js | 5 +- client/src/config/footerLinks.js | 17 ++- client/src/containers/Authentication/Login.js | 2 +- .../PaymentViaVoucherForm.js | 2 +- .../src/containers/Setup/SetupLeftSection.js | 6 +- .../src/containers/Setup/SetupSubscription.js | 22 +++- .../src/containers/Setup/WizardSetupSteps.js | 12 +- .../Subscriptions/BillingPlansForm.js | 6 +- .../Subscriptions/BillingPlansInput.js | 6 +- .../withSubscriptionPlansActions.js | 8 ++ client/src/lang/en/index.js | 2 +- client/src/lang/en/index.json | 58 +++++---- client/src/routes/register.js | 1 - client/src/store/plans/plans.actions.js | 5 + client/src/store/plans/plans.reducer.js | 120 +++++++++++------- client/src/store/plans/plans.types.js | 4 + client/src/store/types.js | 4 +- client/src/style/pages/Setup/SetupPage.scss | 9 +- .../src/style/pages/Setup/Subscription.scss | 3 +- .../pages/Subscription/BillingPlans.scss | 10 +- .../style/pages/Subscription/PlanRadio.scss | 16 ++- 22 files changed, 215 insertions(+), 115 deletions(-) create mode 100644 client/src/containers/Subscriptions/withSubscriptionPlansActions.js create mode 100644 client/src/store/plans/plans.actions.js create mode 100644 client/src/store/plans/plans.types.js diff --git a/client/src/common/registerWizard.js b/client/src/common/registerWizard.js index eef7523c6..900822f01 100644 --- a/client/src/common/registerWizard.js +++ b/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'), }, ]; \ No newline at end of file diff --git a/client/src/components/Dashboard/DashboardFooter.js b/client/src/components/Dashboard/DashboardFooter.js index 3f8974200..4a89621fc 100644 --- a/client/src/components/Dashboard/DashboardFooter.js +++ b/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 (
diff --git a/client/src/config/footerLinks.js b/client/src/config/footerLinks.js index a361fcb7d..8702f266e 100644 --- a/client/src/config/footerLinks.js +++ b/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: '#', }, { diff --git a/client/src/containers/Authentication/Login.js b/client/src/containers/Authentication/Login.js index 7007cc471..afa1006f8 100644 --- a/client/src/containers/Authentication/Login.js +++ b/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, diff --git a/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js b/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js index abeee9048..241661168 100644 --- a/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js +++ b/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js @@ -31,7 +31,7 @@ function PaymentViaLicenseForm({

- +

diff --git a/client/src/containers/Setup/SetupLeftSection.js b/client/src/containers/Setup/SetupLeftSection.js index 68054e1e9..3e39b9932 100644 --- a/client/src/containers/Setup/SetupLeftSection.js +++ b/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(); }; diff --git a/client/src/containers/Setup/SetupSubscription.js b/client/src/containers/Setup/SetupSubscription.js index 822e98ded..9282b5626 100644 --- a/client/src/containers/Setup/SetupSubscription.js +++ b/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() { />
); -} \ No newline at end of file +} + +export default R.compose( + withSubscriptionPlansActions, +)(SetupSubscription); \ No newline at end of file diff --git a/client/src/containers/Setup/WizardSetupSteps.js b/client/src/containers/Setup/WizardSetupSteps.js index a1d001ad5..8b03b0ab0 100644 --- a/client/src/containers/Setup/WizardSetupSteps.js +++ b/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 (

  • - + { label }

    • ); } +/** + * Setup wizard setups. + */ export default function WizardSetupSteps({ currentStep = 1 }) { + const setupWizardSetups = getSetupWizardSteps(); + return (
      - {registerWizardSteps.map((step, index) => ( + {setupWizardSetups.map((step, index) => ( } /> } /> } />
    diff --git a/client/src/containers/Subscriptions/BillingPlansInput.js b/client/src/containers/Subscriptions/BillingPlansInput.js index 540493cc8..abdb8d6a9 100644 --- a/client/src/containers/Subscriptions/BillingPlansInput.js +++ b/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 }) {

    {description}

    - + {({ form: { setFieldValue }, field: { value } }) => (
    {plans.map((plan) => ( @@ -33,7 +33,7 @@ function BillingPlans({ plans, title, description, selectedOption }) { ))}
    )} -     + ); } diff --git a/client/src/containers/Subscriptions/withSubscriptionPlansActions.js b/client/src/containers/Subscriptions/withSubscriptionPlansActions.js new file mode 100644 index 000000000..0689ced84 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 8de51d797..9b072d26c 100644 --- a/client/src/lang/en/index.js +++ b/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', }; diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json index 49af9e971..2369d498e 100644 --- a/client/src/lang/en/index.json +++ b/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" } \ No newline at end of file diff --git a/client/src/routes/register.js b/client/src/routes/register.js index 44277cd21..2d103816d 100644 --- a/client/src/routes/register.js +++ b/client/src/routes/register.js @@ -1,7 +1,6 @@ import LazyLoader from 'components/LazyLoader'; export default [ - { path: '/register/subscription', component: LazyLoader({ diff --git a/client/src/store/plans/plans.actions.js b/client/src/store/plans/plans.actions.js new file mode 100644 index 000000000..7e7c3d2cf --- /dev/null +++ b/client/src/store/plans/plans.actions.js @@ -0,0 +1,5 @@ +import t from 'store/types'; + +export const initSubscriptionPlans = () => ({ + type: t.INIT_SUBSCRIPTION_PLANS +}); \ No newline at end of file diff --git a/client/src/store/plans/plans.reducer.js b/client/src/store/plans/plans.reducer.js index 5f661231a..e0d9bbf3b 100644 --- a/client/src/store/plans/plans.reducer.js +++ b/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; + }, }); diff --git a/client/src/store/plans/plans.types.js b/client/src/store/plans/plans.types.js new file mode 100644 index 000000000..fe29fa7fd --- /dev/null +++ b/client/src/store/plans/plans.types.js @@ -0,0 +1,4 @@ + +export default { + INIT_SUBSCRIPTION_PLANS: 'INIT_SUBSCRIPTION_PLANS', +}; \ No newline at end of file diff --git a/client/src/store/types.js b/client/src/store/types.js index d72aa65e6..b2d4d0ef8 100644 --- a/client/src/store/types.js +++ b/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 }; diff --git a/client/src/style/pages/Setup/SetupPage.scss b/client/src/style/pages/Setup/SetupPage.scss index 7393911ed..1a1b3531d 100644 --- a/client/src/style/pages/Setup/SetupPage.scss +++ b/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 { diff --git a/client/src/style/pages/Setup/Subscription.scss b/client/src/style/pages/Setup/Subscription.scss index fa07c25c9..3a8f0b5af 100644 --- a/client/src/style/pages/Setup/Subscription.scss +++ b/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; } diff --git a/client/src/style/pages/Subscription/BillingPlans.scss b/client/src/style/pages/Subscription/BillingPlans.scss index aaa828753..cc9948b53 100644 --- a/client/src/style/pages/Subscription/BillingPlans.scss +++ b/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; diff --git a/client/src/style/pages/Subscription/PlanRadio.scss b/client/src/style/pages/Subscription/PlanRadio.scss index ba8c85d45..bd0c714f3 100644 --- a/client/src/style/pages/Subscription/PlanRadio.scss +++ b/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;