Merge pull request #10 from trikatechnologies/CKAD-129-Product-details-variants-adding-color-and-size

Ckad 129 product details variants adding color and size

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames'
 import Link from 'next/link'
 import { FC } from 'react'
 import s from './CartSidebarView.module.css'
+import useCheckout from '@framework/checkout/use-checkout'
 import CartItem from '../CartItem'
 import { Button, Text } from '@components/ui'
 import { useUI } from '@components/ui/context'
@@ -9,10 +10,33 @@ import { Bag, Cross, Check } from '@components/icons'
 import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
 import SidebarLayout from '@components/common/SidebarLayout'
+import GetTaxationWidget from '@components/checkout/GetTaxationWidget'
+import ShowTaxationWidget from '@components/checkout/ShowTaxWidget'
+import ShippingRatesWidget from '@components/checkout/ShippingRatesWidget'
+import useGetTax from '@framework/tax/get-tax'
+import useShowTax from '@framework/tax/show-tax'
+import useShippingRates from '@framework/shipping-rates/get-shipping-rates'
 
 const CartSidebarView: FC = () => {
-  const { closeSidebar, setSidebarView } = useUI()
+  const { closeSidebar, setSidebarView, sidebarView } = useUI()
   const { data, isLoading, isEmpty } = useCart()
+  const { data: checkoutData, submit: onCheckout } = useCheckout()
+
+  if(sidebarView == 'GET_TAXATION_VIEW'){
+    const getTax = useGetTax()
+    console.log(getTax)
+  }
+  else if(sidebarView == 'SHOW_TAXATION_VIEW'){
+    const showTax = useShowTax()
+  }
+  else if(sidebarView == 'SHIPPING_RATES_WIDGET'){
+    const shippingRates = useShippingRates()
+  }
+
+  async function handleSubmit(event: any) {
+    event.preventDefault()
+    setSidebarView('CHECKOUT_VIEW')
+  }
 
   const { price: subTotal } = usePrice(
     data && {
@@ -91,6 +115,25 @@ const CartSidebarView: FC = () => {
             </ul>
           </div>
 
+          <div className="px-4 sm:px-6 flex-1">
+            <GetTaxationWidget
+              isValid={checkoutData?.hasShipping}
+              onClick={() => setSidebarView('GET_TAXATION_VIEW')}
+            />
+          </div>  
+          <div className="px-4 sm:px-6 flex-1">
+            <ShowTaxationWidget
+              isValid={checkoutData?.hasShipping}
+              onClick={() => setSidebarView('SHOW_TAXATION_VIEW')}
+            />
+          </div>  
+          <div className="px-4 sm:px-6 flex-1">
+            <ShippingRatesWidget
+              isValid={checkoutData?.hasShipping}
+              onClick={() => setSidebarView('SHIPPING_RATES_WIDGET')}
+            />
+          </div>
+
           <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
             <ul className="pb-2">
               <li className="flex justify-between py-1">

components/checkout/GetTaxationWidget/TaxationWidget.module.css

@@ -0,0 +1,5 @@
+.root {
+    @apply border border-accent-2 px-6 py-5 mb-4 text-center
+    flex items-center cursor-pointer hover:border-accent-4;
+  }
+  

components/checkout/GetTaxationWidget/TaxationWidget.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react'
+import s from './TaxationWidget.module.css'
+import { ChevronRight, MapPin, Check } from '@components/icons'
+import cn from 'classnames'
+
+interface ComponentProps {
+  onClick?: () => any
+  isValid?: boolean
+}
+
+const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
+  /* Shipping Address
+  Only available with checkout set to true -
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <span className="ml-5 text-sm text-center font-medium">
+          Get Tax
+        </span>
+        {/* <span>
+          1046 Kearny Street.<br/>
+          San Franssisco, California
+        </span> */}
+      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
+    </div>
+  )
+}
+
+export default ShippingWidget

components/checkout/GetTaxationWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './TaxationWidget';

components/checkout/ShippingRatesWidget/ShippingRatesWidget.module.css

@@ -0,0 +1,5 @@
+.root {
+    @apply border border-accent-2 px-6 py-5 mb-4 text-center
+    flex items-center cursor-pointer hover:border-accent-4;
+  }
+  

components/checkout/ShippingRatesWidget/ShippingRatesWidget.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react'
+import s from './ShippingRatesWidget.module.css'
+import { ChevronRight, MapPin, Check } from '@components/icons'
+import cn from 'classnames'
+
+interface ComponentProps {
+  onClick?: () => any
+  isValid?: boolean
+}
+
+const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
+  /* Shipping Address
+  Only available with checkout set to true -
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <span className="ml-5 text-sm text-center font-medium">
+          Show Shipping Rates
+        </span>
+        {/* <span>
+          1046 Kearny Street.<br/>
+          San Franssisco, California
+        </span> */}
+      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
+    </div>
+  )
+}
+
+export default ShippingWidget

components/checkout/ShippingRatesWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './ShippingRatesWidget';

components/checkout/ShowTaxWidget/TaxationWidget.module.css

@@ -0,0 +1,5 @@
+.root {
+    @apply border border-accent-2 px-6 py-5 mb-4 text-center
+    flex items-center cursor-pointer hover:border-accent-4;
+  }
+  

components/checkout/ShowTaxWidget/TaxationWidget.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react'
+import s from './TaxationWidget.module.css'
+import { ChevronRight, MapPin, Check } from '@components/icons'
+import cn from 'classnames'
+
+interface ComponentProps {
+  onClick?: () => any
+  isValid?: boolean
+}
+
+const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
+  /* Shipping Address
+  Only available with checkout set to true -
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <span className="ml-5 text-sm text-center font-medium">
+          Show Tax
+        </span>
+        {/* <span>
+          1046 Kearny Street.<br/>
+          San Franssisco, California
+        </span> */}
+      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
+    </div>
+  )
+}
+
+export default ShippingWidget

components/checkout/ShowTaxWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './TaxationWidget';

components/common/Layout/Layout.tsx

@@ -79,6 +79,9 @@ const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
       {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
       {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
       {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+      {sidebarView === 'GET_TAXATION_VIEW' && <CartSidebarView />}
+      {sidebarView === 'SHOW_TAXATION_VIEW' && <CartSidebarView />}
+      {sidebarView === 'SHIPPING_RATES_WIDGET' && <CartSidebarView/>}
     </Sidebar>
   )
 }

framework/elasticpath/provider.ts

@@ -20,6 +20,9 @@ import { handler as useAddCardItem } from './customer/card/use-add-item'
 import { handler as useAddresses } from './customer/address/use-addresses'
 import { handler as useAddAddressItem } from './customer/address/use-add-item'
 
+import getTax from './tax/get-tax'
+import showTax from './tax/show-tax'
+
 import {fetcher} from './fetcher'
 
 export const elasticpathProvider = {
@@ -44,7 +47,11 @@ export const elasticpathProvider = {
     address: {
       useAddresses,
       useAddItem: useAddAddressItem,
-    }
+    },
+  },
+  tax: {
+    getTax,
+    showTax
   },
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },

framework/elasticpath/shipping-rates/get-shipping-rates.tsx

@@ -0,0 +1,35 @@
+import axios from "axios";
+
+const getShippingrates = () => {
+    axios({
+        url: 'http://206.189.135.123:3030/store-events/615aa7276b3472001db03258/get-shipping-rates',
+        method: 'POST',
+        data: {
+            payload:{
+                data: {
+                    cartId :"Cart1",
+                    shipping_address: {
+                        first_name: "Otis",
+                        last_name: "Sedmak",
+                        phone_number: "(555) 555-1234",
+                        company_name: "Sedmak & Co.",
+                        line_1: "1251, Rexmere Ave",
+                        line_2: "Farmingville, Suffolk",
+                        city: "shipping city",
+                        postcode: "11738",
+                        county: "Farmingville, Suffolk",
+                        country: "US",
+                        instructions: "Leave in porch"
+                    }
+                }
+            }
+        }
+    }).then((response: any) => {
+        console.log(response)
+        return response;
+    }).catch((error: any) => {
+        console.log(error)
+    })
+}
+
+export default getShippingrates;

framework/elasticpath/tax/get-tax.tsx

@@ -0,0 +1,36 @@
+import axios from "axios";
+
+const getTax = () => {
+    axios({
+        url: 'http://206.189.135.123:3030/store-events/615aa7276b3472001db03258/get-tax',
+        method: 'POST',
+        data: {
+            payload:{
+                data:{
+                    cart_id:"Cart1",
+                    shipping_address: {
+                        first_name: "Otis",
+                        last_name: "Sedmak",
+                        phone_number: "(555) 555-1234",
+                        company_name: "Sedmak & Co.",
+                        line_1: "12 Jennifer Lane",
+                        city: "Warren",
+                        postcode: "07059",
+                        county: "NJ",
+                        country: "US",
+                        instructions: "Leave in porch"
+                    }
+                }
+            }
+        }
+    })
+    .then(function (response) {
+        console.log(response);
+        return response
+    })
+    .catch(function (error) {
+        console.log(error);
+    })
+}
+
+export default getTax;

framework/elasticpath/tax/show-tax.tsx

@@ -0,0 +1,40 @@
+import axios from 'axios'
+// const MoltinGateway = require('@moltin/sdk').gateway
+import { gateway as MoltinGateway } from '@moltin/sdk';
+import { MoltinClient } from '@moltin/request';
+
+const Moltin = MoltinGateway({
+    client_id: process.env.NEXT_PUBLIC_ELASTICPATH_CLIENTID
+})
+
+const client = new MoltinClient({
+    client_id: process.env.NEXT_PUBLIC_ELASTICPATH_CLIENTID,
+    client_secret: process.env.NEXT_PUBLIC_ELASTICPATH_SECRET
+})
+
+const getTax = () => {
+    Moltin.Cart('Cart1')
+        .Items()
+        .then((cart: any) => {
+            console.log(cart.data)
+            let taxItemId = cart?.data[0]?.relationships?.taxes?.data[0]?.id;
+            
+            if(taxItemId){
+                client
+                .put(`carts/Cart1/items/12ef6cda-c8bb-483c-9b5f-4e89c7ef70f2/taxes/${taxItemId}`, {
+                    type: "tax_item"
+                })
+                .then((items: any) => {
+                    console.log("SUCCESS");
+                    console.log(items);
+                    return items
+                })
+                .catch(console.error)
+            }
+
+        }
+    )
+}
+
+
+export default getTax;

package.json

@@ -20,10 +20,12 @@
     "node": ">=14.x"
   },
   "dependencies": {
+    "@moltin/request": "^2.0.2",
     "@moltin/sdk": "^8.8.1",
     "@react-spring/web": "^9.2.1",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.6",
+    "axios": "^0.24.0",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",