>
);
}
diff --git a/components/product/product-details.tsx b/components/product/product-details.tsx
new file mode 100644
index 000000000..e56ca27ea
--- /dev/null
+++ b/components/product/product-details.tsx
@@ -0,0 +1,51 @@
+import {
+ BeakerIcon,
+ BoltIcon,
+ CogIcon,
+ CpuChipIcon,
+ CubeTransparentIcon
+} from '@heroicons/react/24/outline';
+import { Product } from 'lib/shopify/types';
+
+const ProductDetails = ({ product }: { product: Product }) => {
+ return (
+
+
Details
+
+ {product.transmissionType && (
+
+
+ {product.transmissionType}
+
+ )}
+
+ {product.transmissionSpeeds && product.transmissionSpeeds.length && (
+
+
+ {`${product.transmissionSpeeds[0]}-Speed`}
+
+ )}
+ {product.driveType && (
+
+
+ {product.driveType}
+
+ )}
+ {product.engineCylinders?.length && (
+
+
+ {`${product.engineCylinders[0]} Cylinders`}
+
+ )}
+ {product.transmissionCode?.length && (
+
+
+ {product.transmissionCode[0]}
+
+ )}
+
+
+ );
+};
+
+export default ProductDetails;
diff --git a/components/product/special-offer.tsx b/components/product/special-offer.tsx
index 1cdb9a2e7..5bc8bc933 100644
--- a/components/product/special-offer.tsx
+++ b/components/product/special-offer.tsx
@@ -1,28 +1,71 @@
-import { CurrencyDollarIcon, ShieldCheckIcon, UsersIcon } from '@heroicons/react/24/outline';
-import { TruckIcon } from '@heroicons/react/24/solid';
+import {
+ ArrowPathIcon,
+ CurrencyDollarIcon,
+ ShieldCheckIcon,
+ StarIcon,
+ TruckIcon,
+ UsersIcon
+} from '@heroicons/react/24/outline';
const SpecialOffer = () => {
return (
- <>
-
-
- Flat Rate Shipping
- (Commercial Address)
-
-
- Up to 5 Years
- Unlimited Miles Warranty
-
-
- Excellent Customer Support
-
-
- No Core Charge for
- 30 days
-
+
+
+
+
+ Flat Rate Shipping
+
+ We offer a flat $299 shipping fee to commercial addresses
+
+
- >
+
+
+
+ Best Price Guarantee
+
+ We will match or beat any competitor's pricing
+
+
+
+
+
+
+ Unbeatable Warranty
+ Up to 5 years with unlimited miles
+
+
+
+
+
+
+ Excellent Support
+
+ End-to-end, expert care from our customer service team
+
+
+
+
+
+
+
+ Core Charge Waiver
+
+ Avoid the core charge by returning within 30 days
+
+
+
+
+
+
+
+ Free Core Return
+
+ Unlike competitors, we pay for the return of your core
+
+
+
+
);
};
diff --git a/components/product/vairant-details.tsx b/components/product/vairant-details.tsx
index 6687250b7..6afc8bfed 100644
--- a/components/product/vairant-details.tsx
+++ b/components/product/vairant-details.tsx
@@ -1,5 +1,6 @@
'use client';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
import Price from 'components/price';
import { Money, ProductVariant } from 'lib/shopify/types';
import { useSearchParams } from 'next/navigation';
@@ -20,17 +21,23 @@ const VariantDetails = ({ variants, defaultPrice }: VariantDetailsProps) => {
const price = variant?.price.amount || defaultPrice.amount;
return (
- <>
-
-
SKU: {variant?.sku || 'N/A'}
-
Condition: {variant?.condition || 'N/A'}
-
+
- >
+
+ {variant?.availableForSale ? (
+
+ In Stock
+
+ ) : (
+
Out of Stock
+ )}
+
Condition: {variant?.condition || 'N/A'}
+
+
);
};
diff --git a/lib/constants.ts b/lib/constants.ts
index 81e896f7f..4f1f8ee3a 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -51,3 +51,5 @@ export const CONDITIONS = {
Used: 'Used',
Remanufactured: 'Remanufactured'
};
+
+export const DELIVERY_OPTION_KEY = 'delivery';
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts
index 5f146e2f5..840843ddf 100644
--- a/lib/shopify/fragments/product.ts
+++ b/lib/shopify/fragments/product.ts
@@ -76,6 +76,21 @@ const productFragment = /* GraphQL */ `
fuelType: metafield(namespace: "custom", key: "fuel") {
value
}
+ transmissionType: metafield(namespace: "custom", key: "transmission_type") {
+ value
+ }
+ transmissionSpeeds: metafield(namespace: "custom", key: "transmission_speeds") {
+ value
+ }
+ driveType: metafield(namespace: "custom", key: "drive_type") {
+ value
+ }
+ transmissionCode: metafield(namespace: "custom", key: "transmission_code") {
+ value
+ }
+ transmissionTag: metafield(namespace: "custom", key: "transmission_tag") {
+ value
+ }
images(first: 20) {
edges {
node {
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index a44007ba9..7c02126c1 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -75,7 +75,8 @@ import {
ShopifyProductsOperation,
ShopifyRemoveFromCartOperation,
ShopifySetCartAttributesOperation,
- ShopifyUpdateCartOperation
+ ShopifyUpdateCartOperation,
+ TransmissionType
} from './types';
const domain = process.env.SHOPIFY_STORE_DOMAIN
@@ -287,7 +288,10 @@ const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] =>
}));
};
-const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
+const reshapeProduct = (
+ product: ShopifyProduct,
+ filterHiddenProducts: boolean = true
+): Product | undefined => {
if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
return undefined;
}
@@ -295,6 +299,13 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
const { images, variants, ...rest } = product;
return {
...rest,
+ transmissionCode: parseMetaFieldValue
(product.transmissionCode),
+ transmissionSpeeds: parseMetaFieldValue(product.transmissionSpeeds),
+ transmissionTag: parseMetaFieldValue(product.transmissionTag),
+ driveType: parseMetaFieldValue(product.driveType),
+ transmissionType: product.transmissionType
+ ? (product.transmissionType.value as TransmissionType)
+ : null,
engineCylinders: parseMetaFieldValue(product.engineCylinders),
fuelType: product.fuelType?.value || null,
images: reshapeImages(images, product.title),
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index e8b86f15e..a65eb7692 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -101,14 +101,29 @@ export type Metaobject = {
[key: string]: string;
};
+export type TransmissionType = 'Automatic' | 'Manual';
+
export type Product = Omit<
ShopifyProduct,
- 'variants' | 'images' | 'fuelType' | 'engineCylinders'
+ | 'variants'
+ | 'images'
+ | 'fuelType'
+ | 'engineCylinders'
+ | 'driveType'
+ | 'transmissionType'
+ | 'transmissionSpeeds'
+ | 'transmissionCode'
+ | 'transmissionTag'
> & {
variants: ProductVariant[];
images: Image[];
fuelType: string | null;
engineCylinders: number[] | null;
+ driveType: string[] | null;
+ transmissionType: TransmissionType | null;
+ transmissionSpeeds: number[] | null;
+ transmissionCode: string[] | null;
+ transmissionTag: string[] | null;
};
export type ProductOption = {
@@ -216,6 +231,11 @@ export type ShopifyProduct = {
};
engineCylinders: { value: string } | null;
fuelType: { value: string } | null;
+ transmissionType: { value: string } | null;
+ transmissionTag: { value: string } | null;
+ transmissionCode: { value: string } | null;
+ driveType: { value: string } | null;
+ transmissionSpeeds: { value: string } | null;
};
export type ShopifyCartOperation = {