@replohq/sdk 2.18.3 → 2.20.0

package/_vendor/replo-utils/lib/crypto.d.ts

@@ -22,4 +22,9 @@ export declare function getHmacSha256Hex({ rawBody, signingKey, }: {
     rawBody: string;
     signingKey: string;
 }): Promise<string>;
+export declare function isValidHmacSha256Hex({ rawBody, signingKey, signature, }: {
+    rawBody: string;
+    signingKey: string;
+    signature: string;
+}): Promise<boolean>;
 export declare function deterministicUUID(value: string): string;

package/_vendor/schemas/generated/consent.d.ts

@@ -1,4 +1,4 @@
-export type ReploScriptType = "GA4" | "GoogleTagManager" | "Meta" | "TikTok" | "Pinterest" | "Reddit" | "Snapchat" | "X" | "Hotjar" | "MicrosoftClarity" | "Contentsquare" | "Segment" | "Northbeam" | "Gorgias" | "Converge" | "Mixpanel" | "HubSpot" | "Attentive" | "Alia" | "Cookiebot" | "snippet" | "custom" | "consentPlatform";
+export type ReploScriptType = "GA4" | "GoogleTagManager" | "Meta" | "TikTok" | "Pinterest" | "Reddit" | "Snapchat" | "X" | "Hotjar" | "MicrosoftClarity" | "Contentsquare" | "Segment" | "Northbeam" | "Gorgias" | "Converge" | "Mixpanel" | "HubSpot" | "Attentive" | "Alia" | "Cookiebot" | "Usercentrics" | "snippet" | "custom" | "consentPlatform";
 export type ConsentCategory = "necessary" | "analytics" | "marketing" | "preferences" | "sale_of_data";
 export type ConsentMode = "off" | "simple" | "per-category";
 export type ScriptTagDescriptor = {
@@ -30,37 +30,49 @@ export type ReploScriptEntry = {
     type: "GoogleTagManager" | "Meta" | "TikTok" | "Pinterest" | "Reddit" | "Snapchat" | "Hotjar" | "MicrosoftClarity" | "Contentsquare" | "Segment" | "Northbeam" | "Gorgias" | "Converge" | "HubSpot" | "Attentive" | "Alia";
     identifier: string;
     requiredConsent?: ConsentCategory[];
+    usercentricsService?: string;
 } | {
     type: "GA4";
     identifier: string;
     requiredConsent?: ConsentCategory[];
     runtimeOwner?: ScriptRuntimeOwner;
+    usercentricsService?: string;
 } | {
     type: "X";
     identifier: string;
     events?: Partial<XPixelEvents>;
     requiredConsent?: ConsentCategory[];
+    usercentricsService?: string;
 } | {
     type: "Mixpanel";
     identifier: string;
     region?: MixpanelRegion;
     requiredConsent?: ConsentCategory[];
+    usercentricsService?: string;
 } | {
     type: "Cookiebot";
     identifier: string;
     requiredConsent?: ConsentCategory[];
+} | {
+    type: "Usercentrics";
+    identifier: string;
+    loaderVersion?: "v2" | "v3";
+    runtimeOwner?: ScriptRuntimeOwner;
+    reploUsercentricsService?: string;
 } | {
     type: "snippet";
     id: string;
     body: string;
     module?: boolean;
     requiredConsent: ConsentCategory[];
+    usercentricsService?: string;
 } | {
     type: "custom";
     id: string;
     requiredConsent: ConsentCategory[];
     src?: string;
     body?: string;
+    usercentricsService?: string;
 } | {
     type: "consentPlatform";
     id: string;

package/analytics/analytics-provider.js

@@ -37,7 +37,8 @@ function AnalyticsProvider({
           cmp: consent.cmp,
           mode: consent.mode,
           categories: consent.categories,
-          decidedAt: consent.decidedAt
+          decidedAt: consent.decidedAt,
+          grantedUsercentricsServices: consent.grantedUsercentricsServices
         },
         registeredScripts,
         checkoutProvider
@@ -49,6 +50,7 @@ function AnalyticsProvider({
     consent.mode,
     consent.categories,
     consent.decidedAt,
+    consent.grantedUsercentricsServices,
     registeredScripts,
     checkoutProvider,
     additionalSinks

package/analytics/get-analytics-sinks.js

@@ -1,3 +1,4 @@
+import { findDelegatedPlatform } from "../consent/consent-platform";
 import { isConsentAllowed } from "../consent/consent-store";
 import { snippetScriptId } from "../consent/script-registration-store";
 import { ConvergeSink } from "./sinks/converge-sink";
@@ -51,11 +52,12 @@ function getAnalyticsSinks({
   checkoutProvider
 }) {
   const sinks = [new WindowSink()];
-  const firstPartyAllowed = isConsentAllowed({
+  const isReploPixelAllowed = isConsentAllowed({
     state: consent,
-    requiredConsent: ["analytics"]
+    requiredConsent: ["analytics"],
+    usercentricsService: findDelegatedPlatform()?.reploUsercentricsService ?? null
   });
-  if (firstPartyAllowed) {
+  if (isReploPixelAllowed) {
     sinks.push(new ReploSink());
   }
   const shopifyOwnsCheckout = checkoutProvider === "shopify";
@@ -68,7 +70,8 @@ function getAnalyticsSinks({
     }
     if (isConsentAllowed({
       state: consent,
-      requiredConsent: script.requiredConsent
+      requiredConsent: script.requiredConsent,
+      usercentricsService: script.usercentricsService
     })) {
       const sink = factory();
       const gated = shopifyOwnsCheckout && !SHOPIFY_FUNNEL_GATE_EXEMPT_PROVIDERS.has(script.type);

package/analytics/replo-pixel-script.d.ts

@@ -4,11 +4,11 @@
  * events into, so gating it on `analytics` consent keeps the first-party sink
  * consent-correct without the pixel loading unconditionally in `<head>` the way
  * the legacy scaffold does. `analytics` consent here matches the
- * `firstPartyAllowed` gate that controls whether `ReploSink` is created at all.
+ * `isReploPixelAllowed` gate that controls whether `ReploSink` is created at all.
  *
- * Under a consent platform the tag is rendered regardless and `InjectedScript`
- * stamps the blocking attributes at mount time, since delegation is not yet
- * set here.
+ * Under a consent platform the tag is injected regardless, with its blocking
+ * attributes read in the effect because this renders before `ReploScripts`
+ * publishes the platform.
  */
 export declare function ReploPixelScript({ pixelUrl, apiUrl, projectId, siteVersion, }: {
     pixelUrl: string;
@@ -16,4 +16,4 @@ export declare function ReploPixelScript({ pixelUrl, apiUrl, projectId, siteVers
     projectId: string;
     /** Publish id of the running site; absent on unpublished or older deploys. */
     siteVersion?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): null;

package/analytics/replo-pixel-script.js

@@ -1,6 +1,7 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { InjectedScript } from "../consent/replo-scripts";
+import { useEffect } from "react";
+import { findDelegatedPlatform } from "../consent/consent-platform";
+import { injectGatedScript } from "../consent/inject-script-descriptors";
 import { useIsBlockedByNativeConsent } from "../consent/use-is-blocked-by-native-consent";
 const PIXEL_SCRIPT_ID = "replo:first-party-pixel";
 const PIXEL_REQUIRED_CONSENT = ["analytics"];
@@ -13,28 +14,28 @@ function ReploPixelScript({
   const isBlockedByNativeConsent = useIsBlockedByNativeConsent(
     PIXEL_REQUIRED_CONSENT
   );
-  if (isBlockedByNativeConsent) {
-    return null;
-  }
-  const descriptors = [
-    {
-      kind: "external",
-      src: `${pixelUrl}/latest.js`,
-      attributes: {
-        "data-api-url": apiUrl,
-        "data-project-id": projectId,
-        ...siteVersion ? { "data-site-version": siteVersion } : {}
-      }
+  useEffect(() => {
+    if (isBlockedByNativeConsent) {
+      return;
     }
-  ];
-  return /* @__PURE__ */ jsx(
-    InjectedScript,
-    {
+    injectGatedScript({
       baseId: PIXEL_SCRIPT_ID,
-      descriptors,
-      requiredConsent: PIXEL_REQUIRED_CONSENT
-    }
-  );
+      descriptors: [
+        {
+          kind: "external",
+          src: `${pixelUrl}/latest.js`,
+          attributes: {
+            "data-api-url": apiUrl,
+            "data-project-id": projectId,
+            ...siteVersion ? { "data-site-version": siteVersion } : {}
+          }
+        }
+      ],
+      requiredConsent: PIXEL_REQUIRED_CONSENT,
+      usercentricsService: findDelegatedPlatform()?.reploUsercentricsService ?? null
+    });
+  }, [isBlockedByNativeConsent, pixelUrl, apiUrl, projectId, siteVersion]);
+  return null;
 }
 export {
   ReploPixelScript

package/cart/hooks/use-add-to-cart.d.ts

@@ -1,6 +1,7 @@
 import type { QueryClient } from "@tanstack/react-query";
 import type { CartError } from "../cart-provider";
 import type { CartLineAdjustment, CartLineAttribute, CartLineMerchandise } from "../cart-types";
+import type { CheckoutCatalog } from "./use-checkout-availability";
 /**
  * Describes a single item to add to the cart. Uses the merchandiseId
  * (e.g. a variant GID) directly from data loader output. Product
@@ -56,27 +57,39 @@ export declare function findMerchandiseInQueryCache({ queryClient, merchandiseId
  * and opens the cart UI, which renders it, so a click handler needs no
  * handling of its own.
  *
+ * `checkoutAvailability` is `"unavailable"` while the store can't take
+ * payments yet, or when the `catalog` passed is one this site's checkout
+ * can't sell. Show the button disabled with "Coming soon" then: a shopper
+ * could fill a cart but never check out.
+ *
  * @example
  * ```tsx
  * import { useAddToCart } from "@replohq/sdk/cart/hooks/use-add-to-cart";
  *
  * function AddToCartButton({ variant }) {
- *   const { addToCart, isAdding } = useAddToCart();
+ *   const { addToCart, isAdding, checkoutAvailability } = useAddToCart({
+ *     catalog: "shopify",
+ *   });
+ *   const isComingSoon = checkoutAvailability === "unavailable";
  *
  *   return (
  *     <button
- *       disabled={!variant.availableForSale || isAdding}
+ *       disabled={!variant.availableForSale || isAdding || isComingSoon}
  *       onClick={() => {
  *         void addToCart([{ merchandiseId: variant.id, quantity: 1 }]);
  *       }}
  *     >
- *       {isAdding ? "Adding..." : "Add to Cart"}
+ *       {isComingSoon ? "Coming soon" : isAdding ? "Adding..." : "Add to Cart"}
  *     </button>
  *   );
  * }
  * ```
  */
-export declare function useAddToCart(): {
+export declare function useAddToCart({ catalog, }?: {
+    /** The catalog this control sells from, so `checkoutAvailability` can say whether this site's checkout sells it. */
+    catalog?: CheckoutCatalog | null;
+}): {
     addToCart: (items: AddToCartItem[], openCartAfterAdd?: boolean) => Promise<AddToCartResult>;
     isAdding: boolean;
+    checkoutAvailability: import("./use-checkout-availability").CheckoutAvailability;
 };

package/cart/hooks/use-add-to-cart.js

@@ -6,6 +6,7 @@ import { DATA_LOADER_KEYS } from "../../loaders/loader-keys";
 import { isPlaceholderMerchandiseId } from "../../loaders/placeholder-product";
 import { useCartInternal } from "../cart-provider";
 import { toCartError } from "../utils/cart-error";
+import { useCheckoutAvailability } from "./use-checkout-availability";
 const PRODUCT_LOADER_KEYS = [
   DATA_LOADER_KEYS.SHOPIFY_PRODUCT,
   DATA_LOADER_KEYS.REPLO_PRODUCT
@@ -81,10 +82,13 @@ function findMerchandiseInQueryCache({
   }
   return void 0;
 }
-function useAddToCart() {
+function useAddToCart({
+  catalog = null
+} = {}) {
   const cart = useCartInternal();
   const queryClient = useQueryClient();
   const [isAdding, setIsAdding] = React.useState(false);
+  const checkoutAvailability = useCheckoutAvailability({ catalog });
   const addToCart = React.useCallback(
     async (items, openCartAfterAdd = true) => {
       const buyableItems = items.filter((item) => {
@@ -121,7 +125,7 @@ function useAddToCart() {
     },
     [cart, queryClient]
   );
-  return { addToCart, isAdding };
+  return { addToCart, isAdding, checkoutAvailability };
 }
 export {
   findMerchandiseInQueryCache,

package/cart/hooks/use-buy-now.d.ts

@@ -1,4 +1,5 @@
 import type { CartLineAttribute } from "../cart-types";
+import type { CheckoutCatalog } from "./use-checkout-availability";
 /**
  * What a `buyNow` call did. Out of stock is an expected storefront outcome
  * (a buyer can race the last unit), so it rides the return value rather than
@@ -34,18 +35,25 @@ export interface VariantBuyNowInfo {
  * the browser to checkout. Stripe checkout ignores selling plans and discount
  * codes, logging a server-side warning when either is supplied.
  *
+ * `checkoutAvailability` is `"unavailable"` while the store can't take
+ * payments yet (Replo checkout not set up, or checkout turned off), or when
+ * the `catalog` passed is one this site's checkout can't sell. Show the button
+ * disabled with "Coming soon" then, instead of letting the shopper hit a
+ * failed checkout.
+ *
  * @example
  *
  * ```tsx
  * import { useBuyNow } from "@replohq/sdk/cart/hooks/use-buy-now";
  *
  * function MyComponent({ selectedVariant, selectedSellingPlan, quantity }) {
- *   const { buyNow } = useBuyNow();
+ *   const { buyNow, checkoutAvailability } = useBuyNow();
  *   const [isSoldOut, setIsSoldOut] = React.useState(false);
+ *   const isComingSoon = checkoutAvailability === "unavailable";
  *
  *   return (
  *     <Button
- *       disabled={!selectedVariant?.availableForSale || isSoldOut}
+ *       disabled={!selectedVariant?.availableForSale || isSoldOut || isComingSoon}
  *       onClick={async () => {
  *         if (selectedVariant) {
  *           const outcome = await buyNow(
@@ -70,15 +78,18 @@ export interface VariantBuyNowInfo {
  *         }
  *       }}
  *     >
- *       {isSoldOut ? "Sold out" : "Shop Now"}
+ *       {isComingSoon ? "Coming soon" : isSoldOut ? "Sold out" : "Shop Now"}
  *     </Button>
  *   );
  * }
  * ```
  *
- * @returns Object containing the buyNow function
+ * @returns Object containing the buyNow function and whether checkout can take payments
  */
-export declare function useBuyNow(): {
+export declare function useBuyNow({ catalog, }?: {
+    /** The catalog this control sells from, so `checkoutAvailability` can say whether this site's checkout sells it. */
+    catalog?: CheckoutCatalog | null;
+}): {
     buyNow: (variants: VariantBuyNowInfo[], options?: {
         discountCodes?: string[];
         /** Order-level Shopify cart attributes, including experiment attribution. */
@@ -87,4 +98,5 @@ export declare function useBuyNow(): {
             value: string;
         }[];
     }) => Promise<BuyNowOutcome>;
+    checkoutAvailability: import("./use-checkout-availability").CheckoutAvailability;
 };

package/cart/hooks/use-buy-now.js

@@ -5,6 +5,7 @@ import { CanopyError } from "../../lib/canopy-error";
 import { navigateExternal } from "../../lib/external-navigation";
 import { buyNowWithRecoveryAction } from "../buy-now-action";
 import { CartCountryContext } from "../cart-country-context";
+import { useCheckoutAvailability } from "./use-checkout-availability";
 const REPLO_LOCAL_STORAGE_SESSION_KEY = "_replo_sid";
 const REPLO_SESSION_ID_KEY = "rsid";
 const REPLO_CLIENT_ID_KEY = "rclid";
@@ -13,8 +14,11 @@ class ProductHasNoVariantsError extends CanopyError {
 class CheckoutAttemptError extends CanopyError {
 }
 const checkoutAttempts = /* @__PURE__ */ new Map();
-function useBuyNow() {
+function useBuyNow({
+  catalog = null
+} = {}) {
   const country = React.useContext(CartCountryContext);
+  const checkoutAvailability = useCheckoutAvailability({ catalog });
   const reploSessionString = useClientValue(
     () => localStorage.getItem(REPLO_LOCAL_STORAGE_SESSION_KEY),
     null
@@ -88,7 +92,7 @@ function useBuyNow() {
     },
     [reploSessionString, country]
   );
-  return { buyNow };
+  return { buyNow, checkoutAvailability };
 }
 export {
   useBuyNow

package/cart/hooks/use-checkout-availability.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Whether shoppers can check out on this site right now. `"checking"` while
+ * the store's payments are being confirmed; buy controls stay usable then, so
+ * a store that can sell never flashes an unavailable state.
+ */
+export type CheckoutAvailability = "checking" | "available" | "unavailable";
+/**
+ * Which catalog a buy control sells from: `"shopify"` for Shopify loader
+ * output, `"replo"` for Replo products. Shopify checkout can't sell Replo
+ * products and Replo checkout can't sell Shopify ones.
+ */
+export type CheckoutCatalog = "shopify" | "replo";
+/**
+ * Replo checkout can only sell once the store's payments are set up, which
+ * can finish or lapse long after a publish, so it is read live. Shopify
+ * checkout is the store's own and is treated as available. Without a
+ * `catalog` only the site's checkout is judged, as before the option existed.
+ */
+export declare function useCheckoutAvailability({ catalog, }: {
+    catalog: CheckoutCatalog | null;
+}): CheckoutAvailability;

package/cart/hooks/use-checkout-availability.js

@@ -0,0 +1,71 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { CanopyError } from "../../lib/canopy-error";
+import { useCanopyClientConfig } from "../../providers/canopy-client-config";
+class CheckoutAvailabilityError extends CanopyError {
+}
+const CHECKOUT_AVAILABILITY_STALE_MS = 6e4;
+async function fetchCanAcceptPayments(config) {
+  const response = await fetch(
+    `${config.canopyApiBaseUrl}/api/v1/stripe-checkout/availability`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ projectId: config.projectId })
+    }
+  );
+  if (!response.ok) {
+    throw new CheckoutAvailabilityError({
+      message: `Checkout availability check failed with status ${response.status}`
+    });
+  }
+  const body = await response.json();
+  if (typeof body !== "object" || body === null || !("canAcceptPayments" in body) || typeof body.canAcceptPayments !== "boolean") {
+    throw new CheckoutAvailabilityError({
+      message: "Checkout availability check returned an unexpected response"
+    });
+  }
+  return body.canAcceptPayments;
+}
+function useCheckoutAvailability({
+  catalog
+}) {
+  const config = useCanopyClientConfig();
+  const checkoutProvider = config?.checkoutProvider ?? null;
+  const query = useQuery({
+    queryKey: ["replo", "checkout-availability", config?.projectId ?? null],
+    queryFn: () => {
+      if (!config) {
+        throw new CheckoutAvailabilityError({
+          message: "This site has no canopy-api config"
+        });
+      }
+      return fetchCanAcceptPayments(config);
+    },
+    enabled: checkoutProvider === "stripe" && catalog !== "shopify",
+    staleTime: CHECKOUT_AVAILABILITY_STALE_MS,
+    retry: 1
+  });
+  if (checkoutProvider === null) {
+    return "available";
+  }
+  if (checkoutProvider === "none") {
+    return "unavailable";
+  }
+  if (checkoutProvider === "shopify") {
+    return catalog === "replo" ? "unavailable" : "available";
+  }
+  if (catalog === "shopify") {
+    return "unavailable";
+  }
+  if (query.isPending) {
+    return "checking";
+  }
+  if (query.isError) {
+    return "available";
+  }
+  return query.data ? "available" : "unavailable";
+}
+export {
+  useCheckoutAvailability
+};

package/consent/consent-platform.d.ts

@@ -7,15 +7,21 @@ export interface ConsentPlatformConfig {
         name: string;
         values: Partial<Record<ConsentCategory, string>>;
     };
-    /** Cookiebot preset only: enables consent read-back and runScripts re-scan. */
-    isCookiebot: boolean;
+    /** Presets read the visitor's answer back; a generic platform only reports grants. */
+    kind: "cookiebot" | "usercentrics" | "generic";
+    /** Usercentrics only: the service that releases Replo's own pixel, or null until one is chosen. */
+    reploUsercentricsService: string | null;
+    /** The GTM container that loads this platform, which therefore can't wait for it. */
+    loaderContainerId: string | null;
 }
 /** Whether this entry connects a consent platform (vs a tracker it would gate). */
-export declare function isConsentPlatformEntry(entry: ReploScriptEntry): boolean;
+export declare function isConsentPlatformEntry(entry: ReploScriptEntry): entry is Extract<ReploScriptEntry, {
+    type: "Cookiebot" | "Usercentrics" | "consentPlatform";
+}>;
 /** The connected platform's config, or null when Replo's banner owns consent. */
 export declare function findConsentPlatform(scripts: ReploScriptEntry[]): ConsentPlatformConfig | null;
 /** Blocks a gated script; `text/plain` is unconditional so an unmapped category fails closed. */
-export declare function getBlockingAttributes(config: ConsentPlatformConfig, requiredConsent: ConsentCategory[]): Record<string, string>;
+export declare function getBlockingAttributes(config: ConsentPlatformConfig, requiredConsent: ConsentCategory[], usercentricsService: string | null): Record<string, string>;
 /** The bits of Cookiebot's `window.Cookiebot` global we read. */
 interface CookiebotGlobal {
     consent?: Partial<Record<CookiebotCategory, boolean>>;
@@ -26,6 +32,14 @@ type CookiebotCategory = "necessary" | "preferences" | "statistics" | "marketing
 declare global {
     interface Window {
         Cookiebot?: CookiebotGlobal;
+        __ucCmp?: {
+            getConsentDetails?: () => Promise<unknown>;
+            refreshScripts?: () => Promise<unknown>;
+        };
+        UC_UI?: {
+            getServicesBaseInfo?: () => unknown;
+            enableScriptsForServicesWithConsent?: () => unknown;
+        };
     }
 }
 type OptionalConsentCategory = Exclude<ConsentCategory, "necessary">;
@@ -36,12 +50,13 @@ export declare function findDelegatedPlatform(): ConsentPlatformConfig | null;
 export declare function getDelegatedConsent(): {
     categories: ConsentCategories;
     decidedAt: number | null;
+    grantedUsercentricsServices?: string[];
 };
 /** Inline marker a generic CMP executes when it releases one consent category. */
 export declare function buildGrantMarker(category: OptionalConsentCategory): ScriptTagDescriptor;
 /** Latches the platform as the consent backend; un-delegating would need a reload, as native revocation already does. */
 export declare function enableConsentDelegation(config: ConsentPlatformConfig): void;
-/** Cookiebot-only re-scan; other platforms rely on the loader injecting after every tag. */
+/** Re-scan for late tags; a generic platform relies on the loader injecting after every tag. */
 export declare function activateBlockedScripts(): void;
 /** Subscribe to delegated-consent changes. Returns an unsubscribe function. */
 export declare function subscribeToConsentDelegation(listener: () => void): () => void;