Skip to content

Commit

Permalink
Update type hook function vercel#2
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinhnt1706
vinhnt1706 committed May 18, 2022
1 parent f6ffb20 commit 78862bf
Show file tree
Hide file tree
Showing 13 changed files with 192 additions and 198 deletions.
8 changes: 3 additions & 5 deletions components/cart/CartItem/CartItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ const CartItem = ({
const { data: customer } = useCustomer()

const { price } = usePrice({
amount: item.row_total_including_tax * item.quantity,
baseAmount: item.row_total_including_tax * item.quantity,
amount: item.finalPrice * item.quantity,
baseAmount: item.finalPrice * item.quantity,
currencyCode,
})

Expand Down Expand Up @@ -103,8 +103,6 @@ const CartItem = ({
setQuantity(item.quantity)
}
// TODO: currently not including quantity in deps is intended, but we should
// do this differently as it could break easily
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [item.quantity])

// @ts-ignore
Expand All @@ -124,7 +122,7 @@ const CartItem = ({
className={s.productImage}
width={150}
height={150}
src={Object.entries(item.variant).length ? item.variant.image.url : item?.small_image?.url}
src={Object.entries(item.variant).length ? item.variant.image?.url : item.small_image?.url}
// alt={item.variant.image!.altText}
unoptimized
/>
Expand Down
21 changes: 6 additions & 15 deletions components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
import Link from 'next/link'
import {FC} from 'react'
import React, {FC} from 'react'
import CartItem from '@components/cart/CartItem'
import {Button, Text} from '@components/ui'
import {useUI} from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
import {Button} from '@components/ui'
import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price'
import useSubmitCheckout from '@framework/checkout/use-submit-checkout'
import ShippingWidget from '../ShippingWidget'
import PaymentWidget from '../PaymentWidget'
import s from './CheckoutSidebarView.module.css'
import PromoCode from '@components/checkout/PromoCode'
import {CardElement, useElements, useStripe} from '@stripe/react-stripe-js'
import getCartId from '../../../framework/magento/utils/get-cart-id'
import { getCustomerToken } from '@framework/utils'
import axios from 'axios'
import { STORE_URL } from '@framework/const'
Expand All @@ -21,10 +14,8 @@ const CheckoutSidebarView: FC = () => {
const stripe = useStripe()
const elements = useElements()

const {setSidebarView, closeSidebar} = useUI()
const {data: cartData} = useCart()
const cartId = getCartId()
const address = cartData?.billingAddress
const address = cartData?.shippingAddress
async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
event.preventDefault()
const card = elements?.getElement(CardElement);
Expand Down Expand Up @@ -90,8 +81,6 @@ const CheckoutSidebarView: FC = () => {
submitCheckoutData(input)
}
});

closeSidebar()
}

const submitCheckoutData = async (input: any) => {
Expand All @@ -112,7 +101,7 @@ const CheckoutSidebarView: FC = () => {

const {price: subTotal} = usePrice(
cartData && {
amount: Number(cartData.subtotalPrice),
amount: Number(cartData.totalPrice),
currencyCode: cartData.currency.code,
}
)
Expand All @@ -136,6 +125,8 @@ const CheckoutSidebarView: FC = () => {
item={item}
currencyCode={cartData!.currency.code}
variant="display"
cartId={cartData.id}
isLoading={true}
/>
))}
</ul>
Expand Down
7 changes: 4 additions & 3 deletions components/checkout/PromoCode/PromoCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const PromoCode: FC = () => {
console.log(cartData)
const [couponCode, setCouponCode] = useState();
console.log(couponCode)
const [couponCodeValue, setCouponCodeValue] = useState();
const [couponCodeValue, setCouponCodeValue] = useState('');
const handleChange = (event: any) => {
setCouponCodeValue(event.target.value);
}
Expand All @@ -29,9 +29,10 @@ const PromoCode: FC = () => {
}

const applyCouponCode = () => {
console.log(cartData!.id)
applyCoupon({
cart_id: cartData!.id,
coupon_code: couponCodeValue
cartId: cartData!.id,
couponCode: couponCodeValue
})
}
useEffect(() => {
Expand Down
152 changes: 56 additions & 96 deletions components/checkout/ShippingAddress/ShippingAddress.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import {FC, useEffect, useState} from 'react'
import { FC, useEffect, useState } from 'react'
import s from './ShippingAddress.module.css'
import {useCustomer} from '@framework/customer'
import {Button} from '@components/ui'
import {useUI} from '@components/ui/context'
import { useCustomer } from '@framework/customer'
import { Button } from '@components/ui'
import { useUI } from '@components/ui/context'
import useAddAddressToCart from '@framework/cart/use-add-address'
import useAddBillingAddressToCart from '@framework/cart/use-add-billing-address'
import useUpdateAddress from '@framework/customer/address/use-update-address'
import useCart from '@framework/cart/use-cart'
import ShippingView from '@components/checkout/ShippingView/ShippingView'

const ShippingAddress: FC = () => {
const {data: cartData} = useCart()
const {data: customer} = useCustomer()
const { data: cartData } = useCart()
console.log(cartData)
const { data: customer } = useCustomer()
const addItem = useAddAddressToCart()
const updateAddress = useUpdateAddress()
const addItemBilling = useAddBillingAddressToCart()
const {openModal} = useUI()
const [selectedShipping, setSelectedShipping] = useState<any>();
const [selectedBilling, setSelectedBilling] = useState<any>();
const [sameShiping, setSameBilling] = useState<any>(true);
const [selected, setSelected] = useState<any>();
const { openModal } = useUI()
const [selectedShipping, setSelectedShipping] = useState<any>()
const [selectedBilling, setSelectedBilling] = useState<any>()
const [sameShipping, setSameBilling] = useState<any>(true)
console.log(sameShipping)
const [selected, setSelected] = useState<any>()

// const setAddressToCart = async (data: any) => {
// const params = {
Expand All @@ -29,13 +30,18 @@ const ShippingAddress: FC = () => {
// await addItem(params)
// }
//
// const setBillingAddressToCart = async (data: any) => {
// const params = {
// cart_id: cartData?.id,
// customer_address_id: data?.id
// }
// await addItemBilling(params)
// }

const setBillingAddressToCart = async (data: any) => {
const params = {
cartId: cartData!.id,
billingAddress: [
{
customer_address_id: data.id
}
]
}
await addItemBilling(params)
}
//
// const changeAddress = (selected: any) => {
// setSelectedShipping(selected);
Expand All @@ -54,100 +60,54 @@ const ShippingAddress: FC = () => {
// }
// }, [cartData, customer])
//
// const setAddressCustomerToCart = async () => {
// const region = selected?.region
// await addItem({
// // default_billing: selected?.default_billing,
// // default_shipping: selected?.default_shipping,
// firstname: selected?.firstname,
// lastname: selected?.lastname,
// company: selected?.company,
// street: selected?.street,
// postcode: selected?.postcode,
// city: selected?.city,
// country_code: selected?.country_code,
// region: region?.region_code,
// region_id: region?.region_id,
// telephone: selected?.telephone,
// })
// }
//
// if (selected) {
// setAddressCustomerToCart()
// }
// const selecteAddress = (selected: any) => {
// setSelected(selected);
// setAddressCustomerToCart();
// }
//
//
useEffect(() => {
if (customer?.addresses.length > 0) {
setSelected(customer.addresses[customer.addresses.length - 1]);
}
}, [customer.addresses])

console.log('selected', selected);

const editAddress = async () => {
const params = {
id: selected.id,
address : {
firstname: selected?.firstname,
lastname: selected?.lastname,
company: selected?.company,
street: selected?.street,
postcode: selected?.postcode,
city: selected?.city,
country_code: selected?.country_code,
region: {
region: selected?.region?.region,
region_code: selected?.region?.region_code,
region_id:selected?.region?.region_id
},
telephone: selected?.telephone,
useEffect(() => {
customer?.addresses.map((address: any) => {
if (address.id === cartData?.shippingAddress[0]?.customer_address_id) {
setSelected(address)
}
})
}, [customer.addresses, cartData])

const selectAddress = async (a: any) => {
const params = {
cartId: cartData!.id,
shippingAddress: [
{
customer_address_id: a.id
}
]
}
await updateAddress(params)
await addItem(params)
setSelected(a)
}


return (
<>
<h2 className="pt-1 pb-8 text-xl font-semibold text-uppercase tracking-wide cursor-pointer inline-block">
<h2 className='pt-1 pb-8 text-xl font-semibold text-uppercase tracking-wide cursor-pointer inline-block'>
1. Shipping Address
</h2>
{/*{cartData?.shippingAddress?.map((a: any, index: number) => (*/}
{/* <div className={`${s.block} ${a.telephone == selectedShipping?.telephone ? s.selected : ''}`} key={index}>*/}
{/* <p>{a.firstname} {a.lastname}</p>*/}
{/* <p>{a.postcode} {a.street} {a.city}</p>*/}
{/* <p>{a.street} {a.region.label}</p>*/}
{/* <p className="mt-3">{a.telephone}</p>*/}
{/* {a.telephone != selectedShipping?.telephone && (*/}
{/* <Button onClick={() => changeAddress(a)}>click here</Button>*/}
{/* )}*/}
{/* </div>*/}
{/*))}*/}

{customer?.addresses?.map((a: any, index: number) => (
<div className={`${s.block} ${a.id == selected?.id ? s.selected : ''}`} key={index}>
<div className={`${s.block} ${a.id == selected?.id ? s.selected : ''}`} key={index}>
<p>{a.firstname} {a.lastname}</p>
<p>{a.postcode} {a.street} {a.city}</p>
<p>{a.street} {a.region.region}</p>
<p className="mt-3">{a.telephone}</p>
{/*{a.id != selected?.id && (*/}
{/* <Button onClick={() => selecteAddress(a)}>click here</Button>*/}
{/*)}*/}
<Button onClick={() => editAddress()}>Edit Address</Button>
<p className='mt-3'>{a.telephone}</p>
{a.id != selected?.id && (
<Button onClick={() => selectAddress(a)}>Click here</Button>
)}
</div>
))}
<Button className="mt-5" onClick={() => openModal('NEW_SHIPPING_ADDRESS')}>New Shipping Address</Button>
<hr className="mt-5 mb-5"/>
<input type="checkbox" value={sameShiping} checked={sameShiping} onChange={()=>setSameBilling(!sameShiping)}/> My billing and shipping address are the same
{!sameShiping &&
<>
<ShippingView billingAddress={true} setSameBilling={setSameBilling}/>
</>
<Button className='mt-5' onClick={() => openModal('NEW_SHIPPING_ADDRESS')}>New Shipping Address</Button>
<hr className='mt-5 mb-5' />
<input type='checkbox' value={sameShipping} checked={sameShipping}
onChange={() => setSameBilling(!sameShipping)} /> My billing and shipping address are the same
{!sameShipping &&
<>
<ShippingView billingAddress={true} setSelected={setSelected} setSameBilling={setSameBilling} />
</>
}
</>
)
Expand Down

0 comments on commit 78862bf

Please sign in to comment.