@shopify/hydrogen 0.25.0 → 0.26.1

package/dist/esnext/components/CartProvider/graphql/CartLineUpdateMutation.d.ts

@@ -37,13 +37,13 @@ export declare type CartLineUpdateMutation = {
                         attributes: Array<{
                             __typename?: 'Attribute';
                         } & Pick<Types.Attribute, 'key' | 'value'>>;
-                        estimatedCost: {
-                            __typename?: 'CartLineEstimatedCost';
+                        cost: {
+                            __typename?: 'CartLineCost';
                         } & {
                             totalAmount: {
                                 __typename?: 'MoneyV2';
                             } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>;
-                            compareAtAmount?: Types.Maybe<{
+                            compareAtAmountPerQuantity?: Types.Maybe<{
                                 __typename?: 'MoneyV2';
                             } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>>;
                         };
@@ -69,8 +69,8 @@ export declare type CartLineUpdateMutation = {
                     };
                 }>;
             };
-            estimatedCost: {
-                __typename?: 'CartEstimatedCost';
+            cost: {
+                __typename?: 'CartCost';
             } & {
                 subtotalAmount: {
                     __typename?: 'MoneyV2';

package/dist/esnext/components/CartProvider/graphql/CartNoteUpdateMutation.d.ts

@@ -37,13 +37,13 @@ export declare type CartNoteUpdateMutation = {
                         attributes: Array<{
                             __typename?: 'Attribute';
                         } & Pick<Types.Attribute, 'key' | 'value'>>;
-                        estimatedCost: {
-                            __typename?: 'CartLineEstimatedCost';
+                        cost: {
+                            __typename?: 'CartLineCost';
                         } & {
                             totalAmount: {
                                 __typename?: 'MoneyV2';
                             } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>;
-                            compareAtAmount?: Types.Maybe<{
+                            compareAtAmountPerQuantity?: Types.Maybe<{
                                 __typename?: 'MoneyV2';
                             } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>>;
                         };
@@ -69,8 +69,8 @@ export declare type CartNoteUpdateMutation = {
                     };
                 }>;
             };
-            estimatedCost: {
-                __typename?: 'CartEstimatedCost';
+            cost: {
+                __typename?: 'CartCost';
             } & {
                 subtotalAmount: {
                     __typename?: 'MoneyV2';

package/dist/esnext/components/CartProvider/graphql/CartQuery.d.ts

@@ -33,13 +33,13 @@ export declare type CartQueryQuery = {
                     attributes: Array<{
                         __typename?: 'Attribute';
                     } & Pick<Types.Attribute, 'key' | 'value'>>;
-                    estimatedCost: {
-                        __typename?: 'CartLineEstimatedCost';
+                    cost: {
+                        __typename?: 'CartLineCost';
                     } & {
                         totalAmount: {
                             __typename?: 'MoneyV2';
                         } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>;
-                        compareAtAmount?: Types.Maybe<{
+                        compareAtAmountPerQuantity?: Types.Maybe<{
                             __typename?: 'MoneyV2';
                         } & Pick<Types.MoneyV2, 'amount' | 'currencyCode'>>;
                     };
@@ -65,8 +65,8 @@ export declare type CartQueryQuery = {
                 };
             }>;
         };
-        estimatedCost: {
-            __typename?: 'CartEstimatedCost';
+        cost: {
+            __typename?: 'CartCost';
         } & {
             subtotalAmount: {
                 __typename?: 'MoneyV2';

package/dist/esnext/components/CartProvider/hooks.client.d.ts

@@ -5,7 +5,7 @@ export declare function useCartFetch(): <T, K>({ query, variables, }: {
     variables: T;
 }) => Promise<{
     data: K | undefined;
-    error: any;
+    errors: any;
 }>;
 export declare function useInstantCheckout(): {
     cart: Cart | undefined;

package/dist/esnext/components/CartProvider/hooks.client.js

@@ -2,17 +2,22 @@ import React, { useState } from 'react';
 import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
 import { CartCreate, defaultCartFragment } from './cart-queries';
+import { SHOPIFY_STOREFRONT_ID_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, } from '../../constants';
 export function useCartFetch() {
-    const { storeDomain, storefrontApiVersion, storefrontToken } = useShop();
+    const { storeDomain, storefrontApiVersion, storefrontToken, storefrontId } = useShop();
     return React.useCallback(({ query, variables, }) => {
+        const headers = {
+            'Content-Type': 'application/json',
+            'X-SDK-Variant': 'hydrogen',
+            'X-SDK-Version': storefrontApiVersion,
+            [STOREFRONT_API_PUBLIC_TOKEN_HEADER]: storefrontToken,
+        };
+        if (storefrontId) {
+            headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
+        }
         return fetch(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-SDK-Variant': 'hydrogen',
-                'X-SDK-Version': storefrontApiVersion,
-                'X-Shopify-Storefront-Access-Token': storefrontToken,
-            },
+            headers,
             body: JSON.stringify({
                 query: query.toString(),
                 variables,
@@ -25,7 +30,7 @@ export function useCartFetch() {
                 error: error.toString(),
             };
         });
-    }, [storeDomain, storefrontApiVersion, storefrontToken]);
+    }, [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]);
 }
 export function useInstantCheckout() {
     const [cart, updateCart] = useState();
@@ -33,14 +38,14 @@ export function useInstantCheckout() {
     const [error, updateError] = useState();
     const fetch = useCartFetch();
     const createInstantCheckout = React.useCallback(async (cartInput) => {
-        const { data, error } = await fetch({
+        const { data, errors } = await fetch({
             query: CartCreate(defaultCartFragment),
             variables: {
                 input: cartInput,
             },
         });
-        if (error) {
-            updateError(error);
+        if (errors) {
+            updateError(errors);
             updateCart(undefined);
             updateCheckoutUrl(undefined);
         }

package/dist/esnext/components/CartProvider/types.d.ts

@@ -16,8 +16,8 @@ export interface Cart {
     attributes: CartFragmentFragment['attributes'];
     /** The discount codes applied to the cart. */
     discountCodes?: CartFragmentFragment['discountCodes'];
-    /** The estimate cost for the cart, including the subtotal, total, taxes, and duties. */
-    estimatedCost?: CartFragmentFragment['estimatedCost'];
+    /** The cost for the cart, including the subtotal, total, taxes, and duties. */
+    cost?: CartFragmentFragment['cost'];
     /** The total number of items in the cart, across all lines. If there are no lines, then the value is 0. */
     totalQuantity: number;
 }
@@ -98,7 +98,7 @@ export declare type CartAction = {
     cart: Cart;
 } | {
     type: 'reject';
-    error: string;
+    errors: any;
 } | {
     type: 'resetCart';
 };

package/dist/esnext/components/CartShopPayButton/CartShopPayButton.client.d.ts

@@ -4,6 +4,4 @@ import { ShopPayButton } from '../ShopPayButton';
  * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
  * It must be a descendent of a `CartProvider` component.
  */
-export declare function CartShopPayButton({ 
-/** A string of classes to apply to the `div` that wraps the `shop-pay-button` web component. */
-className, }: Omit<React.ComponentProps<typeof ShopPayButton>, 'variantIds'>): JSX.Element;
+export declare function CartShopPayButton(props: Omit<React.ComponentProps<typeof ShopPayButton>, 'variantIds'>): JSX.Element;

package/dist/esnext/components/CartShopPayButton/CartShopPayButton.client.js

@@ -5,9 +5,7 @@ import { ShopPayButton } from '../ShopPayButton';
  * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
  * It must be a descendent of a `CartProvider` component.
  */
-export function CartShopPayButton({ 
-/** A string of classes to apply to the `div` that wraps the `shop-pay-button` web component. */
-className, }) {
+export function CartShopPayButton(props) {
     const { lines } = useCart();
     const idsAndQuantities = useMemo(() => {
         return lines.map((line) => ({
@@ -15,5 +13,5 @@ className, }) {
             quantity: line.quantity,
         }));
     }, [lines]);
-    return (React.createElement(ShopPayButton, { className: className, variantIdsAndQuantities: idsAndQuantities }));
+    return (React.createElement(ShopPayButton, { variantIdsAndQuantities: idsAndQuantities, ...props }));
 }

package/dist/esnext/components/Link/Link.client.d.ts

@@ -12,6 +12,8 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     prefetch?: boolean;
     /** Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to `true`. */
     scroll?: boolean;
+    /** Override the `basePath` inherited from the Route */
+    basePath?: string;
 }
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all

package/dist/esnext/components/Link/Link.client.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useRouter } from '../../foundation/Router/BrowserRouter.client';
+import { useLocation } from '../../foundation/Router/BrowserRouter.client';
 import { createPath } from 'history';
-import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+import { buildPath, useNavigate } from '../../foundation/useNavigate/useNavigate';
 import { RSC_PATHNAME } from '../../constants';
 import { useInternalServerProps } from '../../foundation/useServerProps/use-server-props';
+import { useBasePath } from '../../foundation/useRouteParams/RouteParamsProvider.client';
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
  * properties available to the `<a>` element are also available to the `Link` component.
@@ -11,14 +12,16 @@ import { useInternalServerProps } from '../../foundation/useServerProps/use-serv
  */
 export const Link = React.forwardRef(function Link(props, ref) {
     const navigate = useNavigate();
-    const { location } = useRouter();
+    const location = useLocation();
     const [_, startTransition] = React.useTransition();
+    const routeBasePath = useBasePath();
     /**
      * Inspired by Remix's Link component
      */
     const [shouldPrefetch, setShouldPrefetch] = useState(false);
     const [maybePrefetch, setMaybePrefetch] = useState(false);
-    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, scroll = true, } = props;
+    const { reloadDocument, target, replace: _replace, onClick, clientState, prefetch = true, scroll = true, } = props;
+    const to = buildPath(props.basePath ?? routeBasePath, props.to);
     const internalClick = useCallback((e) => {
         if (onClick)
             onClick(e);
@@ -34,6 +37,7 @@ export const Link = React.forwardRef(function Link(props, ref) {
                 replace,
                 scroll,
                 clientState,
+                basePath: '/', // path was already resolved with the base
             });
         }
     }, [
@@ -52,7 +56,7 @@ export const Link = React.forwardRef(function Link(props, ref) {
          * startTransition to yield to more important updates
          */
         startTransition(() => {
-            if (prefetch) {
+            if (prefetch && !!to) {
                 setMaybePrefetch(true);
             }
         });
@@ -94,12 +98,15 @@ export const Link = React.forwardRef(function Link(props, ref) {
                 'reloadDocument',
                 'prefetch',
                 'scroll',
-            ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
+            ]), ref: ref, rel: props.rel ??
+                (to.startsWith('http') || to.startsWith('//')
+                    ? 'noreferrer noopener'
+                    : undefined), onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: to }, props.children),
         shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });
 function Prefetch({ pathname }) {
     const { getProposedLocationServerProps } = useInternalServerProps();
-    const { location } = useRouter();
+    const location = useLocation();
     const newPath = createPath({ pathname });
     if (pathname.startsWith('http') || newPath === createPath(location)) {
         return null;

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Localization } from './LocalizationContext.client';
+import { LocalizationContextValue } from './LocalizationContext.client';
 export default function LocalizationClientProvider({ localization, children, }: {
     children: ReactNode;
-    localization: Localization;
+    localization: LocalizationContextValue;
 }): JSX.Element;

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LocalizationContext } from './LocalizationContext.client';
+import { LocalizationContext, } from './LocalizationContext.client';
 export default function LocalizationClientProvider({ localization, children, }) {
     return (React.createElement(LocalizationContext.Provider, { value: localization }, children));
 }

package/dist/esnext/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -1,6 +1,9 @@
-import type { LocalizationQuery } from './LocalizationProvider.server';
-export declare type Localization = LocalizationQuery['localization'];
 export interface LocalizationContextValue {
-    country?: Localization['country'];
+    country: {
+        isoCode: string;
+    };
+    language: {
+        isoCode: string;
+    };
 }
 export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -1,33 +1,21 @@
 import { ReactNode } from 'react';
-import { PreloadOptions } from '../../types';
-import { Country } from '../../storefront-api-types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
-    /** Whether to preload the query. Defaults to `false`. Specify `true` to
-     * [preload the query](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
-     * or `'*'` to preload the query for all requests.
+    /**
+     * Override the `isoCode` to define the active country
      */
-    preload: PreloadOptions;
+    countryCode?: string;
+    /**
+     * Override the `languageCode` to define the active language
+     */
+    languageCode?: string;
 }
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
  * for the `isoCode` and `name` of the `country` and keeps this information in a context.
  *
- * Any descendents of this provider can use the `useCountry` hook.
- * The `isoCode` of the `country` can be used in the Storefront API's
- * `@inContext` directive as the `country` value.
+ * Any descendents of this provider can use the `useLocalization` hook.
  */
 export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
-export declare type LocalizationQuery = {
-    __typename?: 'QueryRoot';
-} & {
-    localization: {
-        __typename?: 'Localization';
-    } & {
-        country: {
-            __typename?: 'Country';
-        } & Pick<Country, 'isoCode' | 'name'>;
-    };
-};

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -1,44 +1,29 @@
 import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
-import { useShopQuery } from '../../hooks/useShopQuery';
-import { CacheLong } from '../../foundation/Cache/strategies';
-import { useSession } from '../../foundation/useSession/useSession';
+import { useServerRequest } from '../../foundation/ServerRequestProvider';
+import { CountryCode } from '../../storefront-api-types';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
  * for the `isoCode` and `name` of the `country` and keeps this information in a context.
  *
- * Any descendents of this provider can use the `useCountry` hook.
- * The `isoCode` of the `country` can be used in the Storefront API's
- * `@inContext` directive as the `country` value.
+ * Any descendents of this provider can use the `useLocalization` hook.
  */
 export function LocalizationProvider(props) {
-    const { languageCode } = useShop();
-    const { countryCode, countryName } = useSession();
-    const { data: { localization }, } = useShopQuery({
-        query,
-        variables: { language: languageCode },
-        cache: CacheLong(),
-        preload: props.preload,
-    });
-    return (React.createElement(LocalizationClientProvider, { localization: countryCode
-            ? {
-                country: {
-                    name: countryName,
-                    isoCode: countryCode,
-                },
-            }
-            : localization }, props.children));
+    const { languageCode: defaultLanguageCode, locale } = useShop();
+    const defaultCountryCode = locale.split(/[-_]/)[1] || CountryCode.Us;
+    const languageCode = (props.languageCode ?? defaultLanguageCode).toUpperCase();
+    const countryCode = (props.countryCode ?? defaultCountryCode).toUpperCase();
+    const request = useServerRequest();
+    const localization = {
+        country: {
+            isoCode: countryCode,
+        },
+        language: {
+            isoCode: languageCode,
+        },
+    };
+    request.ctx.localization = localization;
+    return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }
-const query = `
-query Localization($language: LanguageCode)
-@inContext(language: $language) {
-   localization {
-    country {
-      isoCode
-      name
-    }
-  }
-}
-`;

package/dist/esnext/components/LocalizationProvider/index.d.ts

@@ -1,2 +1 @@
 export { LocalizationProvider } from './LocalizationProvider.server';
-export { useCountry } from '../../hooks/useCountry/useCountry';

package/dist/esnext/components/LocalizationProvider/index.js

@@ -1,2 +1 @@
 export { LocalizationProvider } from './LocalizationProvider.server';
-export { useCountry } from '../../hooks/useCountry/useCountry';

package/dist/esnext/components/Metafield/Metafield.client.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import { useShop } from '../../foundation';
-import { getMeasurementAsString } from '../../utilities';
+import { useLocalization } from '../../hooks/useLocalization/useLocalization';
+import { getMeasurementAsString } from '../../utilities/measurement';
 import { Image } from '../Image';
 import { Video } from '../Video';
 import { flattenConnection } from '../../utilities/flattenConnection/index';
@@ -13,7 +13,7 @@ import { parseMetafield } from '../../utilities/parseMetafield/index';
  */
 export function Metafield(props) {
     const { data, children, as, ...passthroughProps } = props;
-    const { locale } = useShop();
+    const { locale } = useLocalization();
     const parsedMetafield = useMemo(() => parseMetafield(data), [data]);
     if (!parsedMetafield) {
         if (__HYDROGEN_DEV__) {

package/dist/esnext/components/Seo/DefaultPageSeo.client.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { useShop } from '../../foundation';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
+import { useLocalization } from '../../hooks/useLocalization/useLocalization';
 import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
-    const { languageCode: fallBacklang } = useShop();
+    const { language: { isoCode: fallBacklang }, } = useLocalization();
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s - ${title}` },
             React.createElement("html", { lang: lang ?? fallBacklang }),

package/dist/esnext/components/Seo/DescriptionSeo.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
 export function DescriptionSeo({ description, }) {
     if (!description) {
         return null;

package/dist/esnext/components/Seo/HomePageSeo.client.d.ts

@@ -1,2 +1,2 @@
 import type { HomePage } from './seo-types';
-export declare function HomePageSeo({ title, description, url }: HomePage): JSX.Element;
+export declare function HomePageSeo({ title, description, url, titleTemplate, }: HomePage): JSX.Element;

package/dist/esnext/components/Seo/HomePageSeo.client.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
 import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
-export function HomePageSeo({ title, description, url }) {
+export function HomePageSeo({ title, description, url, titleTemplate, }) {
     const organizationSchema = {
         '@context': 'http://schema.org',
         '@type': 'Organization',
@@ -16,7 +16,7 @@ export function HomePageSeo({ title, description, url }) {
         url,
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Head, null,
+        React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s` },
             React.createElement("meta", { property: "og:url", content: url }),
             React.createElement("script", { type: "application/ld+json" }, JSON.stringify(organizationSchema)),
             React.createElement("script", { type: "application/ld+json" }, JSON.stringify(webSiteSchema))),

package/dist/esnext/components/Seo/ImageSeo.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
 export function ImageSeo({ url, width, height, altText }) {
     return (React.createElement(Head, null,
         url && React.createElement("meta", { property: "og:image", content: url }),

package/dist/esnext/components/Seo/NoIndexSeo.client.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useShop } from '../../foundation';
-import { Head } from '../../client';
+import { useLocalization } from '../../hooks/useLocalization/useLocalization';
+import { Head } from '../../foundation/Head/Head.client';
 export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
-    const { languageCode: fallBacklang } = useShop();
+    const { language: { isoCode: fallBacklang }, } = useLocalization();
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s - ${title}` },
             React.createElement("html", { lang: lang ?? fallBacklang }),

package/dist/esnext/components/Seo/ProductSeo.client.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
 import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 import { ImageSeo } from './ImageSeo.client';
-import { flattenConnection } from '../../utilities';
+import { flattenConnection } from '../../utilities/flattenConnection';
 export function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }) {
     const seoTitle = seo?.title ?? title;
     const seoDescription = seo?.description ?? description;

package/dist/esnext/components/Seo/Seo.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useUrl } from '../../foundation';
+import { useUrl } from '../../foundation/useUrl';
 import { DefaultPageSeo } from './DefaultPageSeo.client';
 import { HomePageSeo } from './HomePageSeo.client';
 import { ProductSeo } from './ProductSeo.client';

package/dist/esnext/components/Seo/TitleSeo.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
 export function TitleSeo({ title }) {
     if (!title) {
         return null;

package/dist/esnext/components/Seo/TwitterSeo.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Head } from '../../client';
+import { Head } from '../../foundation/Head';
 export function TwitterSeo({ site, title, description }) {
     return (React.createElement(Head, null,
         React.createElement("meta", { name: "twitter:card", content: "summary_large_image" }),

package/dist/esnext/components/Seo/seo-types.d.ts

@@ -8,6 +8,7 @@ export interface HomePage {
     description: ShopType['description'];
     title: ShopType['name'];
     url: Scalars['URL'];
+    titleTemplate?: string;
 }
 export interface DefaultPage extends ShopType {
     title: ShopType['name'];

package/dist/esnext/components/ShopPayButton/ShopPayButton.client.d.ts

@@ -1,6 +1,8 @@
 declare type ShopPayButtonProps = {
     /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
     className?: string;
+    /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */
+    width?: string;
 } & ({
     /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
     variantIds: string[];
@@ -28,7 +30,7 @@ declare global {
 /**
  * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
  */
-export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }: ShopPayButtonProps): JSX.Element;
+export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }: ShopPayButtonProps): JSX.Element;
 /**
  * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
  */

package/dist/esnext/components/ShopPayButton/ShopPayButton.client.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useShop } from '../../foundation/useShop';
 import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
-const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.8/client.js';
+const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';
 /**
  * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
  */
-export function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }) {
+export function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }) {
     const { storeDomain } = useShop();
     const shopPayLoadedStatus = useLoadScript(URL);
     let ids;
@@ -33,9 +33,14 @@ export function ShopPayButton({ variantIds, className, variantIdsAndQuantities,
     else {
         throw new Error(MissingPropsErrorMessage);
     }
+    const style = width
+        ? {
+            '--shop-pay-button-width': width,
+        }
+        : undefined;
     return (
     /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-    React.createElement("div", { className: className, tabIndex: 0 }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') })))
+    React.createElement("div", { className: className, tabIndex: 0, style: style }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') })))
     /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
     );
 }

package/dist/esnext/components/index.d.ts

@@ -17,12 +17,12 @@ export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
 export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
-export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartCost } from './CartCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
 export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
 export { ProductPrice } from './ProductPrice';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
-export { useCountry } from '../hooks/useCountry';
+export { useLocalization } from '../hooks/useLocalization/useLocalization';
 export { Seo } from './Seo';