fix: update core charge appearance

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/cart/add-to-cart.tsx

@@ -10,10 +10,10 @@ import { useFormState, useFormStatus } from 'react-dom';
 
 function SubmitButton({
   availableForSale,
-  selectedVariantId
+  disabled
 }: {
   availableForSale: boolean;
-  selectedVariantId: string | undefined;
+  disabled: boolean;
 }) {
   const { pending } = useFormStatus();
   const buttonClasses =
@@ -28,7 +28,7 @@ function SubmitButton({
     );
   }
 
-  if (!selectedVariantId) {
+  if (disabled) {
     return (
       <button
         aria-label="Please select an option"
@@ -75,11 +75,15 @@ export function AddToCart({
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
+  const missingCoreVariantId = variant?.coreVariantId && !searchParams.has('coreVariantId');
   const actionWithVariant = formAction.bind(null, selectedVariantId);
 
   return (
     <form action={actionWithVariant}>
-      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+      <SubmitButton
+        availableForSale={availableForSale}
+        disabled={Boolean(!selectedVariantId || missingCoreVariantId)}
+      />
       <p aria-live="polite" className="sr-only" role="status">
         {message}
       </p>

components/cart/core-charge-badge.tsx

@@ -1,21 +0,0 @@
-import CoreCharge from 'components/core-charge';
-import { ProductVariant } from 'lib/shopify/types';
-
-type CoreChargeBadgeProps = {
-  selectedOptions: {
-    name: string;
-    value: string;
-  }[];
-  variants: ProductVariant[];
-};
-
-const CoreChargeBadge = ({ variants, selectedOptions }: CoreChargeBadgeProps) => {
-  const selectedOptionsMap = new Map(selectedOptions.map((option) => [option.name, option.value]));
-  const variant = variants.find((variant: ProductVariant) =>
-    variant.selectedOptions.every((option) => option.value === selectedOptionsMap.get(option.name))
-  );
-
-  return <CoreCharge variant={variant} sm />;
-};
-
-export default CoreChargeBadge;

components/cart/modal.tsx

@@ -10,7 +10,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import CloseCart from './close-cart';
-import CoreChargeBadge from './core-charge-badge';
 import { DeleteItemButton } from './delete-item-button';
 import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
@@ -136,17 +135,11 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                             </Link>
                           </div>
                           <div className="ml-20 flex flex-col gap-2">
-                            <div className="flex flex-row items-center gap-2">
-                              <Price
-                                className="font-semibold"
-                                amount={item.cost.totalAmount.amount}
-                                currencyCode={item.cost.totalAmount.currencyCode}
-                              />
-                              <CoreChargeBadge
-                                variants={item.merchandise.product.variants}
-                                selectedOptions={item.merchandise.selectedOptions}
-                              />
-                            </div>
+                            <Price
+                              className="font-semibold"
+                              amount={item.cost.totalAmount.amount}
+                              currencyCode={item.cost.totalAmount.currencyCode}
+                            />
                             <div className="flex h-9 w-fit flex-row items-center rounded-sm border border-neutral-300 dark:border-neutral-700">
                               <EditItemQuantityButton item={item} type="minus" />
                               <p className="w-6 text-center">