fix: real checkout-datetime version/capability fix + payment-customization schema
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled

checkout-datetime (re-enabled, no longer excluded):
- api_version was declared as "2025-10" but @shopify/ui-extensions-react
  has no release for that channel at all (jumps 2025.7.4 -> 2026.0.0
  directly) — downgraded to "2025-07" to match what's actually installed
  and what the code was written/typed against. Verified all three targets
  (purchase.checkout.block.render, purchase.thank-you.block.render,
  customer-account.order-status.block.render) exist in that package
  version before making the change.
- [extensions.capabilities] network_access was missing entirely (dropped
  during the multi-pin-pickup rewrite) despite Checkout.jsx's authedFetch()
  genuinely needing it — the checkout sandbox would have silently blocked
  every fetch() call at runtime even though it deployed fine.
- OrderStatus.jsx imported reactExtension/BlockStack/Heading/Text/
  useTranslate from the *checkout* surface behind a "might not be in the
  type definition" @ts-ignore, for a *customer-account* target. Verified
  @shopify/ui-extensions-react/customer-account re-exports the same
  component names for real and switched the import, removing the
  @ts-ignore entirely — it now typechecks for real instead of being
  suppressed.
- lib.js's shared useConfirmationText() hardcoded useTranslate/
  useAttributes from the checkout surface, but was called from both
  ThankYou.jsx (checkout) and OrderStatus.jsx (customer-account) — hooks
  are bound to their surface's React context, so calling checkout-bound
  hooks from a customer-account extension would break at runtime even
  though nothing caught it statically. Changed it to a plain function
  (confirmationText) taking translate/attributes as parameters; each
  caller now calls its own surface's hooks and passes the results in.

payment-customization: schema.graphql never existed (not gitignored,
just never fetched/committed when this extension was added — HANDOVER.md's
note that this was "by design" was wrong). Fetched via
`shopify app function schema` and committed, matching the pattern already
used by validation-slot/delivery-customization.

Together these three issues were silently failing every single
`shopify app deploy` for the whole app, which is why shopify.app.toml's
App Proxy URL fix never actually reached Shopify's servers.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
metatroncubeswdev 2026-09-12 23:44:37 -04:00
parent aa14f34e36
commit c1494cfa52
5 changed files with 5590 additions and 16 deletions

View File

@ -1,4 +1,4 @@
api_version = "2025-10" api_version = "2025-07"
[[extensions]] [[extensions]]
type = "ui_extension" type = "ui_extension"
@ -33,3 +33,10 @@ target = "purchase.thank-you.block.render"
[[extensions.targeting]] [[extensions.targeting]]
module = "./src/OrderStatus.jsx" module = "./src/OrderStatus.jsx"
target = "customer-account.order-status.block.render" target = "customer-account.order-status.block.render"
# Required — Checkout.jsx's authedFetch() calls this app's own backend
# (checkout.scheduling.* routes). Was present in the extension's original
# toml but missing after the multi-pin-pickup rewrite, which would have
# had the checkout sandbox silently block every fetch() call at runtime.
[extensions.capabilities]
network_access = true

View File

@ -1,13 +1,12 @@
import { reactExtension, BlockStack, Heading, Text } from "@shopify/ui-extensions-react/checkout"; import { reactExtension, BlockStack, Heading, Text, useTranslate, useAttributes } from "@shopify/ui-extensions-react/customer-account";
import { useConfirmationText } from "./lib.js"; import { confirmationText } from "./lib.js";
import { useTranslate } from "@shopify/ui-extensions-react/checkout";
// @ts-ignore - customer account targets might not be in the checkout UI extensions type definition
export default reactExtension("customer-account.order-status.block.render", () => <Extension />); export default reactExtension("customer-account.order-status.block.render", () => <Extension />);
function Extension() { function Extension() {
const text = useConfirmationText();
const translate = useTranslate(); const translate = useTranslate();
const attributes = useAttributes();
const text = confirmationText(translate, attributes);
if (!text) return null; if (!text) return null;
return ( return (
<BlockStack spacing="base"> <BlockStack spacing="base">

View File

@ -1,12 +1,12 @@
import { reactExtension, BlockStack, Heading, Text } from "@shopify/ui-extensions-react/checkout"; import { reactExtension, BlockStack, Heading, Text, useTranslate, useAttributes } from "@shopify/ui-extensions-react/checkout";
import { useConfirmationText } from "./lib.js"; import { confirmationText } from "./lib.js";
import { useTranslate } from "@shopify/ui-extensions-react/checkout";
export default reactExtension("purchase.thank-you.block.render", () => <Extension />); export default reactExtension("purchase.thank-you.block.render", () => <Extension />);
function Extension() { function Extension() {
const text = useConfirmationText();
const translate = useTranslate(); const translate = useTranslate();
const attributes = useAttributes();
const text = confirmationText(translate, attributes);
if (!text) return null; if (!text) return null;
return ( return (
<BlockStack spacing="base"> <BlockStack spacing="base">

View File

@ -1,5 +1,3 @@
import { useTranslate, useAttributes } from "@shopify/ui-extensions-react/checkout";
export const METHODS = [ export const METHODS = [
{ value: "PICKUP", labelKey: "method_pickup", attrLabel: "Pickup date" }, { value: "PICKUP", labelKey: "method_pickup", attrLabel: "Pickup date" },
{ value: "LOCAL_DELIVERY", labelKey: "method_local_delivery", attrLabel: "Delivery date" }, { value: "LOCAL_DELIVERY", labelKey: "method_local_delivery", attrLabel: "Delivery date" },
@ -57,10 +55,16 @@ const CONFIRMATION_LABEL = {
SHIPPING: "confirmation_shipping", SHIPPING: "confirmation_shipping",
}; };
export function useConfirmationText() { // Plain function, not a hook — useTranslate()/useAttributes() are bound to
const translate = useTranslate(); // whichever extension surface calls them (checkout vs. customer-account),
const attributes = useAttributes(); // so ThankYou.jsx and OrderStatus.jsx each call their own surface's hooks
// and pass the results in here, rather than this shared file importing
// hooks pinned to one surface and being called from the other.
/**
* @param {(key: string) => string} translate
* @param {Array<{key: string, value: string}> | undefined} attributes
*/
export function confirmationText(translate, attributes) {
const method = readAttribute(attributes, "dd_method"); const method = readAttribute(attributes, "dd_method");
const date = readAttribute(attributes, "dd_date"); const date = readAttribute(attributes, "dd_date");
const startMin = readAttribute(attributes, "dd_start_min"); const startMin = readAttribute(attributes, "dd_start_min");

File diff suppressed because it is too large Load Diff