loyaltylion · clarkdave · Jul 8, 2025
diff --git a/app/components/CartLineItem.module.css b/app/components/CartLineItem.module.css
@@ -0,0 +1,11 @@
+.freeRewardBadge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.375rem;
+  background-color: #ecfdf5;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #047857;
+  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.2);
+}
diff --git a/app/components/CartLineItem.tsx b/app/components/CartLineItem.tsx
@@ -6,6 +6,7 @@ import {Link} from 'react-router';
 import {ProductPrice} from './ProductPrice';
 import {useAside} from './Aside';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import styles from './CartLineItem.module.css';
 
 type CartLine = OptimisticCartLine<CartApiQueryFragment>;
 
@@ -25,6 +26,10 @@ export function CartLineItem({
   const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
   const {close} = useAside();
 
+  const isFreeReward = (line?.attributes ?? []).some(
+    (x) => x.key === '__lion_sfp_id',
+  );
+
   return (
     <li key={id} className="cart-line">
       {image && (
@@ -52,7 +57,11 @@ export function CartLineItem({
             <strong>{product.title}</strong>
           </p>
         </Link>
-        <ProductPrice price={line?.cost?.totalAmount} />
+        {isFreeReward ? (
+          <span className={styles.freeRewardBadge}>FREE REWARD</span>
+        ) : (
+          <ProductPrice price={line?.cost?.totalAmount} />
+        )}
         <ul>
           {selectedOptions.map((option) => (
             <li key={option.name}>
@@ -62,7 +71,7 @@ export function CartLineItem({
             </li>
           ))}
         </ul>
-        <CartLineQuantity line={line} />
+        <CartLineQuantity line={line} isFreeReward={isFreeReward} />
       </div>
     </li>
   );
@@ -73,12 +82,26 @@ export function CartLineItem({
  * These controls are disabled when the line item is new, and the server
  * hasn't yet responded that it was successfully added to the cart.
  */
-function CartLineQuantity({line}: {line: CartLine}) {
+function CartLineQuantity({
+  line,
+  isFreeReward,
+}: {
+  line: CartLine;
+  isFreeReward: boolean;
+}) {
   if (!line || typeof line?.quantity === 'undefined') return null;
   const {id: lineId, quantity, isOptimistic} = line;
   const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
   const nextQuantity = Number((quantity + 1).toFixed(0));
 
+  if (isFreeReward) {
+    return (
+      <div className="cart-line-quantity">
+        <CartLineRemoveButton lineIds={[lineId]} disabled={!!isOptimistic} />
+      </div>
+    );
+  }
+
   return (
     <div className="cart-line-quantity">
       <small>Quantity: {quantity} &nbsp;&nbsp;</small>

diff --git a/app/components/CartMain.tsx b/app/components/CartMain.tsx
@@ -4,22 +4,31 @@ import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
 import {CartLineItem} from '~/components/CartLineItem';
 import {CartSummary} from './CartSummary';
+import {LoyaltylionData} from '~/lib/loyaltylion/fetchLoyaltylionData';
+import {useLoyaltylionCartUpdates} from '~/lib/loyaltylion/useLoyaltylionCartUpdates';
+import {AvailableProductRewards} from './loyaltylion/AvailableProductRewards';
 
 export type CartLayout = 'page' | 'aside';
 
 export type CartMainProps = {
   cart: CartApiQueryFragment | null;
   layout: CartLayout;
+  loyaltylion: Promise<LoyaltylionData | null>;
 };
 
 /**
  * The main cart component that displays the cart items and summary.
  * It is used by both the /cart route and the cart aside dialog.
  */
-export function CartMain({layout, cart: originalCart}: CartMainProps) {
+export function CartMain({
+  layout,
+  cart: originalCart,
+  loyaltylion,
+}: CartMainProps) {
   // The useOptimisticCart hook applies pending actions to the cart
   // so the user immediately sees feedback when they modify the cart.
   const cart = useOptimisticCart(originalCart);
+  useLoyaltylionCartUpdates(loyaltylion);
 
   const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
   const withDiscount =
@@ -41,6 +50,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
         </div>
         {cartHasItems && <CartSummary cart={cart} layout={layout} />}
       </div>
+      <AvailableProductRewards loyaltylion={loyaltylion} />
     </div>
   );
 }

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -7,12 +7,14 @@ import {
 } from '@shopify/hydrogen';
 import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
+import {LoyaltylionData} from '~/lib/loyaltylion/fetchLoyaltylionData';
 
 interface HeaderProps {
   header: HeaderQuery;
   cart: Promise<CartApiQueryFragment | null>;
   isLoggedIn: Promise<boolean>;
   publicStoreDomain: string;
+  loyaltylion: Promise<LoyaltylionData | null>;
 }
 
 type Viewport = 'desktop' | 'mobile';
@@ -22,6 +24,7 @@ export function Header({
   isLoggedIn,
   cart,
   publicStoreDomain,
+  loyaltylion,
 }: HeaderProps) {
   const {shop, menu} = header;
   return (
@@ -35,7 +38,11 @@ export function Header({
         primaryDomainUrl={header.shop.primaryDomain.url}
         publicStoreDomain={publicStoreDomain}
       />
-      <HeaderCtas isLoggedIn={isLoggedIn} cart={cart} />
+      <HeaderCtas
+        isLoggedIn={isLoggedIn}
+        cart={cart}
+        loyaltylion={loyaltylion}
+      />
     </header>
   );
 }
@@ -98,10 +105,39 @@ export function HeaderMenu({
 function HeaderCtas({
   isLoggedIn,
   cart,
-}: Pick<HeaderProps, 'isLoggedIn' | 'cart'>) {
+  loyaltylion,
+}: Pick<HeaderProps, 'isLoggedIn' | 'cart' | 'loyaltylion'>) {
   return (
     <nav className="header-ctas" role="navigation">
       <HeaderMenuMobileToggle />
+
+      <Suspense>
+        <Await resolve={loyaltylion}>
+          {(loyaltylion) => {
+            if (!loyaltylion) {
+              return null;
+            }
+
+            const {customer} = loyaltylion;
+
+            return (
+              <>
+                {customer && customer.state === 'enrolled' && (
+                  <NavLink
+                    prefetch="intent"
+                    to="/rewards"
+                    style={activeLinkStyle}
+                  >
+                    {Intl.NumberFormat().format(customer.points_approved)}{' '}
+                    points
+                  </NavLink>
+                )}
+              </>
+            );
+          }}
+        </Await>
+      </Suspense>
+
       <NavLink prefetch="intent" to="/account" style={activeLinkStyle}>
         <Suspense fallback="Sign in">
           <Await resolve={isLoggedIn} errorElement="Sign in">

diff --git a/app/components/PageLayout.tsx b/app/components/PageLayout.tsx
@@ -14,13 +14,15 @@ import {
   SearchFormPredictive,
 } from '~/components/SearchFormPredictive';
 import {SearchResultsPredictive} from '~/components/SearchResultsPredictive';
+import {LoyaltylionData} from '~/lib/loyaltylion/fetchLoyaltylionData';
 
 interface PageLayoutProps {
   cart: Promise<CartApiQueryFragment | null>;
   footer: Promise<FooterQuery | null>;
   header: HeaderQuery;
   isLoggedIn: Promise<boolean>;
   publicStoreDomain: string;
+  loyaltylion: Promise<LoyaltylionData | null>;
   children?: React.ReactNode;
 }
 
@@ -30,11 +32,12 @@ export function PageLayout({
   footer,
   header,
   isLoggedIn,
+  loyaltylion,
   publicStoreDomain,
 }: PageLayoutProps) {
   return (
     <Aside.Provider>
-      <CartAside cart={cart} />
+      <CartAside cart={cart} loyaltylion={loyaltylion} />
       <SearchAside />
       <MobileMenuAside header={header} publicStoreDomain={publicStoreDomain} />
       {header && (
@@ -43,6 +46,7 @@ export function PageLayout({
           cart={cart}
           isLoggedIn={isLoggedIn}
           publicStoreDomain={publicStoreDomain}
+          loyaltylion={loyaltylion}
         />
       )}
       <main>{children}</main>
@@ -55,13 +59,18 @@ export function PageLayout({
   );
 }
 
-function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
+function CartAside({
+  cart,
+  loyaltylion,
+}: Pick<PageLayoutProps, 'cart' | 'loyaltylion'>) {
   return (
     <Aside type="cart" heading="CART">
       <Suspense fallback={<p>Loading cart ...</p>}>
         <Await resolve={cart}>
           {(cart) => {
-            return <CartMain cart={cart} layout="aside" />;
+            return (
+              <CartMain cart={cart} layout="aside" loyaltylion={loyaltylion} />
+            );
           }}
         </Await>
       </Suspense>

diff --git a/app/components/loyaltylion/AvailableProductRewards.module.css b/app/components/loyaltylion/AvailableProductRewards.module.css
@@ -0,0 +1,17 @@
+.heading {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 10px;
+}
+
+.header {
+  margin: 0 0 10px 0;
+  padding: 0;
+}
+
+.productRewards {
+  margin-bottom: 10px;
+}
+
+.productRewardContainer {
+  margin-bottom: 10px;
+}
diff --git a/app/components/loyaltylion/AvailableProductRewards.tsx b/app/components/loyaltylion/AvailableProductRewards.tsx
@@ -0,0 +1,52 @@
+import {Suspense} from 'react';
+import {Await} from 'react-router';
+import {LoyaltylionData} from '~/lib/loyaltylion/fetchLoyaltylionData';
+import styles from './AvailableProductRewards.module.css';
+import {ProductReward} from './ProductReward';
+
+export type AvailableProductRewardsProps = {
+  loyaltylion: Promise<LoyaltylionData | null>;
+};
+
+export function AvailableProductRewards({
+  loyaltylion,
+}: AvailableProductRewardsProps) {
+  return (
+    <Suspense fallback={<p>Loading rewards...</p>}>
+      <Await resolve={loyaltylion}>
+        {(loyaltylion) => {
+          if (!loyaltylion) {
+            return null;
+          }
+
+          const {customer} = loyaltylion;
+
+          if (!customer || customer.state !== 'enrolled') {
+            return null;
+          }
+
+          const freeProductRewards = customer.available_rewards.filter(
+            (reward) => reward.kind === 'product_cart',
+          );
+
+          if (freeProductRewards.length === 0) {
+            return null;
+          }
+
+          return (
+            <>
+              <div className={styles.heading}>
+                <h3 className={styles.header}>Redeem rewards</h3>
+              </div>
+              <div className={styles.productRewards}>
+                {freeProductRewards.map((reward) => (
+                  <ProductReward key={reward.id} reward={reward} />
+                ))}
+              </div>
+            </>
+          );
+        }}
+      </Await>
+    </Suspense>
+  );
+}
diff --git a/app/components/loyaltylion/ProductReward.module.css b/app/components/loyaltylion/ProductReward.module.css
@@ -0,0 +1,37 @@
+.container {
+  display: grid;
+  grid-template-areas:
+    'image content'
+    'image content';
+  column-gap: 10px;
+  grid-template-columns: 1fr 10fr;
+}
+
+.image {
+  grid-area: image;
+}
+
+.content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+}
+
+.action {
+}
+
+.imagePlaceholder {
+  width: 64px;
+  height: 64px;
+  background-color: #f0f0f0;
+}
+
+.button {
+}
+
+.button:disabled {
+  opacity: 0.5;
+}