Fix preloading in sample app (#353)

Author: markmur

sample/src/App.tsx

@@ -235,7 +235,6 @@ function AppWithContext({children}: PropsWithChildren) {
       config={{
         colorScheme:
           checkoutKitConfigDefaults.colorScheme ?? ColorScheme.automatic,
-        enablePreloading: checkoutKitConfigDefaults.preloading ?? true,
         prefillBuyerInformation: false,
         customerAuthenticated: false,
       }}>
@@ -364,7 +363,6 @@ function AppWithCheckoutKit({children}: PropsWithChildren) {
     return {
       ...checkoutKitConfigDefaults,
       ...checkoutKitThemeConfig,
-      preloading: appConfig.enablePreloading,
       acceleratedCheckouts: {
         storefrontDomain: env.STOREFRONT_DOMAIN!,
         storefrontAccessToken: env.STOREFRONT_ACCESS_TOKEN!,

sample/src/context/Cart.tsx

@@ -111,6 +111,18 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
     }
   }, [cartId, fetchCart, setTotalQuantity]);
 
+  const preloadCheckout = useCallback(
+    async (checkoutURL: string) => {
+      if (checkoutURL) {
+        const config = await shopify.getConfig();
+        if (config?.preloading) {
+          shopify.preload(checkoutURL);
+        }
+      }
+    },
+    [shopify],
+  );
+
   const addToCart = useCallback(
     async (variantId: string) => {
       let id = cartId;
@@ -140,7 +152,7 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
       setTotalQuantity(data.cartLinesAdd.cart.totalQuantity);
 
       if (data.cartLinesAdd.cart.checkoutUrl) {
-        shopify.preload(data.cartLinesAdd.cart.checkoutUrl);
+        await preloadCheckout(data.cartLinesAdd.cart.checkoutUrl);
       }
 
       if (id) {
@@ -159,8 +171,8 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
       appConfig,
       createCart,
       setCartId,
-      shopify,
       fetchCart,
+      preloadCheckout,
     ],
   );
 
@@ -183,7 +195,7 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
       setTotalQuantity(data.cartLinesRemove.cart.totalQuantity);
 
       if (checkoutURL) {
-        shopify.preload(checkoutURL);
+        await preloadCheckout(checkoutURL);
       }
 
       if (cartId) {
@@ -202,7 +214,7 @@ export const CartProvider: React.FC<PropsWithChildren> = ({children}) => {
       setCheckoutURL,
       setTotalQuantity,
       checkoutURL,
-      shopify,
+      preloadCheckout,
       fetchCart,
     ],
   );

sample/src/context/Config.tsx

@@ -11,7 +11,6 @@ import {useTheme} from './Theme';
 
 export interface AppConfig {
   colorScheme: ColorScheme;
-  enablePreloading: boolean;
   prefillBuyerInformation: boolean;
   customerAuthenticated: boolean;
 }
@@ -23,7 +22,6 @@ interface Context {
 
 const defaultAppConfig: AppConfig = {
   colorScheme: ColorScheme.automatic,
-  enablePreloading: true,
   prefillBuyerInformation: false,
   customerAuthenticated: false,
 };
@@ -45,6 +43,9 @@ export const ConfigProvider: React.FC<
   }, [config, setColorScheme]);
 
   const setAppConfig = useCallback((config: AppConfig) => {
+    console.groupCollapsed('APP CONFIG UPDATE');
+    console.log(config);
+    console.groupEnd();
     setInternalAppConfig(config);
   }, []);
 
@@ -56,10 +57,6 @@ export const ConfigProvider: React.FC<
     [appConfig, setAppConfig],
   );
 
-  console.groupCollapsed('APP CONFIG UPDATE');
-  console.log(appConfig);
-  console.groupEnd();
-
   return (
     <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>
   );

sample/src/screens/SettingsScreen.tsx

@@ -21,7 +21,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useEffect, useState} from 'react';
 import {
   Pressable,
   SafeAreaView,
@@ -87,11 +87,20 @@ interface SectionData {
 }
 
 function SettingsScreen() {
-  const ShopifyCheckout = useShopifyCheckoutSheet();
+  const shopify = useShopifyCheckoutSheet();
   const {clearCart} = useCart();
   const {appConfig, setAppConfig} = useConfig();
   const {colors, setColorScheme} = useTheme();
   const styles = createStyles(colors);
+  const [preloadingEnabled, setPreloadingEnabled] = useState(false);
+
+  useEffect(() => {
+    async function loadConfig() {
+      const config = await shopify.getConfig();
+      setPreloadingEnabled(config?.preloading ?? false);
+    }
+    loadConfig();
+  }, [shopify]);
 
   const handleColorSchemeChange = useCallback(
     (item: SingleSelectItem) => {
@@ -104,12 +113,15 @@ function SettingsScreen() {
     [appConfig, setAppConfig, setColorScheme],
   );
 
-  const handleTogglePreloading = useCallback(() => {
-    setAppConfig({
-      ...appConfig,
-      enablePreloading: !appConfig.enablePreloading,
+  const handleTogglePreloading = useCallback(async () => {
+    const currentConfig = await shopify.getConfig();
+    const newPreloadingValue = !currentConfig?.preloading;
+    shopify.setConfig({
+      ...currentConfig,
+      preloading: newPreloadingValue,
     });
-  }, [appConfig, setAppConfig]);
+    setPreloadingEnabled(newPreloadingValue);
+  }, [shopify]);
 
   const handleTogglePrefill = useCallback(() => {
     clearCart();
@@ -132,7 +144,7 @@ function SettingsScreen() {
       {
         title: 'Preload checkout',
         type: SectionType.Switch,
-        value: appConfig.enablePreloading,
+        value: preloadingEnabled,
         handler: handleTogglePreloading,
       },
       {
@@ -152,6 +164,7 @@ function SettingsScreen() {
     ],
     [
       appConfig,
+      preloadingEnabled,
       handleTogglePrefill,
       handleTogglePreloading,
       handleToggleCustomerAuthenticated,
@@ -193,7 +206,7 @@ function SettingsScreen() {
       {
         title: 'SDK version',
         type: SectionType.Text,
-        value: ShopifyCheckout.version,
+        value: shopify.version,
       },
       {
         title: 'App version',
@@ -206,7 +219,7 @@ function SettingsScreen() {
         value: Config.STOREFRONT_DOMAIN || 'undefined',
       },
     ],
-    [ShopifyCheckout.version],
+    [shopify.version],
   );
 
   const sections: SectionData[] = useMemo(