@liiift-studio/sales-portal 2.3.0 → 3.1.0

package/README.md

@@ -72,7 +72,7 @@ export default function SalesPortal() {
     <SalesPortalPage
       texts={{
         title: 'Sales Portal',
-        dashboardTitle: 'Monthly Sales',
+        dashboardTitle: ' Sales',
         dashboardSubtitle: 'by designer'
       }}
     />

package/SETUP.md

@@ -39,7 +39,7 @@ export default function SalesPortal() {
         title: 'Sales Portal',
         description: 'Track your typeface sales performance and revenue.',
         subtitle: 'All sales are reviewed internally before payouts.',
-        dashboardTitle: 'Monthly Sales',
+        dashboardTitle: 'Sales',
         dashboardSubtitle: 'by designer'
       }}
     />

package/api/getYearSales.js

@@ -0,0 +1,105 @@
+// API endpoint for fetching a full year of sales data in a single request
+import { authenticateDesigner, processSalesData } from './utils/salesDataProcessor';
+import { sendError, requirePost } from './utils/apiResponse';
+
+export const config = { maxDuration: 300 };
+
+/**
+ * Fetches 12 months of sales data, processes each month, and returns
+ * the results grouped by month with typeface breakdowns.
+ * This avoids 12 separate API calls from the frontend.
+ */
+export default async function handler(req, res) {
+	if (!requirePost(req, res)) return;
+
+	try {
+		const { user, password, year, admin } = req.body;
+
+		if (!year) {
+			return sendError(res, 400, 'Year is required');
+		}
+
+		const designer = await authenticateDesigner(user, password);
+		if (!designer) {
+			return sendError(res, 401, 'Looks like there was an issue finding the account.');
+		}
+
+		const months = [];
+
+		// Process each month sequentially to avoid Stripe rate limiting
+		for (let month = 0; month < 12; month++) {
+			const monthDate = new Date(Date.UTC(year, month, 1));
+
+			try {
+				const sales = await processSalesData({
+					date: monthDate.toISOString(),
+					designer,
+					admin
+				});
+
+				// Group sales by typeface for the stacked chart
+				const typefaceMap = {};
+				let monthTotal = 0;
+				let shippingTotal = 0;
+
+				sales.forEach(sale => {
+					if (sale.shippingProvision) {
+						shippingTotal += sale.total || 0;
+						return;
+					}
+
+					const typefaceName = sale.typeface?.title || sale.description?.split(' (')[0] || 'Other';
+					if (!typefaceMap[typefaceName]) {
+						typefaceMap[typefaceName] = { total: 0, count: 0 };
+					}
+					typefaceMap[typefaceName].total += sale.total || 0;
+					typefaceMap[typefaceName].count += 1;
+					monthTotal += sale.total || 0;
+				});
+
+				months.push({
+					month,
+					year,
+					total: monthTotal,
+					shippingTotal,
+					salesCount: sales.length,
+					currency: sales[0]?.currency || 'usd',
+					typefaces: Object.entries(typefaceMap)
+						.map(([name, data]) => ({ name, ...data }))
+						.sort((a, b) => b.total - a.total),
+				});
+			} catch (monthError) {
+				// If a single month fails, include it with zero data rather than failing the whole request
+				console.error(`Error processing month ${month + 1}/${year}:`, monthError.message);
+				months.push({
+					month,
+					year,
+					total: 0,
+					shippingTotal: 0,
+					salesCount: 0,
+					currency: 'usd',
+					typefaces: [],
+					error: monthError.message,
+				});
+			}
+		}
+
+		// Build a list of all typefaces across the year for consistent chart series
+		const allTypefaces = new Set();
+		months.forEach(m => m.typefaces.forEach(t => allTypefaces.add(t.name)));
+
+		res.status(200).json({
+			success: true,
+			data: {
+				year,
+				months,
+				allTypefaces: [...allTypefaces].sort(),
+				yearTotal: months.reduce((sum, m) => sum + m.total, 0),
+				yearShipping: months.reduce((sum, m) => sum + m.shippingTotal, 0),
+				currency: months.find(m => m.currency)?.currency || 'usd',
+			}
+		});
+	} catch (error) {
+		return sendError(res, 500, 'Failed to fetch year sales data', error);
+	}
+}

package/api/utils/processors/invoiceProcessor.js

@@ -17,8 +17,8 @@ import { isTestSale } from '../clients';
 function findMatches({ invoice, line = {}, sanitySales = [] }) {
 	// Find matching order
 	const associatedOrder = 
-		(invoice?.id && sanitySales.find(order => order.orderStatus.invoiceId === invoice.id)) || 
-		(invoice?.payment_intent && sanitySales.find(order => order.orderStatus.paymentIntentId === invoice.payment_intent)) || 
+		(invoice?.id && sanitySales.find(order => order?.orderStatus?.invoiceId === invoice.id)) ||
+		(invoice?.payment_intent && sanitySales.find(order => order?.orderStatus?.paymentIntentId === invoice.payment_intent)) ||
 		(invoice?.customer?.email && sanitySales.find(order => {
 			const orderDate = new Date(order._createdAt);
 			const invoiceDate = new Date(invoice.created * 1000);

package/components/DateRangeSalesTable.js

@@ -514,7 +514,7 @@ export function DateRangeSalesTable({ designer, admin, loading, updateLoadingSta
               ? '2px solid var(--green, green)'
               : '2px solid var(--red, red)',
             color: reconciliationData.isReconciled
-              ? 'var(--green, green)'
+              ? 'var(--black, #1a1a1a)'
               : 'var(--red, red)',
             backgroundColor: 'rgba(255, 255, 255, 0.9)',
             filter: 'invert(0) !important',

package/components/Sales.js

@@ -18,6 +18,7 @@ import countryCodes from '../data/countryCode.json';
 import { getCurrencySymbol, getCurrencyLabel } from '../utils/currencyUtils';
 import { SalesTable } from './SalesTable';
 import { DateRangeSalesTable } from './DateRangeSalesTable';
+import YearOverview from './YearOverview';
 import SalesChart from './SalesChart';
 import TopPerformers from './TopPerformers';
 import TypefaceList from './TypefaceList';
@@ -47,6 +48,7 @@ export default function Sales(props) {
 	const [previousSalesError, setPreviousSalesError] = useState('');
 	const [retryInfo, setRetryInfo] = useState({ retrying: false, attempt: 0, label: '' });
 	const [date, setDate] = useState(null);
+	const [viewMode, setViewMode] = useState('month'); // 'month' | 'year'
 	const [displayLosses, setDisplayLosses] = useState(false);
 
 	// Max retry attempts for failed API calls
@@ -201,6 +203,11 @@ export default function Sales(props) {
 				},
 				'Sales data'
 			);
+
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}`);
+			}
+
 			const data = await response.json();
 
 			if (data.success) {
@@ -255,6 +262,10 @@ export default function Sales(props) {
 				'Previous sales data'
 			);
 
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}`);
+			}
+
 			const data = await response.json();
 
 			if (data.success) {
@@ -312,8 +323,27 @@ export default function Sales(props) {
 			const processedLicenseTypeData = processLicenseTypeData(sales);
 			setLicenseTypeData(processedLicenseTypeData);
 
-			// Set total sales (sum of all sales minus tax and shipping)
-			const totalRevenue = (processedData.salesMax - processedData.taxData.at(-1) - processedData.shippingData.at(-1)) || 0;
+			// Set total sales from unique invoice amounts (accounts for discounts correctly)
+			const seenInvoices = new Set();
+			let totalRevenue = 0;
+			sales.forEach(s => {
+				if (s.shippingProvision) return;
+				const sid = s.id;
+				if (sid && !seenInvoices.has(sid)) {
+					seenInvoices.add(sid);
+					totalRevenue += (s.invoiceTotal || s.total || 0) / 100;
+				}
+			});
+			// Subtract refunds
+			const seenRefunds = new Set();
+			sales.forEach(s => {
+				s.refunds?.forEach(r => {
+					if (r.id && !seenRefunds.has(r.id)) {
+						seenRefunds.add(r.id);
+						totalRevenue -= (r.total || 0) / 100;
+					}
+				});
+			});
 			setTotal(totalRevenue);
 			
 			// Calculate revenue change percentage compared to previous period
@@ -565,10 +595,14 @@ export default function Sales(props) {
 				data-disabled={loading}
 			>
 				<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-					<IconButton 
+					<IconButton
 						onClick={() => {
 							const newDate = new Date(date);
-							newDate.setUTCMonth(date.getUTCMonth() - 1);
+							if (viewMode === 'year') {
+								newDate.setUTCFullYear(date.getUTCFullYear() - 1);
+							} else {
+								newDate.setUTCMonth(date.getUTCMonth() - 1);
+							}
 							setDate(newDate);
 						}}
 						size="small"
@@ -577,19 +611,23 @@ export default function Sales(props) {
 						<ChevronLeftIcon />
 					</IconButton>
 					<DatePicker
-						label='Month/Year (UTC)'
-						views={['month', 'year']}
-						format="MMM YYYY"
+						label={viewMode === 'year' ? 'Year (UTC)' : 'Month/Year (UTC)'}
+						views={viewMode === 'year' ? ['year'] : ['month', 'year']}
+						format={viewMode === 'year' ? 'YYYY' : 'MMM YYYY'}
 						formatDensity="dense"
 						slotProps={{ textField: { variant: "filled" } }}
 						sx={{ "& *": { borderRadius: "4px" } }}
 						value={dayjs.utc(date)}
 						onChange={(newValue) => setDate(newValue.toDate())}
 					/>
-					<IconButton 
+					<IconButton
 						onClick={() => {
 							const newDate = new Date(date);
-							newDate.setUTCMonth(date.getUTCMonth() + 1);
+							if (viewMode === 'year') {
+								newDate.setUTCFullYear(date.getUTCFullYear() + 1);
+							} else {
+								newDate.setUTCMonth(date.getUTCMonth() + 1);
+							}
 							setDate(newDate);
 						}}
 						size="small"
@@ -671,6 +709,37 @@ export default function Sales(props) {
 							</IconButton>
 						</Tooltip>
 					)}
+					{/* Month/Year toggle */}
+					<Box sx={{
+						display: 'flex',
+						ml: 1,
+						border: '1px solid var(--black, #1a1a1a)',
+						borderRadius: '4px',
+						overflow: 'hidden',
+					}}>
+						{['month', 'year'].map(mode => (
+							<Box
+								key={mode}
+								onClick={() => setViewMode(mode)}
+								sx={{
+									px: 1.5,
+									py: 0.5,
+									cursor: 'pointer',
+									fontSize: '0.75rem',
+									fontWeight: viewMode === mode ? 'bold' : 'normal',
+									bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'transparent',
+									color: viewMode === mode ? 'var(--white, white)' : 'inherit',
+									textTransform: 'uppercase',
+									letterSpacing: '0.05em',
+									'&:hover': {
+										bgcolor: viewMode === mode ? 'var(--black, #1a1a1a)' : 'rgba(0,0,0,0.05)',
+									},
+								}}
+							>
+								{mode === 'month' ? 'Mo' : 'Yr'}
+							</Box>
+						))}
+					</Box>
 				</Box>
 			</Box>
 
@@ -724,7 +793,7 @@ export default function Sales(props) {
 				</Box>
 			}
 		</Box>
-	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo]);
+	), [loading, sales, total, designer, date, message, revenueChangePercent, previousSales, retryInfo, viewMode]);
 
 	return (
 		<LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -753,7 +822,6 @@ export default function Sales(props) {
 					{/* Sales Data Display */}
 					{!!sales.length && (
 						<>
-
 							<Box
 								data-disabled={loading}
 								className={`sales-data-section ${styles.salesSection}`}
@@ -765,18 +833,32 @@ export default function Sales(props) {
 								}}
 							>
 
-								{/* Chart Section */}
-								<Box className="sales-chart-wrapper">
-									<SalesChart
-										sales={sales}
-										chartState={chartState}
-										seriesData={seriesData}
-										displayLosses={displayLosses}
-										setDisplayLosses={setDisplayLosses}
-										date={date}
-										loading={loading}
-									/>
-								</Box>
+								{/* Chart Section — Year or Month */}
+								{viewMode === 'year' && date ? (
+									<Box className="year-overview-wrapper">
+										<YearOverview
+											designer={designer}
+											year={date.getUTCFullYear()}
+											onMonthClick={(monthIndex) => {
+												const newDate = new Date(Date.UTC(date.getUTCFullYear(), monthIndex, 1));
+												setDate(newDate);
+												setViewMode('month');
+											}}
+										/>
+									</Box>
+								) : (
+									<Box className="sales-chart-wrapper">
+										<SalesChart
+											sales={sales}
+											chartState={chartState}
+											seriesData={seriesData}
+											displayLosses={displayLosses}
+											setDisplayLosses={setDisplayLosses}
+											date={date}
+											loading={loading}
+										/>
+									</Box>
+								)}
 
 								{/* Summary Dashboard */}
 								<Box className="summary-cards-wrapper">
@@ -828,7 +910,7 @@ export default function Sales(props) {
 								{/* Sales Table Section */}
 								{designer && (
 									<Box className="sales-table-wrapper">
-										<SalesTable 
+										<SalesTable
 											sales={sales}
 											designer={designer}
 											admin={admin}
@@ -841,12 +923,12 @@ export default function Sales(props) {
 							</Box>
 
 							{/* Date Range Sales Table Section */}
-								<DateRangeSalesTable
-									designer={designer}
-									admin={admin}
-									loading={loadingStates.dateRangeSalesData}
-									updateLoadingState={updateLoadingState}
-								/>
+							<DateRangeSalesTable
+								designer={designer}
+								admin={admin}
+								loading={loadingStates.dateRangeSalesData}
+								updateLoadingState={updateLoadingState}
+							/>
 						</>
 					)}
 

package/components/SalesPortalPage.js

@@ -60,7 +60,7 @@ export default function SalesPortalPage({
 
 	// Default page title text
 	const {
-		dashboardTitle = 'Monthly Sales',
+		dashboardTitle = 'Sales',
 		dashboardSubtitle = 'by designer'
 	} = texts;
 

package/components/SalesTable.js

@@ -173,7 +173,7 @@ export function SalesTable({ sales = [], designer = {}, admin = false, loading =
               ? '2px solid var(--green, green)'
               : '2px solid var(--red, red)',
             color: reconciliationData.isReconciled
-              ? 'var(--green, green)'
+              ? 'var(--black, #1a1a1a)'
               : 'var(--red, red)',
           }}>
             {reconciliationData.isLoading ? (

package/components/YearOverview.js

@@ -0,0 +1,243 @@
+// Year overview component showing 12-month stacked bar chart by typeface
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Typography, CircularProgress, Tooltip } from '@mui/material';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
+import { getCurrencySymbol } from '../utils/currencyUtils';
+
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+// Color palette for typeface segments
+const COLORS = [
+	'var(--black, #1a1a1a)',
+	'var(--green, #4caf50)',
+	'#2196f3',
+	'#ff9800',
+	'#9c27b0',
+	'#f44336',
+	'#00bcd4',
+	'#795548',
+	'#607d8b',
+	'#e91e63',
+	'#3f51b5',
+	'#cddc39',
+];
+
+/**
+ * Year overview component
+ * @param {Object} props
+ * @param {Object} props.designer - Designer data with user/password
+ * @param {number} props.year - Year to display
+ * @param {Function} props.onMonthClick - Called when a bar is clicked, receives month index
+ */
+export default function YearOverview({ designer, year, onMonthClick }) {
+	const [data, setData] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState('');
+
+	useEffect(() => {
+		if (!designer?.user || !designer?.password || !year) return;
+
+		setLoading(true);
+		setError('');
+
+		fetch('/api/sales-portal/getYearSales', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				user: designer.user,
+				password: designer.password,
+				year,
+				admin: designer.admin || false,
+			}),
+		})
+			.then(res => res.json())
+			.then(res => {
+				if (res.success) {
+					setData(res.data);
+				} else {
+					setError(res.message || 'Failed to load year data');
+				}
+			})
+			.catch(err => setError(err.message))
+			.finally(() => setLoading(false));
+	}, [designer?.user, designer?.password, designer?.admin, year]);
+
+	// Build chart series from typeface data
+	const { series, xAxisData, topTypefaces } = useMemo(() => {
+		if (!data?.months) return { series: [], xAxisData: [], topTypefaces: [] };
+
+		// Get top typefaces by total revenue across the year, cap at 12 for readability
+		const typefaceTotals = {};
+		data.months.forEach(m => {
+			m.typefaces.forEach(t => {
+				typefaceTotals[t.name] = (typefaceTotals[t.name] || 0) + t.total;
+			});
+		});
+
+		const sorted = Object.entries(typefaceTotals)
+			.sort((a, b) => b[1] - a[1]);
+
+		// Top N get individual colors, rest grouped as "Other"
+		const MAX_SERIES = 10;
+		const topNames = sorted.slice(0, MAX_SERIES).map(([name]) => name);
+		const hasOther = sorted.length > MAX_SERIES;
+
+		const chartSeries = topNames.map((name, i) => ({
+			type: 'bar',
+			data: data.months.map(m => {
+				const tf = m.typefaces.find(t => t.name === name);
+				return (tf?.total || 0) / 100;
+			}),
+			label: name,
+			stack: 'total',
+			color: COLORS[i % COLORS.length],
+		}));
+
+		if (hasOther) {
+			chartSeries.push({
+				type: 'bar',
+				data: data.months.map(m => {
+					const otherTotal = m.typefaces
+						.filter(t => !topNames.includes(t.name))
+						.reduce((sum, t) => sum + t.total, 0);
+					return otherTotal / 100;
+				}),
+				label: 'Other',
+				stack: 'total',
+				color: '#e0e0e0',
+			});
+		}
+
+		return {
+			series: chartSeries,
+			xAxisData: MONTH_LABELS,
+			topTypefaces: sorted.slice(0, MAX_SERIES),
+		};
+	}, [data]);
+
+	if (loading) {
+		return (
+			<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 300, gap: 2 }}>
+				<CircularProgress size={24} />
+				<Typography variant="body1">Loading {year} sales data...</Typography>
+			</Box>
+		);
+	}
+
+	if (error) {
+		return (
+			<Box sx={{ p: 4, textAlign: 'center' }}>
+				<Typography variant="body1" sx={{ color: 'var(--red, red)' }}>{error}</Typography>
+			</Box>
+		);
+	}
+
+	if (!data) return null;
+
+	const symbol = getCurrencySymbol(data.currency);
+
+	return (
+		<Box sx={{ width: '100%' }}>
+			{/* Year total */}
+			<Typography variant="h6" sx={{ mb: 2, opacity: 0.7 }}>
+				{year} Total: {symbol}{(data.yearTotal / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+				{data.yearShipping > 0 && (
+					<span style={{ opacity: 0.5, fontSize: '0.8em' }}>
+						{' '}(+ {symbol}{(data.yearShipping / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })} shipping)
+					</span>
+				)}
+			</Typography>
+
+			{/* Stacked bar chart */}
+			{series.length > 0 ? (
+				<Box sx={{ width: '100%', height: { xs: 250, sm: 350 } }}>
+					<ResponsiveChartContainer
+						series={series}
+						xAxis={[{
+							data: xAxisData,
+							scaleType: 'band',
+							id: 'months',
+						}]}
+						yAxis={[{
+							id: 'revenue',
+							valueFormatter: (v) => `${symbol}${v?.toLocaleString() || 0}`,
+						}]}
+					>
+						<BarPlot
+							onItemClick={(event, barData) => {
+								if (onMonthClick && barData?.dataIndex !== undefined) {
+									onMonthClick(barData.dataIndex);
+								}
+							}}
+						/>
+						<ChartsXAxis axisId="months" />
+						<ChartsYAxis axisId="revenue" />
+						<ChartsTooltip />
+						<ChartsAxisHighlight x="band" />
+					</ResponsiveChartContainer>
+				</Box>
+			) : (
+				<Typography variant="body2" sx={{ textAlign: 'center', py: 4, opacity: 0.5 }}>
+					No sales data for {year}
+				</Typography>
+			)}
+
+			{/* Legend */}
+			{topTypefaces.length > 0 && (
+				<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mt: 2 }}>
+					{topTypefaces.map(([name, total], i) => (
+						<Tooltip key={name} title={`${symbol}${(total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}`}>
+							<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'default' }}>
+								<Box sx={{
+									width: 12,
+									height: 12,
+									borderRadius: '2px',
+									bgcolor: COLORS[i % COLORS.length],
+								}} />
+								<Typography variant="caption">{name}</Typography>
+							</Box>
+						</Tooltip>
+					))}
+				</Box>
+			)}
+
+			{/* Monthly breakdown table */}
+			<Box sx={{ mt: 4, opacity: 0.8 }}>
+				{data.months.map((m, i) => (
+					<Box
+						key={i}
+						onClick={() => onMonthClick && onMonthClick(i)}
+						sx={{
+							display: 'flex',
+							justifyContent: 'space-between',
+							py: 0.75,
+							px: 1,
+							borderBottom: '1px solid rgba(0,0,0,0.06)',
+							cursor: 'pointer',
+							'&:hover': { bgcolor: 'rgba(0,0,0,0.03)' },
+							borderRadius: '4px',
+						}}
+					>
+						<Typography variant="body2">
+							{MONTH_LABELS[i]} {year}
+							{m.error && <span style={{ color: 'var(--red, red)', marginLeft: 8 }}>error</span>}
+						</Typography>
+						<Box sx={{ display: 'flex', gap: 3 }}>
+							<Typography variant="body2" sx={{ opacity: 0.5 }}>
+								{m.salesCount} sale{m.salesCount !== 1 ? 's' : ''}
+							</Typography>
+							<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
+								{symbol}{(m.total / 100).toLocaleString('en-US', { minimumFractionDigits: 2 })}
+							</Typography>
+						</Box>
+					</Box>
+				))}
+			</Box>
+		</Box>
+	);
+}

package/index.js

@@ -10,6 +10,7 @@ export { default as Sales } from './components/Sales.js';
 export { SalesTable } from './components/SalesTable.js';
 export { DateRangeSalesTable } from './components/DateRangeSalesTable.js';
 export { default as SalesChart } from './components/SalesChart.js';
+export { default as YearOverview } from './components/YearOverview.js';
 export { default as SummaryCards } from './components/SummaryCards.js';
 export { default as TopPerformers } from './components/TopPerformers.js';
 export { default as TypefaceList } from './components/TypefaceList.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sales-portal",
-	"version": "2.3.0",
+	"version": "3.1.0",
 	"description": "Centralized sales portal package for Liiift Studio projects",
 	"main": "index.js",
 	"types": "index.d.ts",

package/styles/sales-portal.module.scss

@@ -47,7 +47,7 @@
     align-items: center;
     white-space: nowrap;
     :global(.MuiTypography-root){
-        font-family: 'Tomato Grotesk', sans-serif;
+        font-family: inherit;
     }
 }
 

package/styles/sales-portal.theme.js

@@ -27,7 +27,7 @@ let size = createTheme({
 let typography = createTheme({
 
 	typography: {
-		fontFamily: '"Ordinary", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+		fontFamily: 'inherit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
 		h1: {
 			maxWidth: '95%',
 			fontStyle: 'normal',