feat: add ticket pages

.husky/commit-msg

@@ -1 +1 @@
-#bunx --no-install commitlint --edit $1 
+# #bunx --no-install commitlint --edit $1

.husky/pre-commit

@@ -1 +1 @@
-#bun format
+# #bun format

apps/app/app/assets/icons/CalendarIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+const CalendarIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="20"
+      viewBox="0 0 18 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.5 20C1.1 20 0.75 19.85 0.45 19.55C0.15 19.25 0 18.9 0 18.5V3C0 2.6 0.15 2.25 0.45 1.95C0.75 1.65 1.1 1.5 1.5 1.5H3.125V0.8C3.125 0.573333 3.20167 0.383334 3.355 0.23C3.50833 0.076667 3.69833 0 3.925 0C4.15875 0 4.35469 0.076667 4.51283 0.23C4.67094 0.383334 4.75 0.573333 4.75 0.8V1.5H13.25V0.8C13.25 0.573333 13.3267 0.383334 13.48 0.23C13.6333 0.076667 13.8233 0 14.05 0C14.2838 0 14.4797 0.076667 14.6378 0.23C14.7959 0.383334 14.875 0.573333 14.875 0.8V1.5H16.5C16.9 1.5 17.25 1.65 17.55 1.95C17.85 2.25 18 2.6 18 3V18.5C18 18.9 17.85 19.25 17.55 19.55C17.25 19.85 16.9 20 16.5 20H1.5ZM1.5 18.5H16.5V7.75H1.5V18.5ZM9 12C8.71667 12 8.47917 11.9042 8.2875 11.7125C8.09583 11.5208 8 11.2833 8 11C8 10.7167 8.09583 10.4792 8.2875 10.2875C8.47917 10.0958 8.71667 10 9 10C9.28333 10 9.52083 10.0958 9.7125 10.2875C9.90417 10.4792 10 10.7167 10 11C10 11.2833 9.90417 11.5208 9.7125 11.7125C9.52083 11.9042 9.28333 12 9 12ZM5 12C4.71667 12 4.47917 11.9042 4.2875 11.7125C4.09583 11.5208 4 11.2833 4 11C4 10.7167 4.09583 10.4792 4.2875 10.2875C4.47917 10.0958 4.71667 10 5 10C5.28333 10 5.52083 10.0958 5.7125 10.2875C5.90417 10.4792 6 10.7167 6 11C6 11.2833 5.90417 11.5208 5.7125 11.7125C5.52083 11.9042 5.28333 12 5 12ZM13 12C12.7167 12 12.4792 11.9042 12.2875 11.7125C12.0958 11.5208 12 11.2833 12 11C12 10.7167 12.0958 10.4792 12.2875 10.2875C12.4792 10.0958 12.7167 10 13 10C13.2833 10 13.5208 10.0958 13.7125 10.2875C13.9042 10.4792 14 10.7167 14 11C14 11.2833 13.9042 11.5208 13.7125 11.7125C13.5208 11.9042 13.2833 12 13 12ZM9 16C8.71667 16 8.47917 15.9042 8.2875 15.7125C8.09583 15.5208 8 15.2833 8 15C8 14.7167 8.09583 14.4792 8.2875 14.2875C8.47917 14.0958 8.71667 14 9 14C9.28333 14 9.52083 14.0958 9.7125 14.2875C9.90417 14.4792 10 14.7167 10 15C10 15.2833 9.90417 15.5208 9.7125 15.7125C9.52083 15.9042 9.28333 16 9 16ZM5 16C4.71667 16 4.47917 15.9042 4.2875 15.7125C4.09583 15.5208 4 15.2833 4 15C4 14.7167 4.09583 14.4792 4.2875 14.2875C4.47917 14.0958 4.71667 14 5 14C5.28333 14 5.52083 14.0958 5.7125 14.2875C5.90417 14.4792 6 14.7167 6 15C6 15.2833 5.90417 15.5208 5.7125 15.7125C5.52083 15.9042 5.28333 16 5 16ZM13 16C12.7167 16 12.4792 15.9042 12.2875 15.7125C12.0958 15.5208 12 15.2833 12 15C12 14.7167 12.0958 14.4792 12.2875 14.2875C12.4792 14.0958 12.7167 14 13 14C13.2833 14 13.5208 14.0958 13.7125 14.2875C13.9042 14.4792 14 14.7167 14 15C14 15.2833 13.9042 15.5208 13.7125 15.7125C13.5208 15.9042 13.2833 16 13 16Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default CalendarIcon;

apps/app/app/assets/icons/CancelWhiteIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "react";
+
+const CancelWhiteIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6.96963 6.96965C7.26252 6.67676 7.73739 6.67676 8.03029 6.96965L9.99997 8.93933L11.9696 6.96967C12.2625 6.67678 12.7374 6.67678 13.0303 6.96967C13.3232 7.26256 13.3232 7.73744 13.0303 8.03033L11.0606 9.99999L13.0303 11.9696C13.3232 12.2625 13.3232 12.7374 13.0303 13.0303C12.7374 13.3232 12.2625 13.3232 11.9696 13.0303L9.99997 11.0607L8.03031 13.0303C7.73742 13.3232 7.26254 13.3232 6.96965 13.0303C6.67676 12.7374 6.67676 12.2625 6.96965 11.9697L8.93931 9.99999L6.96963 8.03031C6.67673 7.73742 6.67673 7.26254 6.96963 6.96965Z"
+        fill="#FCFCFC"
+      />
+    </svg>
+  );
+};
+
+export default CancelWhiteIcon;

apps/app/app/assets/icons/CancleIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "react";
+
+const CancleIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M27.3327 13.9993C27.3327 21.3631 21.3631 27.3327 13.9993 27.3327C6.63555 27.3327 0.666016 21.3631 0.666016 13.9993C0.666016 6.63555 6.63555 0.666016 13.9993 0.666016C21.3631 0.666016 27.3327 6.63555 27.3327 13.9993ZM9.95885 9.95888C10.3494 9.56836 10.9825 9.56836 11.3731 9.95888L13.9993 12.5851L16.6255 9.95891C17.016 9.56839 17.6492 9.56839 18.0397 9.95891C18.4303 10.3494 18.4303 10.9826 18.0397 11.3731L15.4135 13.9993L18.0397 16.6255C18.4302 17.016 18.4302 17.6492 18.0397 18.0397C17.6492 18.4303 17.016 18.4303 16.6255 18.0397L13.9993 15.4136L11.3731 18.0398C10.9826 18.4303 10.3494 18.4303 9.95888 18.0398C9.56836 17.6492 9.56836 17.0161 9.95888 16.6255L12.5851 13.9993L9.95885 11.3731C9.56833 10.9826 9.56833 10.3494 9.95885 9.95888Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default CancleIcon;

apps/app/app/assets/icons/ClockIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+const ClockIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.825 11.7V7.425C12.825 7.20833 12.7542 7.02917 12.6125 6.8875C12.4708 6.74583 12.2917 6.675 12.075 6.675C11.8583 6.675 11.6792 6.74583 11.5375 6.8875C11.3958 7.02917 11.325 7.20833 11.325 7.425V12C11.325 12.1 11.3417 12.1917 11.375 12.275C11.4083 12.3583 11.4583 12.4417 11.525 12.525L15.125 16.25C15.275 16.4167 15.4625 16.4958 15.6875 16.4875C15.9125 16.4792 16.1 16.4 16.25 16.25C16.4 16.1 16.475 15.9167 16.475 15.7C16.475 15.4833 16.4 15.3 16.25 15.15L12.825 11.7ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6333 2.2625 9.34167 2.7875 8.125C3.3125 6.90833 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3667 2 14.6583 2.2625 15.875 2.7875C17.0917 3.3125 18.1542 4.02917 19.0625 4.9375C19.9708 5.84583 20.6875 6.90833 21.2125 8.125C21.7375 9.34167 22 10.6333 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0917 20.6875 15.875 21.2125C14.6583 21.7375 13.3667 22 12 22Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default ClockIcon;

apps/app/app/assets/icons/DownloadIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+const DownloadIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.5 15.7884L8.2308 11.5193L9.28462 10.4347L11.75 12.9V4.5H13.2499V12.9L15.7153 10.4347L16.7692 11.5193L12.5 15.7884ZM6.8077 19.5C6.30257 19.5 5.875 19.325 5.525 18.975C5.175 18.625 5 18.1974 5 17.6923V14.9808H6.49997V17.6923C6.49997 17.7692 6.53202 17.8397 6.59612 17.9038C6.66024 17.9679 6.73077 18 6.8077 18H18.1922C18.2692 18 18.3397 17.9679 18.4038 17.9038C18.4679 17.8397 18.5 17.7692 18.5 17.6923V14.9808H20V17.6923C20 18.1974 19.825 18.625 19.475 18.975C19.125 19.325 18.6974 19.5 18.1922 19.5H6.8077Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default DownloadIcon;

apps/app/app/assets/icons/InformationIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+const InformationIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.25 16.75H12.75V11H11.25V16.75ZM12 9.28845C12.2288 9.28845 12.4207 9.21105 12.5755 9.05625C12.7303 8.90145 12.8077 8.70963 12.8077 8.48078C12.8077 8.25194 12.7303 8.06012 12.5755 7.9053C12.4207 7.7505 12.2288 7.6731 12 7.6731C11.7711 7.6731 11.5793 7.7505 11.4245 7.9053C11.2697 8.06012 11.1923 8.25194 11.1923 8.48078C11.1923 8.70963 11.2697 8.90145 11.4245 9.05625C11.5793 9.21105 11.7711 9.28845 12 9.28845ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5765 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45268 3.248 8.29655C3.74667 7.1404 4.42342 6.13472 5.27825 5.2795C6.1331 4.42427 7.13834 3.74721 8.29398 3.24833C9.44959 2.74944 10.6844 2.5 11.9983 2.5C13.3122 2.5 14.5473 2.74933 15.7034 3.248C16.8596 3.74667 17.8652 4.42342 18.7205 5.27825C19.5757 6.1331 20.2527 7.13834 20.7516 8.29398C21.2505 9.44959 21.5 10.6844 21.5 11.9983C21.5 13.3122 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8652 18.7217 18.7205C17.8669 19.5757 16.8616 20.2527 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default InformationIcon;

apps/app/app/assets/icons/LocationIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+const LocationIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.9938 21.5C11.8146 21.5 11.6375 21.4708 11.4625 21.4125C11.2875 21.3542 11.1333 21.2583 11 21.125C10.3 20.4917 9.54167 19.7625 8.725 18.9375C7.90833 18.1125 7.15 17.225 6.45 16.275C5.75 15.325 5.16667 14.3333 4.7 13.3C4.23333 12.2667 4 11.2333 4 10.2C4 7.7 4.80417 5.70833 6.4125 4.225C8.02083 2.74167 9.88333 2 12 2C14.1167 2 15.9792 2.74167 17.5875 4.225C19.1958 5.70833 20 7.7 20 10.2C20 11.2333 19.7667 12.2667 19.3 13.3C18.8333 14.3333 18.25 15.325 17.55 16.275C16.85 17.225 16.0917 18.1125 15.275 18.9375C14.4583 19.7625 13.7 20.4917 13 21.125C12.8667 21.2583 12.7104 21.3542 12.5312 21.4125C12.3521 21.4708 12.1729 21.5 11.9938 21.5ZM12.0022 11.75C12.4841 11.75 12.8958 11.5784 13.2375 11.2353C13.5792 10.8921 13.75 10.4796 13.75 9.99778C13.75 9.51593 13.5784 9.10417 13.2353 8.7625C12.8921 8.42083 12.4796 8.25 11.9978 8.25C11.5159 8.25 11.1042 8.42158 10.7625 8.76472C10.4208 9.10786 10.25 9.52036 10.25 10.0022C10.25 10.4841 10.4216 10.8958 10.7647 11.2375C11.1079 11.5792 11.5204 11.75 12.0022 11.75Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default LocationIcon;

apps/app/app/assets/icons/RightArrowIcon.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+const BreezeLogoIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.0149 21.6534L6.5957 20.2342L14.8303 11.9995L6.5957 3.7649L8.0149 2.3457L17.6687 11.9995L8.0149 21.6534Z"
+        fill="#191A1A"
+      />
+    </svg>
+  );
+};
+
+export default BreezeLogoIcon;

apps/app/app/assets/icons/SavedIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "react";
+
+const SavedIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.5 10C20.5 15.5228 16.0228 20 10.5 20C4.97715 20 0.5 15.5228 0.5 10C0.5 4.47715 4.97715 0 10.5 0C16.0228 0 20.5 4.47715 20.5 10ZM14.5303 6.96967C14.8232 7.26256 14.8232 7.73744 14.5303 8.0303L9.5303 13.0303C9.2374 13.3232 8.7626 13.3232 8.46967 13.0303L6.46967 11.0303C6.17678 10.7374 6.17678 10.2626 6.46967 9.9697C6.76256 9.6768 7.23744 9.6768 7.53033 9.9697L9 11.4393L11.2348 9.2045L13.4697 6.96967C13.7626 6.67678 14.2374 6.67678 14.5303 6.96967Z"
+        fill="#6DB34D"
+      />
+    </svg>
+  );
+};
+
+export default SavedIcon;

apps/app/app/assets/icons/backicon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from "react";
+
+const BackIcon = ({ ...props }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.0003 29.3337C23.3641 29.3337 29.3337 23.3641 29.3337 16.0003C29.3337 8.63653 23.3641 2.66699 16.0003 2.66699C8.63653 2.66699 2.66699 8.63653 2.66699 16.0003C2.66699 23.3641 8.63653 29.3337 16.0003 29.3337ZM18.7074 11.2932C19.098 11.6837 19.098 12.3169 18.7074 12.7074L15.4145 16.0003L18.7074 19.2932C19.098 19.6837 19.098 20.3169 18.7074 20.7074C18.3169 21.098 17.6837 21.098 17.2932 20.7074L13.2932 16.7074C12.9027 16.3169 12.9027 15.6837 13.2932 15.2932L17.2932 11.2932C17.6837 10.9027 18.3169 10.9027 18.7074 11.2932Z"
+        fill="#323334"
+      />
+    </svg>
+  );
+};
+
+export default BackIcon;

apps/app/app/event/including-events/808-music/buy-successful/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+import React, { useState } from "react";
+import Congratulation from "@/app/assets/images/congratulation.png";
+import DownloadIcon from "@/app/assets/icons/DownloadIcon";
+import CancelIcon from "@/app/assets/icons/CancleIcon";
+import Image from "next/image";
+import Link from "next/link";
+import { Badge, cn } from "@breeze/ui";
+import SavedIcon from "@/app/assets/icons/SavedIcon";
+
+export default function BuySuccessful() {
+  const [isETicketSaved, setIsETicketSaved] = useState(false);
+
+  const handleSaveETicket = () => {
+    setIsETicketSaved(true);
+  };
+  return (
+    <div className=" flex flex-col items-center ">
+      <Link href={"/"}>
+        <button className="ml-56 pl-28 ">
+          <CancelIcon className="h-6 w-6 bg-neutral-10" />
+        </button>
+      </Link>
+
+      <h1 className=" self-center font-bold text-xl mb-4">Congratulations !</h1>
+      <p className="font-normal text-base leading-6 tracking-wider gap-4  mt-3 mb-4 ">
+        You have bought the ticket.
+      </p>
+      <span className="p-20">
+        <Image
+          src={Congratulation}
+          alt="Congratulation Icon"
+          className="w-[70px] h-[70px] "
+        />
+      </span>
+      <p className="font-normal text-base leading-6 gap-4 mb-4 ">
+        See you at the
+      </p>
+      <h1 className=" self-center font-semibold text-lg mb-4">
+        808 Music Festival
+      </h1>
+      <Link href={"#"}>
+        <div className="flex flex-row space-x-3 pt-44 lg:pt-2">
+          {isETicketSaved ? (
+            <>
+              <SavedIcon className="w-5 h-5" />
+              <h1 className="self-center font-semibold text-base text-savedgreen mb-4">
+                Your e-ticket is saved
+              </h1>
+            </>
+          ) : (
+            <>
+              <DownloadIcon
+                onClick={handleSaveETicket}
+                className="w-5 h-5 cursor-pointer"
+              />
+              <h1
+                onClick={handleSaveETicket}
+                className="self-center font-semibold text-base  mb-4 underline cursor-pointer"
+              >
+                Save my e-ticket
+              </h1>
+            </>
+          )}
+        </div>
+      </Link>
+      <hr className="border-lightgray mb-3 mt-10 lg:mt-10 w-[28rem]" />
+      <Link href={"/"}>
+        <Badge className={cn("w-80", "h-11", "p-3", "gap-4", "justify-center")}>
+          OK
+        </Badge>
+      </Link>
+    </div>
+  );
+}