Updating things from comments on the PR

- Fixed some places where theme is used (both accessing the theme itself and importing stuff from the theme) - Fixed some issues where styling blocks weren't formatted correctly - Updated smoot-design and updated the discount field to use its TextField instead - Updated logic that handles the checkout form creation
mitodl · Dec 17, 2024 · 68c1043 · 68c1043
1 parent 6c53d85
commit 68c1043
Show file tree

Hide file tree

Showing 6 changed files with 254 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^9.0.0",
-    "@mitodl/smoot-design": "^1.0.1",
+    "@mitodl/smoot-design": "^1.1.1",
     "@mui/material": "^6.1.8",
     "@mui/material-nextjs": "^6.1.8",
     "@remixicon/react": "^4.2.0",

diff --git a/src/page-components/CartItem/CartItem.tsx b/src/page-components/CartItem/CartItem.tsx
@@ -1,13 +1,10 @@
 import { BasketItemWithProduct } from "@/services/ecommerce/generated/v0";
 import { styled } from "@mitodl/smoot-design";
 import { Card } from "../../components/Card/Card";
-import { createTheme } from "@mitodl/smoot-design";
 import { Typography } from "@mui/material";
 
 import StyledCard from "../../components/Card/StyledCard";
 
-const theme = createTheme();
-
 type CartItemProps = {
   item: BasketItemWithProduct;
 };
@@ -38,12 +35,12 @@ const CartItemProductMeta = styled.div`
 
 const CartItemProductPrice = styled.div`
   margin-left: auto;
-  ${{ ...theme.typography.h5 }},
+  ${({ theme }) => ({ ...theme.typography.h5 })};
 `;
 
 const CartItemProductSku = styled.div`
-  ${{ ...theme.typography.body1 }},
-  color: ${theme.custom.colors.silverGrayLight},
+  ${({ theme }) => ({ ...theme.typography.body1 })};
+  color: ${({ theme }) => theme.custom.colors.silverGrayLight};
 `;
 
 const CartItemProductDescription = styled.div`

diff --git a/src/page-components/CartSummary/CartSummary.tsx b/src/page-components/CartSummary/CartSummary.tsx
@@ -2,8 +2,7 @@
 import React from "react";
 import { Button, styled } from "@mitodl/smoot-design";
 import { Typography } from "@mui/material";
-import { createTheme } from "@mitodl/smoot-design";
-import { InputBase as Input } from "@mui/material";
+import { TextField } from "@mitodl/smoot-design";
 import { Card } from "../../components/Card/Card";
 import StyledCard from "../../components/Card/StyledCard";
 import CartSummaryItem, {
@@ -28,8 +27,6 @@ type CartSummaryDiscountProps = {
   systemSlug: string;
 };
 
-const theme = createTheme();
-
 const CartSummaryContainer = styled.div(() => ({
   width: "488px",
   padding: "0",
@@ -46,7 +43,7 @@ const CartSummaryReceiptContainer = styled.div(() => ({
 }));
 
 const CartSummaryTotalContainer = styled.div`
-  ${{ ...theme.typography.h5 }},
+  ${({ theme }) => ({ ...theme.typography.h5 })};
   margin-bottom: 20px;
   margin-top: 8px;
 `;
@@ -61,13 +58,20 @@ const CartSummaryTermsContainer = styled.div`
 
 const CartSummaryDiscountContainer = styled.div`
   margin-top: 20px;
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+`;
+
+const ApplyButton = styled(Button)`
+  margin-top: 20px;
 `;
 
 const CartSummaryDiscount: React.FC<CartSummaryDiscountProps> = ({
   systemSlug,
 }) => {
   const discountMutation = usePaymentsBasketAddDiscount();
-  const [discountCode, setDiscountCode] = React.useState<string>("");
+  const [discountCode, setDiscountCode] = React.useState("");
 
   const hndUpdateCode = (ev: React.ChangeEvent<HTMLInputElement>) => {
     setDiscountCode(ev.target.value);
@@ -82,28 +86,18 @@ const CartSummaryDiscount: React.FC<CartSummaryDiscountProps> = ({
 
   return (
     <CartSummaryDiscountContainer>
-      <label htmlFor="discountcode">Coupon Code</label>
-      <CartSummaryItemContainer>
-        <CartSummaryItemTitle>
-          <Input
-            size="small"
-            name="discountcode"
-            type="text"
-            onChange={hndUpdateCode}
-            error={discountMutation.isError}
-          />
-          {discountMutation.isError && (
-            <Typography variant="caption" color="error">
-              Invalid discount code
-            </Typography>
-          )}
-        </CartSummaryItemTitle>
-        <CartSummaryItemValue>
-          <Button variant="unstable_inverted" onClick={hndApplyDiscount}>
-            Apply
-          </Button>
-        </CartSummaryItemValue>
-      </CartSummaryItemContainer>
+      <TextField
+        size="small"
+        label="Coupon Code"
+        name="discountcode"
+        type="text"
+        onChange={hndUpdateCode}
+        error={discountMutation.isError}
+        helpText={discountMutation.isError ? "Invalid discount code" : ""}
+      />
+      <ApplyButton variant="unstable_inverted" onClick={hndApplyDiscount}>
+        Apply
+      </ApplyButton>
     </CartSummaryDiscountContainer>
   );
 };

diff --git a/src/page-components/PlaceOrderButton/PlaceOrderButton.tsx b/src/page-components/PlaceOrderButton/PlaceOrderButton.tsx
@@ -14,33 +14,30 @@ const PlaceOrderButton: React.FC<PlaceOrderButtonProps> = ({ systemSlug }) => {
   const checkoutMutation = usePaymentsCheckoutStartCheckout();
 
   const handleClick = async () => {
-    await checkoutMutation.mutateAsync({ system_slug: systemSlug });
+    const checkout = await checkoutMutation.mutateAsync({
+      system_slug: systemSlug,
+    });
 
-    if (checkoutMutation.isSuccess) {
-      // Construct the form based on the data we got back, then submit it.
+    // Construct the form based on the data we got back, then submit it.
 
-      const checkout = checkoutMutation.data;
+    console.log("checkout", checkout);
 
-      console.log("checkout", checkout);
+    const form = document.createElement("form");
+    form.method = "POST";
+    form.action = checkout.url;
 
-      const form = document.createElement("form");
-      form.method = "POST";
-      form.action = checkout.url;
+    Object.getOwnPropertyNames(checkout.payload).forEach((propName: string) => {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = propName;
+      input.value = checkout.payload[propName];
 
-      Object.getOwnPropertyNames(checkout.payload).forEach(
-        (propName: string) => {
-          const input = document.createElement("input");
-          input.type = "hidden";
-          input.name = propName;
-          input.value = checkout.payload[propName];
+      form.appendChild(input);
+    });
 
-          form.appendChild(input);
-        },
-      );
-
-      document.body.appendChild(form);
-      form.submit();
-    }
+    document.body.appendChild(form);
+    console.log(form);
+    form.submit();
   };
 
   return <CartPayButton onClick={handleClick}>Place Order</CartPayButton>;

diff --git a/src/services/ecommerce/payments/hooks.ts b/src/services/ecommerce/payments/hooks.ts
@@ -12,9 +12,11 @@ import type {
   PaymentsApiPaymentsCheckoutCreateRequest,
 } from "../generated/v0/api";
 
+type ExtraQueryOpts = Omit<UseQueryOptions, "queryKey" | "queryFn">;
+
 const usePaymentsBasketList = (
   options: PaymentsApiPaymentsBasketsListRequest,
-  opts: Omit<UseQueryOptions, "queryKey"> = {},
+  opts: ExtraQueryOpts = {},
 ) =>
   useQuery({
     queryKey: ["paymentsBaskets", options],
@@ -25,10 +27,7 @@ const usePaymentsBasketList = (
     ...opts,
   });
 
-const usePaymentsBasketRetrieve = (
-  id: number,
-  opts: Omit<UseQueryOptions, "queryKey"> = {},
-) => {
+const usePaymentsBasketRetrieve = (id: number, opts: ExtraQueryOpts = {}) => {
   return useQuery({
     queryKey: ["paymentsBaskets", id],
     queryFn: async () => {