update query state options

src/hooks/use-locale/index.ts

@@ -53,7 +53,7 @@ const systemLanguage: Language = (locales as LocalesType)[languageTag.toLowerCas
  */
 export const useLocale = () => {
 	const { store } = useAppState();
-	const locale$ = store.locale$;
+	const locale$ = store?.locale$;
 
 	/**
 	 * Store may or may not be available

src/screens/main/components/customer-select/search.tsx

@@ -23,6 +23,7 @@ export const CustomerSearch = ({ withGuest = false }: { withGuest?: boolean }) =
 		initialParams: {
 			sort: [{ last_name: 'asc' }],
 		},
+		infiniteScroll: true,
 	});
 
 	/**

src/screens/main/components/data-table/index.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
 
 import find from 'lodash/find';
-import { useObservableEagerState } from 'observable-hooks';
+import { useObservableEagerState, useObservableSuspense } from 'observable-hooks';
 
 import { DataTable as Table, DataTableProps } from '@wcpos/components/src/data-table';
 import { ErrorBoundary } from '@wcpos/components/src/error-boundary';
-import { Suspense } from '@wcpos/components/src/suspense';
 import type {
 	ProductDocument,
 	OrderDocument,
 	CustomerDocument,
 	TaxRateDocument,
 	LogDocument,
 } from '@wcpos/database';
-import { useInfiniteScroll, Query } from '@wcpos/query';
+import { Query } from '@wcpos/query';
 
 import { ListEmptyComponent } from './empty';
 import { DataTableFooter } from './footer';
@@ -55,7 +54,7 @@ const DataTable = <TDocument extends DocumentType>({
 }: Props<TDocument>) => {
 	const { uiSettings, getUILabel } = useUISettings(id);
 	const uiColumns = useObservableEagerState(uiSettings.columns$);
-	const result = useInfiniteScroll(query);
+	const result = useObservableSuspense(query.resource);
 	const sorting = React.useRef({
 		sortBy: uiSettings.sortBy,
 		sortDirection: uiSettings.sortDirection,
@@ -138,7 +137,11 @@ const DataTable = <TDocument extends DocumentType>({
 			// data={result.hits.map(({ document }) => document)}
 			data={result.hits}
 			columns={columns}
-			onEndReached={result.nextPage}
+			onEndReached={() => {
+				if (query.infiniteScroll) {
+					query.loadMore();
+				}
+			}}
 			onEndReachedThreshold={0.5}
 			ListEmptyComponent={<ListEmptyComponent message={noDataMessage} />}
 			TableFooterComponent={TableFooterComponent}

src/screens/main/components/drawer-content/version.tsx

@@ -13,7 +13,7 @@ const Version = ({ largeScreen }) => {
 			<Text
 				className={cn('text-3xs text-primary-foreground opacity-50', largeScreen && 'text-center')}
 			>
-				{largeScreen ? 'v 1.6.3' : 'Version 1.6.3'}
+				{largeScreen ? 'v 1.7.0' : 'Version 1.7.0'}
 			</Text>
 		</Box>
 	);

src/screens/main/components/number-input.tsx

@@ -39,6 +39,8 @@ export interface NumberInputProps {
 
 /**
  * The ref is forwarded to the button.
+ *
+ * @FIXME - when the settings change, the button display does not change
  */
 export const NumberInput = React.forwardRef<React.ElementRef<typeof Button>, NumberInputProps>(
 	(

src/screens/main/components/order/filter-bar/cashier-pill.tsx

@@ -44,6 +44,7 @@ const CashierSearch = () => {
 				role: { $in: ['administrator', 'shop_manager', 'cashier'] },
 			},
 		},
+		greedy: true,
 	});
 
 	/**

src/screens/main/components/product/category-select/search.tsx

@@ -23,6 +23,7 @@ export const CategorySearch = () => {
 		initialParams: {
 			sort: [{ name: 'asc' }],
 		},
+		greedy: true,
 	});
 
 	/**

src/screens/main/components/product/tag-select/search.tsx

@@ -23,6 +23,7 @@ export const TagSearch = () => {
 		initialParams: {
 			sort: [{ name: 'asc' }],
 		},
+		greedy: true,
 	});
 
 	/**

src/screens/main/customers/customers.tsx

@@ -56,6 +56,7 @@ const Customers = () => {
 		initialParams: {
 			sort: [{ [uiSettings.sortBy]: uiSettings.sortDirection }],
 		},
+		infiniteScroll: true,
 	});
 
 	/**

src/screens/main/hooks/use-currency-format.tsx

@@ -8,7 +8,7 @@ import { useNumberFormat, NumberFormatOptions } from './use-number-format';
 import { useAppState } from '../../../contexts/app-state';
 import allCurrencies from '../../../contexts/currencies/currencies.json';
 
-interface CurrencyFormatOptions extends NumberFormatOptions {
+export interface CurrencyFormatOptions extends NumberFormatOptions {
 	currency?: string;
 	currencySymbol?: string;
 	currencyPosition?: string;

src/screens/main/hooks/use-current-order-currency-format.ts

@@ -1,15 +1,15 @@
 import { useObservableEagerState } from 'observable-hooks';
 
-import { useCurrencyFormat } from './use-currency-format';
+import { useCurrencyFormat, CurrencyFormatOptions } from './use-currency-format';
 import { useCurrentOrder } from '../pos/contexts/current-order';
 
 /**
  *
  */
-export const useCurrentOrderCurrencyFormat = () => {
+export const useCurrentOrderCurrencyFormat = (options?: CurrencyFormatOptions) => {
 	const { currentOrder } = useCurrentOrder();
 	const currencySymbol = useObservableEagerState(currentOrder.currency_symbol$);
-	const { format } = useCurrencyFormat({ currencySymbol });
+	const { format } = useCurrencyFormat({ currencySymbol, ...options });
 
 	return {
 		format,

src/screens/main/hooks/use-default-customer.ts

@@ -21,6 +21,7 @@ export const useDefaultCustomer = () => {
 		initialParams: {
 			selector: { id: defaultCustomerID },
 		},
+		infiniteScroll: true,
 	});
 
 	/**

src/screens/main/index.tsx

@@ -84,6 +84,7 @@ const DrawerNavigator = ({ navigation }) => {
 					// borderRightWidth: 0,
 				},
 				sceneContainerStyle: { height: '100%' }, // important to set height to 100% to avoid scrolling
+				// unmountOnBlur: true,
 			}}
 			drawerContent={(props) => <DrawerContent {...props} largeScreen={largeScreen} />}
 		>

src/screens/main/logs/logs.tsx

@@ -49,6 +49,7 @@ export const Logs = () => {
 		initialParams: {
 			sort: [{ [uiSettings.sortBy]: uiSettings.sortDirection }],
 		},
+		infiniteScroll: true,
 	});
 
 	/**

src/screens/main/orders/orders.tsx

@@ -75,6 +75,7 @@ const Orders = () => {
 				],
 			},
 		},
+		infiniteScroll: true,
 	});
 
 	/**

src/screens/main/pos/cart/totals.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import toNumber from 'lodash/toNumber';
+
 import { ErrorBoundary } from '@wcpos/components/src/error-boundary';
 import { HStack } from '@wcpos/components/src/hstack';
 import { Text } from '@wcpos/components/src/text';
@@ -33,27 +35,39 @@ export const Totals = () => {
 		shipping_total,
 	} = useOrderTotals();
 
+	/**
+	 * Convert to numbers
+	 */
+	const subtotalNumber = toNumber(subtotal);
+	const subtotalTaxNumber = toNumber(subtotal_tax);
+	const discountTotalNumber = toNumber(discount_total);
+	const discountTaxNumber = toNumber(discount_tax);
+	const feeTotalNumber = toNumber(fee_total);
+	const shippingTotalNumber = toNumber(shipping_total);
+	const totalTaxNumber = toNumber(total_tax);
+	const feeTaxNumber = toNumber(fee_tax);
+	const shippingTaxNumber = toNumber(shipping_tax);
+
 	/**
 	 * Helpers
 	 */
-	const hasSubtotal = parseFloat(subtotal) !== 0;
-	const hasDiscount = parseFloat(discount_total) !== 0;
-	const hasShipping = parseFloat(shipping_total) !== 0;
-	const hasFee = parseFloat(fee_total) !== 0;
-	const hasTax = parseFloat(total_tax) !== 0;
+	const hasSubtotal = subtotalNumber !== 0;
+	const hasDiscount = discountTotalNumber !== 0;
+	const hasShipping = shippingTotalNumber !== 0;
+	const hasFee = feeTotalNumber !== 0;
+	const hasTax = totalTaxNumber !== 0;
 	const hasTotals = hasSubtotal || hasDiscount || hasShipping || hasFee || hasTax;
 
 	/**
 	 *
 	 */
 	const displaySubtotal =
-		inclOrExcl === 'incl' ? parseFloat(subtotal) + parseFloat(subtotal_tax) : subtotal;
+		inclOrExcl === 'incl' ? subtotalNumber + subtotalTaxNumber : subtotalNumber;
 	const displayDiscountTotal =
-		inclOrExcl === 'incl' ? parseFloat(discount_total) + parseFloat(discount_tax) : discount_total;
-	const displayFeeTotal =
-		inclOrExcl === 'incl' ? parseFloat(fee_total) + parseFloat(fee_tax) : fee_total;
+		inclOrExcl === 'incl' ? discountTotalNumber + discountTaxNumber : discountTotalNumber;
+	const displayFeeTotal = inclOrExcl === 'incl' ? feeTotalNumber + feeTaxNumber : feeTotalNumber;
 	const displayShippingTotal =
-		inclOrExcl === 'incl' ? parseFloat(shipping_total) + parseFloat(shipping_tax) : shipping_total;
+		inclOrExcl === 'incl' ? shippingTotalNumber + shippingTaxNumber : shippingTotalNumber;
 
 	return (
 		<>
@@ -68,7 +82,7 @@ export const Totals = () => {
 						hasDiscount && (
 							<HStack>
 								<Text className="grow">{t('Discount', { _tags: 'core' })}:</Text>
-								<Text>{format(`-${displayDiscountTotal}`)}</Text>
+								<Text>{format(-1 * displayDiscountTotal)}</Text>
 							</HStack>
 						)
 					}

src/screens/main/pos/checkout/components/payment-webview.tsx

@@ -19,13 +19,14 @@ type OrderDocument = import('@wcpos/database').OrderDocument;
 
 export interface PaymentWebviewProps {
 	order: OrderDocument;
+	setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 /**
  *
  */
 export const PaymentWebview = React.forwardRef<HTMLIFrameElement, PaymentWebviewProps>(
-	({ order }: PaymentWebviewProps, ref) => {
+	({ order, setLoading }: PaymentWebviewProps, ref) => {
 		const navigation = useNavigation();
 		const paymentURL = useObservableState(
 			order.links$.pipe(map((links) => get(links, ['payment', 0, 'href']))),
@@ -81,11 +82,11 @@ export const PaymentWebview = React.forwardRef<HTMLIFrameElement, PaymentWebview
 						log.error(err);
 						Toast.show({ text1: err?.message, type: 'error' });
 					} finally {
-						//
+						setLoading(false);
 					}
 				}
 			},
-			[navigation, order, stockAdjustment, uiSettings.autoShowReceipt]
+			[navigation, order, stockAdjustment, uiSettings.autoShowReceipt, setLoading]
 		);
 
 		/**

src/screens/main/pos/checkout/index.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 
-import { useObservableSuspense, ObservableResource } from 'observable-hooks';
+import {
+	useObservableSuspense,
+	ObservableResource,
+	useObservableEagerState,
+} from 'observable-hooks';
 import { isRxDocument } from 'rxdb';
 
 import {
@@ -30,14 +34,17 @@ interface Props {
  */
 const Checkout = ({ resource }: Props) => {
 	const order = useObservableSuspense(resource);
+	const orderNumber = useObservableEagerState(order.number$);
 	const t = useT();
 	const iframeRef = React.useRef<HTMLIFrameElement>();
+	const [loading, setLoading] = React.useState(false);
 	useModalRefreshFix();
 
 	/**
 	 *
 	 */
 	const handleProcessPayment = React.useCallback(() => {
+		setLoading(true);
 		if (iframeRef.current && iframeRef.current.contentWindow) {
 			iframeRef.current.contentWindow.postMessage({ action: 'wcpos-process-payment' }, '*');
 		}
@@ -68,18 +75,22 @@ const Checkout = ({ resource }: Props) => {
 			<ModalContent size="xl" className="h-full">
 				<ModalHeader>
 					<ModalTitle>
-						<Text>{t('Checkout', { _tags: 'core' })}</Text>
+						<Text>
+							{orderNumber
+								? t('Chechout Order #{orderNumber}', { orderNumber, _tags: 'core' })
+								: t('Checkout', { _tags: 'core' })}
+						</Text>
 					</ModalTitle>
 				</ModalHeader>
 				<ModalBody contentContainerStyle={{ height: '100%' }}>
 					<VStack className="flex-1">
 						<CheckoutTitle order={order} />
-						<PaymentWebview order={order} ref={iframeRef} />
+						<PaymentWebview order={order} ref={iframeRef} setLoading={setLoading} />
 					</VStack>
 				</ModalBody>
 				<ModalFooter>
 					<ModalClose>{t('Cancel', { _tags: 'core' })}</ModalClose>
-					<ModalAction onPress={handleProcessPayment}>
+					<ModalAction onPress={handleProcessPayment} loading={loading}>
 						{t('Process Payment', { _tags: 'core' })}
 					</ModalAction>
 				</ModalFooter>

src/screens/main/pos/products/index.tsx

@@ -125,6 +125,7 @@ const POSProducts = ({ isColumn = false }) => {
 			initialParams: {
 				sort: [{ [uiSettings.sortBy]: uiSettings.sortDirection }],
 			},
+			infiniteScroll: true,
 		},
 		{
 			queryKeys: ['variations', { target: 'pos', type: 'relational' }],

src/screens/main/products/products.tsx

@@ -151,6 +151,7 @@ const Products = () => {
 			initialParams: {
 				sort: [{ [uiSettings.sortBy]: uiSettings.sortDirection }],
 			},
+			infiniteScroll: true,
 		},
 		{
 			queryKeys: ['variations', { target: 'page', type: 'relational' }],

src/screens/main/reports/index.tsx

@@ -49,6 +49,7 @@ const ReportsWithProviders = () => {
 				],
 			},
 		},
+		greedy: true,
 	});
 
 	return (