Added thousands separator

- added thousands separator to helpers and signup screen

ghost/portal/src/components/common/PlansSection.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {isCookiesDisabled} from '../../utils/helpers';
+import {isCookiesDisabled, formatNumber} from '../../utils/helpers';
 
 export const PlanSectionStyles = `
     .gh-portal-plans-container {
@@ -255,7 +255,7 @@ function PriceLabel({currencySymbol, price}) {
     return (
         <div className='gh-portal-plan-pricelabel'>
             <span className={currencyClass}>{currencySymbol}</span>
-            <span className='gh-portal-plan-price'>{price}</span>
+            <span className='gh-portal-plan-price'>{formatNumber(price)}</span>
         </div>
     );
 }

ghost/portal/src/utils/fixtures.js

@@ -6,8 +6,8 @@ export const site = {
     accent_color: '',
     url: 'http://localhost:2368/',
     plans: {
-        monthly: 5,
-        yearly: 15,
+        monthly: 5000,
+        yearly: 150000,
         currency: 'USD'
     },
     allow_self_signup: true,

ghost/portal/src/utils/helpers.js

@@ -191,6 +191,10 @@ export const getCurrencySymbol = (currency) => {
     return Intl.NumberFormat('en', {currency, style: 'currency'}).format(0).replace(/[\d\s.]/g, '');
 };
 
+export const formatNumber = (amount) => {
+    return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
 export const createPopupNotification = ({type, status, autoHide, duration, closeable, state, message, meta = {}}) => {
     let count = 0;
     if (state && state.popupNotification) {