Merge pull request #83 from thomasKn/thomas/fv-187-theme-content-int-strings

Add theme content strings

Author: thomasKn

Diff for: app/components/cart/CartDetails.tsx

@@ -5,6 +5,7 @@ import {Money} from '@shopify/hydrogen';
 import {AnimatePresence} from 'framer-motion';
 import {useMemo} from 'react';
 
+import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {cn} from '~/lib/utils';
 
 import type {CartLayouts} from './Cart';
@@ -95,14 +96,14 @@ function CartDetailsLayout(props: {
 }
 
 function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
+  const {themeContent} = useSanityThemeContent();
   if (!checkoutUrl) return null;
 
   return (
     <div className="mt-2 flex flex-col">
       <Button asChild>
         <a href={checkoutUrl} target="_self">
-          {/* Todo => add theme content string */}
-          Continue to Checkout
+          {themeContent?.cart.proceedToCheckout}
         </a>
       </Button>
       {/* @todo: <CartShopPayButton cart={cart} /> */}
@@ -119,6 +120,8 @@ function CartSummary({
   cost: CartApiQueryFragment['cost'];
   layout: CartLayouts;
 }) {
+  const {themeContent} = useSanityThemeContent();
+
   const Content = useMemo(
     () => (
       <div
@@ -128,14 +131,10 @@ function CartSummary({
           layout === 'page' && 'grid gap-6',
         ])}
       >
-        <h2 className="sr-only">
-          {/* Todo => add theme content string */}
-          Order summary
-        </h2>
+        <h2 className="sr-only">{themeContent?.cart.orderSummary}</h2>
         <dl className="grid">
           <div className="flex items-center justify-between font-medium">
-            {/* Todo => add theme content string */}
-            <span>Subtotal</span>
+            <span>{themeContent?.cart.subtotal}</span>
             <span>
               {cost?.subtotalAmount?.amount ? (
                 <Money className="tabular-nums" data={cost?.subtotalAmount} />
@@ -148,7 +147,7 @@ function CartSummary({
         {children}
       </div>
     ),
-    [children, cost?.subtotalAmount, layout],
+    [children, cost?.subtotalAmount, layout, themeContent],
   );
 
   if (layout === 'drawer') {

Diff for: app/components/cart/CartDiscounts.tsx

@@ -3,6 +3,7 @@ import type {Cart as CartType} from '@shopify/hydrogen/storefront-api-types';
 import {CartForm} from '@shopify/hydrogen';
 
 import {useLocalePath} from '~/hooks/useLocalePath';
+import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {cn} from '~/lib/utils';
 
 import {IconRemove} from '../icons/IconRemove';
@@ -21,6 +22,7 @@ export function CartDiscounts({
   discountCodes: CartType['discountCodes'];
   layout: 'drawer' | 'page';
 }) {
+  const {themeContent} = useSanityThemeContent();
   const codes: string[] =
     discountCodes
       ?.filter((discount) => discount.applicable)
@@ -31,8 +33,7 @@ export function CartDiscounts({
       {/* Have existing discount, display it with a remove option */}
       <dl className={codes && codes.length !== 0 ? 'grid' : 'hidden'}>
         <div className="flex items-center justify-between font-medium">
-          {/* Todo => add theme content string */}
-          <span>Discount(s)</span>
+          <span>{themeContent?.cart.discounts}</span>
           <div className="flex items-center justify-between">
             <UpdateDiscountForm>
               <button className="[&>*]:pointer-events-none">
@@ -56,14 +57,16 @@ export function CartDiscounts({
             'items-center justify-between gap-4',
           )}
         >
-          {/* Todo => add theme content string */}
-          <Input name="discountCode" placeholder="Discount code" type="text" />
+          <Input
+            name="discountCode"
+            placeholder={themeContent?.cart.discountCode || ''}
+            type="text"
+          />
           <Button
             className={cn(layout === 'page' && 'w-full lg:w-auto')}
             variant="outline"
           >
-            {/* Todo => add theme content string */}
-            Apply Discount
+            {themeContent?.cart.applyDiscount}
           </Button>
         </div>
       </UpdateDiscountForm>

Diff for: app/components/cart/CartEmpty.tsx

@@ -3,6 +3,7 @@ import {cx} from 'class-variance-authority';
 import {AnimatePresence, m} from 'framer-motion';
 
 import {useLocalePath} from '~/hooks/useLocalePath';
+import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {cn} from '~/lib/utils';
 
 import type {CartLayouts} from './Cart';
@@ -19,6 +20,7 @@ export function CartEmpty({
   onClose?: () => void;
   show: boolean;
 }) {
+  const {themeContent} = useSanityThemeContent();
   const container = {
     drawer: cx([
       'p-5 content-start gap-4 h-full pb-8 flex justify-center items-center md:gap-12 md:pb-12',
@@ -30,9 +32,6 @@ export function CartEmpty({
 
   const collectionsPath = useLocalePath({path: '/collections'});
 
-  // Todo => add theme content string
-  const label = 'Continue shopping';
-
   return (
     <AnimatePresence>
       {show && (
@@ -54,20 +53,18 @@ export function CartEmpty({
               layout === 'drawer' && 'justify-center text-center',
             ])}
           >
-            <span>
-              {/* Todo => add theme content string */}
-              Looks like you haven&rsquo;t added anything yet, let&rsquo;s get
-              you started!
-            </span>
+            <span>{themeContent?.cart.emptyMessage}</span>
             <div>
               {layout === 'page' ? (
                 <Button asChild>
                   <Link prefetch="intent" to={collectionsPath}>
-                    {label}
+                    {themeContent?.cart.continueShopping}
                   </Link>
                 </Button>
               ) : (
-                <Button onClick={onClose}>{label}</Button>
+                <Button onClick={onClose}>
+                  {themeContent?.cart.continueShopping}
+                </Button>
               )}
             </div>
             {/* Todo => add FeaturedProducts */}

Diff for: app/components/cart/CartLineItem.tsx

@@ -12,6 +12,7 @@ import {
 } from '@shopify/hydrogen';
 
 import {useLocalePath} from '~/hooks/useLocalePath';
+import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {cn} from '~/lib/utils';
 
 import type {CartLayouts} from './Cart';
@@ -147,6 +148,7 @@ export function CartLineItem({
 
 function ItemRemoveButton({lineId}: {lineId: CartLineFragment['id']}) {
   const cartPath = useLocalePath({path: '/cart'});
+  const {themeContent} = useSanityThemeContent();
 
   return (
     <CartForm
@@ -165,8 +167,7 @@ function ItemRemoveButton({lineId}: {lineId: CartLineFragment['id']}) {
         )}
         type="submit"
       >
-        {/* Todo => add theme content string */}
-        <span className="sr-only">Remove</span>
+        <span className="sr-only">{themeContent?.cart.remove}</span>
         <IconRemove aria-hidden="true" />
       </IconButton>
 
@@ -230,6 +231,7 @@ function UpdateCartForm({
 function CartLineQuantityAdjust({line}: {line: CartLineFragment}) {
   const optimisticId = line?.id;
   const optimisticData = useOptimisticData<OptimisticData>(optimisticId);
+  const {themeContent} = useSanityThemeContent();
 
   if (!line || typeof line?.quantity === 'undefined') return null;
 
@@ -242,8 +244,7 @@ function CartLineQuantityAdjust({line}: {line: CartLineFragment}) {
   return (
     <>
       <label className="sr-only" htmlFor={`quantity-${lineId}`}>
-        {/* Todo => add theme content string */}
-        Quantity, {optimisticQuantity}
+        {themeContent?.cart.quantity}, {optimisticQuantity}
       </label>
       <QuantitySelector>
         <UpdateCartForm lines={[{id: lineId, quantity: prevQuantity}]}>

Diff for: app/components/collection/Sort.tsx

@@ -13,6 +13,7 @@ import {
   useColorsCssVars,
 } from '~/hooks/useColorsCssVars';
 import {useOptimisticNavigationData} from '~/hooks/useOptimisticNavigationData';
+import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {cn} from '~/lib/utils';
 
 import type {SortParam} from './SortFilterLayout';
@@ -39,29 +40,32 @@ function useSortItems() {
   const {optimisticData: clearFilters} =
     useOptimisticNavigationData<boolean>('clear-all-filters');
   const {optimisticData} = useOptimisticNavigationData<SortParam>('sort-radio');
+  const {themeContent} = useSanityThemeContent();
 
-  // Todo => add strings to themeContent
   const items: SortItem[] = useMemo(
     () => [
-      {key: 'featured', label: 'Featured'},
+      {
+        key: 'featured',
+        label: themeContent?.collection?.sortFeatured || 'Featured',
+      },
       {
         key: 'price-low-high',
-        label: 'Price: Low - High',
+        label: themeContent?.collection?.sortLowHigh || 'Price: Low - High',
       },
       {
         key: 'price-high-low',
-        label: 'Price: High - Low',
+        label: themeContent?.collection?.sortHighLow || 'Price: High - Low',
       },
       {
         key: 'best-selling',
-        label: 'Best Selling',
+        label: themeContent?.collection?.sortBestSelling || 'Best Selling',
       },
       {
         key: 'newest',
-        label: 'Newest',
+        label: themeContent?.collection?.sortNewest || 'Newest',
       },
     ],
-    [],
+    [themeContent],
   );
 
   if (optimisticData) {
@@ -88,17 +92,15 @@ function useSortItems() {
 export function DesktopSort(props: {sectionSettings?: CmsSectionSettings}) {
   const colorsCssVars = useColorsCssVars({settings: props.sectionSettings});
   const {activeItem, items} = useSortItems();
+  const {themeContent} = useSanityThemeContent();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className={cn(iconButtonClass, 'w-auto gap-1 px-2')}>
         <IconSort strokeWidth={1} />
         <span>
           <span className="px-2 font-medium">
-            {/*
-              // Todo => add strings to themeContent 
-            */}
-            Sort by:
+            {themeContent?.collection?.sortBy}
           </span>
           <span>{(activeItem || items[0]).label}</span>
         </span>
@@ -117,17 +119,15 @@ export function DesktopSort(props: {sectionSettings?: CmsSectionSettings}) {
 
 export function MobileSort() {
   const {items} = useSortItems();
+  const {themeContent} = useSanityThemeContent();
 
   return (
     <div>
       <div className="flex items-center gap-3">
         <IconSort strokeWidth={1} />
         <span>
           <span className="px-2 text-xl font-medium">
-            {/*
-              // Todo => add strings to themeContent 
-            */}
-            Sort by:
+            {themeContent?.collection?.sortBy}
           </span>
         </span>
       </div>

Diff for: app/components/collection/SortFilterLayout.tsx

@@ -9,6 +9,7 @@ import {useState} from 'react';
 import type {CmsSectionSettings} from '~/hooks/useColorsCssVars';
 
 import {useOptimisticNavigationData} from '~/hooks/useOptimisticNavigationData';
+import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 import {cn} from '~/lib/utils';
 
 import {IconFilters} from '../icons/IconFilters';
@@ -64,6 +65,7 @@ export function SortFilter({
   const [isOpen, setIsOpen] = useState(false);
   const {optimisticData, pending} =
     useOptimisticNavigationData<boolean>('clear-all-filters');
+  const {themeContent} = useSanityThemeContent();
 
   // Here we can optimistically clear all filters and close DrawerFooter
   if (optimisticData) {
@@ -93,8 +95,7 @@ export function SortFilter({
                   onClick={onClearAllFilters}
                   variant="ghost"
                 >
-                  {/* // Todo => add strings to themeContent */}
-                  <span>Clear all filters</span>
+                  <span>{themeContent?.collection?.clearFilters}</span>
                   <span className="tabular-nums">
                     ({appliedFilters.length})
                   </span>
@@ -146,8 +147,8 @@ function MobileDrawer({
   productsCount: number;
 }) {
   const [open, setOpen] = useState(false);
-  // Todo => add strings to themeContent
-  const heading = 'Filter and Sort';
+  const {themeContent} = useSanityThemeContent();
+  const heading = themeContent?.collection?.filterAndSort;
   const {pending} = useOptimisticNavigationData<boolean>('clear-all-filters');
 
   return (
@@ -218,15 +219,13 @@ function MobileDrawer({
                       onClick={onClearAllFilters}
                       variant="ghost"
                     >
-                      {/* // Todo => add strings to themeContent */}
-                      <span>Clear</span>
+                      <span>{themeContent?.collection?.clear}</span>
                       <span className="tabular-nums">
                         ({appliedFilters.length})
                       </span>
                     </Button>
                     <Button onClick={() => setOpen(false)}>
-                      {/* // Todo => add strings to themeContent */}
-                      Apply
+                      {themeContent?.collection?.apply}
                     </Button>
                   </DrawerFooter>
                 </m.div>

Diff for: app/components/sanity/SanityImage.tsx

@@ -95,7 +95,6 @@ export function SanityImage({
     .join(', ')
     .concat(`, ${urlDefault} ${data.width}w`);
 
-  // Todo => Global image border-radius setting should apply to the wrapper <span/>
   // No padding should be applied to the wrapper <span/> or the <img/> tag to avoid blurry LQIP becoming visible
   return (
     <span

Diff for: app/components/sections/CollectionListSection.tsx

@@ -86,11 +86,7 @@ function AwaitCollectionList(props: {
 
   return (
     <Suspense fallback={props.fallback}>
-      <Await
-        // Todo => Add an error component
-        errorElement={props.error}
-        resolve={collectionListPromise}
-      >
+      <Await errorElement={props.error} resolve={collectionListPromise}>
         {(data) => {
           // Resolve the collection list data from Shopify with the gids from Sanity
           let collections: