@lookiero/checkout 12.19.0 → 12.21.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/src/ExpoRoot.js +4 -4
- package/dist/src/infrastructure/ui/views/item/Item.js +4 -3
- package/dist/src/infrastructure/ui/views/item/Item.style.d.ts +13 -15
- package/dist/src/infrastructure/ui/views/item/Item.style.js +6 -7
- package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.d.ts +1 -0
- package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +13 -7
- package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.d.ts +0 -1
- package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.js +2 -6
- package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.d.ts +1 -0
- package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js +5 -3
- package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.d.ts +1 -0
- package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js +6 -4
- package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts +0 -1
- package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js +2 -6
- package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.d.ts +1 -0
- package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.js +2 -2
- package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.d.ts +1 -2
- package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.js +4 -5
- package/dist/src/version.d.ts +1 -1
- package/dist/src/version.js +1 -1
- package/package.json +5 -5
- package/src/ExpoRoot.tsx +4 -4
- package/src/infrastructure/ui/views/item/Item.style.ts +7 -7
- package/src/infrastructure/ui/views/item/Item.tsx +6 -2
- package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.ts +2 -8
- package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx +37 -18
- package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap +194 -188
- package/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.tsx +7 -1
- package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.ts +2 -7
- package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx +8 -2
- package/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.ts +4 -5
- package/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.tsx +4 -1
- package/src/infrastructure/ui/views/item/views/productVariant/__snapshots__/ProductVariant.test.tsx.snap +585 -567
package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { FC, useCallback, useMemo, useState } from "react";
|
|
2
|
+
import { LayoutChangeEvent, View } from "react-native";
|
|
2
3
|
import {
|
|
3
4
|
AspectRatioView,
|
|
4
5
|
Bullets,
|
|
@@ -15,8 +16,10 @@ import { style as productVariantSliderStyle } from "./ProductVariantSlider.style
|
|
|
15
16
|
interface ProductVariantSlider {
|
|
16
17
|
readonly producVariantMedia: MediaProjection[];
|
|
17
18
|
readonly onChanged?: (active: number) => void;
|
|
19
|
+
readonly availableHeight: number;
|
|
18
20
|
}
|
|
19
|
-
|
|
21
|
+
|
|
22
|
+
const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, onChanged, availableHeight }) => {
|
|
20
23
|
const cdnImageUrl = useMediaImage();
|
|
21
24
|
const screenSize = useScreenSize();
|
|
22
25
|
const isDesktopScreen = screenSize !== "S";
|
|
@@ -32,36 +35,50 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
|
|
|
32
35
|
[onChanged],
|
|
33
36
|
);
|
|
34
37
|
|
|
38
|
+
const [width, setWidth] = useState<number>(0);
|
|
39
|
+
const handleOnLayout = useCallback(
|
|
40
|
+
({
|
|
41
|
+
nativeEvent: {
|
|
42
|
+
layout: { width },
|
|
43
|
+
},
|
|
44
|
+
}: LayoutChangeEvent) => setWidth(width),
|
|
45
|
+
[],
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
const aspectRatio = Math.min(4 / 3, availableHeight / width);
|
|
49
|
+
|
|
35
50
|
const renderItem: RenderItemFunction<MediaProjection> = useCallback(
|
|
36
51
|
({ item, index }) => {
|
|
37
52
|
const isCollageImage = item.perspective === MediaPerspective.COLLAGE;
|
|
38
53
|
const isLastItem = index === producVariantMedia.length - 1;
|
|
39
54
|
|
|
40
55
|
return (
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
<View onLayout={handleOnLayout}>
|
|
57
|
+
<AspectRatioView
|
|
58
|
+
aspectRatio={aspectRatio}
|
|
59
|
+
multiplier={isCollageImage && isLastItem ? 2 : 1}
|
|
60
|
+
style={{
|
|
61
|
+
alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
<LazyImage
|
|
65
|
+
hiResSrc={cdnImageUrl({ url: item.url, width: 600 })}
|
|
66
|
+
resizeMode={isCollageImage ? "stretch" : "contain"}
|
|
67
|
+
src={cdnImageUrl({ url: item.url, width: 600, dpi: 1 })}
|
|
68
|
+
style={{ view: [style.image, isDesktopScreen ? style.largeImage : null] }}
|
|
69
|
+
testID="product-variant-image"
|
|
70
|
+
/>
|
|
71
|
+
</AspectRatioView>
|
|
72
|
+
</View>
|
|
57
73
|
);
|
|
58
74
|
},
|
|
59
75
|
[
|
|
76
|
+
aspectRatio,
|
|
60
77
|
cdnImageUrl,
|
|
78
|
+
handleOnLayout,
|
|
61
79
|
isDesktopScreen,
|
|
62
80
|
producVariantMedia.length,
|
|
63
81
|
style.image,
|
|
64
|
-
style.imageContainerMarginTop,
|
|
65
82
|
style.largeImage,
|
|
66
83
|
],
|
|
67
84
|
);
|
|
@@ -71,6 +88,8 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
|
|
|
71
88
|
[],
|
|
72
89
|
);
|
|
73
90
|
|
|
91
|
+
console.log({ producVariantMedia });
|
|
92
|
+
|
|
74
93
|
return (
|
|
75
94
|
<Carousel
|
|
76
95
|
activeIndex={activeIndex}
|
|
@@ -97,139 +97,142 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
|
|
|
97
97
|
onLayout={[Function]}
|
|
98
98
|
>
|
|
99
99
|
<View
|
|
100
|
-
|
|
101
|
-
[
|
|
102
|
-
{
|
|
103
|
-
"height": undefined,
|
|
104
|
-
"width": undefined,
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"alignSelf": undefined,
|
|
108
|
-
"marginTop": 0,
|
|
109
|
-
},
|
|
110
|
-
]
|
|
111
|
-
}
|
|
100
|
+
onLayout={[Function]}
|
|
112
101
|
>
|
|
113
102
|
<View
|
|
114
103
|
style={
|
|
115
104
|
[
|
|
116
105
|
{
|
|
117
|
-
"
|
|
106
|
+
"height": undefined,
|
|
107
|
+
"width": undefined,
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"alignSelf": undefined,
|
|
118
111
|
},
|
|
119
|
-
[
|
|
120
|
-
{
|
|
121
|
-
"flex": 1,
|
|
122
|
-
},
|
|
123
|
-
null,
|
|
124
|
-
],
|
|
125
112
|
]
|
|
126
113
|
}
|
|
127
|
-
testID="product-variant-image"
|
|
128
114
|
>
|
|
129
115
|
<View
|
|
130
116
|
style={
|
|
131
117
|
[
|
|
132
118
|
{
|
|
133
|
-
"
|
|
119
|
+
"position": "relative",
|
|
134
120
|
},
|
|
121
|
+
[
|
|
122
|
+
{
|
|
123
|
+
"flex": 1,
|
|
124
|
+
},
|
|
125
|
+
null,
|
|
126
|
+
],
|
|
135
127
|
]
|
|
136
128
|
}
|
|
137
|
-
testID="
|
|
129
|
+
testID="product-variant-image"
|
|
138
130
|
>
|
|
139
131
|
<View
|
|
140
|
-
onLayout={[Function]}
|
|
141
132
|
style={
|
|
142
133
|
[
|
|
143
134
|
{
|
|
144
|
-
"backgroundColor": "#F8F7F7",
|
|
145
135
|
"flex": 1,
|
|
146
|
-
"height": undefined,
|
|
147
|
-
"overflow": "hidden",
|
|
148
|
-
"width": undefined,
|
|
149
136
|
},
|
|
150
137
|
]
|
|
151
138
|
}
|
|
139
|
+
testID="lazy-image-skeleton"
|
|
152
140
|
>
|
|
153
141
|
<View
|
|
154
|
-
|
|
155
|
-
duration={1200}
|
|
142
|
+
onLayout={[Function]}
|
|
156
143
|
style={
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
144
|
+
[
|
|
145
|
+
{
|
|
146
|
+
"backgroundColor": "#F8F7F7",
|
|
147
|
+
"flex": 1,
|
|
148
|
+
"height": undefined,
|
|
149
|
+
"overflow": "hidden",
|
|
150
|
+
"width": undefined,
|
|
151
|
+
},
|
|
152
|
+
]
|
|
167
153
|
}
|
|
168
154
|
>
|
|
169
|
-
<
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
16777215,
|
|
173
|
-
4292532440,
|
|
174
|
-
4292532440,
|
|
175
|
-
16777215,
|
|
176
|
-
]
|
|
177
|
-
}
|
|
178
|
-
endPoint={
|
|
179
|
-
[
|
|
180
|
-
1,
|
|
181
|
-
0,
|
|
182
|
-
]
|
|
183
|
-
}
|
|
184
|
-
locations={
|
|
185
|
-
[
|
|
186
|
-
0,
|
|
187
|
-
0.25,
|
|
188
|
-
0.75,
|
|
189
|
-
1,
|
|
190
|
-
]
|
|
191
|
-
}
|
|
192
|
-
startPoint={
|
|
193
|
-
[
|
|
194
|
-
0,
|
|
195
|
-
0,
|
|
196
|
-
]
|
|
197
|
-
}
|
|
155
|
+
<View
|
|
156
|
+
collapsable={false}
|
|
157
|
+
duration={1200}
|
|
198
158
|
style={
|
|
199
159
|
{
|
|
200
160
|
"height": "100%",
|
|
161
|
+
"left": 0,
|
|
162
|
+
"transform": [
|
|
163
|
+
{
|
|
164
|
+
"translateX": -375,
|
|
165
|
+
},
|
|
166
|
+
],
|
|
201
167
|
"width": "100%",
|
|
202
168
|
}
|
|
203
169
|
}
|
|
204
|
-
|
|
170
|
+
>
|
|
171
|
+
<ViewManagerAdapter_ExpoLinearGradient
|
|
172
|
+
colors={
|
|
173
|
+
[
|
|
174
|
+
16777215,
|
|
175
|
+
4292532440,
|
|
176
|
+
4292532440,
|
|
177
|
+
16777215,
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
endPoint={
|
|
181
|
+
[
|
|
182
|
+
1,
|
|
183
|
+
0,
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
locations={
|
|
187
|
+
[
|
|
188
|
+
0,
|
|
189
|
+
0.25,
|
|
190
|
+
0.75,
|
|
191
|
+
1,
|
|
192
|
+
]
|
|
193
|
+
}
|
|
194
|
+
startPoint={
|
|
195
|
+
[
|
|
196
|
+
0,
|
|
197
|
+
0,
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
style={
|
|
201
|
+
{
|
|
202
|
+
"height": "100%",
|
|
203
|
+
"width": "100%",
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
/>
|
|
207
|
+
</View>
|
|
205
208
|
</View>
|
|
206
209
|
</View>
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
source={
|
|
212
|
-
{
|
|
213
|
-
"uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
style={
|
|
217
|
-
[
|
|
210
|
+
<Image
|
|
211
|
+
onLoad={[Function]}
|
|
212
|
+
resizeMode="contain"
|
|
213
|
+
source={
|
|
218
214
|
{
|
|
219
|
-
"
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
215
|
+
"uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=600&f=auto",
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
style={
|
|
219
|
+
[
|
|
220
|
+
{
|
|
221
|
+
"flex": 1,
|
|
222
|
+
"height": "100%",
|
|
223
|
+
"position": "absolute",
|
|
224
|
+
"width": "100%",
|
|
225
|
+
"zIndex": 10,
|
|
226
|
+
},
|
|
227
|
+
undefined,
|
|
228
|
+
{
|
|
229
|
+
"opacity": 0,
|
|
230
|
+
},
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
testID="lazy-image-main-image"
|
|
234
|
+
/>
|
|
235
|
+
</View>
|
|
233
236
|
</View>
|
|
234
237
|
</View>
|
|
235
238
|
</View>
|
|
@@ -251,139 +254,142 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
|
|
|
251
254
|
onLayout={[Function]}
|
|
252
255
|
>
|
|
253
256
|
<View
|
|
254
|
-
|
|
255
|
-
[
|
|
256
|
-
{
|
|
257
|
-
"height": undefined,
|
|
258
|
-
"width": undefined,
|
|
259
|
-
},
|
|
260
|
-
{
|
|
261
|
-
"alignSelf": undefined,
|
|
262
|
-
"marginTop": 0,
|
|
263
|
-
},
|
|
264
|
-
]
|
|
265
|
-
}
|
|
257
|
+
onLayout={[Function]}
|
|
266
258
|
>
|
|
267
259
|
<View
|
|
268
260
|
style={
|
|
269
261
|
[
|
|
270
262
|
{
|
|
271
|
-
"
|
|
263
|
+
"height": undefined,
|
|
264
|
+
"width": undefined,
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"alignSelf": undefined,
|
|
272
268
|
},
|
|
273
|
-
[
|
|
274
|
-
{
|
|
275
|
-
"flex": 1,
|
|
276
|
-
},
|
|
277
|
-
null,
|
|
278
|
-
],
|
|
279
269
|
]
|
|
280
270
|
}
|
|
281
|
-
testID="product-variant-image"
|
|
282
271
|
>
|
|
283
272
|
<View
|
|
284
273
|
style={
|
|
285
274
|
[
|
|
286
275
|
{
|
|
287
|
-
"
|
|
276
|
+
"position": "relative",
|
|
288
277
|
},
|
|
278
|
+
[
|
|
279
|
+
{
|
|
280
|
+
"flex": 1,
|
|
281
|
+
},
|
|
282
|
+
null,
|
|
283
|
+
],
|
|
289
284
|
]
|
|
290
285
|
}
|
|
291
|
-
testID="
|
|
286
|
+
testID="product-variant-image"
|
|
292
287
|
>
|
|
293
288
|
<View
|
|
294
|
-
onLayout={[Function]}
|
|
295
289
|
style={
|
|
296
290
|
[
|
|
297
291
|
{
|
|
298
|
-
"backgroundColor": "#F8F7F7",
|
|
299
292
|
"flex": 1,
|
|
300
|
-
"height": undefined,
|
|
301
|
-
"overflow": "hidden",
|
|
302
|
-
"width": undefined,
|
|
303
293
|
},
|
|
304
294
|
]
|
|
305
295
|
}
|
|
296
|
+
testID="lazy-image-skeleton"
|
|
306
297
|
>
|
|
307
298
|
<View
|
|
308
|
-
|
|
309
|
-
duration={1200}
|
|
299
|
+
onLayout={[Function]}
|
|
310
300
|
style={
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
}
|
|
301
|
+
[
|
|
302
|
+
{
|
|
303
|
+
"backgroundColor": "#F8F7F7",
|
|
304
|
+
"flex": 1,
|
|
305
|
+
"height": undefined,
|
|
306
|
+
"overflow": "hidden",
|
|
307
|
+
"width": undefined,
|
|
308
|
+
},
|
|
309
|
+
]
|
|
321
310
|
}
|
|
322
311
|
>
|
|
323
|
-
<
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
16777215,
|
|
327
|
-
4292532440,
|
|
328
|
-
4292532440,
|
|
329
|
-
16777215,
|
|
330
|
-
]
|
|
331
|
-
}
|
|
332
|
-
endPoint={
|
|
333
|
-
[
|
|
334
|
-
1,
|
|
335
|
-
0,
|
|
336
|
-
]
|
|
337
|
-
}
|
|
338
|
-
locations={
|
|
339
|
-
[
|
|
340
|
-
0,
|
|
341
|
-
0.25,
|
|
342
|
-
0.75,
|
|
343
|
-
1,
|
|
344
|
-
]
|
|
345
|
-
}
|
|
346
|
-
startPoint={
|
|
347
|
-
[
|
|
348
|
-
0,
|
|
349
|
-
0,
|
|
350
|
-
]
|
|
351
|
-
}
|
|
312
|
+
<View
|
|
313
|
+
collapsable={false}
|
|
314
|
+
duration={1200}
|
|
352
315
|
style={
|
|
353
316
|
{
|
|
354
317
|
"height": "100%",
|
|
318
|
+
"left": 0,
|
|
319
|
+
"transform": [
|
|
320
|
+
{
|
|
321
|
+
"translateX": -375,
|
|
322
|
+
},
|
|
323
|
+
],
|
|
355
324
|
"width": "100%",
|
|
356
325
|
}
|
|
357
326
|
}
|
|
358
|
-
|
|
327
|
+
>
|
|
328
|
+
<ViewManagerAdapter_ExpoLinearGradient
|
|
329
|
+
colors={
|
|
330
|
+
[
|
|
331
|
+
16777215,
|
|
332
|
+
4292532440,
|
|
333
|
+
4292532440,
|
|
334
|
+
16777215,
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
endPoint={
|
|
338
|
+
[
|
|
339
|
+
1,
|
|
340
|
+
0,
|
|
341
|
+
]
|
|
342
|
+
}
|
|
343
|
+
locations={
|
|
344
|
+
[
|
|
345
|
+
0,
|
|
346
|
+
0.25,
|
|
347
|
+
0.75,
|
|
348
|
+
1,
|
|
349
|
+
]
|
|
350
|
+
}
|
|
351
|
+
startPoint={
|
|
352
|
+
[
|
|
353
|
+
0,
|
|
354
|
+
0,
|
|
355
|
+
]
|
|
356
|
+
}
|
|
357
|
+
style={
|
|
358
|
+
{
|
|
359
|
+
"height": "100%",
|
|
360
|
+
"width": "100%",
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
/>
|
|
364
|
+
</View>
|
|
359
365
|
</View>
|
|
360
366
|
</View>
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
source={
|
|
366
|
-
{
|
|
367
|
-
"uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
style={
|
|
371
|
-
[
|
|
367
|
+
<Image
|
|
368
|
+
onLoad={[Function]}
|
|
369
|
+
resizeMode="contain"
|
|
370
|
+
source={
|
|
372
371
|
{
|
|
373
|
-
"
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
372
|
+
"uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg?w=600&f=auto",
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
style={
|
|
376
|
+
[
|
|
377
|
+
{
|
|
378
|
+
"flex": 1,
|
|
379
|
+
"height": "100%",
|
|
380
|
+
"position": "absolute",
|
|
381
|
+
"width": "100%",
|
|
382
|
+
"zIndex": 10,
|
|
383
|
+
},
|
|
384
|
+
undefined,
|
|
385
|
+
{
|
|
386
|
+
"opacity": 0,
|
|
387
|
+
},
|
|
388
|
+
]
|
|
389
|
+
}
|
|
390
|
+
testID="lazy-image-main-image"
|
|
391
|
+
/>
|
|
392
|
+
</View>
|
|
387
393
|
</View>
|
|
388
394
|
</View>
|
|
389
395
|
</View>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { FC, useCallback, useMemo } from "react";
|
|
2
|
-
import { View } from "react-native";
|
|
2
|
+
import { useWindowDimensions, View } from "react-native";
|
|
3
3
|
import { Spinner } from "@lookiero/aurora";
|
|
4
4
|
import { CommandStatus } from "@lookiero/messaging-react";
|
|
5
5
|
import { useLogger } from "@lookiero/sty-psp-logging";
|
|
@@ -31,6 +31,7 @@ interface ItemWithCustomerDecissionProps {
|
|
|
31
31
|
readonly returnQuestions: ReturnQuestionProjection[];
|
|
32
32
|
readonly currentProductVariant: ProductVariantProjection;
|
|
33
33
|
readonly onEditFeedback: () => void;
|
|
34
|
+
readonly headerHeight: number;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
|
|
@@ -39,8 +40,10 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
|
|
|
39
40
|
returnQuestions,
|
|
40
41
|
currentProductVariant,
|
|
41
42
|
onEditFeedback,
|
|
43
|
+
headerHeight,
|
|
42
44
|
}) => {
|
|
43
45
|
const style = useMemo(() => itemWithCustomerDecissionStyle(), []);
|
|
46
|
+
const { height } = useWindowDimensions();
|
|
44
47
|
|
|
45
48
|
const screenSize = useScreenSize();
|
|
46
49
|
const isMobile = screenSize === "S";
|
|
@@ -75,6 +78,8 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
|
|
|
75
78
|
return <Spinner testID="spinner" />;
|
|
76
79
|
}
|
|
77
80
|
|
|
81
|
+
const sliderAvailableHeight = height - headerHeight;
|
|
82
|
+
|
|
78
83
|
return (
|
|
79
84
|
<Body style={{ row: style.container }}>
|
|
80
85
|
<ProductVariant
|
|
@@ -83,6 +88,7 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
|
|
|
83
88
|
country={country}
|
|
84
89
|
currentProductVariant={currentProductVariant}
|
|
85
90
|
segment={segment}
|
|
91
|
+
sliderAvailableHeight={sliderAvailableHeight}
|
|
86
92
|
tradename={tradename}
|
|
87
93
|
customerDecissionBanner={
|
|
88
94
|
<CustomerDecissionBanner
|
|
@@ -2,19 +2,14 @@ import { StyleSheet } from "react-native";
|
|
|
2
2
|
import { theme } from "@lookiero/sty-psp-ui";
|
|
3
3
|
|
|
4
4
|
const style = () => {
|
|
5
|
-
const {
|
|
5
|
+
const { space10 } = theme();
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
return StyleSheet.create({
|
|
8
8
|
container: {
|
|
9
9
|
paddingBottom: space10,
|
|
10
10
|
paddingHorizontal: 0,
|
|
11
11
|
},
|
|
12
12
|
});
|
|
13
|
-
|
|
14
|
-
return {
|
|
15
|
-
...styles,
|
|
16
|
-
productVariantPaddingBottom: space6,
|
|
17
|
-
};
|
|
18
13
|
};
|
|
19
14
|
|
|
20
15
|
export { style };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { FC, useCallback, useMemo, useState } from "react";
|
|
2
|
-
import { LayoutRectangle, Platform, ScrollView } from "react-native";
|
|
2
|
+
import { LayoutRectangle, Platform, ScrollView, useWindowDimensions } from "react-native";
|
|
3
3
|
import { Spinner } from "@lookiero/aurora";
|
|
4
4
|
import { CommandStatus } from "@lookiero/messaging-react";
|
|
5
5
|
import { useLogger } from "@lookiero/sty-psp-logging";
|
|
@@ -32,6 +32,7 @@ interface ItemWithoutCustomerDecissionProps {
|
|
|
32
32
|
readonly bookedProductsVariants: BookedProductsVariantsProjection;
|
|
33
33
|
readonly currentProductVariant: ProductVariantProjection;
|
|
34
34
|
readonly onReturn: () => void;
|
|
35
|
+
readonly headerHeight: number;
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
|
|
@@ -40,6 +41,7 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
|
|
|
40
41
|
bookedProductsVariants,
|
|
41
42
|
currentProductVariant,
|
|
42
43
|
onReturn,
|
|
44
|
+
headerHeight,
|
|
43
45
|
}) => {
|
|
44
46
|
const logger = useLogger();
|
|
45
47
|
const {
|
|
@@ -48,6 +50,7 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
|
|
|
48
50
|
} = useStaticInfo();
|
|
49
51
|
|
|
50
52
|
const style = useMemo(() => itemWithoutCustomerDecissionStyle(), []);
|
|
53
|
+
const { height } = useWindowDimensions();
|
|
51
54
|
|
|
52
55
|
/* KeepCheckoutItem */
|
|
53
56
|
const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
|
|
@@ -102,6 +105,8 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
|
|
|
102
105
|
return <Spinner testID="spinner" />;
|
|
103
106
|
}
|
|
104
107
|
|
|
108
|
+
const sliderAvailableHeight = height - headerHeight - stickyHeight;
|
|
109
|
+
|
|
105
110
|
return (
|
|
106
111
|
<>
|
|
107
112
|
<SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
|
|
@@ -114,9 +119,10 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
|
|
|
114
119
|
country={country}
|
|
115
120
|
currentProductVariant={currentProductVariant}
|
|
116
121
|
segment={segment}
|
|
122
|
+
sliderAvailableHeight={sliderAvailableHeight}
|
|
117
123
|
tradename={tradename}
|
|
118
124
|
style={{
|
|
119
|
-
content: { paddingBottom: Platform.OS === "web" ?
|
|
125
|
+
content: { paddingBottom: Platform.OS === "web" ? 0 : stickyHeight },
|
|
120
126
|
}}
|
|
121
127
|
/>
|
|
122
128
|
</Body>
|