feat: add return to cart link below summary if present on order

Author: malessani

components/composite/OrderSummary/ReturnToCart/index.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link"
+
+import { CartLinkWrapper, LinkWrapper } from "./styled"
+
+interface Props {
+  cartUrl: string | undefined
+}
+
+export const ReturnToCart = ({ cartUrl }: Props) => {
+  if (!cartUrl) return <></>
+  return (
+    <CartLinkWrapper>
+      <Link href={cartUrl} passHref>
+        <LinkWrapper>
+          <>&lt;</> Return to cart
+        </LinkWrapper>
+      </Link>
+    </CartLinkWrapper>
+  )
+}

components/composite/OrderSummary/ReturnToCart/styled.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components"
+import tw from "twin.macro"
+
+export const CartLinkWrapper = styled.div`
+  ${tw`flex flex-row justify-between mt-7 pt-6 border-t`}
+`
+export const LinkWrapper = styled.a`
+  ${tw`text-xs font-bold border-b`}
+`

components/composite/OrderSummary/index.tsx

@@ -17,6 +17,7 @@ import { LINE_ITEMS_SHOPPABLE } from "components/utils/constants"
 
 import { CouponOrGiftCard } from "./CouponOrGiftCard"
 import { LineItemTypes } from "./LineItemTypes"
+import { ReturnToCart } from "./ReturnToCart"
 import {
   SummaryHeader,
   SummarySubTitle,
@@ -207,6 +208,7 @@ export const OrderSummary: React.FC<Props> = ({ appCtx, readonly }) => {
               className="text-xl font-extrabold"
             />
           </RecapLineTotal>
+          <ReturnToCart cartUrl={appCtx.cartUrl} />
         </AmountWrapper>
       </TotalWrapper>
     </Wrapper>

components/data/AppProvider/index.tsx

@@ -70,6 +70,7 @@ const initialState: AppStateData = {
   shippingCountryCodeLock: "",
   isComplete: false,
   returnUrl: "",
+  cartUrl: undefined,
   taxIncluded: false,
   shippingMethodName: undefined,
 }

components/data/AppProvider/utils.ts

@@ -55,6 +55,7 @@ export interface FetchOrderByIdResponse {
   isPaymentRequired: boolean
   isComplete: boolean
   returnUrl: string | undefined
+  cartUrl: string | undefined
   isCreditCard: boolean
   taxIncluded: boolean | undefined
   shippingMethodName: string | undefined
@@ -216,6 +217,7 @@ export const fetchOrder = async (cl: CommerceLayerClient, orderId: string) => {
         "customer_email",
         "status",
         "return_url",
+        "cart_url",
         "tax_included",
         "requires_billing_info",
         "total_amount_with_taxes_float",
@@ -323,6 +325,7 @@ export function calculateSettings(order: Order, isShipmentRequired: boolean) {
         }),
     ...checkPaymentMethod(order),
     returnUrl: order.return_url,
+    cartUrl: order.cart_url,
     taxIncluded: order.tax_included,
     requiresBillingInfo: order.requires_billing_info,
   }