crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-25 11:11:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add activate warranty to order details page

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-06-26 16:35:18 +07:00
parent d801de0cf1
commit 7f4fa09027
11 changed files with 71 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/orders/activate-warranty.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { Order, OrderMetafield, WarrantyStatus } from 'lib/shopify/types';
import { isBeforeToday } from 'lib/utils';
import { useState } from 'react';
import ActivateWarrantyModal from './activate-warranty-modal';
import WarrantyActivatedBadge from './warranty-activated-badge';
@@ -13,15 +14,20 @@ type ActivateWarrantyModalProps = {
const ActivateWarranty = ({ order, orderMetafields }: ActivateWarrantyModalProps) => {
const [isOpen, setIsOpen] = useState(false);
const isWarrantyActivated = orderMetafields?.warrantyStatus === WarrantyStatus.Activated;
const isPassDeadline = isBeforeToday(orderMetafields?.warrantyActivationDeadline);
if (isWarrantyActivated) {
return <WarrantyActivatedBadge />;
}
if (isPassDeadline) {
return null;
}
return (
<>
<button
className="flex items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
className="flex h-fit items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
onClick={() => setIsOpen(true)}
>
Activate Warranty

2
components/orders/warranty-activated-badge.tsx
View File

@@ -2,7 +2,7 @@ import { CheckCircleIcon } from '@heroicons/react/24/solid';
const WarrantyActivatedBadge = () => {
return (
<span className="inline-flex items-center gap-x-2 rounded-md bg-green-50 px-2.5 py-2 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
<span className="inline-flex h-fit items-center gap-x-2 rounded-md bg-green-50 px-2.5 py-2 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
<CheckCircleIcon className="h-5 w-5 text-green-500" aria-hidden="true" />
Warranty Activated
</span>