fix: real checkout-datetime version/capability fix + payment-customization schema
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
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:
parent
aa14f34e36
commit
c1494cfa52
@ -1,4 +1,4 @@
|
||||
api_version = "2025-10"
|
||||
api_version = "2025-07"
|
||||
|
||||
[[extensions]]
|
||||
type = "ui_extension"
|
||||
@ -33,3 +33,10 @@ target = "purchase.thank-you.block.render"
|
||||
[[extensions.targeting]]
|
||||
module = "./src/OrderStatus.jsx"
|
||||
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
|
||||
@ -1,13 +1,12 @@
|
||||
import { reactExtension, BlockStack, Heading, Text } from "@shopify/ui-extensions-react/checkout";
|
||||
import { useConfirmationText } from "./lib.js";
|
||||
import { useTranslate } from "@shopify/ui-extensions-react/checkout";
|
||||
import { reactExtension, BlockStack, Heading, Text, useTranslate, useAttributes } from "@shopify/ui-extensions-react/customer-account";
|
||||
import { confirmationText } from "./lib.js";
|
||||
|
||||
// @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 />);
|
||||
|
||||
function Extension() {
|
||||
const text = useConfirmationText();
|
||||
const translate = useTranslate();
|
||||
const attributes = useAttributes();
|
||||
const text = confirmationText(translate, attributes);
|
||||
if (!text) return null;
|
||||
return (
|
||||
<BlockStack spacing="base">
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { reactExtension, BlockStack, Heading, Text } from "@shopify/ui-extensions-react/checkout";
|
||||
import { useConfirmationText } from "./lib.js";
|
||||
import { useTranslate } from "@shopify/ui-extensions-react/checkout";
|
||||
import { reactExtension, BlockStack, Heading, Text, useTranslate, useAttributes } from "@shopify/ui-extensions-react/checkout";
|
||||
import { confirmationText } from "./lib.js";
|
||||
|
||||
export default reactExtension("purchase.thank-you.block.render", () => <Extension />);
|
||||
|
||||
function Extension() {
|
||||
const text = useConfirmationText();
|
||||
const translate = useTranslate();
|
||||
const attributes = useAttributes();
|
||||
const text = confirmationText(translate, attributes);
|
||||
if (!text) return null;
|
||||
return (
|
||||
<BlockStack spacing="base">
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { useTranslate, useAttributes } from "@shopify/ui-extensions-react/checkout";
|
||||
|
||||
export const METHODS = [
|
||||
{ value: "PICKUP", labelKey: "method_pickup", attrLabel: "Pickup date" },
|
||||
{ value: "LOCAL_DELIVERY", labelKey: "method_local_delivery", attrLabel: "Delivery date" },
|
||||
@ -57,10 +55,16 @@ const CONFIRMATION_LABEL = {
|
||||
SHIPPING: "confirmation_shipping",
|
||||
};
|
||||
|
||||
export function useConfirmationText() {
|
||||
const translate = useTranslate();
|
||||
const attributes = useAttributes();
|
||||
|
||||
// Plain function, not a hook — useTranslate()/useAttributes() are bound to
|
||||
// whichever extension surface calls them (checkout vs. customer-account),
|
||||
// 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 date = readAttribute(attributes, "dd_date");
|
||||
const startMin = readAttribute(attributes, "dd_start_min");
|
||||
|
||||
5564
extensions/payment-customization/schema.graphql
Normal file
5564
extensions/payment-customization/schema.graphql
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user