@zappie/theme-base 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/address.js +0 -1
- package/dist/address.js.map +2 -2
- package/dist/cart/line-options.js +1 -0
- package/dist/cart/line-options.js.map +2 -2
- package/dist/cart/totals.js +0 -2
- package/dist/cart/totals.js.map +2 -2
- package/dist/catalogue/presentation.js +0 -1
- package/dist/catalogue/presentation.js.map +2 -2
- package/dist/styles.css +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @zappie/theme-base
|
|
2
2
|
|
|
3
|
+
## 0.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- de930ad: Item option groups no longer say "Required" twice to a screen reader. Their heading already shows "Required*", so they turn off the hidden note `OptionGroup` adds.
|
|
8
|
+
- Updated dependencies [f7397bd]
|
|
9
|
+
- @zappie/foundations@0.1.8
|
|
10
|
+
|
|
11
|
+
## 0.1.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 9b25eb7: The packages now live in zappie/storefront-packages, and each package's repository, homepage and issues links point there. This release is the first one published from that repository.
|
|
16
|
+
- Updated dependencies [9b25eb7]
|
|
17
|
+
- @zappie/sdk@0.1.13
|
|
18
|
+
- @zappie/tokens@0.1.2
|
|
19
|
+
- @zappie/foundations@0.1.7
|
|
20
|
+
|
|
3
21
|
## 0.1.3
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/dist/address.js
CHANGED
package/dist/address.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/address.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\";\n\nimport type { DeliveryAddress } from \"@zappie/sdk\";\nimport type { Place, PlacesClient } from \"@zappie/sdk/places\";\nimport {\n createContext,\n useContext,\n type ComponentType,\n type ReactNode,\n} from \"react\";\n\nexport type AddressSuggestion = {\n placeId: string;\n address: string;\n sessionToken?: string;\n};\n\nexport type AddressLookup = {\n suggest(query: string): Promise<AddressSuggestion[]>;\n reverse?(coordinates: { lat: number; lng: number }): Promise<DeliveryAddress>;\n resolve?(\n address: DeliveryAddress,\n sessionToken?: string,\n ): Promise<DeliveryAddress>;\n Map?: ComponentType<{ address: DeliveryAddress }>;\n};\n\nfunction deliveryAddress(\n place: Place,\n source?: DeliveryAddress,\n): DeliveryAddress {\n const result: DeliveryAddress = {\n line1: place.line1,\n placeId: place.place_id,\n coordinates: { lat: place.lat, lng: place.lng },\n };\n if (place.city !== undefined) {\n result.city = place.city;\n }\n if (source?.line2 !== undefined) {\n result.line2 = source.line2;\n }\n if (source?.instructions !== undefined) {\n result.instructions = source.instructions;\n }\n return result;\n}\n\nconst Context = createContext<AddressLookup | null>(null);\n\nexport function AddressLookupProvider({\n lookup,\n children,\n}: {\n lookup: AddressLookup;\n children: ReactNode;\n}) {\n return <Context.Provider value={lookup}>{children}</Context.Provider>;\n}\n\nexport function useAddressLookup() {\n const lookup = useContext(Context);\n if (!lookup) {\n throw new Error(\"useAddressLookup requires AddressLookupProvider\");\n }\n return lookup;\n}\n\nexport function createSdkAddressLookup({\n places,\n branchId,\n}: {\n places: PlacesClient;\n branchId: string;\n}): AddressLookup {\n let sessionToken = crypto.randomUUID();\n const Map = ({ address }: { address: DeliveryAddress }) => {\n if (!address.coordinates) {\n return null;\n }\n return (\n // The theme can't use next/image; the map's size is fixed by the API.\n
|
|
5
|
-
"mappings": ";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAgDE;AA9BT,SAAS,gBACP,OACA,QACiB;AACjB,QAAM,SAA0B;AAAA,IAC9B,OAAO,MAAM;AAAA,IACb,SAAS,MAAM;AAAA,IACf,aAAa,EAAE,KAAK,MAAM,KAAK,KAAK,MAAM,IAAI;AAAA,EAChD;AACA,MAAI,MAAM,SAAS,QAAW;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,MAAI,QAAQ,UAAU,QAAW;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AACA,MAAI,QAAQ,iBAAiB,QAAW;AACtC,WAAO,eAAe,OAAO;AAAA,EAC/B;AACA,SAAO;AACT;AAEA,IAAM,UAAU,cAAoC,IAAI;AAEjD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,QAAS,UAAS;AACpD;AAEO,SAAS,mBAAmB;AACjC,QAAM,SAAS,WAAW,OAAO;AACjC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGkB;AAChB,MAAI,eAAe,OAAO,WAAW;AACrC,QAAM,MAAM,CAAC,EAAE,QAAQ,MAAoC;AACzD,QAAI,CAAC,QAAQ,aAAa;AACxB,aAAO;AAAA,IACT;AACA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["\"use client\";\n\nimport type { DeliveryAddress } from \"@zappie/sdk\";\nimport type { Place, PlacesClient } from \"@zappie/sdk/places\";\nimport {\n createContext,\n useContext,\n type ComponentType,\n type ReactNode,\n} from \"react\";\n\nexport type AddressSuggestion = {\n placeId: string;\n address: string;\n sessionToken?: string;\n};\n\nexport type AddressLookup = {\n suggest(query: string): Promise<AddressSuggestion[]>;\n reverse?(coordinates: { lat: number; lng: number }): Promise<DeliveryAddress>;\n resolve?(\n address: DeliveryAddress,\n sessionToken?: string,\n ): Promise<DeliveryAddress>;\n Map?: ComponentType<{ address: DeliveryAddress }>;\n};\n\nfunction deliveryAddress(\n place: Place,\n source?: DeliveryAddress,\n): DeliveryAddress {\n const result: DeliveryAddress = {\n line1: place.line1,\n placeId: place.place_id,\n coordinates: { lat: place.lat, lng: place.lng },\n };\n if (place.city !== undefined) {\n result.city = place.city;\n }\n if (source?.line2 !== undefined) {\n result.line2 = source.line2;\n }\n if (source?.instructions !== undefined) {\n result.instructions = source.instructions;\n }\n return result;\n}\n\nconst Context = createContext<AddressLookup | null>(null);\n\nexport function AddressLookupProvider({\n lookup,\n children,\n}: {\n lookup: AddressLookup;\n children: ReactNode;\n}) {\n return <Context.Provider value={lookup}>{children}</Context.Provider>;\n}\n\nexport function useAddressLookup() {\n const lookup = useContext(Context);\n if (!lookup) {\n throw new Error(\"useAddressLookup requires AddressLookupProvider\");\n }\n return lookup;\n}\n\nexport function createSdkAddressLookup({\n places,\n branchId,\n}: {\n places: PlacesClient;\n branchId: string;\n}): AddressLookup {\n let sessionToken = crypto.randomUUID();\n const Map = ({ address }: { address: DeliveryAddress }) => {\n if (!address.coordinates) {\n return null;\n }\n return (\n // The theme can't use next/image; the map's size is fixed by the API.\n <img\n className=\"z-base-address-map\"\n src={places.staticMapUrl(\n address.coordinates.lat,\n address.coordinates.lng,\n branchId,\n )}\n alt={`Map of ${address.line1}`}\n width={640}\n height={320}\n loading=\"lazy\"\n />\n );\n };\n return {\n async suggest(query) {\n const suggestions = await places.autocomplete(query, sessionToken);\n return suggestions.map((suggestion) => ({\n placeId: suggestion.place_id,\n address: suggestion.secondary\n ? `${suggestion.text}, ${suggestion.secondary}`\n : suggestion.text,\n sessionToken,\n }));\n },\n async resolve(address, token) {\n if (!address.placeId) {\n throw new Error(\"Choose a suggested delivery address\");\n }\n const place = await places.place(address.placeId, {\n branchId,\n sessionToken: token ?? sessionToken,\n });\n sessionToken = crypto.randomUUID();\n return deliveryAddress(place, address);\n },\n async reverse({ lat, lng }) {\n const place = await places.reverse(lat, lng);\n return deliveryAddress(place);\n },\n Map,\n };\n}\n"],
|
|
5
|
+
"mappings": ";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAgDE;AA9BT,SAAS,gBACP,OACA,QACiB;AACjB,QAAM,SAA0B;AAAA,IAC9B,OAAO,MAAM;AAAA,IACb,SAAS,MAAM;AAAA,IACf,aAAa,EAAE,KAAK,MAAM,KAAK,KAAK,MAAM,IAAI;AAAA,EAChD;AACA,MAAI,MAAM,SAAS,QAAW;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,MAAI,QAAQ,UAAU,QAAW;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AACA,MAAI,QAAQ,iBAAiB,QAAW;AACtC,WAAO,eAAe,OAAO;AAAA,EAC/B;AACA,SAAO;AACT;AAEA,IAAM,UAAU,cAAoC,IAAI;AAEjD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,QAAS,UAAS;AACpD;AAEO,SAAS,mBAAmB;AACjC,QAAM,SAAS,WAAW,OAAO;AACjC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGkB;AAChB,MAAI,eAAe,OAAO,WAAW;AACrC,QAAM,MAAM,CAAC,EAAE,QAAQ,MAAoC;AACzD,QAAI,CAAC,QAAQ,aAAa;AACxB,aAAO;AAAA,IACT;AACA;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,OAAO;AAAA,YACV,QAAQ,YAAY;AAAA,YACpB,QAAQ,YAAY;AAAA,YACpB;AAAA,UACF;AAAA,UACA,KAAK,UAAU,QAAQ,KAAK;AAAA,UAC5B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EAEJ;AACA,SAAO;AAAA,IACL,MAAM,QAAQ,OAAO;AACnB,YAAM,cAAc,MAAM,OAAO,aAAa,OAAO,YAAY;AACjE,aAAO,YAAY,IAAI,CAAC,gBAAgB;AAAA,QACtC,SAAS,WAAW;AAAA,QACpB,SAAS,WAAW,YAChB,GAAG,WAAW,IAAI,KAAK,WAAW,SAAS,KAC3C,WAAW;AAAA,QACf;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,MAAM,QAAQ,SAAS,OAAO;AAC5B,UAAI,CAAC,QAAQ,SAAS;AACpB,cAAM,IAAI,MAAM,qCAAqC;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,SAAS;AAAA,QAChD;AAAA,QACA,cAAc,SAAS;AAAA,MACzB,CAAC;AACD,qBAAe,OAAO,WAAW;AACjC,aAAO,gBAAgB,OAAO,OAAO;AAAA,IACvC;AAAA,IACA,MAAM,QAAQ,EAAE,KAAK,IAAI,GAAG;AAC1B,YAAM,QAAQ,MAAM,OAAO,QAAQ,KAAK,GAAG;AAC3C,aAAO,gBAAgB,KAAK;AAAA,IAC9B;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,6 +22,7 @@ function OptionsSection({ group }) {
|
|
|
22
22
|
group,
|
|
23
23
|
className: "z-base-option-group",
|
|
24
24
|
"aria-label": group.name,
|
|
25
|
+
requiredNote: false,
|
|
25
26
|
children: ({ quantities, setQuantity, invalid }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
26
27
|
/* @__PURE__ */ jsx("h3", { className: "z-base-option-heading", children: /* @__PURE__ */ jsxs(
|
|
27
28
|
"button",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/cart/line-options.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n Choice,\n ItemForm,\n Money,\n OptionGroup,\n Quantity,\n} from \"@zappie/foundations\";\nimport type { OptionGroup as Group } from \"@zappie/sdk\";\nimport { Fragment, useState } from \"react\";\nexport function LineOptions() {\n return (\n <ItemForm.Options>\n {({ groups }) =>\n [...groups]\n .sort(\n (left, right) =>\n Number(right.isAttribute) - Number(left.isAttribute),\n )\n .map((group) => <OptionsSection key={group.id} group={group} />)\n }\n </ItemForm.Options>\n );\n}\nfunction OptionsSection({ group }: { group: Group }) {\n const [expanded, setExpanded] = useState(true);\n const count =\n group.selection.max === group.selection.min && group.selection.min > 0\n ? `Exactly ${group.selection.min}`\n : group.selection.max\n ? `Choose up to ${group.selection.max}`\n : group.selection.min\n ? `Choose at least ${group.selection.min}`\n : \"Optional\";\n return (\n <OptionGroup\n group={group}\n className=\"z-base-option-group\"\n aria-label={group.name}\n >\n {({ quantities, setQuantity, invalid }) => (\n <Fragment>\n <h3 className=\"z-base-option-heading\">\n <button\n type=\"button\"\n aria-expanded={expanded || invalid}\n onClick={() => setExpanded(!expanded)}\n >\n <span>{group.name}</span>\n <span className=\"z-base-option-rule\">\n {count}\n {group.required && <strong> Required*</strong>}\n </span>\n <span aria-hidden=\"true\" className=\"z-base-option-chevron\">\n {expanded || invalid ? \"\u2304\" : \"\u203A\"}\n </span>\n </button>\n </h3>\n {(expanded || invalid) && (\n <div className=\"z-base-option-choices\">\n {group.helpText && <p>{group.helpText}</p>}\n {group.kind === \"select\" &&\n group.choices.map((choice) => (\n <div key={choice.id} className=\"z-base-choice-row\">\n <Choice choice={choice} className=\"z-base-choice\">\n <span className=\"z-base-choice-label\">\n <span>{choice.name}</span>\n {(choice.priceHint ?? choice.price).amountMinor !==\n 0 && (\n <span className=\"z-base-choice-price\">\n {(choice.priceHint ?? choice.price).amountMinor > 0\n ? \"+\"\n : \"\"}\n <Money value={choice.priceHint ?? choice.price} />\n </span>\n )}\n {!choice.isAvailable && (\n <span className=\"z-base-choice-price\">\n Unavailable\n </span>\n )}\n </span>\n </Choice>\n {choice.quantity && (quantities[choice.id] ?? 0) > 0 && (\n <Quantity.Root\n className=\"z-base-quantity\"\n value={quantities[choice.id] ?? 0}\n min={0}\n max={choice.quantity.max ?? 99}\n disabled={!choice.isAvailable}\n onValueChange={(quantity) =>\n setQuantity(choice.id, quantity)\n }\n >\n <Quantity.Decrement\n aria-label={`Decrease ${choice.name}`}\n >\n \u2212\n </Quantity.Decrement>\n <Quantity.Value\n aria-label={`${choice.name} quantity`}\n />\n <Quantity.Increment\n aria-label={`Increase ${choice.name}`}\n >\n +\n </Quantity.Increment>\n </Quantity.Root>\n )}\n </div>\n ))}\n {(group.kind !== \"select\" || group.isInformational) && (\n <OptionGroup.Input className=\"z-base-input\" />\n )}\n </div>\n )}\n </Fragment>\n )}\n </OptionGroup>\n );\n}\n"],
|
|
5
|
-
"mappings": ";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU,gBAAgB;AAUT,
|
|
4
|
+
"sourcesContent": ["import {\n Choice,\n ItemForm,\n Money,\n OptionGroup,\n Quantity,\n} from \"@zappie/foundations\";\nimport type { OptionGroup as Group } from \"@zappie/sdk\";\nimport { Fragment, useState } from \"react\";\nexport function LineOptions() {\n return (\n <ItemForm.Options>\n {({ groups }) =>\n [...groups]\n .sort(\n (left, right) =>\n Number(right.isAttribute) - Number(left.isAttribute),\n )\n .map((group) => <OptionsSection key={group.id} group={group} />)\n }\n </ItemForm.Options>\n );\n}\nfunction OptionsSection({ group }: { group: Group }) {\n const [expanded, setExpanded] = useState(true);\n const count =\n group.selection.max === group.selection.min && group.selection.min > 0\n ? `Exactly ${group.selection.min}`\n : group.selection.max\n ? `Choose up to ${group.selection.max}`\n : group.selection.min\n ? `Choose at least ${group.selection.min}`\n : \"Optional\";\n return (\n <OptionGroup\n group={group}\n className=\"z-base-option-group\"\n aria-label={group.name}\n // The heading's \"Required*\" already says so.\n requiredNote={false}\n >\n {({ quantities, setQuantity, invalid }) => (\n <Fragment>\n <h3 className=\"z-base-option-heading\">\n <button\n type=\"button\"\n aria-expanded={expanded || invalid}\n onClick={() => setExpanded(!expanded)}\n >\n <span>{group.name}</span>\n <span className=\"z-base-option-rule\">\n {count}\n {group.required && <strong> Required*</strong>}\n </span>\n <span aria-hidden=\"true\" className=\"z-base-option-chevron\">\n {expanded || invalid ? \"\u2304\" : \"\u203A\"}\n </span>\n </button>\n </h3>\n {(expanded || invalid) && (\n <div className=\"z-base-option-choices\">\n {group.helpText && <p>{group.helpText}</p>}\n {group.kind === \"select\" &&\n group.choices.map((choice) => (\n <div key={choice.id} className=\"z-base-choice-row\">\n <Choice choice={choice} className=\"z-base-choice\">\n <span className=\"z-base-choice-label\">\n <span>{choice.name}</span>\n {(choice.priceHint ?? choice.price).amountMinor !==\n 0 && (\n <span className=\"z-base-choice-price\">\n {(choice.priceHint ?? choice.price).amountMinor > 0\n ? \"+\"\n : \"\"}\n <Money value={choice.priceHint ?? choice.price} />\n </span>\n )}\n {!choice.isAvailable && (\n <span className=\"z-base-choice-price\">\n Unavailable\n </span>\n )}\n </span>\n </Choice>\n {choice.quantity && (quantities[choice.id] ?? 0) > 0 && (\n <Quantity.Root\n className=\"z-base-quantity\"\n value={quantities[choice.id] ?? 0}\n min={0}\n max={choice.quantity.max ?? 99}\n disabled={!choice.isAvailable}\n onValueChange={(quantity) =>\n setQuantity(choice.id, quantity)\n }\n >\n <Quantity.Decrement\n aria-label={`Decrease ${choice.name}`}\n >\n \u2212\n </Quantity.Decrement>\n <Quantity.Value\n aria-label={`${choice.name} quantity`}\n />\n <Quantity.Increment\n aria-label={`Increase ${choice.name}`}\n >\n +\n </Quantity.Increment>\n </Quantity.Root>\n )}\n </div>\n ))}\n {(group.kind !== \"select\" || group.isInformational) && (\n <OptionGroup.Input className=\"z-base-input\" />\n )}\n </div>\n )}\n </Fragment>\n )}\n </OptionGroup>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cart/totals.js
CHANGED
|
@@ -2,14 +2,12 @@
|
|
|
2
2
|
import { Totals as FoundationTotals, Money } from "@zappie/foundations";
|
|
3
3
|
import { useCart } from "@zappie/sdk/react";
|
|
4
4
|
import { Fragment, useState } from "react";
|
|
5
|
-
import { useBaseHostBridge } from "../host-bridge.js";
|
|
6
5
|
import { CheckoutCta } from "./checkout-cta.js";
|
|
7
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
7
|
function Totals({
|
|
9
8
|
contactPhone
|
|
10
9
|
} = {}) {
|
|
11
10
|
const cart = useCart();
|
|
12
|
-
const bridge = useBaseHostBridge();
|
|
13
11
|
const [error, setError] = useState(null);
|
|
14
12
|
const blocked = cart.issues.some((issue) => issue.severity === "blocking");
|
|
15
13
|
const refresh = async () => {
|
package/dist/cart/totals.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/cart/totals.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Totals as FoundationTotals, Money } from \"@zappie/foundations\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { Fragment, useState } from \"react\";\nimport {
|
|
5
|
-
"mappings": ";AAAA,SAAS,UAAU,kBAAkB,aAAa;AAClD,SAAS,eAAe;AACxB,SAAS,UAAU,gBAAgB;AACnC,SAAS,
|
|
4
|
+
"sourcesContent": ["import { Totals as FoundationTotals, Money } from \"@zappie/foundations\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { Fragment, useState } from \"react\";\nimport { CheckoutCta } from \"./checkout-cta\";\nimport type { ContactPhoneState } from \"./customer-details\";\nexport function Totals({\n contactPhone,\n}: {\n contactPhone?: ContactPhoneState;\n} = {}) {\n const cart = useCart();\n const [error, setError] = useState<string | null>(null);\n const blocked = cart.issues.some((issue) => issue.severity === \"blocking\");\n const refresh = async () => {\n setError(null);\n try {\n await cart.actions.quote({ force: true });\n } catch (error) {\n setError(\n error instanceof Error ? error.message : \"Unable to update totals\",\n );\n }\n };\n return (\n <FoundationTotals className=\"z-base-summary\">\n {({ quote, status }) => {\n // Under a blocking issue the store may not have priced the cart at\n // all (a closed branch without a time, a refused preview): its zero\n // totals would read as \u20A60. A priced cart still shows its figures, for\n // example before the customer signs in or chooses an address.\n const unpriced =\n blocked && (!quote || quote.subtotal.amountMinor === 0);\n return (\n <Fragment>\n <h2>Order summary</h2>\n {status === \"loading\" && <p role=\"status\">Updating totals\u2026</p>}\n {status === \"offline\" && (\n <p role=\"alert\">\n Unable to connect. Try updating your totals again.\n </p>\n )}\n {status === \"stale\" && !blocked && (\n <p>Update totals before continuing.</p>\n )}\n {error && <p role=\"alert\">{error}</p>}\n {unpriced && (\n <p>Totals appear once the issues above are resolved.</p>\n )}\n {blocked && !unpriced && (\n <p>Your total may change once the issues above are resolved.</p>\n )}\n {quote && !unpriced && (\n <dl className=\"z-base-totals\">\n <div>\n <dt>Subtotal</dt>\n <dd>\n <Money value={quote.subtotal} />\n </dd>\n </div>\n {quote.fees.map((fee, index) => (\n <div key={`${fee.code}:${index}`}>\n <dt>{fee.label}</dt>\n <dd>\n <Money value={fee.amount} />\n </dd>\n </div>\n ))}\n {quote.delivery && (\n <div>\n <dt>Delivery</dt>\n <dd>\n <Money value={quote.delivery} />\n </dd>\n </div>\n )}\n {quote.discounts.map((discount, index) => (\n <div key={`${discount.code}:${index}`}>\n <dt>{discount.label}</dt>\n <dd>\n <Money value={discount.amount} />\n </dd>\n </div>\n ))}\n <div className=\"z-base-total\">\n <dt>Total</dt>\n <dd>\n <Money value={quote.total} />\n </dd>\n </div>\n </dl>\n )}\n {(status === \"stale\" || status === \"offline\") && !blocked && (\n <button\n type=\"button\"\n className=\"z-base-button-secondary\"\n onClick={() => {\n void refresh();\n }}\n >\n Update totals\n </button>\n )}\n <CheckoutCta\n totalsStatus={status}\n {...(contactPhone ? { contactPhone } : {})}\n />\n </Fragment>\n );\n }}\n </FoundationTotals>\n );\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,UAAU,kBAAkB,aAAa;AAClD,SAAS,eAAe;AACxB,SAAS,UAAU,gBAAgB;AACnC,SAAS,mBAAmB;AA+BhB,cAmBI,YAnBJ;AA7BL,SAAS,OAAO;AAAA,EACrB;AACF,IAEI,CAAC,GAAG;AACN,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,UAAU,KAAK,OAAO,KAAK,CAAC,UAAU,MAAM,aAAa,UAAU;AACzE,QAAM,UAAU,YAAY;AAC1B,aAAS,IAAI;AACb,QAAI;AACF,YAAM,KAAK,QAAQ,MAAM,EAAE,OAAO,KAAK,CAAC;AAAA,IAC1C,SAASA,QAAO;AACd;AAAA,QACEA,kBAAiB,QAAQA,OAAM,UAAU;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AACA,SACE,oBAAC,oBAAiB,WAAU,kBACzB,WAAC,EAAE,OAAO,OAAO,MAAM;AAKtB,UAAM,WACJ,YAAY,CAAC,SAAS,MAAM,SAAS,gBAAgB;AACvD,WACE,qBAAC,YACC;AAAA,0BAAC,QAAG,2BAAa;AAAA,MAChB,WAAW,aAAa,oBAAC,OAAE,MAAK,UAAS,mCAAgB;AAAA,MACzD,WAAW,aACV,oBAAC,OAAE,MAAK,SAAQ,gEAEhB;AAAA,MAED,WAAW,WAAW,CAAC,WACtB,oBAAC,OAAE,8CAAgC;AAAA,MAEpC,SAAS,oBAAC,OAAE,MAAK,SAAS,iBAAM;AAAA,MAChC,YACC,oBAAC,OAAE,+DAAiD;AAAA,MAErD,WAAW,CAAC,YACX,oBAAC,OAAE,uEAAyD;AAAA,MAE7D,SAAS,CAAC,YACT,qBAAC,QAAG,WAAU,iBACZ;AAAA,6BAAC,SACC;AAAA,8BAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,UAAU,GAChC;AAAA,WACF;AAAA,QACC,MAAM,KAAK,IAAI,CAAC,KAAK,UACpB,qBAAC,SACC;AAAA,8BAAC,QAAI,cAAI,OAAM;AAAA,UACf,oBAAC,QACC,8BAAC,SAAM,OAAO,IAAI,QAAQ,GAC5B;AAAA,aAJQ,GAAG,IAAI,IAAI,IAAI,KAAK,EAK9B,CACD;AAAA,QACA,MAAM,YACL,qBAAC,SACC;AAAA,8BAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,UAAU,GAChC;AAAA,WACF;AAAA,QAED,MAAM,UAAU,IAAI,CAAC,UAAU,UAC9B,qBAAC,SACC;AAAA,8BAAC,QAAI,mBAAS,OAAM;AAAA,UACpB,oBAAC,QACC,8BAAC,SAAM,OAAO,SAAS,QAAQ,GACjC;AAAA,aAJQ,GAAG,SAAS,IAAI,IAAI,KAAK,EAKnC,CACD;AAAA,QACD,qBAAC,SAAI,WAAU,gBACb;AAAA,8BAAC,QAAG,mBAAK;AAAA,UACT,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,OAAO,GAC7B;AAAA,WACF;AAAA,SACF;AAAA,OAEA,WAAW,WAAW,WAAW,cAAc,CAAC,WAChD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,iBAAK,QAAQ;AAAA,UACf;AAAA,UACD;AAAA;AAAA,MAED;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAc;AAAA,UACb,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,EAEJ,GACF;AAEJ;",
|
|
6
6
|
"names": ["error"]
|
|
7
7
|
}
|
|
@@ -30,7 +30,6 @@ function ItemImage({
|
|
|
30
30
|
return /* @__PURE__ */ jsx("div", { className: "z-base-item-image", children: image && !failed ? (
|
|
31
31
|
// Public themes remain framework independent; the host may optimise
|
|
32
32
|
// image URLs through the bridge.
|
|
33
|
-
// eslint-disable-next-line @next/next/no-img-element
|
|
34
33
|
/* @__PURE__ */ jsx(
|
|
35
34
|
"img",
|
|
36
35
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/catalogue/presentation.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\";\nimport { createSanitizeRichText } from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useState } from \"react\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nconst sanitize = createSanitizeRichText(parseRichText);\nexport function Description({ value }: { value: string }) {\n const [html, setHtml] = useState(\"\");\n useEffect(() => setHtml(sanitize(value)), [value]);\n return (\n <div\n className=\"z-base-description\"\n dangerouslySetInnerHTML={{ __html: html }}\n />\n );\n}\nexport function ItemImage({\n src,\n sizes,\n priority = false,\n}: {\n src?: string | undefined;\n /** Rendered width hint for responsive host images. */\n sizes: string;\n /** Tiles likely to be the largest paint load first instead of lazily. */\n priority?: boolean;\n}) {\n const bridge = useBaseHostBridge();\n const [failed, setFailed] = useState(false);\n useEffect(() => setFailed(false), [src]);\n const image = src ? (bridge.imageProps?.(src, sizes) ?? { src }) : undefined;\n return (\n <div className=\"z-base-item-image\">\n {image && !failed ? (\n // Public themes remain framework independent; the host may optimise\n // image URLs through the bridge.\n
|
|
5
|
-
"mappings": ";;;AACA,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAM9B;AALJ,IAAM,WAAW,uBAAuB,aAAa;AAC9C,SAAS,YAAY,EAAE,MAAM,GAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,YAAU,MAAM,QAAQ,SAAS,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ;AACO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAMG;AACD,QAAM,SAAS,kBAAkB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,GAAG,CAAC;AACvC,QAAM,QAAQ,MAAO,OAAO,aAAa,KAAK,KAAK,KAAK,EAAE,IAAI,IAAK;AACnE,SACE,oBAAC,SAAI,WAAU,qBACZ,mBAAS,CAAC;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["\"use client\";\nimport { createSanitizeRichText } from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useState } from \"react\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nconst sanitize = createSanitizeRichText(parseRichText);\nexport function Description({ value }: { value: string }) {\n const [html, setHtml] = useState(\"\");\n useEffect(() => setHtml(sanitize(value)), [value]);\n return (\n <div\n className=\"z-base-description\"\n dangerouslySetInnerHTML={{ __html: html }}\n />\n );\n}\nexport function ItemImage({\n src,\n sizes,\n priority = false,\n}: {\n src?: string | undefined;\n /** Rendered width hint for responsive host images. */\n sizes: string;\n /** Tiles likely to be the largest paint load first instead of lazily. */\n priority?: boolean;\n}) {\n const bridge = useBaseHostBridge();\n const [failed, setFailed] = useState(false);\n useEffect(() => setFailed(false), [src]);\n const image = src ? (bridge.imageProps?.(src, sizes) ?? { src }) : undefined;\n return (\n <div className=\"z-base-item-image\">\n {image && !failed ? (\n // Public themes remain framework independent; the host may optimise\n // image URLs through the bridge.\n <img\n {...image}\n loading={priority ? \"eager\" : \"lazy\"}\n fetchPriority={priority ? \"high\" : \"auto\"}\n decoding=\"async\"\n alt=\"\"\n onError={() => setFailed(true)}\n />\n ) : (\n <span aria-hidden=\"true\">Image unavailable</span>\n )}\n </div>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;AACA,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAM9B;AALJ,IAAM,WAAW,uBAAuB,aAAa;AAC9C,SAAS,YAAY,EAAE,MAAM,GAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,YAAU,MAAM,QAAQ,SAAS,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ;AACO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAMG;AACD,QAAM,SAAS,kBAAkB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,GAAG,CAAC;AACvC,QAAM,QAAQ,MAAO,OAAO,aAAa,KAAK,KAAK,KAAK,EAAE,IAAI,IAAK;AACnE,SACE,oBAAC,SAAI,WAAU,qBACZ,mBAAS,CAAC;AAAA;AAAA;AAAA,IAGT;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,WAAW,UAAU;AAAA,QAC9B,eAAe,WAAW,SAAS;AAAA,QACnC,UAAS;AAAA,QACT,KAAI;AAAA,QACJ,SAAS,MAAM,UAAU,IAAI;AAAA;AAAA,IAC/B;AAAA,MAEA,oBAAC,UAAK,eAAY,QAAO,+BAAiB,GAE9C;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zappie/theme-base",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "The base storefront theme Zappie's own storefront app renders, built only from Zappie's public packages.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -54,22 +54,22 @@
|
|
|
54
54
|
"CHANGELOG.md"
|
|
55
55
|
],
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@zappie/foundations": "^0.1.
|
|
58
|
-
"@zappie/sdk": "^0.1.
|
|
59
|
-
"@zappie/tokens": "^0.1.
|
|
57
|
+
"@zappie/foundations": "^0.1.8",
|
|
58
|
+
"@zappie/sdk": "^0.1.13",
|
|
59
|
+
"@zappie/tokens": "^0.1.2"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"react": "^19.2.0"
|
|
63
63
|
},
|
|
64
64
|
"repository": {
|
|
65
65
|
"type": "git",
|
|
66
|
-
"url": "git+https://github.com/zappie/storefront.git",
|
|
66
|
+
"url": "git+https://github.com/zappie/storefront-packages.git",
|
|
67
67
|
"directory": "themes/base"
|
|
68
68
|
},
|
|
69
69
|
"license": "MIT",
|
|
70
|
-
"homepage": "https://github.com/zappie/storefront#readme",
|
|
70
|
+
"homepage": "https://github.com/zappie/storefront-packages#readme",
|
|
71
71
|
"bugs": {
|
|
72
|
-
"url": "https://github.com/zappie/storefront/issues"
|
|
72
|
+
"url": "https://github.com/zappie/storefront-packages/issues"
|
|
73
73
|
},
|
|
74
74
|
"scripts": {
|
|
75
75
|
"build": "tsup && node ../../scripts/release-packages/build-modules.mjs"
|