@planetaexo/design-system 0.31.0 → 0.32.0

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/dist/index.cjs CHANGED
@@ -4472,6 +4472,98 @@ function BookingAdventureCard({
4472
4472
  }
4473
4473
  );
4474
4474
  }
4475
+ function BookingSummary({ heading, rows, footer, className }) {
4476
+ var _a, _b;
4477
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { marginBottom: "24px" }, children: [
4478
+ /* @__PURE__ */ jsxRuntime.jsx(
4479
+ "p",
4480
+ {
4481
+ style: {
4482
+ marginTop: 0,
4483
+ marginBottom: "20px",
4484
+ fontWeight: 700,
4485
+ color: emailTokens.foreground,
4486
+ fontSize: "18px",
4487
+ fontFamily: emailTokens.fontFamily
4488
+ },
4489
+ children: heading
4490
+ }
4491
+ ),
4492
+ /* @__PURE__ */ jsxRuntime.jsx(
4493
+ "div",
4494
+ {
4495
+ style: {
4496
+ borderRadius: "12px",
4497
+ border: `1px solid ${emailTokens.border}`,
4498
+ overflow: "hidden"
4499
+ },
4500
+ children: /* @__PURE__ */ jsxRuntime.jsx(
4501
+ "table",
4502
+ {
4503
+ style: {
4504
+ width: "100%",
4505
+ fontSize: "14px",
4506
+ borderCollapse: "collapse"
4507
+ },
4508
+ children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
4509
+ rows.map((row, i) => {
4510
+ var _a2;
4511
+ const isLastRowWithoutFooter = i === rows.length - 1 && !footer;
4512
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4513
+ "tr",
4514
+ {
4515
+ style: !isLastRowWithoutFooter ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
4516
+ children: [
4517
+ /* @__PURE__ */ jsxRuntime.jsx(
4518
+ "td",
4519
+ {
4520
+ style: {
4521
+ padding: "12px 20px",
4522
+ color: emailTokens.mutedForeground,
4523
+ backgroundColor: emailTokens.muted,
4524
+ verticalAlign: "top"
4525
+ },
4526
+ children: row.label
4527
+ }
4528
+ ),
4529
+ /* @__PURE__ */ jsxRuntime.jsx(
4530
+ "td",
4531
+ {
4532
+ style: {
4533
+ padding: "12px 20px",
4534
+ fontWeight: row.valueColor === emailTokens.primary ? 600 : 500,
4535
+ color: (_a2 = row.valueColor) != null ? _a2 : emailTokens.foreground,
4536
+ verticalAlign: "top"
4537
+ },
4538
+ children: row.value
4539
+ }
4540
+ )
4541
+ ]
4542
+ },
4543
+ i
4544
+ );
4545
+ }),
4546
+ footer && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
4547
+ "td",
4548
+ {
4549
+ colSpan: 2,
4550
+ style: {
4551
+ padding: "12px 20px",
4552
+ textAlign: "center",
4553
+ fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
4554
+ color: (_b = footer.color) != null ? _b : emailTokens.foreground,
4555
+ backgroundColor: footer.backgroundColor
4556
+ },
4557
+ children: footer.text
4558
+ }
4559
+ ) })
4560
+ ] })
4561
+ }
4562
+ )
4563
+ }
4564
+ )
4565
+ ] });
4566
+ }
4475
4567
  var DEFAULT_LABELS2 = {
4476
4568
  heading: "PAYMENT DETAILS"
4477
4569
  };
@@ -4679,27 +4771,18 @@ function BookingPaymentConfirmationEmail({
4679
4771
  ] }),
4680
4772
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } })
4681
4773
  ] }),
4682
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
4683
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
4684
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
4685
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
4686
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
4687
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: emailTokens.primary }, children: bookingReference })
4688
- ] }),
4689
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
4690
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.adventuresLabel }),
4691
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: adventures.length })
4692
- ] }),
4693
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
4694
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.totalTravellersLabel }),
4695
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: allTravellers.length })
4696
- ] }),
4697
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
4698
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.agentLabel }),
4699
- /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: agent })
4700
- ] })
4701
- ] }) }) })
4702
- ] }),
4774
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
4775
+ BookingSummary,
4776
+ {
4777
+ heading: l.bookingSummaryHeading,
4778
+ rows: [
4779
+ { label: l.bookingNumberLabel, value: bookingReference, valueColor: emailTokens.primary },
4780
+ { label: l.adventuresLabel, value: adventures.length },
4781
+ { label: l.totalTravellersLabel, value: allTravellers.length },
4782
+ { label: l.agentLabel, value: agent }
4783
+ ]
4784
+ }
4785
+ ) }),
4703
4786
  /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
4704
4787
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: adventures.map((adventure, adIdx) => {
4705
4788
  var _a, _b, _c, _d;
@@ -4819,97 +4902,6 @@ function BookingPaymentConfirmationEmail({
4819
4902
  }
4820
4903
  );
4821
4904
  }
4822
- function BookingSummary({ heading, rows, footer, className }) {
4823
- var _a, _b;
4824
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { marginBottom: "24px" }, children: [
4825
- /* @__PURE__ */ jsxRuntime.jsx(
4826
- "p",
4827
- {
4828
- style: {
4829
- marginBottom: "12px",
4830
- fontWeight: 700,
4831
- color: emailTokens.foreground,
4832
- fontSize: "16px",
4833
- fontFamily: emailTokens.fontFamily
4834
- },
4835
- children: heading
4836
- }
4837
- ),
4838
- /* @__PURE__ */ jsxRuntime.jsx(
4839
- "div",
4840
- {
4841
- style: {
4842
- borderRadius: "12px",
4843
- border: `1px solid ${emailTokens.border}`,
4844
- overflow: "hidden"
4845
- },
4846
- children: /* @__PURE__ */ jsxRuntime.jsx(
4847
- "table",
4848
- {
4849
- style: {
4850
- width: "100%",
4851
- fontSize: "14px",
4852
- borderCollapse: "collapse"
4853
- },
4854
- children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
4855
- rows.map((row, i) => {
4856
- var _a2;
4857
- return /* @__PURE__ */ jsxRuntime.jsxs(
4858
- "tr",
4859
- {
4860
- style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {},
4861
- children: [
4862
- /* @__PURE__ */ jsxRuntime.jsx(
4863
- "td",
4864
- {
4865
- style: {
4866
- padding: "10px 16px",
4867
- color: emailTokens.mutedForeground,
4868
- verticalAlign: "top"
4869
- },
4870
- children: row.label
4871
- }
4872
- ),
4873
- /* @__PURE__ */ jsxRuntime.jsx(
4874
- "td",
4875
- {
4876
- style: {
4877
- padding: "10px 16px",
4878
- textAlign: "right",
4879
- fontWeight: 500,
4880
- color: (_a2 = row.valueColor) != null ? _a2 : emailTokens.foreground,
4881
- whiteSpace: "nowrap"
4882
- },
4883
- children: row.value
4884
- }
4885
- )
4886
- ]
4887
- },
4888
- i
4889
- );
4890
- }),
4891
- footer && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
4892
- "td",
4893
- {
4894
- colSpan: 2,
4895
- style: {
4896
- padding: "12px 16px",
4897
- textAlign: "center",
4898
- fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
4899
- color: (_b = footer.color) != null ? _b : emailTokens.foreground,
4900
- backgroundColor: footer.backgroundColor,
4901
- borderTop: `1px solid ${emailTokens.border}`
4902
- },
4903
- children: footer.text
4904
- }
4905
- ) })
4906
- ] })
4907
- }
4908
- )
4909
- }
4910
- )
4911
- ] });
4912
- }
4913
4905
  var DEFAULT_LABELS4 = {
4914
4906
  ctaButton: "Add travellers to your booking",
4915
4907
  logoAlt: "PlanetaEXO",