Skip to content

Commit 188683f

Browse files
w3bdesignw3bdesign
committed
Update SingleProduct.component.tsx
1 parent d6085f2 commit 188683f

File tree

1 file changed

+65
-78
lines changed

1 file changed

+65
-78
lines changed

‎src/components/Product/SingleProduct.component.tsx

Lines changed: 65 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
import React, { useState, useEffect } from 'react';
22
import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
3-
import AddToCart, { IProduct, IProductRootObject } from './AddToCart.component';
3+
import AddToCart, { IProductRootObject } from './AddToCart.component';
44
import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
55
import Button from '@/components/UI/Button.component';
66

7-
interface SingleProductProps {
8-
product: IProduct;
9-
}
10-
11-
const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
7+
const SingleProduct: React.FC<IProductRootObject> = ({
8+
product,
9+
variationId: initialVariationId,
10+
}) => {
1211
const [isLoading, setIsLoading] = useState<boolean>(true);
1312
const [selectedVariation, setSelectedVariation] = useState<
1413
number | undefined
15-
>();
14+
>(initialVariationId);
1615

1716
const placeholderFallBack = 'https://via.placeholder.com/600';
1817

1918
let DESCRIPTION_WITHOUT_HTML: string | null = null;
2019

2120
useEffect(() => {
2221
setIsLoading(false);
23-
if (product.variations) {
22+
if (product.variations && !selectedVariation) {
2423
const firstVariant = product.variations.nodes[0].databaseId;
2524
setSelectedVariation(firstVariant);
2625
}
27-
}, [product.variations]);
26+
}, [product.variations, selectedVariation]);
2827

2928
let { description, image, name, onSale, price, regularPrice, salePrice } =
3029
product;
@@ -40,8 +39,7 @@ const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
4039
}
4140

4241
const handleBuy = () => {
43-
// Implement buy functionality here
44-
console.log('Buy button clicked');
42+
console.log('Buy now clicked');
4543
};
4644

4745
return (
@@ -75,79 +73,68 @@ const SingleProduct: React.FC<SingleProductProps> = ({ product }) => {
7573
/>
7674
)}
7775
</div>
78-
<div className="flex flex-col space-y-4">
79-
<h1 className="text-3xl font-bold text-center md:text-left">
80-
{name}
81-
</h1>
82-
<div className="text-center md:text-left">
83-
{onSale ? (
84-
<div className="flex flex-col md:flex-row items-center md:items-start space-y-2 md:space-y-0 md:space-x-4">
85-
<p className="text-3xl font-bold text-red-600">
86-
{product.variations
87-
? filteredVariantPrice(price, '')
88-
: salePrice}
89-
</p>
90-
<p className="text-xl text-gray-500 line-through">
91-
{product.variations
92-
? filteredVariantPrice(price, 'right')
93-
: regularPrice}
94-
</p>
76+
<div className="flex flex-col space-y-6">
77+
<h1 className="text-3xl font-bold">{name}</h1>
78+
<div className="flex flex-col space-y-2">
79+
{onSale && <p className="text-sm">Før {regularPrice}</p>}
80+
<p className="text-4xl font-bold">
81+
{product.variations
82+
? filteredVariantPrice(price, '')
83+
: onSale
84+
? salePrice
85+
: price}
86+
</p>
87+
<p className="text-sm">
88+
Tilbudet gjelder til 19/09 eller så lenge lageret rekker.
89+
</p>
90+
</div>
91+
<div className="space-y-4">
92+
<AddToCart product={product} variationId={selectedVariation} />
93+
<Button handleButtonClick={handleBuy} color="blue">
94+
Kjøp nå
95+
</Button>
96+
{product.variations && (
97+
<div className="w-full">
98+
<label
99+
htmlFor="variant"
100+
className="block text-sm font-medium mb-2"
101+
>
102+
Varianter
103+
</label>
104+
<select
105+
id="variant"
106+
name="variant"
107+
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
108+
onChange={(e) =>
109+
setSelectedVariation(Number(e.target.value))
110+
}
111+
value={selectedVariation}
112+
>
113+
{product.variations.nodes.map(
114+
({ id, name, databaseId, stockQuantity }) => {
115+
const filteredName = name.split('- ').pop();
116+
return (
117+
<option key={id} value={databaseId}>
118+
{filteredName} - ({stockQuantity} på lager)
119+
</option>
120+
);
121+
},
122+
)}
123+
</select>
95124
</div>
96-
) : (
97-
<p className="text-2xl font-bold">{price}</p>
98125
)}
99126
</div>
100-
<p className="text-gray-600 text-center md:text-left">
101-
{DESCRIPTION_WITHOUT_HTML}
102-
</p>
103127
{Boolean(product.stockQuantity) && (
104-
<p className="text-sm font-semibold text-center md:text-left">
105-
{product.stockQuantity} på lager
128+
<p className="text-sm font-semibold">
129+
<span className="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>
130+
{product.stockQuantity}+ stk. på lager
106131
</p>
107132
)}
108-
{product.variations && (
109-
<div className="w-full">
110-
<label
111-
htmlFor="variant"
112-
className="block text-sm font-medium text-gray-700 mb-2"
113-
>
114-
Varianter
115-
</label>
116-
<select
117-
id="variant"
118-
name="variant"
119-
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
120-
onChange={(e) =>
121-
setSelectedVariation(Number(e.target.value))
122-
}
123-
>
124-
{product.variations.nodes.map(
125-
({ id, name, databaseId, stockQuantity }) => {
126-
const filteredName = name.split('- ').pop();
127-
return (
128-
<option key={id} value={databaseId}>
129-
{filteredName} - ({stockQuantity} på lager)
130-
</option>
131-
);
132-
},
133-
)}
134-
</select>
135-
</div>
136-
)}
137-
<div className="flex flex-col space-y-4 items-center md:items-start">
138-
<Button handleButtonClick={handleBuy} color="blue">
139-
Kjøp nå
140-
</Button>
141-
<div className="w-full md:w-auto">
142-
{product.variations ? (
143-
<AddToCart
144-
product={product}
145-
variationId={selectedVariation}
146-
/>
147-
) : (
148-
<AddToCart product={product} />
149-
)}
150-
</div>
133+
<div className="mt-8">
134+
<h2 className="text-xl font-semibold mb-2">
135+
Produktbeskrivelse
136+
</h2>
137+
<p className="text-gray-600">{DESCRIPTION_WITHOUT_HTML}</p>
151138
</div>
152139
</div>
153140
</div>

0 commit comments

Comments
 (0)