@cimplify/sdk 0.7.10 → 0.7.11

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.
Files changed (3) hide show
  1. package/dist/react.js +58 -37
  2. package/dist/react.mjs +58 -37
  3. package/package.json +1 -1
package/dist/react.js CHANGED
@@ -339,6 +339,18 @@ function Ad({
339
339
  }
340
340
  );
341
341
  }
342
+ var SPACE = { sm: 8, md: 12, lg: 16, xl: 24 };
343
+ function shellColors(isDark, primaryColor) {
344
+ return {
345
+ text: isDark ? "#f4f4f5" : "#1a1a1a",
346
+ textSecondary: isDark ? "#a1a1aa" : "#52525b",
347
+ textMuted: isDark ? "#71717a" : "#a1a1aa",
348
+ border: isDark ? "#27272a" : "#e4e4e7",
349
+ surface: isDark ? "#18181b" : "#fafafa",
350
+ error: "#dc2626",
351
+ primary: primaryColor
352
+ };
353
+ }
342
354
  function labelForOrderType(orderType) {
343
355
  if (orderType === "dine_in") {
344
356
  return "Dine In";
@@ -631,11 +643,12 @@ function CimplifyCheckout({
631
643
  onError,
632
644
  orderType
633
645
  ]);
646
+ const colors = shellColors(isDark ?? false, primaryColor);
634
647
  if (isInitializing) {
635
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-status": "", style: { fontSize: "14px", color: "#52525b" }, children: "Preparing checkout..." }) });
648
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-status": "", style: { fontSize: 13, color: colors.textSecondary }, children: "Preparing checkout..." }) });
636
649
  }
637
650
  if (!isDemoCheckout && (!resolvedBusinessId || !resolvedCartId)) {
638
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-error": "", style: { fontSize: "14px", color: "#b91c1c" }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
651
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-error": "", style: { fontSize: 13, color: colors.error }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
639
652
  }
640
653
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-cimplify-checkout": "", children: [
641
654
  isTestMode && !isDemoCheckout && /* @__PURE__ */ jsxRuntime.jsx(
@@ -652,38 +665,47 @@ function CimplifyCheckout({
652
665
  }
653
666
  ),
654
667
  /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "payment", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef }) }),
655
- /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: "20px" }, children: [
656
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Order type" }),
668
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: SPACE.xl }, children: [
669
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 13, fontWeight: 500, color: colors.textMuted, marginBottom: SPACE.sm }, children: "Order type" }),
657
670
  /* @__PURE__ */ jsxRuntime.jsx(
658
671
  "div",
659
672
  {
660
673
  role: "group",
661
674
  "aria-label": "Order type",
662
- style: { display: "flex", gap: "8px", flexWrap: "wrap" },
663
- children: resolvedOrderTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
664
- "button",
665
- {
666
- type: "button",
667
- onClick: () => setOrderType(type),
668
- disabled: isSubmitting,
669
- "data-selected": orderType === type ? "true" : "false",
670
- style: {
671
- padding: "10px 18px",
672
- borderRadius: "8px",
673
- border: orderType === type ? "1px solid transparent" : `1px solid ${isDark ? "#3f3f46" : "#d4d4d8"}`,
674
- background: orderType === type ? primaryColor : "transparent",
675
- color: orderType === type ? "#ffffff" : isDark ? "#e4e4e7" : "#3f3f46",
676
- cursor: isSubmitting ? "not-allowed" : "pointer",
677
- opacity: isSubmitting ? 0.6 : 1,
678
- fontSize: "15px",
679
- fontWeight: 500,
680
- transition: "all 150ms ease",
681
- WebkitTapHighlightColor: "transparent"
675
+ style: {
676
+ display: "inline-flex",
677
+ border: `1px solid ${colors.border}`,
678
+ borderRadius: 8,
679
+ padding: 3,
680
+ background: colors.surface
681
+ },
682
+ children: resolvedOrderTypes.map((type) => {
683
+ const active = orderType === type;
684
+ return /* @__PURE__ */ jsxRuntime.jsx(
685
+ "button",
686
+ {
687
+ type: "button",
688
+ onClick: () => setOrderType(type),
689
+ disabled: isSubmitting,
690
+ "data-selected": active ? "true" : "false",
691
+ style: {
692
+ padding: `${SPACE.sm}px ${SPACE.lg}px`,
693
+ borderRadius: 6,
694
+ border: "none",
695
+ background: active ? primaryColor : "transparent",
696
+ color: active ? "#ffffff" : colors.textSecondary,
697
+ cursor: isSubmitting ? "not-allowed" : "pointer",
698
+ opacity: isSubmitting ? 0.6 : 1,
699
+ fontSize: 14,
700
+ fontWeight: 500,
701
+ transition: "all 150ms ease",
702
+ WebkitTapHighlightColor: "transparent"
703
+ },
704
+ children: labelForOrderType(type)
682
705
  },
683
- children: labelForOrderType(type)
684
- },
685
- type
686
- ))
706
+ type
707
+ );
708
+ })
687
709
  }
688
710
  )
689
711
  ] }),
@@ -691,11 +713,11 @@ function CimplifyCheckout({
691
713
  "div",
692
714
  {
693
715
  "data-cimplify-section": "address",
694
- style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
716
+ style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
695
717
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
696
718
  }
697
719
  ),
698
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
720
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsxRuntime.jsx(
699
721
  "button",
700
722
  {
701
723
  type: "button",
@@ -703,23 +725,22 @@ function CimplifyCheckout({
703
725
  disabled: isSubmitting,
704
726
  style: {
705
727
  width: "100%",
706
- padding: "14px 16px",
707
- borderRadius: "10px",
728
+ padding: `${SPACE.md}px ${SPACE.lg}px`,
729
+ borderRadius: 8,
708
730
  border: "none",
709
- background: isSubmitting ? "#a1a1aa" : primaryColor,
731
+ background: isSubmitting ? colors.textMuted : primaryColor,
710
732
  color: "#ffffff",
711
733
  cursor: isSubmitting ? "not-allowed" : "pointer",
712
734
  fontWeight: 600,
713
- fontSize: "16px",
714
- boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
735
+ fontSize: 16,
715
736
  transition: "all 150ms ease",
716
737
  WebkitTapHighlightColor: "transparent"
717
738
  },
718
739
  children: isSubmitting ? "Processing..." : "Complete Order"
719
740
  }
720
741
  ) }),
721
- status && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-status": "", style: { marginTop: "10px", fontSize: "14px", color: "#52525b" }, children: statusText || statusToLabel(status) }),
722
- errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-error": "", style: { marginTop: "8px", fontSize: "14px", color: "#b91c1c" }, children: errorMessage })
742
+ status && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-status": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.textSecondary }, children: statusText || statusToLabel(status) }),
743
+ errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-error": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.error }, children: errorMessage })
723
744
  ] });
724
745
  }
725
746
 
package/dist/react.mjs CHANGED
@@ -337,6 +337,18 @@ function Ad({
337
337
  }
338
338
  );
339
339
  }
340
+ var SPACE = { sm: 8, md: 12, lg: 16, xl: 24 };
341
+ function shellColors(isDark, primaryColor) {
342
+ return {
343
+ text: isDark ? "#f4f4f5" : "#1a1a1a",
344
+ textSecondary: isDark ? "#a1a1aa" : "#52525b",
345
+ textMuted: isDark ? "#71717a" : "#a1a1aa",
346
+ border: isDark ? "#27272a" : "#e4e4e7",
347
+ surface: isDark ? "#18181b" : "#fafafa",
348
+ error: "#dc2626",
349
+ primary: primaryColor
350
+ };
351
+ }
340
352
  function labelForOrderType(orderType) {
341
353
  if (orderType === "dine_in") {
342
354
  return "Dine In";
@@ -629,11 +641,12 @@ function CimplifyCheckout({
629
641
  onError,
630
642
  orderType
631
643
  ]);
644
+ const colors = shellColors(isDark ?? false, primaryColor);
632
645
  if (isInitializing) {
633
- return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { fontSize: "14px", color: "#52525b" }, children: "Preparing checkout..." }) });
646
+ return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { fontSize: 13, color: colors.textSecondary }, children: "Preparing checkout..." }) });
634
647
  }
635
648
  if (!isDemoCheckout && (!resolvedBusinessId || !resolvedCartId)) {
636
- return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { fontSize: "14px", color: "#b91c1c" }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
649
+ return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { fontSize: 13, color: colors.error }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
637
650
  }
638
651
  return /* @__PURE__ */ jsxs("div", { className, "data-cimplify-checkout": "", children: [
639
652
  isTestMode && !isDemoCheckout && /* @__PURE__ */ jsx(
@@ -650,38 +663,47 @@ function CimplifyCheckout({
650
663
  }
651
664
  ),
652
665
  /* @__PURE__ */ jsx("div", { "data-cimplify-section": "payment", children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef }) }),
653
- /* @__PURE__ */ jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: "20px" }, children: [
654
- /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Order type" }),
666
+ /* @__PURE__ */ jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: SPACE.xl }, children: [
667
+ /* @__PURE__ */ jsx("p", { style: { fontSize: 13, fontWeight: 500, color: colors.textMuted, marginBottom: SPACE.sm }, children: "Order type" }),
655
668
  /* @__PURE__ */ jsx(
656
669
  "div",
657
670
  {
658
671
  role: "group",
659
672
  "aria-label": "Order type",
660
- style: { display: "flex", gap: "8px", flexWrap: "wrap" },
661
- children: resolvedOrderTypes.map((type) => /* @__PURE__ */ jsx(
662
- "button",
663
- {
664
- type: "button",
665
- onClick: () => setOrderType(type),
666
- disabled: isSubmitting,
667
- "data-selected": orderType === type ? "true" : "false",
668
- style: {
669
- padding: "10px 18px",
670
- borderRadius: "8px",
671
- border: orderType === type ? "1px solid transparent" : `1px solid ${isDark ? "#3f3f46" : "#d4d4d8"}`,
672
- background: orderType === type ? primaryColor : "transparent",
673
- color: orderType === type ? "#ffffff" : isDark ? "#e4e4e7" : "#3f3f46",
674
- cursor: isSubmitting ? "not-allowed" : "pointer",
675
- opacity: isSubmitting ? 0.6 : 1,
676
- fontSize: "15px",
677
- fontWeight: 500,
678
- transition: "all 150ms ease",
679
- WebkitTapHighlightColor: "transparent"
673
+ style: {
674
+ display: "inline-flex",
675
+ border: `1px solid ${colors.border}`,
676
+ borderRadius: 8,
677
+ padding: 3,
678
+ background: colors.surface
679
+ },
680
+ children: resolvedOrderTypes.map((type) => {
681
+ const active = orderType === type;
682
+ return /* @__PURE__ */ jsx(
683
+ "button",
684
+ {
685
+ type: "button",
686
+ onClick: () => setOrderType(type),
687
+ disabled: isSubmitting,
688
+ "data-selected": active ? "true" : "false",
689
+ style: {
690
+ padding: `${SPACE.sm}px ${SPACE.lg}px`,
691
+ borderRadius: 6,
692
+ border: "none",
693
+ background: active ? primaryColor : "transparent",
694
+ color: active ? "#ffffff" : colors.textSecondary,
695
+ cursor: isSubmitting ? "not-allowed" : "pointer",
696
+ opacity: isSubmitting ? 0.6 : 1,
697
+ fontSize: 14,
698
+ fontWeight: 500,
699
+ transition: "all 150ms ease",
700
+ WebkitTapHighlightColor: "transparent"
701
+ },
702
+ children: labelForOrderType(type)
680
703
  },
681
- children: labelForOrderType(type)
682
- },
683
- type
684
- ))
704
+ type
705
+ );
706
+ })
685
707
  }
686
708
  )
687
709
  ] }),
@@ -689,11 +711,11 @@ function CimplifyCheckout({
689
711
  "div",
690
712
  {
691
713
  "data-cimplify-section": "address",
692
- style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
714
+ style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
693
715
  children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
694
716
  }
695
717
  ),
696
- /* @__PURE__ */ jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsx(
718
+ /* @__PURE__ */ jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsx(
697
719
  "button",
698
720
  {
699
721
  type: "button",
@@ -701,23 +723,22 @@ function CimplifyCheckout({
701
723
  disabled: isSubmitting,
702
724
  style: {
703
725
  width: "100%",
704
- padding: "14px 16px",
705
- borderRadius: "10px",
726
+ padding: `${SPACE.md}px ${SPACE.lg}px`,
727
+ borderRadius: 8,
706
728
  border: "none",
707
- background: isSubmitting ? "#a1a1aa" : primaryColor,
729
+ background: isSubmitting ? colors.textMuted : primaryColor,
708
730
  color: "#ffffff",
709
731
  cursor: isSubmitting ? "not-allowed" : "pointer",
710
732
  fontWeight: 600,
711
- fontSize: "16px",
712
- boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
733
+ fontSize: 16,
713
734
  transition: "all 150ms ease",
714
735
  WebkitTapHighlightColor: "transparent"
715
736
  },
716
737
  children: isSubmitting ? "Processing..." : "Complete Order"
717
738
  }
718
739
  ) }),
719
- status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: "10px", fontSize: "14px", color: "#52525b" }, children: statusText || statusToLabel(status) }),
720
- errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: "8px", fontSize: "14px", color: "#b91c1c" }, children: errorMessage })
740
+ status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.textSecondary }, children: statusText || statusToLabel(status) }),
741
+ errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.error }, children: errorMessage })
721
742
  ] });
722
743
  }
723
744
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cimplify/sdk",
3
- "version": "0.7.10",
3
+ "version": "0.7.11",
4
4
  "description": "Cimplify Commerce SDK for storefronts",
5
5
  "keywords": [
6
6
  "cimplify",