Add support for international pricing in sample app (#49)

Author: markmur

sample/@types/index.d.ts

@@ -45,12 +45,20 @@ export interface CartItem {
   };
 }
 
+export interface CartLineItem {
+  id: string;
+  merchandise: CartItem;
+  quantity: number;
+  cost: {
+    totalAmount: {
+      currencyCode: string;
+      amount: string;
+    };
+  };
+}
+
 export interface ShopifyCart {
   cost: CartCost;
-  lines: Edges<{
-    id: string;
-    merchandise: CartItem;
-    quantity: number;
-  }>;
+  lines: Edges<CartLineItem>;
   totalQuantity: number;
 }

sample/src/hooks/useShopify.ts

@@ -23,6 +23,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 
 import {gql, useLazyQuery, useMutation} from '@apollo/client';
 import type {Edges, ShopifyProduct, ShopifyCart} from '../../@types';
+import {getLocale} from '../utils';
 
 const moneyFragment = gql`
   fragment Price on MoneyV2 {
@@ -66,7 +67,8 @@ const cartCostFragment = gql`
 `;
 
 const PRODUCTS_QUERY = gql`
-  query FetchProducts {
+  query FetchProducts($country: CountryCode = CA)
+  @inContext(country: $country) {
     products(first: 10) {
       edges {
         node {
@@ -77,6 +79,9 @@ const PRODUCTS_QUERY = gql`
             edges {
               node {
                 id
+                unitPrice {
+                  ...Price
+                }
                 price {
                   ...Price
                 }
@@ -102,7 +107,8 @@ const PRODUCTS_QUERY = gql`
 `;
 
 const CART_QUERY = gql`
-  query FetchCart($cartId: ID!) {
+  query FetchCart($cartId: ID!, $country: CountryCode = CA)
+  @inContext(country: $country) {
     cart(id: $cartId) {
       id
       totalQuantity
@@ -134,7 +140,8 @@ const CART_QUERY = gql`
 `;
 
 const CREATE_CART_MUTATION = gql`
-  mutation CreateCart($input: CartInput) {
+  mutation CreateCart($input: CartInput, $country: CountryCode = CA)
+  @inContext(country: $country) {
     cartCreate(input: $input) {
       cart {
         id
@@ -145,7 +152,11 @@ const CREATE_CART_MUTATION = gql`
 `;
 
 const ADD_TO_CART_MUTATION = gql`
-  mutation AddToCart($cartId: ID!, $lines: [CartLineInput!]!) {
+  mutation AddToCart(
+    $cartId: ID!
+    $lines: [CartLineInput!]!
+    $country: CountryCode = CA
+  ) @inContext(country: $country) {
     cartLinesAdd(cartId: $cartId, lines: $lines) {
       cart {
         id
@@ -157,7 +168,11 @@ const ADD_TO_CART_MUTATION = gql`
 `;
 
 const REMOVE_FROM_CART_MUTATION = gql`
-  mutation RemoveFromCart($cartId: ID!, $lineIds: [ID!]!) {
+  mutation RemoveFromCart(
+    $cartId: ID!
+    $lineIds: [ID!]!
+    $country: CountryCode = CA
+  ) @inContext(country: $country) {
     cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
       cart {
         id
@@ -169,15 +184,26 @@ const REMOVE_FROM_CART_MUTATION = gql`
 `;
 
 function useShopify() {
+  const [, country] = getLocale().split('_');
+  const includeCountry = {
+    variables: {
+      country,
+    },
+  };
   const products = useLazyQuery<{products: Edges<ShopifyProduct>}>(
     PRODUCTS_QUERY,
+    includeCountry,
   );
   const cart = useLazyQuery<{cart: ShopifyCart}>(CART_QUERY, {
     fetchPolicy: 'network-only',
+    ...includeCountry,
   });
-  const cartCreate = useMutation(CREATE_CART_MUTATION);
-  const cartLinesAdd = useMutation(ADD_TO_CART_MUTATION);
-  const cartLinesRemove = useMutation(REMOVE_FROM_CART_MUTATION);
+  const cartCreate = useMutation(CREATE_CART_MUTATION, includeCountry);
+  const cartLinesAdd = useMutation(ADD_TO_CART_MUTATION, includeCountry);
+  const cartLinesRemove = useMutation(
+    REMOVE_FROM_CART_MUTATION,
+    includeCountry,
+  );
 
   return {
     queries: {

sample/src/screens/CartScreen.tsx

@@ -38,9 +38,10 @@ import Icon from 'react-native-vector-icons/Entypo';
 import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
 import useShopify from '../hooks/useShopify';
 
-import type {CartItem} from '../../@types';
+import type {CartItem, CartLineItem} from '../../@types';
 import {Colors, useTheme} from '../context/Theme';
 import {useCart} from '../context/Cart';
+import {currency} from '../utils';
 
 function CartScreen(): JSX.Element {
   const ShopifyCheckout = useShopifyCheckoutSheet();
@@ -122,7 +123,7 @@ function CartScreen(): JSX.Element {
           {data?.cart.lines.edges.map(({node}) => (
             <CartItem
               key={node.merchandise.id}
-              item={node.merchandise}
+              item={node}
               quantity={node.quantity}
               loading={addingToCart.has(node.id)}
               onRemove={() => removeFromCart(node.id)}
@@ -175,8 +176,8 @@ function price(value: {amount: string; currencyCode: string}) {
     return '-';
   }
 
-  const {amount} = value;
-  return `£${Number(amount).toFixed(2)}`;
+  const {amount, currencyCode} = value;
+  return currency(amount, currencyCode);
 }
 
 function CartItem({
@@ -185,7 +186,7 @@ function CartItem({
   onRemove,
   loading,
 }: {
-  item: CartItem;
+  item: CartLineItem;
   quantity: number;
   loading?: boolean;
   onRemove: () => void;
@@ -204,16 +205,20 @@ function CartItem({
         resizeMethod="resize"
         resizeMode="cover"
         style={styles.productImage}
-        alt={item.image?.altText}
-        source={{uri: item.image?.url}}
+        alt={item.merchandise.image?.altText}
+        source={{uri: item.merchandise.image?.url}}
       />
       <View style={styles.productText}>
         <View style={styles.productTextContainer}>
-          <Text style={styles.productTitle}>{item.product.title}</Text>
+          <Text style={styles.productTitle}>
+            {item.merchandise.product.title}
+          </Text>
           <Text style={styles.productDescription}>Quantity: {quantity}</Text>
         </View>
         <View>
-          <Text style={styles.productPrice}>{price(item?.price)}</Text>
+          <Text style={styles.productPrice}>
+            {price(item.cost?.totalAmount)}
+          </Text>
           <Pressable style={styles.removeButton} onPress={onRemove}>
             {loading ? (
               <ActivityIndicator size="small" />

sample/src/screens/CatalogScreen.tsx

@@ -41,6 +41,7 @@ import {Colors, useTheme} from '../context/Theme';
 import {useCart} from '../context/Cart';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {RootStackParamList} from '../App';
+import {currency} from '../utils';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'CatalogScreen'>;
 
@@ -153,8 +154,7 @@ function Product({
         <View>
           <Text style={styles.productTitle}>{product.title}</Text>
           <Text style={styles.productPrice}>
-            £{Number(variant?.price.amount).toFixed(2)}{' '}
-            {variant?.price.currencyCode}
+            {currency(variant?.price.amount, variant?.price.currencyCode)}
           </Text>
         </View>
         <View style={styles.addToCartButtonContainer}>

sample/src/screens/ProductDetailsScreen.tsx

@@ -38,6 +38,7 @@ import {Colors, useTheme} from '../context/Theme';
 import {useCart} from '../context/Cart';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {RootStackParamList} from '../App';
+import {currency} from '../utils';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'ProductDetails'>;
 
@@ -110,7 +111,8 @@ function ProductDetails({
               <ActivityIndicator size="small" color="white" />
             ) : (
               <Text style={styles.addToCartButtonText}>
-                Add to cart &bull; £{Number(variant?.price.amount).toFixed(2)}
+                Add to cart &bull;{' '}
+                {currency(variant?.price.amount, variant?.price.currencyCode)}
               </Text>
             )}
           </Pressable>

sample/src/utils.ts

@@ -11,6 +11,7 @@ import {
   ZIP,
   PHONE,
 } from '@env';
+import {NativeModules, Platform} from 'react-native';
 import {AppConfig} from './context/Config';
 
 export function createBuyerIdentityCartInput(appConfig: AppConfig) {
@@ -38,3 +39,34 @@ export function createBuyerIdentityCartInput(appConfig: AppConfig) {
     },
   };
 }
+
+export function getLocale(): string {
+  const fallbackLocale = 'en_CA';
+
+  return (
+    (Platform.OS === 'ios'
+      ? NativeModules.SettingsManager?.settings.AppleLocale ||
+        NativeModules.SettingsManager?.settings.AppleLanguages[0]
+      : NativeModules.I18nManager?.localeIdentifier) ?? fallbackLocale
+  );
+}
+
+export function currency(amount?: string, currency?: string): string {
+  if (typeof amount === 'undefined' && typeof currency === 'undefined') {
+    return '';
+  }
+
+  const currencyCode = currency ? ` ${currency}` : '';
+
+  try {
+    const locale = getLocale();
+    return (
+      new Intl.NumberFormat(locale.replace(/_/, '-'), {
+        style: 'currency',
+        currency: currency,
+      }).format(Number(amount ?? 0)) + currencyCode
+    );
+  } catch (error) {
+    return `${Number(amount ?? 0).toFixed(2)}` + currencyCode;
+  }
+}