crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 bug: change active step in checkout

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-10-20 16:47:48 +07:00
parent bbbf4f7adc
commit f959ac8ea2
2 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
View File

@@ -1,9 +1,8 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { ButtonCommon, Logo } from 'src/components/common' import { Logo } from 'src/components/common'
import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse' import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
import { useActiveCustomer } from 'src/components/hooks/auth' import { useActiveCustomer } from 'src/components/hooks/auth'
import { useAddProductToCart, useGetActiveOrder } from 'src/components/hooks/cart' import { useGetActiveOrder } from 'src/components/hooks/cart'
import { removeItem } from 'src/utils/funtion.utils'
import s from './CheckoutInfo.module.scss' import s from './CheckoutInfo.module.scss'
import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm' import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm' import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
@@ -46,21 +45,17 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
const onEdit = (id: CheckoutStep) => { const onEdit = (id: CheckoutStep) => {
setActiveStep(id) setActiveStep(id)
setDoneSteps(removeItem<number>(doneSteps, id))
} }
const updateActiveStep = (step: CheckoutStep) => { const updateActiveStep = (step: CheckoutStep) => {
if (doneSteps.length > 0) { if (doneSteps.length > 0) {
for (let i = step + 1; i < Object.keys(CheckoutStep).length; i++) { for (let i = step + 1; i < Object.keys(CheckoutStep).length; i++) {
if (!doneSteps.includes(i)) { if (!doneSteps.includes(i)) {
// console.log("here: ", doneSteps, i)
setActiveStep(i) setActiveStep(i)
return return
} }
} }
} else { } else {
// console.log("here 2: ", doneSteps, step)
setActiveStep(step + 1) setActiveStep(step + 1)
} }
} }
@@ -129,7 +124,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
<div className={s.warpper}> <div className={s.warpper}>
{/* TODO: remove */} {/* TODO: remove */}
{/* <ButtonCommon onClick={createOrder}>test create order</ButtonCommon> */} {/* <ButtonCommon onClick={createOrder}>test create order</ButtonCommon> */}
doneSteps = {JSON.stringify(doneSteps)}
<div className={s.title}> <div className={s.title}>
<Logo /> <Logo />
<div className={s.viewCart} onClick={onViewCart}>View cart</div> <div className={s.viewCart} onClick={onViewCart}>View cart</div>
@@ -143,6 +138,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
title={item.title} title={item.title}
onEditClick={onEdit} onEditClick={onEdit}
isEdit={doneSteps.includes(item.id)} isEdit={doneSteps.includes(item.id)}
onClose={onConfirm}
note={note} note={note}
disableEdit={customer && item.id === CheckoutStep.CustomerInfo} disableEdit={customer && item.id === CheckoutStep.CustomerInfo}
> >

2
src/utils/funtion.utils.ts
View File

@@ -1,6 +1,6 @@
import { Collection } from '@commerce/types/collection'; import { Collection } from '@commerce/types/collection';
import { Facet } from "@commerce/types/facet"; import { Facet } from "@commerce/types/facet";
import { Product, ProductCard, ProductOption, ProductOptionValues } from "@commerce/types/product"; import { Product, ProductCard, ProductOptionValues } from "@commerce/types/product";
import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d'; import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, FACET, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils"; import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, FACET, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
import { PromiseWithKey, SelectedOptions, SortOrder } from "./types.utils"; import { PromiseWithKey, SelectedOptions, SortOrder } from "./types.utils";