Merge pull request #3 from temporalio/rh-cancelled-fulfillments

Show a better status for cancelled fulfillments.

.dockerignore

@@ -0,0 +1,2 @@
+.svelte-kit
+node_modules

src/lib/components/fulfillment-details.svelte

@@ -6,7 +6,7 @@
 
 	export let order: Order;
 
-	$: fulfillments = order?.fulfillments?.filter((f) => f.status != 'cancelled') || [];
+	$: fulfillments = order?.fulfillments || [];
 
 	$: getStatus = (fulfillment: Fulfillment) => {
 		if (!fulfillment.shipment) return fulfillment.status;
@@ -21,6 +21,8 @@
 				<p class="location">
 					{#if fulfillment?.location}
 						<i>{fulfillment.location}</i>
+					{:else if fulfillment?.status == "cancelled"}
+						<strong>Unavailable</strong>
 					{:else}
 						<strong>Action Required</strong>
 					{/if}

src/lib/components/shipment-status.svelte

@@ -9,7 +9,7 @@
 		});
 	}
 
-	const inactiveStatuses = ['pending', 'unavailable'];
+	const inactiveStatuses = ['pending', 'unavailable', 'cancelled'];
 	const activeStatuses = ['booked', 'dispatched', 'delivered'];
 
 	$: finalStatus = status || 'pending';
@@ -26,6 +26,7 @@
 			class:incomplete={!inactive && currentIndex < index}
 			class:pending={s === 'pending'}
 			class:unavailable={s === 'unavailable'}
+			class:cancelled={s === 'cancelled'}
 		>
 			{s.toUpperCase()}
 		</li>
@@ -85,7 +86,8 @@
 	}
 
 	li.incomplete::before,
-	li.unavailable::before {
+	li.unavailable::before,
+	li.cancelled::before {
 		background: lightcoral;
 	}