Skip to content
This repository has been archived by the owner on Jul 14, 2022. It is now read-only.

Fix invalid handling of checkouts without shipping #571

Merged
merged 19 commits into from
Jan 27, 2020
Merged
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Cleanups and types updates in checkout
orzechdev committed Jan 21, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit f30e05cf8d50671deda6ddf81cf6d5b358a1813b
92 changes: 48 additions & 44 deletions src/checkout/components/Steps.tsx
Original file line number Diff line number Diff line change
@@ -3,13 +3,60 @@ import { generatePath, Link } from "react-router-dom";

import { useVariantsProducts } from "@sdk/react";

import { VariantsProducts_productVariants } from "@sdk/queries/types/VariantsProducts";
import { ShippingOptionSummary } from ".";
import { AddressSummary } from "../../components";
import { CartContext } from "../../components/CartProvider/context";
import { CheckoutStep } from "../context";
import { billingUrl, shippingAddressUrl, shippingOptionsUrl } from "../routes";
import { Checkout } from "../types/Checkout";

const steps = [
{
header: "Shipping Address",
path: shippingAddressUrl,
step: CheckoutStep.ShippingAddress,
type: "shipping",
},
{
header: "Shipping Method",
path: shippingOptionsUrl,
step: CheckoutStep.ShippingOption,
type: "shipping",
},
{
header: "Billing Address",
path: billingUrl,
step: CheckoutStep.BillingAddress,
},
{
header: "Payment Method",
step: CheckoutStep.Payment,
},
];

const getAvailableSteps = (
checkout: Checkout,
variantsProducts: VariantsProducts_productVariants
) => {
if (checkout && checkout.isShippingRequired) {
return steps;
} else if (checkout) {
return steps.filter(({ type }) => type !== "shipping");
} else if (variantsProducts) {
const isShippingRequired =
variantsProducts.edges &&
variantsProducts.edges.some(
({ node }) => node.product.productType.isShippingRequired
);
if (isShippingRequired) {
return steps;
}
return steps.filter(({ type }) => type !== "shipping");
}
return steps;
};

const getSummary = (
step: CheckoutStep,
checkout: Checkout
@@ -54,50 +101,7 @@ const Steps: React.FC<{
ids: cardLines ? cardLines.map(line => line.variantId) : [],
});

const steps = [
{
header: "Shipping Address",
path: shippingAddressUrl,
shippingContent: true,
step: CheckoutStep.ShippingAddress,
},
{
header: "Shipping Method",
path: shippingOptionsUrl,
shippingContent: true,
step: CheckoutStep.ShippingOption,
},
{
header: "Billing Address",
path: billingUrl,
step: CheckoutStep.BillingAddress,
},
{
header: "Payment Method",
step: CheckoutStep.Payment,
},
];

const getAvailableSteps = () => {
if (checkout && checkout.isShippingRequired) {
return steps;
} else if (checkout) {
return steps.filter(({ shippingContent }) => !shippingContent);
} else if (variantsProducts) {
const isShippingRequired =
variantsProducts.edges &&
variantsProducts.edges.some(
({ node }) => node.product.productType.isShippingRequired
);
if (isShippingRequired) {
return steps;
}
return steps.filter(({ shippingContent }) => !shippingContent);
}
return steps;
};

const availableSteps = getAvailableSteps();
const availableSteps = getAvailableSteps(checkout, variantsProducts);

const currentStepIndex = availableSteps.findIndex(
({ step }) => step === currentStep
9 changes: 2 additions & 7 deletions src/checkout/context.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createContext } from "react";

import { CardData } from "./types/CardData";
import { Checkout } from "./types/Checkout";

export enum CheckoutStep {
@@ -10,12 +11,6 @@ export enum CheckoutStep {
Review,
}

export interface CardData {
lastDigits: string;
ccType: string;
token: string;
}

export interface CheckoutContextInterface {
syncWithCart?: boolean;
syncUserCheckout?: boolean;
@@ -25,7 +20,7 @@ export interface CheckoutContextInterface {
loading?: boolean;
shippingAsBilling?: boolean;
/*
* @deprecated Use anything else
* @deprecated Use useCheckoutStepState hook to determine step instead.
*/
step?: CheckoutStep;
update?(checkoutData: CheckoutContextInterface): void;
13 changes: 9 additions & 4 deletions src/checkout/hooks/useCheckoutStepState.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { useEffect, useState } from "react";

import { VariantsProducts_productVariants } from "@sdk/queries/types/VariantsProducts";

import { CardData } from "../types/CardData";
import { Checkout } from "../types/Checkout";

export enum CheckoutStep {
ShippingAddress = 1,
ShippingOption,
@@ -9,10 +14,10 @@ export enum CheckoutStep {
}

export const useCheckoutStepState = (
checkout,
variantsProducts,
cardData,
dummyStatus
checkout: Checkout,
variantsProducts: VariantsProducts_productVariants,
cardData: CardData,
dummyStatus: string
): CheckoutStep => {
const isShippingRequiredForProducts = () => {
const isShippingRequired =
maarcingebala marked this conversation as resolved.
Show resolved Hide resolved
12 changes: 7 additions & 5 deletions src/checkout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import "./scss/index.scss";

import * as React from "react";
import { Redirect, withRouter } from "react-router";
import { Redirect, RouteComponentProps } from "react-router";
import { Link } from "react-router-dom";
import ReactSVG from "react-svg";

@@ -21,7 +21,11 @@ import { CheckoutContext } from "./context";
import { useCheckoutStepFromPath, useCheckoutStepState } from "./hooks";
import { baseUrl, Routes } from "./routes";

const CheckoutApp: React.FC<{ location }> = ({ location }) => {
const CheckoutApp: React.FC<RouteComponentProps> = ({
history: {
location: { pathname },
},
}) => {
const {
loading: checkoutLoading,
checkout,
@@ -37,8 +41,6 @@ const CheckoutApp: React.FC<{ location }> = ({ location }) => {
ids: cartLines ? cartLines.map(line => line.variantId) : [],
});

const { pathname } = location;

const step = useCheckoutStepState(
checkout,
variantsProducts,
@@ -87,4 +89,4 @@ const CheckoutApp: React.FC<{ location }> = ({ location }) => {
);
};

export default withRouter(CheckoutApp);
export default CheckoutApp;
12 changes: 7 additions & 5 deletions src/checkout/routes/CheckoutRouteDispatcher.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react";
import { generatePath, Redirect } from "react-router";
import { generatePath, Redirect, RouteComponentProps } from "react-router";

import { useVariantsProducts } from "@sdk/react";

@@ -15,11 +15,13 @@ import { CartContext } from "../../components/CartProvider/context";
import { CheckoutContext } from "../context";
import { CheckoutStep, useCheckoutStepState } from "../hooks";

export const CheckoutRouteDispatcher = ({ match }) => {
const {
export const CheckoutRouteDispatcher: React.FC<RouteComponentProps<{
token?: string;
}>> = ({
match: {
params: { token },
} = match;

},
}) => {
const {
loading: checkoutLoading,
checkout,
5 changes: 5 additions & 0 deletions src/checkout/types/CardData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export interface CardData {
lastDigits: string;
ccType: string;
token: string;
}
2 changes: 1 addition & 1 deletion src/checkout/views/Review/Summary.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import * as React from "react";
import ReactSVG from "react-svg";

import { AddressSummary } from "../../../components";
import { CardData } from "../../context";
import { CardData } from "../../types/CardData";
import { Checkout } from "../../types/Checkout";

import copyImg from "../../../images/copy.svg";