imranhsayed / woo-next

:rocket: React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client
https://codeytek.com/course/woocommerce-with-react-course/
879 stars 260 forks source link

Checkout form code not seem to be working as is #83

Closed RobinGiel closed 3 years ago

RobinGiel commented 3 years ago

` const handleFormSubmit = async (event) => { event.preventDefault();

    // await handleStripeCheckout(input, cart?.products, setRequestError, clearCartMutation, setIsStripeOrderProcessing, setCreatedOrderData);

    /**
     * Validate Billing and Shipping Details
     *
     * Note:
     * 1. If billing is different than shipping address, only then validate billing.
     * 2. We are passing theBillingStates?.length and theShippingStates?.length, so that
     * the respective states should only be mandatory, if a country has states.
     */
    const billingValidationResult = input?.billingDifferentThanShipping ? validateAndSanitizeCheckoutForm(input?.billing, theBillingStates?.length) : {errors: null, isValid: true};
    const shippingValidationResult = validateAndSanitizeCheckoutForm(input?.shipping, theShippingStates?.length);

    if (!shippingValidationResult.isValid || !billingValidationResult.isValid) {
        setInput({
            ...input,
            billing: {...input.billing, errors: billingValidationResult.errors},
            shipping: {...input.shipping, errors: shippingValidationResult.errors}
        });

        return;
    }

    if ( 'stripe-mode' === input.paymentMethod ) {
        const createdOrderData = await handleStripeCheckout(input, cart?.products, setRequestError, clearCartMutation, setIsStripeOrderProcessing, setCreatedOrderData);
        return null;
    }

    const checkOutData = createCheckoutData(input);
    setRequestError(null);
    /**
     *  When order data is set, checkout mutation will automatically be called,
     *  because 'orderData' is added in useEffect as a dependency.
     */
    setOrderData(checkOutData);
};

`

this part of the code doesn't seem to be working with me. for using const createdOrderData is also something I would like to ask. If I use await handleStripeCheckout in the begin it will work, But I will miss all shipping details. Is there a solution to this problem, or maybe I'm doing something wrong?

RobinGiel commented 3 years ago

I fixed this bye doing this:

` if (!shippingValidationResult.isValid || !billingValidationResult.isValid) { setInput({ ...input, billing: {...input.billing, errors: billingValidationResult.errors}, shipping: {...input.shipping, errors: shippingValidationResult.errors} }) }

    if ( 'stripe-mode' === input.paymentMethod ) {
        await handleStripeCheckout(input, cart?.products, setRequestError, clearCartMutation, setIsStripeOrderProcessing, setCreatedOrderData);
        return null;
    }

`

RobinGiel commented 3 years ago

my checkout form validation was not updated