Convert properties filters to badges
This commit is contained in:
@@ -132,7 +132,7 @@ const formatShipMethod = (method) => {
|
||||
};
|
||||
|
||||
const formatShipMethodSimple = (method) => {
|
||||
if (!method) return "Standard";
|
||||
if (!method) return "Digital";
|
||||
if (method.includes("usps")) return "USPS";
|
||||
if (method.includes("fedex")) return "FedEx";
|
||||
if (method.includes("ups")) return "UPS";
|
||||
@@ -1141,6 +1141,7 @@ const EventFeed = ({
|
||||
hasPreorder: false,
|
||||
localPickup: false,
|
||||
isOnHold: false,
|
||||
onHoldReleased: false,
|
||||
hasDigiItem: false,
|
||||
hasNotions: false,
|
||||
hasGiftCard: false,
|
||||
@@ -1211,6 +1212,7 @@ const EventFeed = ({
|
||||
if (orderFilters.hasPreorder && !details.HasPreorder) return false;
|
||||
if (orderFilters.localPickup && !details.LocalPickup) return false;
|
||||
if (orderFilters.isOnHold && !details.IsOnHold) return false;
|
||||
if (orderFilters.onHoldReleased && !details.OnHoldReleased) return false;
|
||||
if (orderFilters.hasDigiItem && !details.HasDigiItem) return false;
|
||||
if (orderFilters.hasNotions && !details.HasNotions) return false;
|
||||
if (orderFilters.hasGiftCard && !details.HasDigitalGC) return false;
|
||||
@@ -1236,6 +1238,7 @@ const EventFeed = ({
|
||||
hasPreorder: 0,
|
||||
localPickup: 0,
|
||||
isOnHold: 0,
|
||||
onHoldReleased: 0,
|
||||
hasDigiItem: 0,
|
||||
hasNotions: 0,
|
||||
hasGiftCard: 0,
|
||||
@@ -1254,6 +1257,7 @@ const EventFeed = ({
|
||||
if (details.HasPreorder) orderPropertyCounts.hasPreorder++;
|
||||
if (details.LocalPickup) orderPropertyCounts.localPickup++;
|
||||
if (details.IsOnHold) orderPropertyCounts.isOnHold++;
|
||||
if (details.OnHoldReleased) orderPropertyCounts.onHoldReleased++;
|
||||
if (details.HasDigiItem) orderPropertyCounts.hasDigiItem++;
|
||||
if (details.HasNotions) orderPropertyCounts.hasNotions++;
|
||||
if (details.HasDigitalGC) orderPropertyCounts.hasGiftCard++;
|
||||
@@ -1275,6 +1279,7 @@ const EventFeed = ({
|
||||
hasPreorder: false,
|
||||
localPickup: false,
|
||||
isOnHold: false,
|
||||
onHoldReleased: false,
|
||||
hasDigiItem: false,
|
||||
hasNotions: false,
|
||||
hasGiftCard: false,
|
||||
@@ -1286,6 +1291,7 @@ const EventFeed = ({
|
||||
hasPreorder: property === 'hasPreorder',
|
||||
localPickup: property === 'localPickup',
|
||||
isOnHold: property === 'isOnHold',
|
||||
onHoldReleased: property === 'onHoldReleased',
|
||||
hasDigiItem: property === 'hasDigiItem',
|
||||
hasNotions: property === 'hasNotions',
|
||||
hasGiftCard: property === 'hasGiftCard',
|
||||
@@ -1467,76 +1473,94 @@ const EventFeed = ({
|
||||
|
||||
{/* Order Property Filters */}
|
||||
<div className="flex flex-wrap gap-2 justify-center mt-4">
|
||||
<span
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('hasPreorder')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.hasPreorder
|
||||
? 'bg-blue-800 text-blue-100'
|
||||
: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-purple-800 text-purple-200 hover:bg-purple-700'
|
||||
: 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Pre-order {counts.orderProperties.hasPreorder > 0 && `(${counts.orderProperties.hasPreorder})`}
|
||||
</span>
|
||||
<span
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('localPickup')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.localPickup
|
||||
? 'bg-purple-800 text-purple-100'
|
||||
: 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-green-800 text-green-200 hover:bg-green-700'
|
||||
: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Local {counts.orderProperties.localPickup > 0 && `(${counts.orderProperties.localPickup})`}
|
||||
</span>
|
||||
<span
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('isOnHold')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.isOnHold
|
||||
? 'bg-yellow-800 text-yellow-100'
|
||||
: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-blue-800 text-blue-200 hover:bg-blue-700'
|
||||
: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
On Hold {counts.orderProperties.isOnHold > 0 && `(${counts.orderProperties.isOnHold})`}
|
||||
</span>
|
||||
<span
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('onHoldReleased')}
|
||||
className={`${
|
||||
orderFilters.onHoldReleased
|
||||
? 'bg-green-800 text-green-200 hover:bg-green-700'
|
||||
: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Hold Released {counts.orderProperties.onHoldReleased > 0 && `(${counts.orderProperties.onHoldReleased})`}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('hasDigiItem')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.hasDigiItem
|
||||
? 'bg-green-800 text-green-100'
|
||||
: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-indigo-800 text-indigo-200 hover:bg-indigo-700'
|
||||
: 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Digital {counts.orderProperties.hasDigiItem > 0 && `(${counts.orderProperties.hasDigiItem})`}
|
||||
</span>
|
||||
<span
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('hasNotions')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.hasNotions
|
||||
? 'bg-pink-800 text-pink-100'
|
||||
: 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-yellow-800 text-yellow-200 hover:bg-yellow-700'
|
||||
: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Notions {counts.orderProperties.hasNotions > 0 && `(${counts.orderProperties.hasNotions})`}
|
||||
</span>
|
||||
<span
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('hasGiftCard')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.hasGiftCard
|
||||
? 'bg-indigo-800 text-indigo-100'
|
||||
: 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-pink-800 text-pink-200 hover:bg-pink-700'
|
||||
: 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Gift Card {counts.orderProperties.hasGiftCard > 0 && `(${counts.orderProperties.hasGiftCard})`}
|
||||
</span>
|
||||
<span
|
||||
eGift Card {counts.orderProperties.hasGiftCard > 0 && `(${counts.orderProperties.hasGiftCard})`}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => handleOrderPropertyClick('stillOwes')}
|
||||
className={`px-2 py-1 ${
|
||||
className={`${
|
||||
orderFilters.stillOwes
|
||||
? 'bg-red-800 text-red-100'
|
||||
: 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
|
||||
} rounded-full text-xs font-medium cursor-help`}
|
||||
? 'bg-red-800 text-red-200 hover:bg-red-700'
|
||||
: 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/20'
|
||||
} cursor-pointer`}
|
||||
>
|
||||
Owes {counts.orderProperties.stillOwes > 0 && `(${counts.orderProperties.stillOwes})`}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user