@zenify-omni/chat-ui-react-js 0.1.0

package/lib/deal-name.js

@@ -0,0 +1,27 @@
+import { DEFAULT_DEAL_NAME_CONFIG } from "@zenify-omni/chat-js/constants/tenant_config.js";
+import { isDealNameSuggestEnabled } from "./utils.js";
+function resolveDealNameRules(rules, tenantId) {
+  const isConfigured = !!rules && typeof rules === "object";
+  if (!isConfigured) {
+    return {
+      rules: {
+        ...DEFAULT_DEAL_NAME_CONFIG,
+        use_list: isDealNameSuggestEnabled(tenantId)
+      },
+      isConfigured: false
+    };
+  }
+  const merged = { ...DEFAULT_DEAL_NAME_CONFIG, ...rules };
+  const maxLength = Number(merged.max_length);
+  return {
+    rules: {
+      use_list: !!merged.use_list,
+      allow_custom: !!merged.allow_custom,
+      max_length: Number.isFinite(maxLength) && maxLength > 0 ? maxLength : DEFAULT_DEAL_NAME_CONFIG.max_length
+    },
+    isConfigured: true
+  };
+}
+export {
+  resolveDealNameRules
+};

package/lib/i18n/react.js

@@ -0,0 +1,7 @@
+import { initReactI18next } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+initReactI18next.init(i18n);
+var react_default = i18n;
+export {
+  react_default as default
+};

package/lib/query-client.js

@@ -0,0 +1,34 @@
+import { QueryClient } from "@tanstack/react-query";
+function queryRetry(failureCount, error) {
+  const status = error?.status ?? error?.statusCode;
+  if (status >= 400 && status < 500) return false;
+  return failureCount < 2;
+}
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // staleTime MUST stay 0 (react-query's default). A non-zero global
+        // staleTime silently broke every screen that renders from a SIDE
+        // EFFECT run inside its queryFn rather than from the query's returned
+        // data — e.g. the tenant list does `setTotalRecords(data.total)` into a
+        // local `useState(0)` and DataTable only renders rows when `total > 0`.
+        // With staleTime > 0, a remount within the fresh window skips the
+        // queryFn, so that side effect never re-runs, the local total resets to
+        // 0, and the table shows "no data" even though the cached rows exist.
+        // The codebase has many such side-effect queries; a blanket staleTime
+        // can't be made safe without auditing all of them, so keep it at 0 and
+        // let individual queries opt into a longer staleTime where proven safe.
+        staleTime: 0,
+        gcTime: 10 * 6e4,
+        refetchOnWindowFocus: false,
+        retry: queryRetry,
+        retryDelay: (attempt) => 500 * 2 ** attempt
+      }
+    }
+  });
+}
+export {
+  createQueryClient,
+  queryRetry
+};

package/lib/utils.js

@@ -0,0 +1,25 @@
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { envSet } from "../config/env.js";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function isEnableFBHumanTag() {
+  const tenantIds = envSet("TENANT_ENABLE_FB_HUMAN_TAG");
+  if (tenantIds.size === 0) return true;
+  return tenantIds.has(getUser()?.tenant_id);
+}
+function isDealNameSuggestEnabled(tenantId) {
+  const tenantIds = envSet("TENANT_ENABLE_DEAL_NAME_SUGGEST");
+  if (tenantIds.size === 0) {
+    return false;
+  }
+  const targetTenantId = tenantId || getUser()?.tenant_id;
+  return !!targetTenantId && tenantIds.has(targetTenantId);
+}
+export {
+  cn,
+  isDealNameSuggestEnabled,
+  isEnableFBHumanTag
+};

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@zenify-omni/chat-ui-react-js",
+  "version": "0.1.0",
+  "description": "Toàn bộ component React, hook và store zustand của Zenify Chat.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ZenifyAIContactCenter/sdk-omni-chat.git",
+    "directory": "chat-ui-react-js"
+  },
+  "homepage": "https://github.com/ZenifyAIContactCenter/sdk-omni-chat#readme",
+  "bugs": {
+    "url": "https://github.com/ZenifyAIContactCenter/sdk-omni-chat/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "./config/env.js",
+    "./lib/i18n/react.js",
+    "./utils/chat_socket.js",
+    "./utils/typing_socket.js",
+    "./utils/chat-actions.js"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popper": "^1.2.8",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.13.13",
+    "@tinymce/tinymce-react": "^5.1.1",
+    "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-mention": "^3.20.4",
+    "@tiptap/extension-underline": "^3.20.4",
+    "@tiptap/pm": "^3.20.4",
+    "@tiptap/react": "^3.20.4",
+    "@tiptap/starter-kit": "^3.20.4",
+    "@zenify-omni/chat-js": "0.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "docx-preview": "^0.3.7",
+    "dompurify": "^3.2.6",
+    "embla-carousel-react": "^8.5.2",
+    "jszip": "^3.10.1",
+    "jxl-rs-polyfill": "^0.1.1",
+    "lucide-react": "^0.562.0",
+    "next-themes": "^0.3.0",
+    "papaparse": "^5.5.3",
+    "pdfjs-dist": "^4.8.69",
+    "react-arborist": "^3.4.3",
+    "react-mentions": "^4.4.10",
+    "react-syntax-highlighter": "^16.1.1",
+    "react-zoom-pan-pinch": "^4.0.3",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.3",
+    "uuid": "^10.0.0",
+    "wavesurfer.js": "^7.12.7",
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "@date-fns/tz": "^1.1.2",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
+    "axios": "^1.7.7",
+    "date-fns": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "i18next": "^26.2.0",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "react-i18next": "^17.0.10",
+    "react-markdown": "^10.1.0",
+    "react-pdf": "^9.2.1",
+    "xlsx-js-style": "^1.2.0",
+    "zustand": "^5.0.0"
+  }
+}

package/provider/chat-context.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const ChatClientContext = createContext(null);
+const ChatSessionContext = createContext(null);
+ChatClientContext.displayName = "ChatClientContext";
+ChatSessionContext.displayName = "ChatSessionContext";
+export {
+  ChatClientContext,
+  ChatSessionContext
+};

package/provider/chat-provider.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { QueryClientContext, QueryClientProvider } from "@tanstack/react-query";
+import { I18nextProvider } from "react-i18next";
+import {
+  createChatClient,
+  ChatClientStatus
+} from "@zenify-omni/chat-js/client.js";
+import { setChatRuntime } from "../config/runtime.js";
+import { setNavigateFunc } from "../config/navigation.js";
+import {
+  applyChatTheme,
+  applyColorScheme,
+  resolveTheme
+} from "../config/theme.js";
+import { createQueryClient } from "../lib/query-client.js";
+import ErrorBoundary from "../components/error-boundary.js";
+import defaultI18n from "../lib/i18n/react.js";
+import useTenantConfigStore from "../store/tenant-config-store.js";
+import useWorkspaceStore from "../store/workspace-store.js";
+import useLogoutListener from "../hooks/use-logout-listener.js";
+import { resetAllStores } from "../store/index.js";
+import { resetChatSortHydration } from "../hooks/use-chat-sort.js";
+import { ChatClientContext, ChatSessionContext } from "./chat-context.js";
+function applyBootstrapToStores(context) {
+  useTenantConfigStore.getState().setTenantConfig(context.tenantConfig);
+  const ws = useWorkspaceStore.getState();
+  ws.setUserRolePermissions(context.permissions);
+  if (context.workspaces?.length) {
+    ws.setWorkspaces(context.workspaces);
+    if (context.activeWorkspaceId) ws.setActiveWorkspaceId(context.activeWorkspaceId);
+  }
+}
+function ChatRuntimeEffects({ logout }) {
+  return logout ? /* @__PURE__ */ jsx(LogoutListener, {}) : null;
+}
+const LogoutListener = () => {
+  useLogoutListener();
+  return null;
+};
+function ChatProvider({
+  initConfig,
+  navigateFunc,
+  theme,
+  colorScheme = "light",
+  queryClient: queryClientProp,
+  i18n: i18nProp,
+  errorBoundary = true,
+  fallback = null,
+  errorFallback = null,
+  listeners = { logout: true },
+  disposeOnUnmount = true,
+  onReady,
+  onError,
+  onSessionEnd,
+  children
+}) {
+  const queryClientFromCtx = useContext(QueryClientContext);
+  const queryClient = useMemo(
+    () => queryClientProp ?? queryClientFromCtx ?? createQueryClient(),
+    [queryClientProp, queryClientFromCtx]
+  );
+  const i18n = i18nProp ?? defaultI18n;
+  useMemo(() => {
+    setChatRuntime({ queryClient });
+  }, [queryClient]);
+  useMemo(() => {
+    setNavigateFunc(navigateFunc);
+  }, [navigateFunc]);
+  const themeKey = useMemo(() => theme ? JSON.stringify(theme) : "", [theme]);
+  useLayoutEffect(() => applyColorScheme(colorScheme), [colorScheme]);
+  useLayoutEffect(() => {
+    if (!themeKey) return void 0;
+    const isDark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+    const resolved = resolveTheme(JSON.parse(themeKey), isDark);
+    return resolved ? applyChatTheme(resolved) : void 0;
+  }, [themeKey, colorScheme]);
+  const [session, setSession] = useState({
+    status: ChatClientStatus.IDLE,
+    error: null,
+    user: null,
+    context: {}
+  });
+  const [client] = useState(
+    () => createChatClient({
+      ...initConfig,
+      onBootstrap: applyBootstrapToStores
+    })
+  );
+  const teardownRef = useRef(null);
+  const callbacksRef = useRef({ onReady, onError, onSessionEnd });
+  callbacksRef.current = { onReady, onError, onSessionEnd };
+  useEffect(() => {
+    const off = client.on(
+      "status",
+      ({ status, detail }) => setSession((prev) => ({
+        ...prev,
+        status,
+        error: status === ChatClientStatus.ERROR ? detail : null
+      }))
+    );
+    const offEnd = client.on("session-end", () => {
+      setSession((prev) => ({
+        ...prev,
+        status: ChatClientStatus.IDLE,
+        user: null,
+        context: {}
+      }));
+      queueMicrotask(() => {
+        queryClient.clear();
+        resetAllStores();
+        resetChatSortHydration();
+        callbacksRef.current.onSessionEnd?.();
+      });
+    });
+    return () => {
+      off();
+      offEnd();
+    };
+  }, [client, queryClient]);
+  useEffect(() => {
+    clearTimeout(teardownRef.current);
+    let cancelled = false;
+    const ac = new AbortController();
+    client.start({ signal: ac.signal }).then(({ user, context }) => {
+      if (cancelled) return;
+      setSession((prev) => ({ ...prev, user, context, error: null }));
+      callbacksRef.current.onReady?.({ user, context });
+    }).catch((error) => {
+      if (cancelled || error?.name === "AbortError") return;
+      setSession((prev) => ({ ...prev, error }));
+      callbacksRef.current.onError?.(error);
+    });
+    return () => {
+      cancelled = true;
+      const timer = setTimeout(() => {
+        if (teardownRef.current !== timer) return;
+        teardownRef.current = null;
+        ac.abort();
+        client.disconnect();
+        if (disposeOnUnmount) client.dispose();
+      }, 0);
+      teardownRef.current = timer;
+    };
+  }, [client, disposeOnUnmount]);
+  const sessionValue = useMemo(
+    () => ({
+      ...session,
+      isReady: session.status === ChatClientStatus.READY,
+      retry: () => {
+        setSession((prev) => ({ ...prev, error: null }));
+        return client.start();
+      },
+      signOut: () => client.signOut()
+    }),
+    [session, client]
+  );
+  const showFallback = session.status !== ChatClientStatus.READY && !session.error;
+  const showError = !!session.error;
+  const inner = /* @__PURE__ */ jsx(ChatClientContext.Provider, { value: client, children: /* @__PURE__ */ jsxs(ChatSessionContext.Provider, { value: sessionValue, children: [
+    /* @__PURE__ */ jsx(ChatRuntimeEffects, { logout: listeners?.logout !== false }),
+    showError ? errorFallback?.(session.error, sessionValue.retry) ?? null : showFallback ? fallback : children
+  ] }) });
+  return /* @__PURE__ */ jsx(I18nextProvider, { i18n, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: errorBoundary ? /* @__PURE__ */ jsx(ErrorBoundary, { children: inner }) : inner }) });
+}
+var chat_provider_default = ChatProvider;
+export {
+  ChatProvider,
+  chat_provider_default as default
+};

package/provider/chat-room-context.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const ChatRoomContext = createContext(null);
+const ChatComposerContext = createContext(null);
+ChatRoomContext.displayName = "ChatRoomContext";
+ChatComposerContext.displayName = "ChatComposerContext";
+export {
+  ChatComposerContext,
+  ChatRoomContext
+};

package/provider/chat-room-hooks.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ChatRoomContext, ChatComposerContext } from "./chat-room-context.js";
+const useChatRoomContext = () => useContext(ChatRoomContext);
+const useChatComposerContext = () => useContext(ChatComposerContext);
+export {
+  useChatComposerContext,
+  useChatRoomContext
+};

package/provider/chat-room-provider.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import useChatRoomDetail from "../hooks/use-chat-room-detail.js";
+import useChatCustomer from "../hooks/use-chat-customer.js";
+import useZaloConnection from "../hooks/use-zalo-connection.js";
+import useChatPermission from "../hooks/use-chat-permission.js";
+import useChatAttachments from "../hooks/use-chat-attachments.js";
+import useFacebookNotice from "../hooks/use-facebook-notice.js";
+import { ChatRoomContext, ChatComposerContext } from "./chat-room-context.js";
+function ChatRoomProvider({ chatRoomId, children }) {
+  const { chatRoom, isLoading, isFetching } = useChatRoomDetail(chatRoomId);
+  const chatRoomSource = chatRoom?.source;
+  const { customerId, customerDetail } = useChatCustomer(chatRoom, chatRoomId);
+  const { isZaloConnected } = useZaloConnection(chatRoomId, chatRoomSource);
+  const { isChatAllowed, topPriorityTicket, canChatSpecialTenant } = useChatPermission({ chatRoom, chatRoomId, isZaloConnected });
+  const {
+    pastedFiles,
+    setPastedFiles,
+    showPreview,
+    showDragBlur,
+    dropZoneProps,
+    addFilesToPreview
+  } = useChatAttachments(chatRoom, chatRoomId);
+  const { isFacebookPageInvalid, noticeRef, noticeHeight } = useFacebookNotice(chatRoom);
+  const chatRoomDetailReady = chatRoom?._id === chatRoomId;
+  const roomValue = useMemo(
+    () => ({
+      chatRoomId,
+      chatRoom,
+      chatRoomDetailReady,
+      isLoading,
+      isFetching,
+      customerId,
+      customerDetail,
+      isChatAllowed,
+      isZaloConnected,
+      topPriorityTicket,
+      canChatSpecialTenant,
+      isFacebookPageInvalid,
+      noticeRef,
+      noticeHeight
+    }),
+    [
+      chatRoomId,
+      chatRoom,
+      chatRoomDetailReady,
+      isLoading,
+      isFetching,
+      customerId,
+      customerDetail,
+      isChatAllowed,
+      isZaloConnected,
+      topPriorityTicket,
+      canChatSpecialTenant,
+      isFacebookPageInvalid,
+      noticeRef,
+      noticeHeight
+    ]
+  );
+  const composerValue = useMemo(
+    () => ({
+      pastedFiles,
+      setPastedFiles,
+      showPreview,
+      showDragBlur,
+      dropZoneProps,
+      addFilesToPreview
+    }),
+    [
+      pastedFiles,
+      setPastedFiles,
+      showPreview,
+      showDragBlur,
+      dropZoneProps,
+      addFilesToPreview
+    ]
+  );
+  return /* @__PURE__ */ jsx(ChatRoomContext.Provider, { value: roomValue, children: /* @__PURE__ */ jsx(ChatComposerContext.Provider, { value: composerValue, children }) });
+}
+var chat_room_provider_default = ChatRoomProvider;
+export {
+  ChatRoomProvider,
+  chat_room_provider_default as default
+};

package/provider/hooks.js

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import { ChatClientContext, ChatSessionContext } from "./chat-context.js";
+const OUTSIDE = "ph\u1EA3i n\u1EB1m trong <ChatProvider>. B\u1ECDc c\xE2y component b\u1EB1ng <ChatProvider initConfig={{ domain, username, password, env }}> tr\u01B0\u1EDBc \u0111\xE3.";
+const useRequired = (Context, hookName) => {
+  const value = useContext(Context);
+  if (value == null) throw new Error(`[chat-ui] ${hookName}() ${OUTSIDE}`);
+  return value;
+};
+const useChatClient = () => useRequired(ChatClientContext, "useChatClient");
+const useChatSession = () => useRequired(ChatSessionContext, "useChatSession");
+const useChatApi = () => useChatClient().api;
+const useChatSocket = () => useChatClient().socket;
+const useChatBootstrap = () => useChatSession().context;
+const useChatConfig = () => useChatClient().config;
+export {
+  useChatApi,
+  useChatBootstrap,
+  useChatClient,
+  useChatConfig,
+  useChatSession,
+  useChatSocket
+};

package/provider/index.js

@@ -0,0 +1,42 @@
+import "../utils/chat_socket.js";
+import "../utils/typing_socket.js";
+import { ChatProvider, default as default2 } from "./chat-provider.js";
+import { ChatClientContext, ChatSessionContext } from "./chat-context.js";
+import {
+  applyChatTheme,
+  applyColorScheme,
+  resolveTheme,
+  buildChatTheme,
+  toHslTriplet,
+  CHAT_THEME_VARS
+} from "../config/theme.js";
+import {
+  useChatClient,
+  useChatSession,
+  useChatApi,
+  useChatSocket,
+  useChatBootstrap,
+  useChatConfig
+} from "./hooks.js";
+import { getChatClient, disposeChatClient, ChatClientStatus } from "@zenify-omni/chat-js/client.js";
+export {
+  CHAT_THEME_VARS,
+  ChatClientContext,
+  ChatClientStatus,
+  ChatProvider,
+  ChatSessionContext,
+  applyChatTheme,
+  applyColorScheme,
+  buildChatTheme,
+  default2 as default,
+  disposeChatClient,
+  getChatClient,
+  resolveTheme,
+  toHslTriplet,
+  useChatApi,
+  useChatBootstrap,
+  useChatClient,
+  useChatConfig,
+  useChatSession,
+  useChatSocket
+};

package/public/contact-card-user.svg

@@ -0,0 +1,25 @@
+<svg width="306" height="135" viewBox="0 0 306 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_645_10532)">
+<rect width="306" height="135" fill="#0E68DD"/>
+<g clip-path="url(#clip1_645_10532)">
+<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M138.352 -54.0515C129.62 -68.3825 110.924 -72.9214 96.593 -64.1895L32.2377 -24.9774L32.2377 -24.9773L20.5105 -17.8318C17.3892 -15.93 18.1254 -11.2039 21.6772 -10.3416L44.5368 -4.79193L101.227 88.2482C109.959 102.579 128.655 107.118 142.986 98.3862L181.393 74.9847C195.723 66.2528 200.262 47.5566 191.53 33.2256L138.352 -54.0515Z" fill="url(#paint0_linear_645_10532)"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M282.955 126.674C291.687 141.005 287.148 159.701 272.817 168.433L208.461 207.645L208.461 207.645L196.734 214.791C193.613 216.692 189.75 213.871 190.612 210.319L196.162 187.46L139.472 94.4195C130.74 80.0886 135.279 61.3924 149.61 52.6605L188.017 29.259C202.348 20.5271 221.044 25.066 229.776 39.3969L282.955 126.674Z" fill="url(#paint1_linear_645_10532)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_645_10532" x1="152.924" y1="78.4485" x2="112.424" y2="16.9485" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1778F2"/>
+<stop offset="1" stop-color="#1778F2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_645_10532" x1="178.312" y1="56.3154" x2="215.312" y2="170.815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2580F3"/>
+<stop offset="1" stop-color="#2580F3" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_645_10532">
+<rect width="306" height="135" fill="white"/>
+</clipPath>
+<clipPath id="clip1_645_10532">
+<rect width="306" height="135" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/public/images/icons/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 666.667 666.667"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 700h700V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 -133.333 800)"><path d="M0 0c0 138.071-111.929 250-250 250S-500 138.071-500 0c0-117.245 80.715-215.622 189.606-242.638v166.242h-51.552V0h51.552v32.919c0 85.092 38.508 124.532 122.048 124.532 15.838 0 43.167-3.105 54.347-6.211V81.986c-5.901.621-16.149.932-28.882.932-40.993 0-56.832-15.528-56.832-55.9V0h81.659l-14.028-76.396h-67.631v-171.773C-95.927-233.218 0-127.818 0 0" style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(600 350)"/><path d="m0 0 14.029 76.396H-67.63v27.019c0 40.372 15.838 55.899 56.831 55.899 12.733 0 22.981-.31 28.882-.931v69.253c-11.18 3.106-38.509 6.212-54.347 6.212-83.539 0-122.048-39.441-122.048-124.533V76.396h-51.552V0h51.552v-166.242a250.559 250.559 0 0 1 60.394-7.362c10.254 0 20.358.632 30.288 1.831V0Z" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="translate(447.918 273.604)"/></g></svg>

package/public/images/icons/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 264.583 264.583"><defs><radialGradient xlink:href="#a" id="f" cx="158.429" cy="578.088" r="52.352" fx="158.429" fy="578.088" gradientTransform="matrix(0 -4.03418 4.28018 0 -2332.227 942.236)" gradientUnits="userSpaceOnUse"/><radialGradient xlink:href="#b" id="g" cx="172.615" cy="600.692" r="65" fx="172.615" fy="600.692" gradientTransform="matrix(.67441 -1.16203 1.51283 .87801 -814.366 -47.835)" gradientUnits="userSpaceOnUse"/><radialGradient xlink:href="#c" id="h" cx="144.012" cy="51.337" r="67.081" fx="144.012" fy="51.337" gradientTransform="matrix(-2.3989 .67549 -.23008 -.81732 464.996 -26.404)" gradientUnits="userSpaceOnUse"/><radialGradient xlink:href="#d" id="e" cx="199.788" cy="628.438" r="52.352" fx="199.788" fy="628.438" gradientTransform="matrix(-3.10797 .87652 -.6315 -2.23914 1345.65 1374.198)" gradientUnits="userSpaceOnUse"/><linearGradient id="d"><stop offset="0" stop-color="#ff005f"/><stop offset="1" stop-color="#fc01d8"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#780cff"/><stop offset="1" stop-color="#820bff" stop-opacity="0"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#fc0"/><stop offset="1" stop-color="#fc0" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fc0"/><stop offset=".124" stop-color="#fc0"/><stop offset=".567" stop-color="#fe4a05"/><stop offset=".694" stop-color="#ff0f3f"/><stop offset="1" stop-color="#fe0657" stop-opacity="0"/></linearGradient></defs><path fill="url(#e)" d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z" transform="translate(-71.816 -18.143)"/><path fill="url(#f)" d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z" transform="translate(-71.816 -18.143)"/><path fill="url(#g)" d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z" transform="translate(-71.816 -18.143)"/><path fill="url(#h)" d="M204.15 18.143c-55.23 0-71.383.057-74.523.317-11.334.943-18.387 2.728-26.07 6.554-5.922 2.942-10.592 6.351-15.201 11.13-8.394 8.716-13.481 19.439-15.323 32.184-.895 6.188-1.156 7.45-1.209 39.056-.02 10.536 0 24.4 0 42.999 0 55.2.062 71.341.326 74.476.916 11.032 2.645 17.973 6.308 25.565 7 14.533 20.37 25.443 36.12 29.514 5.453 1.404 11.476 2.178 19.208 2.544 3.277.142 36.669.244 70.081.244 33.413 0 66.826-.04 70.02-.203 8.954-.422 14.153-1.12 19.901-2.606 15.852-4.09 28.977-14.838 36.12-29.575 3.591-7.409 5.412-14.614 6.236-25.07.18-2.28.255-38.626.255-74.924 0-36.304-.082-72.583-.26-74.863-.835-10.625-2.656-17.77-6.364-25.32-3.042-6.182-6.42-10.799-11.324-15.519-8.752-8.361-19.455-13.45-32.21-15.29-6.18-.894-7.41-1.158-39.033-1.213z" transform="translate(-71.816 -18.143)"/><path fill="#fff" d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535 0 26.697.119 30.037.594 40.522.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796 6.517 0 11.804-5.284 11.804-11.796 0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482 0 27.879 22.62 50.471 50.52 50.471s50.51-22.592 50.51-50.471c0-27.879-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767-18.11 0-32.791-14.671-32.791-32.767 0-18.098 14.68-32.767 32.791-32.767z"/></svg>

package/public/images/icons/shopee.svg

@@ -0,0 +1 @@
+<svg fill="#EE4D2D" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Shopee</title><path d="M15.9414 17.9633c.229-1.879-.981-3.077-4.1758-4.0969-1.548-.528-2.277-1.22-2.26-2.1719.065-1.056 1.048-1.825 2.352-1.85a5.2898 5.2898 0 0 1 2.8838.89c.116.072.197.06.263-.039.09-.145.315-.494.39-.62.051-.081.061-.187-.068-.281-.185-.1369-.704-.4149-.983-.5319a6.4697 6.4697 0 0 0-2.5118-.514c-1.909.008-3.4129 1.215-3.5389 2.826-.082 1.1629.494 2.1078 1.73 2.8278.262.152 1.6799.716 2.2438.892 1.774.552 2.695 1.5419 2.478 2.6969-.197 1.047-1.299 1.7239-2.818 1.7439-1.2039-.046-2.2878-.537-3.1278-1.19l-.141-.11c-.104-.08-.218-.075-.287.03-.05.077-.376.547-.458.67-.077.108-.035.168.045.234.35.293.817.613 1.134.775a6.7097 6.7097 0 0 0 2.8289.727 4.9048 4.9048 0 0 0 2.0759-.354c1.095-.465 1.8029-1.394 1.9449-2.554zM11.9986 1.4009c-2.068 0-3.7539 1.95-3.8329 4.3899h7.6657c-.08-2.44-1.765-4.3899-3.8328-4.3899zm7.8516 22.5981-.08.001-15.7843-.002c-1.074-.04-1.863-.91-1.971-1.991l-.01-.195L1.298 6.2858a.459.459 0 0 1 .45-.494h4.9748C6.8448 2.568 9.1607 0 11.9996 0c2.8388 0 5.1537 2.5689 5.2757 5.7898h4.9678a.459.459 0 0 1 .458.483l-.773 15.5883-.007.131c-.094 1.094-.979 1.9769-2.0709 2.0059z"/></svg>

package/public/images/icons/whatsapp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 360 362"><path fill="#25D366" fill-rule="evenodd" d="M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z" clip-rule="evenodd"/></svg>

package/public/images/ticket_sources/shopee.svg

@@ -0,0 +1 @@
+<svg fill="#EE4D2D" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Shopee</title><path d="M15.9414 17.9633c.229-1.879-.981-3.077-4.1758-4.0969-1.548-.528-2.277-1.22-2.26-2.1719.065-1.056 1.048-1.825 2.352-1.85a5.2898 5.2898 0 0 1 2.8838.89c.116.072.197.06.263-.039.09-.145.315-.494.39-.62.051-.081.061-.187-.068-.281-.185-.1369-.704-.4149-.983-.5319a6.4697 6.4697 0 0 0-2.5118-.514c-1.909.008-3.4129 1.215-3.5389 2.826-.082 1.1629.494 2.1078 1.73 2.8278.262.152 1.6799.716 2.2438.892 1.774.552 2.695 1.5419 2.478 2.6969-.197 1.047-1.299 1.7239-2.818 1.7439-1.2039-.046-2.2878-.537-3.1278-1.19l-.141-.11c-.104-.08-.218-.075-.287.03-.05.077-.376.547-.458.67-.077.108-.035.168.045.234.35.293.817.613 1.134.775a6.7097 6.7097 0 0 0 2.8289.727 4.9048 4.9048 0 0 0 2.0759-.354c1.095-.465 1.8029-1.394 1.9449-2.554zM11.9986 1.4009c-2.068 0-3.7539 1.95-3.8329 4.3899h7.6657c-.08-2.44-1.765-4.3899-3.8328-4.3899zm7.8516 22.5981-.08.001-15.7843-.002c-1.074-.04-1.863-.91-1.971-1.991l-.01-.195L1.298 6.2858a.459.459 0 0 1 .45-.494h4.9748C6.8448 2.568 9.1607 0 11.9996 0c2.8388 0 5.1537 2.5689 5.2757 5.7898h4.9678a.459.459 0 0 1 .458.483l-.773 15.5883-.007.131c-.094 1.094-.979 1.9769-2.0709 2.0059z"/></svg>