Skip to content

Commit 189363c

Browse files
daveearleydaveearley
committed
Fix mobile checkout zoom and always show quantity +/- controls
1 parent e4a80e5 commit 189363c

7 files changed

Lines changed: 53 additions & 58 deletions

File tree

‎e2e/pages/checkout.page.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,6 @@ export interface BuyerDetails {
1313
export async function setWidgetQuantity(scope: Locator | FrameLocator | CheckoutSurface, quantity: number): Promise<void> {
1414
const selector = scope.locator('.hi-product-quantity-selector').first();
1515
const input = selector.locator('input');
16-
if (!(await input.isVisible())) {
17-
if (quantity === 0) {
18-
return;
19-
}
20-
await selector.getByRole('button', { name: 'Increase quantity' }).click();
21-
}
2216
await input.fill(String(quantity));
2317
if (quantity !== 0) {
2418
await input.blur();

‎e2e/tests/checkout/addon-checkout.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ test.describe('add-on checkout', () => {
4444

4545
await checkout.setQuantityForProduct('Festival Ticket', 0);
4646
await expect(page.getByText('Add Festival Ticket first')).toBeVisible();
47-
await expect(page.locator('.hi-product-addon').filter({ hasText: 'Parking Pass' }).locator('input')).toBeHidden();
47+
await expect(page.locator('.hi-product-addon').filter({ hasText: 'Parking Pass' }).locator('input')).toHaveValue('0');
4848

4949
await checkout.setQuantityForProduct('Festival Ticket', 1);
5050
await checkout.setAddonQuantity('Parking Pass', 1);

‎frontend/public/widget.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,10 @@
182182
iframe.src = src;
183183

184184
const applySizing = () => {
185-
const vw = window.innerWidth;
186-
const vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
185+
const vv = window.visualViewport;
186+
const hasViewport = !!(vv && vv.width && vv.height);
187+
const vw = hasViewport ? vv.width * vv.scale : window.innerWidth;
188+
const vh = hasViewport ? vv.height * vv.scale : window.innerHeight;
187189

188190
if (vw <= MOBILE_BREAKPOINT) {
189191
bs.alignItems = 'stretch';

‎frontend/src/components/common/NumberSelector/NumberSelector.module.scss‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@
1010
padding: 3px;
1111
background: var(--hi-card-bg, transparent);
1212
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
13-
14-
&[data-empty] {
15-
border-color: transparent;
16-
background: transparent;
17-
padding: 0;
18-
}
1913
}
2014

2115
.control {
@@ -76,19 +70,23 @@
7670
font-size: 14px !important;
7771
font-variant-numeric: tabular-nums;
7872
color: var(--hi-text, inherit) !important;
73+
74+
@media (hover: none) and (pointer: coarse) {
75+
font-size: 16px !important;
76+
}
7977
}
8078

8179
.compact {
8280
min-height: 33px;
8381
padding: 2px;
8482

85-
&[data-empty] {
86-
padding: 0;
87-
}
88-
8983
.input {
9084
min-width: 28px;
9185
width: 28px;
9286
font-size: 13px !important;
87+
88+
@media (hover: none) and (pointer: coarse) {
89+
font-size: 16px !important;
90+
}
9391
}
9492
}

‎frontend/src/components/common/NumberSelector/index.tsx‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -90,45 +90,36 @@ export const NumberSelector = ({formInstance, fieldName, min, max, sharedValues,
9090
increment();
9191
};
9292

93-
const isEmpty = value === 0;
94-
const buttonSize = selectorSize === 'compact'
95-
? (isEmpty ? 30 : 26)
96-
: (isEmpty ? 38 : 30);
97-
const iconSize = selectorSize === 'compact'
98-
? (isEmpty ? 14 : 13)
99-
: (isEmpty ? 16 : 15);
93+
const buttonSize = selectorSize === 'compact' ? 26 : 30;
94+
const iconSize = selectorSize === 'compact' ? 13 : 15;
10095

10196
return (
102-
<div className={classNames(classes.wrapper, 'button-input', selectorSize === 'compact' && classes.compact)}
103-
data-empty={value === 0 || undefined}>
104-
{value > 0 && (
105-
<>
106-
<ActionIcon
107-
size={buttonSize}
108-
radius={999}
109-
variant={'transparent'}
110-
onClick={decrement}
111-
aria-label={t`Decrease quantity`}
112-
onMouseDown={(event) => event.preventDefault()}
113-
className={classNames(classes.control, classes.decrement)}
114-
>
115-
<IconMinus size={iconSize} stroke={2}/>
116-
</ActionIcon>
117-
118-
<NumberInput
119-
mb={0}
120-
variant="unstyled"
121-
min={minValue}
122-
max={maxValue}
123-
handlersRef={handlers}
124-
value={value}
125-
hideControls
126-
onChange={(newValue) => changeValue(Number(newValue) || 0)}
127-
aria-label={t`Quantity`}
128-
classNames={{input: classes.input}}
129-
/>
130-
</>
131-
)}
97+
<div className={classNames(classes.wrapper, 'button-input', selectorSize === 'compact' && classes.compact)}>
98+
<ActionIcon
99+
size={buttonSize}
100+
radius={999}
101+
variant={'transparent'}
102+
onClick={decrement}
103+
disabled={value === 0}
104+
aria-label={t`Decrease quantity`}
105+
onMouseDown={(event) => event.preventDefault()}
106+
className={classNames(classes.control, classes.decrement)}
107+
>
108+
<IconMinus size={iconSize} stroke={2}/>
109+
</ActionIcon>
110+
111+
<NumberInput
112+
mb={0}
113+
variant="unstyled"
114+
min={minValue}
115+
max={maxValue}
116+
handlersRef={handlers}
117+
value={value}
118+
hideControls
119+
onChange={(newValue) => changeValue(Number(newValue) || 0)}
120+
aria-label={t`Quantity`}
121+
classNames={{input: classes.input}}
122+
/>
132123

133124
<ActionIcon
134125
size={buttonSize}

‎frontend/src/embed/widget.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,10 @@
182182
iframe.src = src;
183183

184184
const applySizing = () => {
185-
const vw = window.innerWidth;
186-
const vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
185+
const vv = window.visualViewport;
186+
const hasViewport = !!(vv && vv.width && vv.height);
187+
const vw = hasViewport ? vv.width * vv.scale : window.innerWidth;
188+
const vh = hasViewport ? vv.height * vv.scale : window.innerHeight;
187189

188190
if (vw <= MOBILE_BREAKPOINT) {
189191
bs.alignItems = 'stretch';

‎frontend/src/styles/global.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,14 @@ a {
8585
padding-bottom: 0 !important;
8686
}
8787

88+
@media (hover: none) and (pointer: coarse) {
89+
input.mantine-Input-input,
90+
textarea.mantine-Input-input,
91+
select.mantine-Input-input {
92+
font-size: 16px;
93+
}
94+
}
95+
8896
.mantine-Modal-content {
8997
@include mixins.scrollbar();
9098
}

0 commit comments

Comments
 (0)