@cimplify/sdk 0.7.6 → 0.7.8

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 +51 -34
  2. package/dist/react.mjs +51 -34
  3. package/package.json +1 -1
package/dist/react.js CHANGED
@@ -412,6 +412,8 @@ function CimplifyCheckout({
412
412
  const demoRunRef = react.useRef(0);
413
413
  const isDemoCheckout = demoMode ?? client.getPublicKey().trim().length === 0;
414
414
  const isTestMode = client.isTestMode();
415
+ const primaryColor = appearance?.variables?.primaryColor || "#0a2540";
416
+ const isDark = appearance?.theme === "dark";
415
417
  const emitStatus = react.useCallback(
416
418
  (nextStatus, context = {}) => {
417
419
  setStatus(nextStatus);
@@ -654,44 +656,54 @@ function CimplifyCheckout({
654
656
  }
655
657
  ),
656
658
  /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "auth", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : authMountRef }) }),
657
- /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "order-type", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
658
- "div",
659
- {
660
- role: "group",
661
- "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: "8px 12px",
672
- borderRadius: "8px",
673
- border: "1px solid #d4d4d8",
674
- background: orderType === type ? "#111827" : "#ffffff",
675
- color: orderType === type ? "#ffffff" : "#111827",
676
- cursor: isSubmitting ? "not-allowed" : "pointer",
677
- opacity: isSubmitting ? 0.6 : 1
659
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: "20px" }, children: [
660
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Order type" }),
661
+ /* @__PURE__ */ jsxRuntime.jsx(
662
+ "div",
663
+ {
664
+ role: "group",
665
+ "aria-label": "Order type",
666
+ style: { display: "flex", gap: "8px", flexWrap: "wrap" },
667
+ children: resolvedOrderTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
668
+ "button",
669
+ {
670
+ type: "button",
671
+ onClick: () => setOrderType(type),
672
+ disabled: isSubmitting,
673
+ "data-selected": orderType === type ? "true" : "false",
674
+ style: {
675
+ padding: "10px 18px",
676
+ borderRadius: "8px",
677
+ border: orderType === type ? "1px solid transparent" : `1px solid ${isDark ? "#3f3f46" : "#d4d4d8"}`,
678
+ background: orderType === type ? primaryColor : "transparent",
679
+ color: orderType === type ? "#ffffff" : isDark ? "#e4e4e7" : "#3f3f46",
680
+ cursor: isSubmitting ? "not-allowed" : "pointer",
681
+ opacity: isSubmitting ? 0.6 : 1,
682
+ fontSize: "15px",
683
+ fontWeight: 500,
684
+ transition: "all 150ms ease",
685
+ WebkitTapHighlightColor: "transparent"
686
+ },
687
+ children: labelForOrderType(type)
678
688
  },
679
- children: labelForOrderType(type)
680
- },
681
- type
682
- ))
683
- }
684
- ) }),
689
+ type
690
+ ))
691
+ }
692
+ )
693
+ ] }),
685
694
  /* @__PURE__ */ jsxRuntime.jsx(
686
695
  "div",
687
696
  {
688
697
  "data-cimplify-section": "address",
689
- style: { marginTop: "12px", display: orderType === "delivery" ? "block" : "none" },
698
+ style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
690
699
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
691
700
  }
692
701
  ),
693
- /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "payment", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef }) }),
694
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
702
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "payment", style: { marginTop: "20px" }, children: [
703
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Payment method" }),
704
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef })
705
+ ] }),
706
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
695
707
  "button",
696
708
  {
697
709
  type: "button",
@@ -699,12 +711,17 @@ function CimplifyCheckout({
699
711
  disabled: isSubmitting,
700
712
  style: {
701
713
  width: "100%",
702
- padding: "10px 14px",
703
- borderRadius: "8px",
714
+ padding: "14px 16px",
715
+ borderRadius: "10px",
704
716
  border: "none",
705
- background: isSubmitting ? "#a1a1aa" : "#111827",
717
+ background: isSubmitting ? "#a1a1aa" : primaryColor,
706
718
  color: "#ffffff",
707
- cursor: isSubmitting ? "not-allowed" : "pointer"
719
+ cursor: isSubmitting ? "not-allowed" : "pointer",
720
+ fontWeight: 600,
721
+ fontSize: "16px",
722
+ boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
723
+ transition: "all 150ms ease",
724
+ WebkitTapHighlightColor: "transparent"
708
725
  },
709
726
  children: isSubmitting ? "Processing..." : "Complete Order"
710
727
  }
package/dist/react.mjs CHANGED
@@ -410,6 +410,8 @@ function CimplifyCheckout({
410
410
  const demoRunRef = useRef(0);
411
411
  const isDemoCheckout = demoMode ?? client.getPublicKey().trim().length === 0;
412
412
  const isTestMode = client.isTestMode();
413
+ const primaryColor = appearance?.variables?.primaryColor || "#0a2540";
414
+ const isDark = appearance?.theme === "dark";
413
415
  const emitStatus = useCallback(
414
416
  (nextStatus, context = {}) => {
415
417
  setStatus(nextStatus);
@@ -652,44 +654,54 @@ function CimplifyCheckout({
652
654
  }
653
655
  ),
654
656
  /* @__PURE__ */ jsx("div", { "data-cimplify-section": "auth", children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : authMountRef }) }),
655
- /* @__PURE__ */ jsx("div", { "data-cimplify-section": "order-type", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(
656
- "div",
657
- {
658
- role: "group",
659
- "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: "8px 12px",
670
- borderRadius: "8px",
671
- border: "1px solid #d4d4d8",
672
- background: orderType === type ? "#111827" : "#ffffff",
673
- color: orderType === type ? "#ffffff" : "#111827",
674
- cursor: isSubmitting ? "not-allowed" : "pointer",
675
- opacity: isSubmitting ? 0.6 : 1
657
+ /* @__PURE__ */ jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: "20px" }, children: [
658
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Order type" }),
659
+ /* @__PURE__ */ jsx(
660
+ "div",
661
+ {
662
+ role: "group",
663
+ "aria-label": "Order type",
664
+ style: { display: "flex", gap: "8px", flexWrap: "wrap" },
665
+ children: resolvedOrderTypes.map((type) => /* @__PURE__ */ jsx(
666
+ "button",
667
+ {
668
+ type: "button",
669
+ onClick: () => setOrderType(type),
670
+ disabled: isSubmitting,
671
+ "data-selected": orderType === type ? "true" : "false",
672
+ style: {
673
+ padding: "10px 18px",
674
+ borderRadius: "8px",
675
+ border: orderType === type ? "1px solid transparent" : `1px solid ${isDark ? "#3f3f46" : "#d4d4d8"}`,
676
+ background: orderType === type ? primaryColor : "transparent",
677
+ color: orderType === type ? "#ffffff" : isDark ? "#e4e4e7" : "#3f3f46",
678
+ cursor: isSubmitting ? "not-allowed" : "pointer",
679
+ opacity: isSubmitting ? 0.6 : 1,
680
+ fontSize: "15px",
681
+ fontWeight: 500,
682
+ transition: "all 150ms ease",
683
+ WebkitTapHighlightColor: "transparent"
684
+ },
685
+ children: labelForOrderType(type)
676
686
  },
677
- children: labelForOrderType(type)
678
- },
679
- type
680
- ))
681
- }
682
- ) }),
687
+ type
688
+ ))
689
+ }
690
+ )
691
+ ] }),
683
692
  /* @__PURE__ */ jsx(
684
693
  "div",
685
694
  {
686
695
  "data-cimplify-section": "address",
687
- style: { marginTop: "12px", display: orderType === "delivery" ? "block" : "none" },
696
+ style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
688
697
  children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
689
698
  }
690
699
  ),
691
- /* @__PURE__ */ jsx("div", { "data-cimplify-section": "payment", style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef }) }),
692
- /* @__PURE__ */ jsx("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(
700
+ /* @__PURE__ */ jsxs("div", { "data-cimplify-section": "payment", style: { marginTop: "20px" }, children: [
701
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Payment method" }),
702
+ /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef })
703
+ ] }),
704
+ /* @__PURE__ */ jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsx(
693
705
  "button",
694
706
  {
695
707
  type: "button",
@@ -697,12 +709,17 @@ function CimplifyCheckout({
697
709
  disabled: isSubmitting,
698
710
  style: {
699
711
  width: "100%",
700
- padding: "10px 14px",
701
- borderRadius: "8px",
712
+ padding: "14px 16px",
713
+ borderRadius: "10px",
702
714
  border: "none",
703
- background: isSubmitting ? "#a1a1aa" : "#111827",
715
+ background: isSubmitting ? "#a1a1aa" : primaryColor,
704
716
  color: "#ffffff",
705
- cursor: isSubmitting ? "not-allowed" : "pointer"
717
+ cursor: isSubmitting ? "not-allowed" : "pointer",
718
+ fontWeight: 600,
719
+ fontSize: "16px",
720
+ boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
721
+ transition: "all 150ms ease",
722
+ WebkitTapHighlightColor: "transparent"
706
723
  },
707
724
  children: isSubmitting ? "Processing..." : "Complete Order"
708
725
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cimplify/sdk",
3
- "version": "0.7.6",
3
+ "version": "0.7.8",
4
4
  "description": "Cimplify Commerce SDK for storefronts",
5
5
  "keywords": [
6
6
  "cimplify",