Product variations and Cart-Expiry (#105)

* Just show parents product in the catagory page (Don't show child products in the catagory)

* Update service to get product by Id , Update product details page to get the child data

* update SDK version + Add cart expiry date do cart list and v=cart info

* Remove useEffect to get outof stock product

* Update variant products

* Show all childs in catagory

* Update CartItemList.scss

* Update CartItemList.tsx

Co-authored-by: yasiloghmani <yasaman.loghmani@EP-ML-10062.local>

Author: yasiloghmani

package.json

@@ -3,7 +3,7 @@
   "version": "3.0.0",
   "private": true,
   "dependencies": {
-    "@moltin/sdk": "6.1.2",
+    "@moltin/sdk": "6.3.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",

src/CartItemList.scss

@@ -17,8 +17,8 @@
 
   &__header{
     line-height: 34px;
-    padding-bottom: 50px;
     padding-top: 20px;
+    padding-bottom: 15px;
     max-width: 300px;
     margin: 0 auto;
     display: flex;
@@ -330,6 +330,14 @@
     }
   }
 
+  &__date {
+    padding-bottom: 50px;
+  }
+  
+  &__expirydate {
+    text-align: center;
+  }
+
   @media (min-width: $mobileXSmallWidth) {
     &__backicon {
       display: none;
@@ -452,4 +460,4 @@
       justify-content: flex-end;
     }
   }
-}
+}

src/CartItemList.tsx

@@ -12,7 +12,6 @@ import { SettingsCart } from "./SettingsCart";
 import { ReactComponent as CloseIcon } from './images/icons/ic_close.svg';
 import { ReactComponent as BackArrowIcon } from './images/icons/arrow_back-black-24dp.svg';
 
-
 import './CartItemList.scss';
 
 interface CartItemListParams {
@@ -142,7 +141,6 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
           <CloseIcon onClick={() => setShowUpdateCartAlert(false)}/>
         </div>
       )}
-
       {mergedMessage &&  (
         <div className="cartslist__alertMessage">
           <p>{mergedMessage}</p>
@@ -163,7 +161,6 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
           </div>
         )}
       </div>
-       
       <div className="cartitemlist__header">
         <h2 className="cartitemlist__title">
           {isLoggedIn && selectedCart ? (
@@ -180,6 +177,13 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
           {isLoggedIn && selectedCart && <SettingsIcon onClick={() => setShowSettings(true)} /> }
         </span>
       </div>
+      <div className="cartitemlist__date">
+        { isLoggedIn && selectedCart?.meta.timestamps.expires_at &&
+          <p className="cartitemlist__expirydate">
+            {t('expires')} - {(selectedCart?.meta.timestamps.expires_at).substring(0, 10)}
+          </p>
+        }      
+      </div>
       {items && items.length > 0 ? (
         <div>
           <div className="cartitemlist__wrap">

src/CartsList.tsx

@@ -170,6 +170,10 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
                           <span className="cartslist__date">
                             {t('edited')} - {(cart.meta.timestamps.updated_at).substring(0, 10)}
                           </span>
+                          <br />
+                          <span className="cartslist__date">
+                            {t('expires')} - {(cart.meta.timestamps.expires_at).substring(0, 10)}
+                          </span>
                         </span>
                       </div>
                       <p className="cartslist__quantity">
@@ -220,6 +224,10 @@ export  const CartsList: React.FC<CartsListParams> = (props) => {
                             <span className="cartslist__date">
                               {t('edited')} - {(cart.meta.timestamps.updated_at).substring(0, 10)}
                             </span>
+                            <br />
+                            <span className="cartslist__date">
+                              {t('expires')} - {(cart.meta.timestamps.expires_at).substring(0, 10)}
+                            </span>
                           </span>
                         </div>
                         <p className="cartslist__quantity">

src/LoginForm.tsx

@@ -78,7 +78,6 @@ export const LoginForm: React.FC<LoginFormProps> = (props) => {
               handleShowNewCart(true);
           }
           if (createCart) {
-            console.log("hello")
             setIsCreateNewCart(true);
           }
           if (onSubmit) {

src/Product.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useResolve, useProductImages } from './hooks';
-import { addToCart, loadProductBySlug } from './service';
+import { addToCart, loadProductBySlug, getProductById } from './service';
 import { CompareCheck } from './CompareCheck';
 import { SocialShare } from './SocialShare';
 import {
@@ -23,7 +23,6 @@ import { APIErrorContext } from './APIErrorProvider';
 
 import './Product.scss';
 
-
 interface ProductParams {
   productSlug: string;
 }
@@ -61,17 +60,37 @@ export const Product: React.FC = () => {
     },
     [productSlug, selectedLanguage, selectedCurrency, addError]
   );
+
+  const [childProduct, setChildProduct] = useState<string>(product?.relationships.children ? product.relationships.children.data[0].id : "")
+
+  const handleVariationChange = (childID: string) => {
+    setProductId(childID);
+    setChildProduct(childID)
+  };
+
+  const [child] = useResolve(
+    async () => {
+      try {
+        if(childProduct.length > 0)
+        return getProductById(childProduct)
+      }
+       catch (error) {
+        addError(error.errors);
+      }
+    }, [childProduct, addError]
+  )
+
   const [productId, setProductId] = useState('');
 
   useEffect(() => {
-    product && setProductId(product.id);
+    product && setProductId(product.id);    
   }, [product]);
 
   useEffect(() => {
     document.body.style.overflow = modalOpen ? 'hidden' : 'unset';
   }, [modalOpen])
 
-  const productImageHrefs = useProductImages(product);
+  const productImageHrefs = useProductImages(child ? child : product);
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const isPrevImageVisible = currentImageIndex > 0;
   const isNextImageVisible = currentImageIndex < (productImageHrefs?.length ?? 0) - 1;
@@ -81,6 +100,15 @@ export const Product: React.FC = () => {
     setCurrentImageIndex(currentImageIndex - 1);
   };
 
+  useEffect(() => {
+    if(product)
+      if(product.relationships.children) {
+        setChildProduct(product.relationships.children.data[0].id);
+        setProductId(product.relationships.children.data[0].id)
+        
+      }
+  }, [product])
+
   const handleAddToCart = (cartId?: string) => {
     const currentCart = localStorage.getItem("mcart") || "";
     const mcart = cartId ? cartId : currentCart;
@@ -105,10 +133,6 @@ export const Product: React.FC = () => {
     setCurrentImageIndex(currentImageIndex + 1);
   };
 
-  const handleVariationChange = (childID: string) => {
-    setProductId(childID);
-  };
-
   const handleAddToSelectedCart = (cart:any) => {
     updateSelectedCart(cart);
     handleAddToCart(cart.id);
@@ -218,14 +242,14 @@ export const Product: React.FC = () => {
               {product.name}
             </h1>
             <div className="product__sku">
-              {product.sku}
+              {child ? child.sku : product.sku}
             </div>
             <div className="product__price">
-              {product.meta.display_price.without_tax.formatted}
+              {child ? child.meta.display_price.without_tax.formatted : product.meta.display_price.without_tax.formatted}
             </div>
-            <Availability available={isProductAvailable(product)} />
+            <Availability available={child ? isProductAvailable(child) : isProductAvailable(product)} />
             <div className="product__comparecheck">
-              <CompareCheck product={product} />
+              <CompareCheck product={child ? child : product} />
             </div>
             {
               product.meta.variations
@@ -238,10 +262,10 @@ export const Product: React.FC = () => {
               </div>
             </div>
             <div className="product__description">
-              {product.description}
+              {child ? child.description : product.description}
             </div>
             <div className="product__socialshare">
-              <SocialShare name={product.name} description={product.description} imageHref={productImageHrefs?.[0]} />
+              <SocialShare name={child ? child.name : product.name} description={child ? child.description : product.description} imageHref={productImageHrefs?.[0]} />
             </div>
           </div>
         </div>

src/VariationsSelector.tsx

@@ -12,6 +12,7 @@ interface VariationsSelectorParams {
 export const VariationsSelector: React.FC<VariationsSelectorParams> = ({ product, onChange }) => {
   const { variations, variation_matrix: variationMatrix } = product.meta;
 
+  
   const initialOptions = variations.reduce(
     (acum: any, variation: any) => ({ ...acum, [variation.id]: variation.options[0].id }),
     {}
@@ -45,6 +46,7 @@ export const VariationsSelector: React.FC<VariationsSelectorParams> = ({ product
     processOptions(updatedOptions);
   };
 
+
   return (
     <div className="variationsselector">
       {variations.map((variation: any) => (

src/locales/en.json

@@ -190,6 +190,7 @@
   "new-cart": "New Cart",
   "edited": "Edited",
   "created": "Created",
+  "expires": "Expires",
   "selected": "Selected",
   "saved-carts": "Saved carts",
   "done": "Done",

src/locales/fr.json

@@ -190,6 +190,7 @@
   "new-cart": "ÑÑéŵ ÇÇåŕţ",
   "edited": "ÉÉðîţţéð",
   "created": "ÇÇŕéååţéð",
+  "expires": "ÉÉẋþîîŕéš",
   "selected": "ŠŠéļéççţéð",
   "saved-carts": "ŠŠåṽṽéð ççåŕŕţš",
   "done": "ÐÐöñé",

src/service.ts

@@ -128,7 +128,6 @@ export async function loadProductBySlug(productSlug: string, language: string, c
   const productId = resultSlug?.data[0]?.id;
   const result = await moltin.Products.Get(productId);
   const product = result.data;
-
   setProductCache(product.slug, language, currency, product);
 
   return product;
@@ -212,11 +211,17 @@ export async function getAllOrders(token: string, pageNum:number,dates: number,
   return result;
 }
 
+export async function getProductById(productId: string): Promise<moltin.Product> {
+  const moltin = MoltinGateway({ host: config.endpointURL, client_id: config.clientId });
+  const result = await moltin.Products.Get(productId);
+  const product = result.data;
+  return product
+}
+
 export async function getProductsByIds(ids: string[]): Promise<any> {
   const moltin = MoltinGateway({ host: config.endpointURL, client_id: config.clientId });
   const productsRequests = ids.map(id => moltin.Products.Get(id));
   const products = await Promise.all(productsRequests);
-
   return products.map(product => product.data)
 }