Skip to content

Commit ae2b82c

Browse files
noelreissigJoaquinEtchegarayskydiverFelipeCabreraB
authored
Stock feature (#171)
* Setup stock info and conditions for label in Add to cart button * Add swell cnd to next.config file domain images * Remove comments * Implement new category logic (#164) * Implement new category logic * Remove cursor-pointer to div footer * Implement new category logic * Remove cursor-pointer to div footer * Fix on hydration * Fix type errors * Changes on filter layout * fix grid and layout shift on hover * bug/duplicate-toastify (#169) * Add condition to avoid multiples Add to cart & toastify * Disable button while isloading to avoid multiple notifications * Toastify in EditAddressModal * Add toastify in New Address Modal * Set isSubmiting false in LoginForm * Fix state variable in NewaddressModal * Remove wrong code * Unify state variables to isSubmitting * Update to isSumbitting state variable in AddToCart * Adjust margin bottom in text Related Product * Wishlist functionality mods (#167) * Product detail wishlist functionality * update product detail wishlist logic * wishlist on product list page functionality * Update wishlist logic to global store * Check if user is authenticated * Tooltip please log in to use this functionality * Wishlist functionality * Style enhancements * Change metadata title * wishlist enhancements * wishlist page enhancements * remove unused component * refactor wishlist on products listing * remove unused actions * remove unused store * refactor wishlist check for product * fix for non logged users * possible cache fix * wishlist enhancements * switch wishlist to client side rendering * remove unused code * switch wishlist to client side rendering * fixed loading wishlist bug * fixed loading wishlist bug * fixed wishlist page * Add isAuthenticated prop to ProductHighlight --------- Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> * fix for anon users (#170) * Readme file/deploys buttons (#168) * Add Vercel and Azure deploy buttons Readme File * Add style for buttons * Update azureDeploy file * Add netlify button for deployment * update netlify template * Update readme as per Deployment section * Add minor info in readme * Update readme * netlify.toml file update * Wishlist functionality mods (#167) * Product detail wishlist functionality * update product detail wishlist logic * wishlist on product list page functionality * Update wishlist logic to global store * Check if user is authenticated * Tooltip please log in to use this functionality * Wishlist functionality * Style enhancements * Change metadata title * wishlist enhancements * wishlist page enhancements * remove unused component * refactor wishlist on products listing * remove unused actions * remove unused store * refactor wishlist check for product * fix for non logged users * possible cache fix * wishlist enhancements * switch wishlist to client side rendering * remove unused code * switch wishlist to client side rendering * fixed loading wishlist bug * fixed loading wishlist bug * fixed wishlist page * Add isAuthenticated prop to ProductHighlight --------- Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> * fix for anon users (#170) * Temporally removed azure button * Add Vercel and Azure deploy buttons Readme File * Add style for buttons * Update azureDeploy file * Add netlify button for deployment * update netlify template * Update readme as per Deployment section * Add minor info in readme * Update readme * netlify.toml file update * Temporally removed azure button --------- Co-authored-by: Martin M <[email protected]> Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> * License update to GPL3 (#166) * Update license to GPL3 * Fix grammar error * Update license file * Wishlist functionality mods (#167) * Product detail wishlist functionality * update product detail wishlist logic * wishlist on product list page functionality * Update wishlist logic to global store * Check if user is authenticated * Tooltip please log in to use this functionality * Wishlist functionality * Style enhancements * Change metadata title * wishlist enhancements * wishlist page enhancements * remove unused component * refactor wishlist on products listing * remove unused actions * remove unused store * refactor wishlist check for product * fix for non logged users * possible cache fix * wishlist enhancements * switch wishlist to client side rendering * remove unused code * switch wishlist to client side rendering * fixed loading wishlist bug * fixed loading wishlist bug * fixed wishlist page * Add isAuthenticated prop to ProductHighlight --------- Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> * fix for anon users (#170) * Readme file/deploys buttons (#168) * Add Vercel and Azure deploy buttons Readme File * Add style for buttons * Update azureDeploy file * Add netlify button for deployment * update netlify template * Update readme as per Deployment section * Add minor info in readme * Update readme * netlify.toml file update * Wishlist functionality mods (#167) * Product detail wishlist functionality * update product detail wishlist logic * wishlist on product list page functionality * Update wishlist logic to global store * Check if user is authenticated * Tooltip please log in to use this functionality * Wishlist functionality * Style enhancements * Change metadata title * wishlist enhancements * wishlist page enhancements * remove unused component * refactor wishlist on products listing * remove unused actions * remove unused store * refactor wishlist check for product * fix for non logged users * possible cache fix * wishlist enhancements * switch wishlist to client side rendering * remove unused code * switch wishlist to client side rendering * fixed loading wishlist bug * fixed loading wishlist bug * fixed wishlist page * Add isAuthenticated prop to ProductHighlight --------- Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> * fix for anon users (#170) * Temporally removed azure button * Add Vercel and Azure deploy buttons Readme File * Add style for buttons * Update azureDeploy file * Add netlify button for deployment * update netlify template * Update readme as per Deployment section * Add minor info in readme * Update readme * netlify.toml file update * Temporally removed azure button --------- Co-authored-by: Martin M <[email protected]> Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> * Update license to GPL3 * Fix grammar error * Update license file --------- Co-authored-by: Martin M <[email protected]> Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: Maria N. Reissig <[email protected]> * Implement new category logic (#164) * Implement new category logic * Remove cursor-pointer to div footer * Implement new category logic * Remove cursor-pointer to div footer * Fix on hydration * Fix type errors * Changes on filter layout * fix grid and layout shift on hover * Add condition to avoid multiples Add to cart & toastify * Disable button while isloading to avoid multiple notifications * Toastify in EditAddressModal * Add toastify in New Address Modal * Set isSubmiting false in LoginForm * Fix state variable in NewaddressModal * Remove wrong code * Unify state variables to isSubmitting * Update to isSumbitting state variable in AddToCart * Adjust margin bottom in text Related Product --------- Co-authored-by: Martin M <[email protected]> Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]> Co-authored-by: Joaquín Etchegaray <[email protected]> * Fixed not rendering stock * Fix conflict with staging * Setup stock info and conditions for label in Add to cart button * Add swell cnd to next.config file domain images * Remove comments * Fixed not rendering stock * Remove duplicate function after rebase --------- Co-authored-by: Joaquín Etchegaray <[email protected]> Co-authored-by: Martin M <[email protected]> Co-authored-by: Felipe Cabrera <[email protected]> Co-authored-by: JoaquinEtchegaray <[email protected]>
1 parent 6f00726 commit ae2b82c

File tree

6 files changed

+47
-22
lines changed

6 files changed

+47
-22
lines changed

‎app/_lib/Store.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ class Store {
4545
active: true,
4646
expand: ['variants:*']
4747
});
48-
4948
return product ? this.tranformProduct(product) : undefined;
5049
}
5150

@@ -105,7 +104,8 @@ class Store {
105104
salePrice: product.sale_price || null,
106105
sku: product.sku || null,
107106
images: this.transformImages(product),
108-
categories: product.category_index?.id
107+
categories: product.category_index?.id,
108+
stock: product.stock_level
109109
};
110110
}
111111

‎app/_types/Generic/Products.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ interface Product {
1414
salePrice?: number | null;
1515
sku?: string | null;
1616
categories?: string[];
17+
stock?: number;
1718
}
1819

1920
interface ProductImage {

‎app/products/[slug]/_components/ProductInfo/AddToCart.tsx

+24-19
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
55

66
import 'react-toastify/dist/ReactToastify.css';
77

8+
import Button from '~/_components/Button';
9+
810
import { Spinner } from '~/_components/Globals/Spinner';
911

1012
import { useStore, useProductState, useGlobalState } from '~/_hooks/useStore';
@@ -81,6 +83,19 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
8183
});
8284
};
8385

86+
const buttonLabel = () => {
87+
if (product.stock === 0) {
88+
return 'COMING SOON!';
89+
}
90+
if (isSubmitting) {
91+
return <Spinner size={6} />;
92+
}
93+
if (state.isVariantActive || product.options?.length === 0) {
94+
return 'ADD TO CART';
95+
}
96+
return 'UNAVAILABLE';
97+
};
98+
8499
return (
85100
<>
86101
<div className="flex flex-wrap gap-4 py-5">
@@ -109,26 +124,16 @@ const AddToCart = ({ product, isAuthenticated }: ProductProp) => {
109124
</div>
110125
</div>
111126
<span className="flex items-center gap-2">
112-
<button
127+
<Button
113128
onClick={() => handleAddToCart()}
114-
disabled={
115-
product.options?.length === 0 ? false : !state.isVariantActive || isSubmitting
116-
}
117-
className={`font-bold py-3 px-5 md:min-w-[240px]
118-
${
119-
state.isVariantActive || product.options?.length === 0
120-
? 'bg-black font-quicksand border text-white duration-200 cursor-pointer hover:bg-white hover:text-black'
121-
: 'bg-gray-medium text-white font-quicksand border border-gray-medium'
122-
}`}
123-
>
124-
{(state.isVariantActive || product.options?.length === 0) && !isSubmitting ? (
125-
'ADD TO CART'
126-
) : isSubmitting ? (
127-
<Spinner size={6} />
128-
) : (
129-
'UNAVAILABLE'
130-
)}
131-
</button>
129+
label={buttonLabel()}
130+
variant="fill"
131+
className={`font-bold py-3 px-5 md:min-w-[240px] ${
132+
state.isVariantActive || (product.options?.length === 0 && product.stock !== 0)
133+
? 'bg-black font-quicksand border text-white duration-200 cursor-pointer hover:bg-white hover:text-black'
134+
: 'bg-gray-medium text-white font-quicksand border border-gray-medium'
135+
}`}
136+
/>
132137
<Wishlist isAuthenticated={isAuthenticated} productId={product.id} />
133138
</span>
134139
</div>

‎app/products/[slug]/_components/ProductInfo/ProductInfo.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ProductOptions from './ProductOptions';
44
import ProductPriceOptions from './ProductPriceOptions';
55
import ProductRating from './ProductRating';
66
import ProductSocialMedia from './ProductSocialMedia';
7+
import ProductStock from './ProductStock';
78
import ProductTitle from './ProductTitle';
89

910
import { isAuthenticated } from '~/_lib/SwellAPI';
@@ -19,6 +20,7 @@ const ProductInfo = async ({ product }: ProductProp) => {
1920
return (
2021
<div className="w-full space-y-2 mt-5 md:mt-0">
2122
<ProductTitle title={product.name} />
23+
<ProductStock stock={product.stock} />
2224
<ProductRating rating={3} />
2325
<ProductPriceOptions price={product.price} salePrice={product.salePrice} />
2426
<ProductOptions product={product} />

‎app/products/[slug]/_components/ProductInfo/ProductStock.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
interface StockProp {
2+
stock: number | undefined;
3+
}
4+
5+
function ProductStock({ stock }: StockProp) {
6+
return (
7+
<>
8+
{stock && stock > 0 && stock <= 5 ? (
9+
<p className="text-red-400">{`Only ${stock} item${stock > 1 ? 's' : ''} left!`}</p>
10+
) : (
11+
''
12+
)}
13+
</>
14+
);
15+
}
16+
17+
export default ProductStock;

‎next.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const nextConfig = {
1818
},
1919
reactStrictMode: true,
2020
images: {
21-
domains: ['cdn.schema.io', 'cdn-staging.swell.store']
21+
domains: ['cdn.schema.io', 'cdn-staging.swell.store', 'cdn.swell.store']
2222
},
2323
experimental: {
2424
serverActions: true

0 commit comments

Comments
 (0)