tf-checkout-react 1.7.7 → 1.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 (14) hide show
  1. package/dist/constants/index.d.ts +1 -0
  2. package/dist/tf-checkout-react.cjs.development.js +41 -16
  3. package/dist/tf-checkout-react.cjs.development.js.map +1 -1
  4. package/dist/tf-checkout-react.cjs.production.min.js +1 -1
  5. package/dist/tf-checkout-react.cjs.production.min.js.map +1 -1
  6. package/dist/tf-checkout-react.esm.js +41 -16
  7. package/dist/tf-checkout-react.esm.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/paymentContainer/OrderDetails.tsx +20 -0
  10. package/src/components/paymentContainer/index.tsx +12 -0
  11. package/src/components/ticketsContainer/TicketsSection.tsx +52 -10
  12. package/src/components/ticketsContainer/TimeSlotTicketRow.tsx +24 -5
  13. package/src/constants/index.ts +1 -1
  14. package/src/types/api/common.d.ts +3 -0
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.7.7",
2
+ "version": "1.7.8",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/components/paymentContainer/OrderDetails.tsx CHANGED
@@ -98,6 +98,11 @@ export const OrderDetails = ({
98
98
  currencyNormalizerCreator(
99
99
  createFixedFloatNormalizer(2)(parseFloat(item.cost)),
100
100
  currency,
101
+ )}
102
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
103
+ currencyNormalizerCreator(
104
+ createFixedFloatNormalizer(2)(parseFloat(item.price)),
105
+ currency,
101
106
  )}
102
107
  </span>
103
108
  <span className="add-on-each">{' each'}</span>
@@ -112,6 +117,11 @@ export const OrderDetails = ({
112
117
  )} with fees)`}
113
118
  </p>
114
119
  )}
120
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
121
+ <p className="fees">
122
+ {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
123
+ </p>
124
+ )}
115
125
  </div>)
116
126
  }
117
127
 
@@ -136,6 +146,11 @@ export const OrderDetails = ({
136
146
  createFixedFloatNormalizer(2)(parseFloat(item.cost)),
137
147
  currency,
138
148
  )}
149
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
150
+ currencyNormalizerCreator(
151
+ createFixedFloatNormalizer(2)(parseFloat(item.price)),
152
+ currency,
153
+ )}
139
154
  </span>
140
155
  <br/>
141
156
  {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
@@ -148,6 +163,11 @@ export const OrderDetails = ({
148
163
  )} with fees)`}
149
164
  </p>
150
165
  )}
166
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
167
+ <p className="fees">
168
+ {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
169
+ </p>
170
+ )}
151
171
  </div>
152
172
  </div>)
153
173
  }
package/src/components/paymentContainer/index.tsx CHANGED
@@ -531,6 +531,13 @@ export const PaymentContainer = ({
531
531
  ),
532
532
  currency
533
533
  )}
534
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
535
+ currencyNormalizerCreator(
536
+ createFixedFloatNormalizer(2)(
537
+ parseFloat(item.price)
538
+ ),
539
+ currency
540
+ )}
534
541
  </span>
535
542
  <span className="add-on-each">{' each'}</span>
536
543
  </div>
@@ -544,6 +551,11 @@ export const PaymentContainer = ({
544
551
  )} with fees)`}
545
552
  </p>
546
553
  )}
554
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
555
+ <p className="fees">
556
+ {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
557
+ </p>
558
+ )}
547
559
  </div>
548
560
  ))}
549
561
  </div>
package/src/components/ticketsContainer/TicketsSection.tsx CHANGED
@@ -71,6 +71,20 @@ export const TicketsSection = ({
71
71
  const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
72
72
  const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
73
73
  const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
74
+ const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
75
+ ? +(ticket.x_face_value || ticket.basePrice)
76
+ : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
77
+ const ticketFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketFinalPrice)}`
78
+ const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
79
+ ? +(ticket.x_face_value || ticket.basePrice)
80
+ : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
81
+ const ticketOldFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketOldFinalPrice)}`
82
+ const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
83
+ const ticketBreakdown = !ticket.feeIncluded
84
+ ? '(+ fees at checkout)'
85
+ : !ticket.isForward
86
+ ? null
87
+ : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
74
88
 
75
89
  const isSoldOut =
76
90
  ticket.sold_out ||
@@ -87,15 +101,20 @@ export const TicketsSection = ({
87
101
  }
88
102
 
89
103
  const ticketIsFree = +ticket.price === 0
90
- const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ?
91
- ticketOldPriceWithoutFees : ticketOldPriceWithFees
104
+ const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
105
+ ? ticketOldFinalPriceFormatted
106
+ : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
107
+ ? ticketOldPriceWithoutFees
108
+ : ticketOldPriceWithFees
92
109
  const ticketPriceElem = isSoldOut
93
110
  ? 'SOLD OUT'
94
111
  : ticketIsFree
95
112
  ? 'FREE'
96
- : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
97
- ? ticketPriceWithoutFees
98
- : ticketPriceWithFees
113
+ : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
114
+ ? ticketFinalPriceFormatted
115
+ : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
116
+ ? ticketPriceWithoutFees
117
+ : ticketPriceWithFees
99
118
  const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
100
119
 
101
120
  return (
@@ -158,6 +177,8 @@ export const TicketsSection = ({
158
177
  (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
159
178
  {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
160
179
  `(${ticketPriceWithFees} with fees)`}
180
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
181
+ ticketBreakdown}
161
182
  </p>
162
183
  )}
163
184
  </div>
@@ -190,6 +211,20 @@ export const TicketsSection = ({
190
211
  const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
191
212
  const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
192
213
  const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
214
+ const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
215
+ ? +(ticket.x_face_value || ticket.basePrice)
216
+ : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
217
+ const ticketFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketFinalPrice)}`
218
+ const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
219
+ ? +(ticket.x_face_value || ticket.basePrice)
220
+ : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
221
+ const ticketOldFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketOldFinalPrice)}`
222
+ const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
223
+ const ticketBreakdown = !ticket.feeIncluded
224
+ ? '(+ fees at checkout)'
225
+ : !ticket.isForward
226
+ ? null
227
+ : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
193
228
 
194
229
  const isSoldOut =
195
230
  ticket.sold_out ||
@@ -206,15 +241,20 @@ export const TicketsSection = ({
206
241
  }
207
242
 
208
243
  const ticketIsFree = +ticket.price === 0
209
- const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ?
210
- ticketOldPriceWithoutFees : ticketOldPriceWithFees
244
+ const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
245
+ ? ticketOldFinalPriceFormatted
246
+ : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
247
+ ? ticketOldPriceWithoutFees
248
+ : ticketOldPriceWithFees
211
249
  const ticketPriceElem = isSoldOut
212
250
  ? 'SOLD OUT'
213
251
  : ticketIsFree
214
252
  ? 'FREE'
215
- : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
216
- ? ticketPriceWithoutFees
217
- : ticketPriceWithFees
253
+ : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
254
+ ? ticketFinalPriceFormatted
255
+ : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
256
+ ? ticketPriceWithoutFees
257
+ : ticketPriceWithFees
218
258
  const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
219
259
 
220
260
  return (
@@ -272,6 +312,8 @@ export const TicketsSection = ({
272
312
  (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
273
313
  {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
274
314
  `(${ticketPriceWithFees} with fees)`}
315
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
316
+ ticketBreakdown}
275
317
  </p>
276
318
  )}
277
319
  {ticket.depositPercent && (
package/src/components/ticketsContainer/TimeSlotTicketRow.tsx CHANGED
@@ -63,6 +63,20 @@ export const TimeSlotTicketRow = ({
63
63
  const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
64
64
  const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
65
65
  const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
66
+ const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
67
+ ? +(ticket.x_face_value || ticket.basePrice)
68
+ : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
69
+ const ticketFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketFinalPrice)}`
70
+ const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
71
+ ? +(ticket.x_face_value || ticket.basePrice)
72
+ : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
73
+ const ticketOldFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketOldFinalPrice)}`
74
+ const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
75
+ const ticketBreakdown = !ticket.feeIncluded
76
+ ? '(+ fees at checkout)'
77
+ : !ticket.isForward
78
+ ? null
79
+ : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
66
80
 
67
81
  let ticketIsDiscounted = false
68
82
  if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
@@ -70,17 +84,20 @@ export const TimeSlotTicketRow = ({
70
84
  }
71
85
 
72
86
  const ticketIsFree = +ticket.price === 0
73
- const discountTicketPriceElem =
74
- CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
87
+ const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
88
+ ? ticketOldFinalPriceFormatted
89
+ : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
75
90
  ? ticketOldPriceWithoutFees
76
91
  : ticketOldPriceWithFees
77
92
  const ticketPriceElem = isSoldOut
78
93
  ? 'SOLD OUT'
79
94
  : ticketIsFree
80
95
  ? 'FREE'
81
- : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
82
- ? ticketPriceWithoutFees
83
- : ticketPriceWithFees
96
+ : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
97
+ ? ticketFinalPriceFormatted
98
+ : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
99
+ ? ticketPriceWithoutFees
100
+ : ticketPriceWithFees
84
101
 
85
102
  const handleTimeChange = (event: any) => {
86
103
  const selectedTimeKey = event.target.value
@@ -143,6 +160,8 @@ export const TimeSlotTicketRow = ({
143
160
  (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
144
161
  {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
145
162
  `(${ticketPriceWithFees} with fees)`}
163
+ {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
164
+ ticketBreakdown}
146
165
  </p>
147
166
  )}
148
167
  </div>
package/src/constants/index.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
2
- export const FEES_STYLES = { TRADITIONAL: 'TRADITIONAL', DISPLAY_BOTH: 'DISPLAY_BOTH' }
2
+ export const FEES_STYLES = { TRADITIONAL: 'TRADITIONAL', DISPLAY_BOTH: 'DISPLAY_BOTH', FINAL_WITH_BREAKDOWN: 'FINAL_WITH_BREAKDOWN' }
3
3
  export const DEFAULT_FEES_STYLE = FEES_STYLES.TRADITIONAL
package/src/types/api/common.d.ts CHANGED
@@ -42,6 +42,7 @@ interface ITicketData {
42
42
  displayName: string;
43
43
  displayTicket: boolean;
44
44
  feeIncluded: boolean;
45
+ feeMode: string;
45
46
  feeText: string;
46
47
  id: string;
47
48
  maxQuantity: number;
@@ -55,6 +56,8 @@ interface ITicketData {
55
56
  salesEnded: boolean;
56
57
  salesStarted: boolean;
57
58
  soldOut: number;
59
+ x_face_value: number;
60
+ isForward: boolean;
58
61
  soldOutMessage: number | string;
59
62
  sortOrder: number;
60
63
  tags: Array<string>;