@ticketboothapp/booking 0.1.18 → 0.1.19
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/package.json
CHANGED
|
@@ -96,8 +96,19 @@ export function InfoTooltip({ text }: InfoTooltipProps) {
|
|
|
96
96
|
typeof document !== 'undefined' &&
|
|
97
97
|
createPortal(
|
|
98
98
|
<span
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
style={{
|
|
100
|
+
...tooltipStyle,
|
|
101
|
+
whiteSpace: 'normal',
|
|
102
|
+
fontSize: '0.75rem',
|
|
103
|
+
lineHeight: 1.3,
|
|
104
|
+
backgroundColor: '#1f2937',
|
|
105
|
+
color: '#ffffff',
|
|
106
|
+
padding: '0.5rem 0.75rem',
|
|
107
|
+
borderRadius: '0.5rem',
|
|
108
|
+
boxShadow: '0 10px 20px rgba(0,0,0,0.25)',
|
|
109
|
+
pointerEvents: 'none',
|
|
110
|
+
border: '1px solid rgba(255,255,255,0.08)',
|
|
111
|
+
}}
|
|
101
112
|
>
|
|
102
113
|
{text}
|
|
103
114
|
</span>,
|
|
@@ -1167,7 +1167,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
|
|
|
1167
1167
|
<input type="radio" name="pickup-location" checked={selectedLocationId === location.id} onChange={() => handleLocationSelect(location.id, location.name)} className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0" />
|
|
1168
1168
|
<div className="flex-1 min-w-0">
|
|
1169
1169
|
<div className="flex items-center gap-1.5">
|
|
1170
|
-
|
|
1170
|
+
<p className="font-semibold text-stone-900 text-sm">{location.name}</p>
|
|
1171
1171
|
{isPartnerHighlighted && (
|
|
1172
1172
|
<span
|
|
1173
1173
|
className="inline-flex items-center justify-center rounded-full w-4 h-4 bg-emerald-100 text-emerald-700"
|
|
@@ -93,11 +93,18 @@ export function PriceBreakdown({
|
|
|
93
93
|
>
|
|
94
94
|
{hasDiscount ? (
|
|
95
95
|
<>
|
|
96
|
-
<span
|
|
96
|
+
<span
|
|
97
|
+
style={{
|
|
98
|
+
textDecorationLine: 'line-through',
|
|
99
|
+
textDecorationThickness: '1.5px',
|
|
100
|
+
textDecorationColor: '#a8a29e',
|
|
101
|
+
color: '#a8a29e',
|
|
102
|
+
marginRight: '0.35rem',
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
97
105
|
{formatCurrencyAmount(baseTotal, currency, locale)}
|
|
98
106
|
</span>
|
|
99
|
-
{'
|
|
100
|
-
<span className="text-emerald-600">
|
|
107
|
+
<span style={{ color: '#059669', fontWeight: 600 }}>
|
|
101
108
|
{formatCurrencyAmount(itemTotal, currency, locale)}
|
|
102
109
|
</span>
|
|
103
110
|
</>
|
|
@@ -106,17 +113,33 @@ export function PriceBreakdown({
|
|
|
106
113
|
)}
|
|
107
114
|
</span>
|
|
108
115
|
{canShowBreakdown && showTooltip && (
|
|
109
|
-
<div
|
|
110
|
-
|
|
116
|
+
<div
|
|
117
|
+
style={{
|
|
118
|
+
position: 'absolute',
|
|
119
|
+
right: 0,
|
|
120
|
+
top: '100%',
|
|
121
|
+
marginTop: '0.5rem',
|
|
122
|
+
width: '18rem',
|
|
123
|
+
padding: '0.75rem',
|
|
124
|
+
backgroundColor: '#1c1917',
|
|
125
|
+
color: '#ffffff',
|
|
126
|
+
fontSize: '0.75rem',
|
|
127
|
+
borderRadius: '0.5rem',
|
|
128
|
+
boxShadow: '0 12px 24px rgba(0,0,0,0.24)',
|
|
129
|
+
zIndex: 100000,
|
|
130
|
+
border: '1px solid rgba(255,255,255,0.08)',
|
|
131
|
+
}}
|
|
132
|
+
>
|
|
133
|
+
<div style={{ fontWeight: 600, marginBottom: '0.5rem', paddingBottom: '0.5rem', borderBottom: '1px solid #44403c' }}>
|
|
111
134
|
Price Breakdown ({category})
|
|
112
135
|
</div>
|
|
113
|
-
<div
|
|
136
|
+
<div style={{ display: 'grid', rowGap: '0.375rem' }}>
|
|
114
137
|
{breakdown.lineItems.map((line) => (
|
|
115
138
|
<div key={line.id ?? line.name} className="flex justify-between">
|
|
116
|
-
<span
|
|
139
|
+
<span style={{ color: '#a8a29e' }}>
|
|
117
140
|
{line.name}{line.type === 'base' ? ` (${currency})` : ''}{formatAdjustmentDetail(line.adjustmentType, line.adjustmentValue, line.amountInDisplayCurrency < 0)}
|
|
118
141
|
</span>
|
|
119
|
-
<span
|
|
142
|
+
<span style={line.type === 'adjustment' && line.amountInDisplayCurrency < 0 ? { color: '#fca5a5' } : undefined}>
|
|
120
143
|
{line.type === 'adjustment' && line.amountInDisplayCurrency >= 0 ? '+' : ''}
|
|
121
144
|
{formatCurrencyAmount(line.amountInDisplayCurrency, currency, locale)}
|
|
122
145
|
</span>
|
|
@@ -127,21 +150,21 @@ export function PriceBreakdown({
|
|
|
127
150
|
<>
|
|
128
151
|
{breakdown.feeLines.map((fee) => (
|
|
129
152
|
<div key={fee.name} className="flex justify-between">
|
|
130
|
-
<span
|
|
153
|
+
<span style={{ color: '#a8a29e' }} title={fee.description}>
|
|
131
154
|
{fee.name}:
|
|
132
155
|
</span>
|
|
133
156
|
<span>{formatCurrencyAmount(fee.feeAmount, currency, locale)}</span>
|
|
134
157
|
</div>
|
|
135
158
|
))}
|
|
136
159
|
<div className="flex justify-between">
|
|
137
|
-
<span
|
|
160
|
+
<span style={{ color: '#a8a29e' }}>
|
|
138
161
|
{`${t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees'} (included):`}
|
|
139
162
|
</span>
|
|
140
163
|
<span>{formatCurrencyAmount(breakdown.taxAmount, currency, locale)}</span>
|
|
141
164
|
</div>
|
|
142
165
|
</>
|
|
143
166
|
)}
|
|
144
|
-
<div
|
|
167
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '0.5rem', marginTop: '0.5rem', borderTop: '1px solid #44403c', fontWeight: 600 }}>
|
|
145
168
|
<span>Final price ({currency}):</span>
|
|
146
169
|
<span>{formatCurrencyAmount(breakdown.finalPrice, currency, locale)}</span>
|
|
147
170
|
</div>
|