Skip to content

Commit

Permalink
Merge pull request #30 from danial117/client_dev_14
Browse files Browse the repository at this point in the history 
initial
  • Loading branch information
@danial117
danial117 authored Aug 28, 2024
2 parents 6f7ca18 + f8942b7 commit ac6750c
Show file tree
Hide file tree
Showing 13 changed files with 49 additions and 36 deletions.
Binary file removed build/1.51d47afc6e300b87b054.jpeg
View file
Binary file not shown.
7 changes: 4 additions & 3 deletions src/components/MainPageProducts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const MainPageProducts=()=>{
const [brands,setBrands]=useState([])
const [search,setSearch]=useState(false)
const [searchPage,setSearchPage]=useState(1)




Expand Down Expand Up @@ -221,10 +222,10 @@ const MainPageProducts=()=>{
onClick={() => navigate(`/productPage/${data._id}`)}
className="font-Lexend cursor-pointer sm:max-md:text-[12px] xs:max-sm:text-[10px] text-gray-800"
/>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data.options}</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data.options[0]?.option}</p>
<div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
<div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">${data.price}</div>
{carted ? <div style={{ userSelect: 'none' }} onClick={toggleCart} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div> : <div onClick={() => dispatch(addItemToCartAsync({ product: data, quantity: 1 }))} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
<div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">${data.options[0]?.price}</div>
{carted ? <div style={{ userSelect: 'none' }} onClick={toggleCart} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div> : <div onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price} }, quantity: 1 }))} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/MainProductCarousal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,10 @@ const MainProductCarousal=()=>{
onClick={()=>{window.location.href=`/productPage/${data._id}`}}
className="font-Lexend cursor-pointer text-gray-800"
/>
<p className="font-Poppins text-gray-600">150 Grams</p>
<p className="font-Poppins text-gray-600">{data.options[0]?.option}</p>
<div className="grid py-2 grid-cols-2 gap-x-2 ">
<div className="bg-gray-200 font-Abel py-2 text-[20px] rounded-md text-center">${data.price}</div>
{carted ? <div style={{userSelect:'none'}} onClick={toggleCart} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div> : <div onClick={()=>dispatch(addItemToCartAsync({product:data,quantity:1}))} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
<div className="bg-gray-200 font-Abel py-2 text-[20px] rounded-md text-center">${data.options[0]?.price}</div>
{carted ? <div style={{userSelect:'none'}} onClick={toggleCart} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">View in cart</div> : <div onClick={()=>dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))} className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300">Add to cart</div>}
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/components/SearchComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const SearchComponent = ({ isMobile }) => {
className="my-auto font-Abel cursor-pointer"
/>
</div>
<p className="my-auto font-bold font-Abel">${data.price}</p>
<p className="my-auto font-bold font-Abel">${data.options[0].price}</p>
</div>
</div>
))}
Expand Down
10 changes: 5 additions & 5 deletions src/scenes/BrandPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,22 +98,22 @@ const BrandPage = () => {
>
<img
className="w-[50%] h-[100%] mx-auto my-auto"
src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data.productImage?.medium ?? '404.jpeg'}`}
src={`${process.env.REACT_APP_API_URL}/assets/products/md/${data?.productImage?.medium ?? '404.jpeg'}`}
alt={data.name}
/>
</div>
<div className="m-2 relative h-[180px] flex flex-col">
<p className="font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">{data.brand}</p>
<p className="font-Abel text-[12px] xs:max-sm:text-[10px] font-bold text-emerald-400 my-[2px]">{data?.brand}</p>
<p
onClick={() => { navigate(`/productPage/${data._id}`); }}
className="font-Lexend cursor-pointer xs:max-sm:text-[10px] text-gray-800"
>
{data.name}
</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">150 Grams</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data?.options[0].option}</p>
<div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
<div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">
${data.price}
${data.options[0].price}
</div>
{carted ? (
<div
Expand All @@ -125,7 +125,7 @@ const BrandPage = () => {
</div>
) : (
<div
onClick={() => dispatch(addItemToCartAsync({ product: data, quantity: 1 }))}
onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))}
className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
>
Add to cart
Expand Down
6 changes: 3 additions & 3 deletions src/scenes/CategoryPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,10 @@ const CategoryPage = () => {
>
{data.name}
</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">150 Grams</p>
<p className="font-Poppins xs:max-sm:text-[14px] text-gray-600">{data.options[0].option}</p>
<div className="grid w-full absolute bottom-2 py-2 grid-cols-2 xs:max-sm:grid-cols-1 xs:max-sm:gap-y-2 gap-x-2">
<div className="bg-gray-200 xs:max-sm:py-[2px] sm:max-md:py-[2px] font-Abel py-2 xs:max-sm:text-[16px] text-[20px] rounded-md text-center">
${data.price}
${data.options[0].price}
</div>
{carted ? (
<div
Expand All @@ -120,7 +120,7 @@ const CategoryPage = () => {
</div>
) : (
<div
onClick={() => dispatch(addItemToCartAsync({ product: data, quantity: 1 }))}
onClick={() => dispatch(addItemToCartAsync({ product: { ...data, option:{id: data.options[0].id,price:data.options[0].price}}}))}
className="text-md border-2 cursor-pointer rounded-md py-2 sm:max-md:text-xs xs:max-sm:text-xs font-Abel text-center border-gray-300"
>
Add to cart
Expand Down
6 changes: 3 additions & 3 deletions src/scenes/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,10 +298,10 @@ const NavBar=()=>{
<div className="flex flex-col gap-y-2">
<p className="text-emerald-600 font-bold">Children's Health</p>
<p onClick={()=>window.location.href='/category/Children-vitamins'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Multivitamins</p>
<p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
<p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
<p onClick={()=>window.location.href='/category/Children-digestive-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Digestive Support</p>
<p onClick={()=>window.location.href='/category/Children-immune-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Immune Support</p>
<p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
<p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
</div>


Expand Down Expand Up @@ -337,7 +337,7 @@ const NavBar=()=>{
<p className="text-emerald-600 font-bold">Probiotics</p>
<p onClick={()=>window.location.href='/category/Women-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Women's Probiotics</p>
<p onClick={()=>window.location.href='/category/Men-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Men's Probiotics</p>
<p onClick={()=>window.location.href='/category/Childern-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
<p onClick={()=>window.location.href='/category/Children-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
<p onClick={()=>window.location.href='/category/Probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/scenes/Order.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -488,7 +488,7 @@ const Order=()=>{
maxLength={15}
className="font-Poppins text-xs underline text-emerald-500"
/>
<p className='text-Livvic text-[14px] text-gray-700'>{data.options}</p>
<p className='text-Livvic text-[14px] text-gray-700'>{data.option}</p>
</div>

</div>
Expand Down
26 changes: 19 additions & 7 deletions src/scenes/ProductPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,18 @@ const ProductPage=()=>{
const [quantity,setQuantity]=useState(1)
const cartItems=useSelector((state)=>state.cartItems)
const {productId}=useParams();
const [selectedOption,setSelectedOption]=useState(null)
const [carted,setCarted] = useState(false);



const fetchProduct=async ()=>{
await fetch(`${process.env.REACT_APP_API_URL}/products/id/${productId}`,{
method:'GET'
}).then((response)=>response.json()).then((data)=>{setProduct(data); })
}).then((response)=>response.json()).then((data)=>{setProduct(data);
setSelectedOption({id:0,...data.options[0]})

})
}


Expand All @@ -63,7 +67,7 @@ const ProductPage=()=>{
const handleAddToCart = () => {
const productToDispatch = {
name: product.name,
price: product.price,
option:selectedOption,
productImage: product.productImage,
_id: product._id,
};
Expand Down Expand Up @@ -103,15 +107,15 @@ if (foundItem) {
<div className="flex flex-row xs:max-md:grid xs:max-md:grid-cols-1">
<div className="basis-[40%]">

<div className="border-2 w-[80%] flex mx-auto h-[500px] border-gray-300 rounded-md">
<div className="border-2 w-[80%] flex mx-auto xs:max-md:h-[450px] h-[500px] border-gray-300 rounded-md">

{isLoading ?
<div className="w-full h-full">
<Skeleton />
</div>
:
<img
className="w-[60%] h-[350px] mx-auto my-auto"
className="w-[60%] xs:max-md:h-[300px] h-[350px] mx-auto my-auto"
src={`${process.env.REACT_APP_API_URL}/assets/products/lg/${product.productImage?.large??'404.jpeg'}`}
alt={product.name}
/>
Expand Down Expand Up @@ -189,10 +193,18 @@ if (foundItem) {
</div>

:
<div className="px-4 py-2 border-2 border-black md:max-lg:w-[40%] sm:max-md:w-[30%] xs:max-sm:w-[40%] w-[30%] rounded-full bg-gray-100">
<p className="font-Abel ">{product.options}</p>
<div className="flex flex-row gap-x-4">
{
Array.isArray(product.options)&& product.options.map((data,index)=>(
<div onClick={()=>{setSelectedOption({id:index,...product.options[index]})}} className={`px-4 cursor-pointer py-2 border-2 border-black w-auto rounded-full ${Number(selectedOption.price)===Number(data.price)?'bg-gray-100':'bg-white'}`}>
<p className="font-Abel ">{data.option}</p>
</div>
))
}
</div>



}


Expand All @@ -213,7 +225,7 @@ if (foundItem) {
</div>
:

<div className="my-auto font-Lexend text-lg font-bold"> <p> ${product.price} </p> </div>
<div className="my-auto font-Lexend text-lg font-bold"> <p> ${selectedOption.price} </p> </div>
}


Expand Down
2 changes: 1 addition & 1 deletion src/state/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const initialState = {
const state = getState();

if (state.accessToken) {
api.get(`/cart/create/${product._id}/${quantity?quantity:1}`)
api.get(`/cart/create/${product._id}/${quantity?quantity:1}?option=${product.option.id}`)
.then((response)=>{
if (response.status === 201) {

Expand Down
8 changes: 4 additions & 4 deletions src/widget/Cart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ const Cart=()=>{

useEffect(() => {


console.log(cartItems)
// Calculate individual total prices when the cart changes
const individualTotals = cartItems.map((item) => {
const individualTotal = item.price * item.quantity;
const individualTotal = item?.option?.price * item.quantity;
return individualTotal;
});

Expand Down Expand Up @@ -147,7 +147,7 @@ const Cart=()=>{
className="font-Poppins text-xs underline text-emerald-500"
/>

<p className='text-Livvic text-[14px] text-gray-700'>{data.options}</p>
<p className='text-Livvic text-[14px] text-gray-700'>{data?.option?.option}</p>
</div>

</div>
Expand All @@ -168,7 +168,7 @@ const Cart=()=>{
</div>

<div>
<p className='font-Abel text-end'>${data.price}</p>
<p className='font-Abel text-end'>${data?.option?.price}</p>
</div>

</div>
Expand Down
6 changes: 3 additions & 3 deletions src/widget/CategoriesWidget.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,10 +118,10 @@ const Categories=()=>{
<div className="flex flex-col gap-y-2">
<p className="text-emerald-600 font-bold">Children's Health</p>
<p onClick={()=>window.location.href='/category/Children-vitamins'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Multivitamins</p>
<p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
<p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Supplements</p>
<p onClick={()=>window.location.href='/category/Children-digestive-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Digestive Support</p>
<p onClick={()=>window.location.href='/category/Children-immune-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Immune Support</p>
<p onClick={()=>window.location.href='/category/Childern-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
<p onClick={()=>window.location.href='/category/Children-supplements'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
</div>


Expand Down Expand Up @@ -157,7 +157,7 @@ const Categories=()=>{
<p className="text-emerald-600 font-bold">Probiotics</p>
<p onClick={()=>window.location.href='/category/Women-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Women's Probiotics</p>
<p onClick={()=>window.location.href='/category/Men-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Men's Probiotics</p>
<p onClick={()=>window.location.href='/category/Childern-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
<p onClick={()=>window.location.href='/category/Children-probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Children's Probiotics</p>
<p onClick={()=>window.location.href='/category/Probiotics'} className="font-Livvic cursor-pointer hover:underline text-sm">Shop All</p>
</div>

Expand Down
4 changes: 2 additions & 2 deletions src/widget/SimiliarProducts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,9 @@ const SimiliarProducts=()=>{

className="font-Lexend xs:max-sm:text-[10px] cursor-pointer text-gray-800"
/>
<p className="font-Poppins xs:max-sm:text-[13px] text-gray-600">{data.options}</p>
<p className="font-Poppins xs:max-sm:text-[13px] text-gray-600">{data.options[0].options}</p>

<div className="bg-gray-200 font-Abel py-2 xs:max-sm:py-[4px] xs:max-sm:text-[13px] text-[20px] rounded-md text-center">${data.price}</div>
<div className="bg-gray-200 font-Abel py-2 xs:max-sm:py-[4px] xs:max-sm:text-[13px] text-[20px] rounded-md text-center">${data.options[0].price}</div>


</div>
Expand Down

0 comments on commit ac6750c

Please sign in to comment.