@cimplify/sdk 0.7.6 → 0.7.7

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 +48 -33
  2. package/dist/react.mjs +48 -33
  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,53 @@ 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: "8px 14px",
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: "14px",
683
+ fontWeight: 500,
684
+ transition: "all 150ms ease"
685
+ },
686
+ children: labelForOrderType(type)
678
687
  },
679
- children: labelForOrderType(type)
680
- },
681
- type
682
- ))
683
- }
684
- ) }),
688
+ type
689
+ ))
690
+ }
691
+ )
692
+ ] }),
685
693
  /* @__PURE__ */ jsxRuntime.jsx(
686
694
  "div",
687
695
  {
688
696
  "data-cimplify-section": "address",
689
- style: { marginTop: "12px", display: orderType === "delivery" ? "block" : "none" },
697
+ style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
690
698
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
691
699
  }
692
700
  ),
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(
701
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "payment", style: { marginTop: "20px" }, children: [
702
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Payment method" }),
703
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef })
704
+ ] }),
705
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
695
706
  "button",
696
707
  {
697
708
  type: "button",
@@ -699,12 +710,16 @@ function CimplifyCheckout({
699
710
  disabled: isSubmitting,
700
711
  style: {
701
712
  width: "100%",
702
- padding: "10px 14px",
713
+ padding: "12px 16px",
703
714
  borderRadius: "8px",
704
715
  border: "none",
705
- background: isSubmitting ? "#a1a1aa" : "#111827",
716
+ background: isSubmitting ? "#a1a1aa" : primaryColor,
706
717
  color: "#ffffff",
707
- cursor: isSubmitting ? "not-allowed" : "pointer"
718
+ cursor: isSubmitting ? "not-allowed" : "pointer",
719
+ fontWeight: 600,
720
+ fontSize: "15px",
721
+ boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
722
+ transition: "all 150ms ease"
708
723
  },
709
724
  children: isSubmitting ? "Processing..." : "Complete Order"
710
725
  }
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,53 @@ 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: "8px 14px",
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: "14px",
681
+ fontWeight: 500,
682
+ transition: "all 150ms ease"
683
+ },
684
+ children: labelForOrderType(type)
676
685
  },
677
- children: labelForOrderType(type)
678
- },
679
- type
680
- ))
681
- }
682
- ) }),
686
+ type
687
+ ))
688
+ }
689
+ )
690
+ ] }),
683
691
  /* @__PURE__ */ jsx(
684
692
  "div",
685
693
  {
686
694
  "data-cimplify-section": "address",
687
- style: { marginTop: "12px", display: orderType === "delivery" ? "block" : "none" },
695
+ style: { marginTop: "16px", display: orderType === "delivery" ? "block" : "none" },
688
696
  children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
689
697
  }
690
698
  ),
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(
699
+ /* @__PURE__ */ jsxs("div", { "data-cimplify-section": "payment", style: { marginTop: "20px" }, children: [
700
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", fontWeight: 500, color: isDark ? "#a1a1aa" : "#71717a", marginBottom: "8px" }, children: "Payment method" }),
701
+ /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : paymentMountRef })
702
+ ] }),
703
+ /* @__PURE__ */ jsx("div", { style: { marginTop: "24px" }, children: /* @__PURE__ */ jsx(
693
704
  "button",
694
705
  {
695
706
  type: "button",
@@ -697,12 +708,16 @@ function CimplifyCheckout({
697
708
  disabled: isSubmitting,
698
709
  style: {
699
710
  width: "100%",
700
- padding: "10px 14px",
711
+ padding: "12px 16px",
701
712
  borderRadius: "8px",
702
713
  border: "none",
703
- background: isSubmitting ? "#a1a1aa" : "#111827",
714
+ background: isSubmitting ? "#a1a1aa" : primaryColor,
704
715
  color: "#ffffff",
705
- cursor: isSubmitting ? "not-allowed" : "pointer"
716
+ cursor: isSubmitting ? "not-allowed" : "pointer",
717
+ fontWeight: 600,
718
+ fontSize: "15px",
719
+ boxShadow: isSubmitting ? "none" : "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
720
+ transition: "all 150ms ease"
706
721
  },
707
722
  children: isSubmitting ? "Processing..." : "Complete Order"
708
723
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cimplify/sdk",
3
- "version": "0.7.6",
3
+ "version": "0.7.7",
4
4
  "description": "Cimplify Commerce SDK for storefronts",
5
5
  "keywords": [
6
6
  "cimplify",