Merge pull request #29 from hurtigruten/feat/NEL-650/delete-quote

feat: delete quote

api/quote.ts

@@ -0,0 +1,19 @@
+const { BOOKING_DOMAIN_URL } = process.env;
+
+export const deleteQuote = async (quoteId: string) => {
+  const delete_ = (url: string) =>
+    fetch(url, {
+      method: "DELETE",
+    })
+      .then((resp) => {
+        if (resp.status.toString()[0] !== "2") {
+          throw new Error(`${resp.status} ${resp.statusText}`);
+        }
+        return resp;
+      })
+      .then((resp) => resp.text());
+
+  const res = await delete_(`${BOOKING_DOMAIN_URL || ""}/Api/Quote/${quoteId}`);
+
+  return res;
+};

components/deeplink/DeepLinkViewer.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Deeplink } from "../../util/deeplink";
 import IconButton from "../IconButton";
 import { ClipboardLine } from "../icons/Document";
-import { ButtonModes } from "../inputs/Button";
+import Button, { ButtonModes } from "../inputs/Button";
 import TextInput from "../inputs/TextInput";
 
 const DeepLinkViewer = ({ deeplink }: { deeplink: Deeplink | null }) => {
@@ -28,23 +28,25 @@ const DeepLinkViewer = ({ deeplink }: { deeplink: Deeplink | null }) => {
   const baseUrl = `http://www.hurtigruten.com/${deeplink.locale}/expeditions/dl/`;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-col">
       <h2 className="max-w-[400px] whitespace-nowrap mb-4">Your deeplink</h2>
-      <TextInput
-        className="min-w-[550px]"
-        value={`${baseUrl}${encodedLink}`}
-        disabled
-      />
-      <IconButton
-        buttonColor="transparent"
-        size="large"
-        title="copy"
-        mode={ButtonModes.flat}
-        icon={ClipboardLine}
-        onClick={() =>
-          navigator.clipboard.writeText(`${baseUrl}${encodedLink}`)
-        }
-      />
+      <div className="flex items-center gap-2">
+        <TextInput
+          className="min-w-[550px]"
+          value={`${baseUrl}${encodedLink}`}
+          disabled
+        />
+        <IconButton
+          buttonColor="transparent"
+          size="large"
+          title="copy"
+          mode={ButtonModes.flat}
+          icon={ClipboardLine}
+          onClick={() =>
+            navigator.clipboard.writeText(`${baseUrl}${encodedLink}`)
+          }
+        />
+      </div>
     </div>
   );
 };

pages/api/booking-domain/delete-quote.ts

@@ -0,0 +1,22 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { deleteQuote } from "../../../api/quote";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "GET") {
+    res.status(405).json("Unsupported method");
+    return;
+  }
+  const { quoteId: quoteIdRaw } = req.query;
+  const quoteId = Array.isArray(quoteIdRaw) ? quoteIdRaw[0] : quoteIdRaw;
+  try {
+    await deleteQuote(quoteId);
+    res.status(200).json({ success: true });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ success: false });
+  }
+}

pages/index.tsx

@@ -10,6 +10,7 @@ import DepartureOptions, {
 import CabinOptions from "../components/deeplink/CabinOptions";
 import Summary from "@components/Summary";
 import { sumPassengersInCabin } from "@src/util/sumPassengersInCabin";
+import Button from "@components/inputs/Button";
 
 const defaultDeepLink: Deeplink = {
   version: "1",
@@ -32,6 +33,8 @@ const DeepLinkBuilder = () => {
   const [shipCodesForAvailableShips, setShipCodesForAvailableShips] = useState<
     string[] | null
   >(null);
+  const [isDeletingQuote, setIsDeletingQuote] = useState(false);
+  const [deletedQuoteIds, setDeletedQuoteIds] = useState<string[]>([]);
 
   const onLocaleSelected = (locale: string) => {
     setDeeplink({
@@ -97,6 +100,11 @@ const DeepLinkBuilder = () => {
         departure,
       },
     });
+
+    console.log(
+      selectedDep?.departure.quoteId,
+      selectedDep?.departure.voyageId
+    );
   };
 
   const summary = {
@@ -129,8 +137,31 @@ const DeepLinkBuilder = () => {
       })) ?? null,
   };
 
+  const deleteQuoteHandler = async () => {
+    setIsDeletingQuote(true);
+    try {
+      await fetch(
+        `/api/booking-domain/delete-quote?quoteId=${
+          chosenDeparture?.departure.quoteId ?? ""
+        }`
+      );
+      setDeletedQuoteIds([
+        ...deletedQuoteIds,
+        chosenDeparture?.departure.quoteId ?? "",
+      ]);
+    } catch (e) {
+      console.log("Failed to delete quote", e);
+    } finally {
+      setIsDeletingQuote(false);
+    }
+  };
+
   return (
     <>
+      <div className="hidden" id="--quoteid">
+        {chosenDeparture?.departure.quoteId}
+        {chosenDeparture?.departure.voyageId}
+      </div>
       <header className="flex items-center justify-center p-6 mb-20 bg-off-black py-14">
         <h1 className="text-white uppercase display-text">Create deeplink</h1>
       </header>
@@ -165,6 +196,12 @@ const DeepLinkBuilder = () => {
           {(deeplink.search || deeplink.cabins) && (
             <DeepLinkViewer deeplink={deeplink} />
           )}
+          {chosenDeparture?.departure.quoteId &&
+            !deletedQuoteIds.includes(chosenDeparture.departure.quoteId) && (
+              <Button isLoading={isDeletingQuote} onClick={deleteQuoteHandler}>
+                Delete quote
+              </Button>
+            )}
         </div>
         <Summary {...summary} />
       </main>