diff --git a/app/account/(orders)/page.tsx b/app/account/(orders)/page.tsx
index 03fa41fd7..c3286a12f 100644
--- a/app/account/(orders)/page.tsx
+++ b/app/account/(orders)/page.tsx
@@ -1,18 +1,17 @@
import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import OrderConfirmation from 'components/orders/order-confirmation';
import ActivateWarranty from 'components/orders/activate-warranty';
import MobileOrderActions from 'components/orders/mobile-order-actions';
import OrdersHeader from 'components/orders/orders-header';
import Price from 'components/price';
-import { getCustomerOrders, getOrdersMetafields } from 'lib/shopify';
-import { toPrintDate } from 'lib/utils';
+import { getCustomerOrders } from 'lib/shopify';
+import { isBeforeToday, toPrintDate } from 'lib/utils';
import Image from 'next/image';
import Link from 'next/link';
+import { Button } from 'components/ui';
export default async function AccountPage() {
- const [orders, ordersMetafields] = await Promise.all([
- getCustomerOrders(),
- getOrdersMetafields()
- ]);
+ const orders = await getCustomerOrders();
return (
@@ -54,17 +53,19 @@ export default async function AccountPage() {
)}
-
+
-
-
View Order
-
{order.normalizedId}
+
+
+ View Order
+ {order.normalizedId}
+
-
+ {!isBeforeToday(order?.warrantyActivationDeadline) && (
+
+ )}
+ {!order.orderConfirmation &&
}
diff --git a/app/api/orders/confirmation/route.ts b/app/api/orders/confirmation/route.ts
new file mode 100644
index 000000000..7fe51f09e
--- /dev/null
+++ b/app/api/orders/confirmation/route.ts
@@ -0,0 +1,7 @@
+import { getOrderConfirmationContent } from 'lib/shopify';
+
+export async function GET() {
+ const data = await getOrderConfirmationContent();
+
+ return Response.json({ ...data });
+}
diff --git a/components/orders/actions.tsx b/components/orders/actions.tsx
new file mode 100644
index 000000000..343aeeb54
--- /dev/null
+++ b/components/orders/actions.tsx
@@ -0,0 +1,107 @@
+'use server';
+
+import { renderToBuffer } from '@react-pdf/renderer';
+import OrderConfirmationPdf from 'components/orders/order-confirmation-pdf';
+import { handleUploadFile } from 'components/form/file-input/actions';
+import { TAGS } from 'lib/constants';
+import { updateOrderMetafields } from 'lib/shopify';
+import { Order, OrderConfirmationContent } from 'lib/shopify/types';
+import { revalidateTag } from 'next/cache';
+
+export const activateWarranty = async (orderId: string, formData: FormData) => {
+ let odometerFileId = null;
+ let installationFileId = null;
+ const odometerFile = formData.get('warranty_activation_odometer');
+ const installationFile = formData.get('warranty_activation_installation');
+ if (odometerFile) {
+ odometerFileId = await handleUploadFile({ file: odometerFile as File });
+ }
+
+ if (installationFile) {
+ installationFileId = await handleUploadFile({ file: installationFile as File });
+ }
+
+ const rawFormData = [
+ { key: 'warranty_activation_odometer', value: odometerFileId, type: 'file_reference' },
+ { key: 'warranty_activation_installation', value: installationFileId, type: 'file_reference' },
+ {
+ key: 'warranty_activation_mileage',
+ value: formData.get('warranty_activation_mileage') as string | null,
+ type: 'number_integer'
+ },
+ {
+ key: 'warranty_activation_vin',
+ value: formData.get('warranty_activation_vin') as string | null,
+ type: 'single_line_text_field'
+ }
+ ];
+
+ try {
+ await updateOrderMetafields({
+ orderId,
+ metafields: rawFormData
+ });
+
+ revalidateTag(TAGS.orderMetafields);
+ } catch (error) {
+ console.log('activateWarranty action', error);
+ }
+};
+
+async function generateOrderConfirmationPDF(
+ order: Order,
+ content: OrderConfirmationContent,
+ signature1: string,
+ signature2: string,
+ signDate: string
+) {
+ return renderToBuffer(
+
+ );
+}
+
+type ConfirmOrderOptions = {
+ order: Order;
+ content: OrderConfirmationContent;
+ formData: FormData;
+};
+
+export const confirmOrder = async ({ order, content, formData }: ConfirmOrderOptions) => {
+ const signature1 = formData.get('signature1') as string;
+ const signature2 = formData.get('signature2') as string;
+ const signDate = formData.get('date') as string;
+
+ const pdfBuffer = await generateOrderConfirmationPDF(
+ order,
+ content,
+ signature1,
+ signature2,
+ signDate
+ );
+
+ const fileName = `${new Date().getTime()}-${order.name}-signaturePdf.pdf`;
+ const file = new File([pdfBuffer], fileName, { type: 'application/pdf' });
+
+ const confirmationPDFId = await handleUploadFile({ file });
+
+ const rawFormData = [
+ { key: 'customer_confirmation', value: confirmationPDFId, type: 'file_reference' }
+ ];
+
+ try {
+ await updateOrderMetafields({
+ orderId: order.id,
+ metafields: rawFormData
+ });
+
+ revalidateTag(TAGS.orderMetafields);
+ } catch (error) {
+ console.log('activateWarranty action', error);
+ }
+};
diff --git a/components/orders/activate-warranty.tsx b/components/orders/activate-warranty.tsx
index b98c4cac2..35a7b9b8f 100644
--- a/components/orders/activate-warranty.tsx
+++ b/components/orders/activate-warranty.tsx
@@ -1,6 +1,6 @@
'use client';
-import { Order, ShopifyOrderMetafield, WarrantyStatus } from 'lib/shopify/types';
+import { Order, WarrantyStatus } from 'lib/shopify/types';
import { isBeforeToday } from 'lib/utils';
import { useState } from 'react';
import ActivateWarrantyModal from './activate-warranty-modal';
@@ -8,13 +8,12 @@ import WarrantyActivatedBadge from './warranty-activated-badge';
type ActivateWarrantyModalProps = {
order: Order;
- orderMetafields?: ShopifyOrderMetafield;
};
-const ActivateWarranty = ({ order, orderMetafields }: ActivateWarrantyModalProps) => {
+const ActivateWarranty = ({ order }: ActivateWarrantyModalProps) => {
const [isOpen, setIsOpen] = useState(false);
- const isWarrantyActivated = orderMetafields?.warrantyStatus?.value === WarrantyStatus.Activated;
- const isPassDeadline = isBeforeToday(orderMetafields?.warrantyActivationDeadline?.value);
+ const isWarrantyActivated = order?.warrantyStatus === WarrantyStatus.Activated;
+ const isPassDeadline = isBeforeToday(order?.warrantyActivationDeadline?.value);
if (isWarrantyActivated) {
return
;
@@ -32,12 +31,7 @@ const ActivateWarranty = ({ order, orderMetafields }: ActivateWarrantyModalProps
>
Activate Warranty
-
setIsOpen(false)}
- orderId={order.id}
- orderMetafields={orderMetafields}
- />
+ setIsOpen(false)} orderId={order.id} />
);
};
diff --git a/components/orders/mobile-order-actions.tsx b/components/orders/mobile-order-actions.tsx
index e49b01463..7ddfdb232 100644
--- a/components/orders/mobile-order-actions.tsx
+++ b/components/orders/mobile-order-actions.tsx
@@ -1,24 +1,24 @@
'use client';
+import dynamic from 'next/dynamic';
import { Button, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
import clsx from 'clsx';
-import { Order, ShopifyOrderMetafield, WarrantyStatus } from 'lib/shopify/types';
+import { Order, WarrantyStatus } from 'lib/shopify/types';
import { isBeforeToday } from 'lib/utils';
import Link from 'next/link';
import { useState } from 'react';
import ActivateWarrantyModal from './activate-warranty-modal';
-const MobileOrderActions = ({
- order,
- orderMetafields
-}: {
- order: Order;
- orderMetafields?: ShopifyOrderMetafield;
-}) => {
- const [isOpen, setIsOpen] = useState(false);
- const isWarrantyActivated = orderMetafields?.warrantyStatus?.value === WarrantyStatus.Activated;
- const isPassDeadline = isBeforeToday(orderMetafields?.warrantyActivationDeadline?.value);
+const OrderConfirmationModal = dynamic(() => import('./order-confirmation-modal'));
+
+const MobileOrderActions = ({ order }: { order: Order }) => {
+ const [isWarrantyOpen, setIsWarrantyOpen] = useState(false);
+ const [isOrderConfirmaionOpen, setIsOrderConfirmationOpen] = useState(false);
+
+ const isWarrantyActivated = order?.warrantyStatus === WarrantyStatus.Activated;
+ const isPassDeadline = isBeforeToday(order?.warrantyActivationDeadline);
+ const isOrderConfirmed = order?.orderConfirmation;
return (
<>
@@ -56,22 +56,43 @@ const MobileOrderActions = ({
focus ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'flex w-full px-4 py-2 text-sm'
)}
- onClick={() => setIsOpen(true)}
+ onClick={() => setIsWarrantyOpen(true)}
>
Activate Warranty
)}
)}
+ {!isOrderConfirmed && (
+
+ {({ focus }) => (
+ setIsOrderConfirmationOpen(true)}
+ >
+ Confirm Order
+
+ )}
+
+ )}