Skip to content

Commit ec841bb

Browse files
TharaaeTharaae
committed
feat(common): Prep for COPE demo
1 parent 8d128fc commit ec841bb

6 files changed

Lines changed: 85 additions & 107 deletions

File tree

‎core/app/[locale]/(default)/_components/slideshow/commercia-slide.png‎

2.15 MB
Loading

‎core/app/[locale]/(default)/_components/slideshow/index.tsx‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ import { useTranslations } from 'next-intl';
22

33
import { Slideshow as SlideshowSection } from '~/vibes/soul/sections/slideshow';
44

5-
import SlideBg01 from './slide-bg-01.jpg';
6-
import SlideBg02 from './slide-bg-02.jpg';
7-
import SlideBg03 from './slide-bg-03.jpg';
5+
import SlideBg01 from './commercia-slide.png';
86

97
export function Slideshow() {
108
const t = useTranslations('Home.Slideshow');
@@ -23,32 +21,6 @@ export function Slideshow() {
2321
label: t('Slide01.cta'),
2422
},
2523
},
26-
{
27-
title: t('Slide02.title'),
28-
image: {
29-
src: SlideBg02.src,
30-
alt: t('Slide02.alt'),
31-
blurDataUrl: SlideBg02.blurDataURL,
32-
},
33-
description: t('Slide02.description'),
34-
cta: {
35-
href: '/shop-all',
36-
label: t('Slide02.cta'),
37-
},
38-
},
39-
{
40-
title: t('Slide03.title'),
41-
image: {
42-
src: SlideBg03.src,
43-
alt: t('Slide03.alt'),
44-
blurDataUrl: SlideBg03.blurDataURL,
45-
},
46-
description: t('Slide03.description'),
47-
cta: {
48-
href: '/shop-all',
49-
label: t('Slide03.cta'),
50-
},
51-
},
5224
];
5325

5426
return <SlideshowSection slides={slides} />;

‎core/app/[locale]/(default)/cart/page-data.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,12 @@ export const DigitalItemFragment = graphql(`
115115
}
116116
}
117117
url
118+
stockPosition {
119+
backorderMessage
120+
quantityOnHand
121+
quantityBackordered
122+
quantityOutOfStock
123+
}
118124
}
119125
`);
120126

‎core/app/[locale]/(default)/cart/page.tsx‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -127,43 +127,37 @@ export default async function Cart({ params }: Props) {
127127

128128
let inventoryMessages;
129129

130-
if (item.__typename === 'CartPhysicalItem') {
131-
if (item.stockPosition?.quantityOutOfStock === item.quantity) {
132-
inventoryMessages = {
133-
outOfStockMessage: data.site.settings?.inventory?.showOutOfStockMessage
134-
? data.site.settings.inventory.defaultOutOfStockMessage
130+
if (item.stockPosition?.quantityOutOfStock === item.quantity) {
131+
inventoryMessages = {
132+
outOfStockMessage: data.site.settings?.inventory?.showOutOfStockMessage
133+
? data.site.settings.inventory.defaultOutOfStockMessage
134+
: undefined,
135+
};
136+
} else {
137+
inventoryMessages = {
138+
quantityReadyToShipMessage:
139+
data.site.settings?.inventory?.showQuantityOnHand && !!item.stockPosition?.quantityOnHand
140+
? t('quantityReadyToShip', {
141+
quantity: Number(item.stockPosition.quantityOnHand),
142+
})
135143
: undefined,
136-
};
137-
} else {
138-
inventoryMessages = {
139-
quantityReadyToShipMessage:
140-
data.site.settings?.inventory?.showQuantityOnHand &&
141-
!!item.stockPosition?.quantityOnHand
142-
? t('quantityReadyToShip', {
143-
quantity: Number(item.stockPosition.quantityOnHand),
144-
})
145-
: undefined,
146-
quantityBackorderedMessage:
147-
data.site.settings?.inventory?.showQuantityOnBackorder &&
148-
!!item.stockPosition?.quantityBackordered
149-
? t('quantityOnBackorder', {
150-
quantity: Number(item.stockPosition.quantityBackordered),
151-
})
152-
: undefined,
153-
quantityOutOfStockMessage:
154-
data.site.settings?.inventory?.showOutOfStockMessage &&
155-
!!item.stockPosition?.quantityOutOfStock
156-
? t('partiallyAvailable', {
157-
quantity: item.quantity - Number(item.stockPosition.quantityOutOfStock),
158-
})
159-
: undefined,
160-
backorderMessage:
161-
data.site.settings?.inventory?.showBackorderMessage &&
162-
!!item.stockPosition?.quantityBackordered
163-
? (item.stockPosition.backorderMessage ?? undefined)
164-
: undefined,
165-
};
166-
}
144+
quantityBackorderedMessage:
145+
data.site.settings?.inventory?.showQuantityOnBackorder && !!item.stockPosition?.quantityBackordered
146+
? t('quantityOnBackorder', {
147+
quantity: Number(item.stockPosition.quantityBackordered),
148+
})
149+
: undefined,
150+
quantityOutOfStockMessage:
151+
data.site.settings?.inventory?.showOutOfStockMessage && !!item.stockPosition?.quantityOutOfStock
152+
? t('partiallyAvailable', {
153+
quantity: item.quantity - Number(item.stockPosition.quantityOutOfStock),
154+
})
155+
: undefined,
156+
backorderMessage:
157+
data.site.settings?.inventory?.showBackorderMessage && !!item.stockPosition?.quantityBackordered
158+
? (item.stockPosition.backorderMessage ?? undefined)
159+
: undefined,
160+
};
167161
}
168162

169163
return {

‎core/messages/en.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
"Home": {
33
"Slideshow": {
44
"Slide01": {
5-
"title": "Fresh finds for every occasion",
6-
"description": "Explore our latest arrivals, curated to bring you style, functionality, and inspiration. Shop now and discover your next favorite.",
7-
"alt": "Five small potted plants displayed on beige stacked blocks, featuring a variety of green foliage in dark gray pots against a neutral background.",
5+
"title": "WELCOME TO COMMERCIA!",
6+
"description": "A new nation state, structured for stability.",
7+
"alt": "A new nation state, structured for stability.",
88
"cta": "Shop Now"
99
},
1010
"Slide02": {

‎core/vibes/soul/sections/slideshow/index.tsx‎

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -225,52 +225,58 @@ export function Slideshow({ slides, playOnInit = true, interval = 5000, classNam
225225
resetAutoplay();
226226
}}
227227
>
228-
<div className="relative overflow-hidden">
229-
{/* White Bar - Current Index Indicator / Progress Bar */}
230-
<div
231-
className={clsx(
232-
'absolute h-0.5 bg-[var(--slideshow-pagination,hsl(var(--background)))]',
233-
'opacity-0 fill-mode-forwards',
234-
isPlaying ? 'running' : 'paused',
235-
index === selectedIndex
236-
? 'opacity-100 ease-linear animate-in slide-in-from-left'
237-
: 'ease-out animate-out fade-out',
238-
)}
239-
key={`progress-${playCount}`} // Force the animation to restart when pressing "Play", to match animation with embla's autoplay timer
240-
style={{
241-
animationDuration: index === selectedIndex ? `${interval}ms` : '200ms',
242-
width: `${150 / slides.length}px`,
243-
}}
244-
/>
245-
{/* Grey Bar BG */}
246-
<div
247-
className="h-0.5 bg-[var(--slideshow-pagination,hsl(var(--background)))] opacity-30"
248-
style={{ width: `${150 / slides.length}px` }}
249-
/>
250-
</div>
228+
{slides.length > 1 && (
229+
<div className="relative overflow-hidden">
230+
{/* White Bar - Current Index Indicator / Progress Bar */}
231+
<div
232+
className={clsx(
233+
'absolute h-0.5 bg-[var(--slideshow-pagination,hsl(var(--background)))]',
234+
'opacity-0 fill-mode-forwards',
235+
isPlaying ? 'running' : 'paused',
236+
index === selectedIndex
237+
? 'opacity-100 ease-linear animate-in slide-in-from-left'
238+
: 'ease-out animate-out fade-out',
239+
)}
240+
key={`progress-${playCount}`} // Force the animation to restart when pressing "Play", to match animation with embla's autoplay timer
241+
style={{
242+
animationDuration: index === selectedIndex ? `${interval}ms` : '200ms',
243+
width: `${150 / slides.length}px`,
244+
}}
245+
/>
246+
{/* Grey Bar BG */}
247+
<div
248+
className="h-0.5 bg-[var(--slideshow-pagination,hsl(var(--background)))] opacity-30"
249+
style={{ width: `${150 / slides.length}px` }}
250+
/>
251+
</div>
252+
)}
251253
</button>
252254
);
253255
})}
254256

255257
{/* Carousel Count - "01/03" */}
256-
<span className="ml-auto mr-3 mt-px font-[family-name:var(--slideshow-number-font-family,var(--font-family-mono))] text-sm text-[var(--slideshow-number,hsl(var(--background)))]">
257-
{selectedIndex + 1 < 10 ? `0${selectedIndex + 1}` : selectedIndex + 1}/
258-
{slides.length < 10 ? `0${slides.length}` : slides.length}
259-
</span>
258+
{slides.length > 1 && (
259+
<span className="ml-auto mr-3 mt-px font-[family-name:var(--slideshow-number-font-family,var(--font-family-mono))] text-sm text-[var(--slideshow-number,hsl(var(--background)))]">
260+
{selectedIndex + 1 < 10 ? `0${selectedIndex + 1}` : selectedIndex + 1}/
261+
{slides.length < 10 ? `0${slides.length}` : slides.length}
262+
</span>
263+
)}
260264

261265
{/* Stop / Start Button */}
262-
<button
263-
aria-label={isPlaying ? 'Pause' : 'Play'}
264-
className="flex h-7 w-7 items-center justify-center rounded-lg border border-[var(--slideshow-play-border,hsl(var(--contrast-300)/50%))] text-[var(--slideshow-play-text,hsl(var(--background)))] ring-[var(--slideshow-focus)] transition-opacity duration-300 hover:border-[var(--slideshow-play-border-hover,hsl(var(--contrast-300)/80%))] focus-visible:outline-0 focus-visible:ring-2"
265-
onClick={toggleAutoplay}
266-
type="button"
267-
>
268-
{isPlaying ? (
269-
<Pause className="pointer-events-none" size={16} strokeWidth={1.5} />
270-
) : (
271-
<Play className="pointer-events-none" size={16} strokeWidth={1.5} />
272-
)}
273-
</button>
266+
{slides.length > 1 && (
267+
<button
268+
aria-label={isPlaying ? 'Pause' : 'Play'}
269+
className="flex h-7 w-7 items-center justify-center rounded-lg border border-[var(--slideshow-play-border,hsl(var(--contrast-300)/50%))] text-[var(--slideshow-play-text,hsl(var(--background)))] ring-[var(--slideshow-focus)] transition-opacity duration-300 hover:border-[var(--slideshow-play-border-hover,hsl(var(--contrast-300)/80%))] focus-visible:outline-0 focus-visible:ring-2"
270+
onClick={toggleAutoplay}
271+
type="button"
272+
>
273+
{isPlaying ? (
274+
<Pause className="pointer-events-none" size={16} strokeWidth={1.5} />
275+
) : (
276+
<Play className="pointer-events-none" size={16} strokeWidth={1.5} />
277+
)}
278+
</button>
279+
)}
274280
</div>
275281
</section>
276282
);

0 commit comments

Comments
 (0)