feat: manual gateway checkout

package.json

@@ -22,7 +22,7 @@
     "@elasticpath/react-shopper-hooks": "0.1.1",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@moltin/sdk": "^18.1.0",
+    "@moltin/sdk": "^20.0.0",
     "@stripe/react-stripe-js": "^1.11.0",
     "@stripe/stripe-js": "^1.38.1",
     "@types/react-stripe-elements": "^6.0.6",

src/components/checkout/ManualTypeCheckoutForm.tsx

@@ -0,0 +1,190 @@
+import { Form, Formik } from "formik";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  Grid,
+  GridItem,
+  Heading,
+  Flex,
+  Box,
+} from "@chakra-ui/react";
+import {
+  CheckoutForm as CheckoutFormType,
+  checkoutFormSchema,
+} from "./form-schema/checkout-form-schema";
+import { ChevronRightIcon } from "@chakra-ui/icons";
+import { ConfirmPaymentResponse, PaymentRequestBody } from "@moltin/sdk";
+import ShippingForm from "./ShippingForm";
+import CustomFormControl from "./CustomFormControl";
+import BillingForm from "./BillingForm";
+import { useCart } from "@elasticpath/react-shopper-hooks";
+import { captureOrder, makePayment } from "../../services/checkout";
+import { useState } from "react";
+
+const initialValues: Partial<CheckoutFormType> = {
+  personal: {
+    email: "",
+  },
+  sameAsShipping: true,
+  shippingAddress: {
+    first_name: "",
+    last_name: "",
+    line_1: "",
+    country: "",
+    region: "",
+    postcode: "",
+  },
+};
+
+interface ICheckoutForm {
+  checkout: ReturnType<typeof useCart>["stripeIntent"];
+  showCompletedOrder: (
+    paymentResponse: ConfirmPaymentResponse,
+    checkoutForm: CheckoutFormType
+  ) => void;
+}
+
+const manualPaymentRequest: PaymentRequestBody = {
+  gateway: "manual",
+  method: "authorize",
+};
+
+export default function ManualTypeCheckoutForm({
+  checkout,
+  showCompletedOrder,
+}: ICheckoutForm): JSX.Element {
+  const [paymentResponse, setPaymentResponse] =
+    useState<ConfirmPaymentResponse>();
+  const [checkoutForm, setCheckoutForm] = useState<CheckoutFormType>();
+
+  const steps = [
+    {
+      name: "Cart",
+      isActive: true,
+      handler: () => paymentResponse && setPaymentResponse(undefined),
+    },
+    { name: "Billing Information", isActive: false },
+  ];
+
+  const onCompletedOrder = () => {
+    if (paymentResponse) {
+      captureOrder(
+        paymentResponse.data.relationships.order.data.id,
+        paymentResponse.data.id
+      ).then(() => showCompletedOrder(paymentResponse, checkoutForm!));
+    }
+  };
+
+  return (
+    <>
+      <Box mb={3}>
+        <Flex role="list" justifyContent="center">
+          {steps.map((step, stepIdx) => (
+            <Flex key={step.name} alignItems="center">
+              <Button
+                onClick={step.handler}
+                variant="text"
+                color={step.isActive ? "brand.primary" : ""}
+              >
+                {step.name}
+              </Button>
+
+              {stepIdx !== steps.length - 1 ? (
+                <ChevronRightIcon mx={4} />
+              ) : null}
+            </Flex>
+          ))}
+        </Flex>
+      </Box>
+
+      <Formik
+        initialValues={initialValues as CheckoutFormType}
+        validationSchema={checkoutFormSchema}
+        onSubmit={async (validatedValues) => {
+          const { personal, shippingAddress, billingAddress, sameAsShipping } =
+            validatedValues;
+          setCheckoutForm(validatedValues);
+
+          const orderResponse = await checkout(
+            personal.email,
+            shippingAddress,
+            sameAsShipping,
+            billingAddress ?? undefined
+          );
+
+          if (orderResponse?.data.id) {
+            const paymentResponse = await makePayment(
+              manualPaymentRequest,
+              orderResponse.data.id
+            );
+            setPaymentResponse(paymentResponse);
+          }
+        }}
+      >
+        {({ handleChange, values, isSubmitting }) => (
+          <Form>
+            <Grid gridTemplateRows="1fr" gap={10}>
+              <Heading as="h2" fontSize="lg" fontWeight="medium">
+                Contact Information
+              </Heading>
+              <GridItem>
+                <CustomFormControl
+                  id="email"
+                  type="email"
+                  name="personal.email"
+                  autoComplete="email"
+                  helperText="required for guest checkout"
+                  label="Email"
+                  isRequired={true}
+                />
+              </GridItem>
+              <Heading as="h2" fontSize="lg" fontWeight="medium">
+                Shipping Address
+              </Heading>
+              <GridItem>
+                <ShippingForm />
+              </GridItem>
+              <Heading as="h2" fontSize="lg" fontWeight="medium">
+                Billing Address
+              </Heading>
+              <GridItem>
+                <FormControl>
+                  <Checkbox
+                    id="same-as-shipping"
+                    name="sameAsShipping"
+                    onChange={handleChange}
+                    isChecked={values.sameAsShipping}
+                    colorScheme="blue"
+                    mb={4}
+                  >
+                    Same as shipping address?
+                  </Checkbox>
+                </FormControl>
+                {!values.sameAsShipping && <BillingForm />}
+              </GridItem>
+
+              <Button
+                justifySelf="right"
+                bg="brand.primary"
+                color="white"
+                _hover={{
+                  backgroundColor: "brand.highlight",
+                  boxShadow: "md",
+                }}
+                variant="solid"
+                type="submit"
+                isLoading={isSubmitting}
+                spinnerPlacement="end"
+                disabled={isSubmitting}
+                loadingText="Paying"
+              >
+                Checkout Now
+              </Button>
+            </Grid>
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+}