@planetaexo/design-system 0.31.0 → 0.33.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",
@@ -5115,7 +5107,7 @@ var DEFAULT_LABELS5 = {
5115
5107
  adventuresRowLabel: "Adventures",
5116
5108
  travellersRowLabel: "Total Travellers",
5117
5109
  agentRowLabel: "Agent",
5118
- progressHeader: "Registration progress",
5110
+ progressHeader: "\u{1F4CB} Registration progress",
5119
5111
  startsLabel: "Starts",
5120
5112
  completedFractionLabel: (c, total) => `Completed: ${c} / ${total} travellers`,
5121
5113
  ctaLabel: "View Booking & Registrations",
@@ -5135,7 +5127,7 @@ var DEFAULT_LABELS5 = {
5135
5127
  subject: "Complete Traveller Registration for Your Upcoming Adventure",
5136
5128
  intro: "Your adventure with PlanetaEXO is getting closer, and there is one important step remaining before departure.",
5137
5129
  contextNote: "To help us prepare logistics and ensure your experience runs smoothly, all travellers must complete their registration before the adventure starts.",
5138
- pleaseNoteHeader: "Please note:",
5130
+ pleaseNoteHeader: "\u2139\uFE0F Please note:",
5139
5131
  pleaseNoteBullets: [
5140
5132
  "Registration is mandatory for each traveller included in the booking",
5141
5133
  "If your booking includes multiple adventures, registration must be completed for each adventure separately",
@@ -5299,10 +5291,11 @@ function RegistrationReminderEmail({
5299
5291
  {
5300
5292
  style: {
5301
5293
  marginTop: 0,
5302
- marginBottom: "12px",
5294
+ marginBottom: "20px",
5303
5295
  fontWeight: 700,
5304
- fontSize: "16px",
5305
- color: emailTokens.foreground
5296
+ fontSize: "18px",
5297
+ color: emailTokens.foreground,
5298
+ fontFamily: emailTokens.fontFamily
5306
5299
  },
5307
5300
  children: l.progressHeader
5308
5301
  }
@@ -5411,10 +5404,11 @@ function RegistrationReminderEmail({
5411
5404
  {
5412
5405
  style: {
5413
5406
  marginTop: 0,
5414
- marginBottom: "12px",
5407
+ marginBottom: "20px",
5415
5408
  fontWeight: 700,
5416
- fontSize: "16px",
5417
- color: emailTokens.foreground
5409
+ fontSize: "18px",
5410
+ color: emailTokens.foreground,
5411
+ fontFamily: emailTokens.fontFamily
5418
5412
  },
5419
5413
  children: v.pleaseNoteHeader
5420
5414
  }