@123usmanhaider321/ui 0.1.8 → 1.0.0

package/README.md

@@ -1,53 +1,438 @@
-# @ticketly/ui
+# @123usmanhaider321/ui
 
-A production-grade, enterprise-ready UI component library designed for the Ticketly ecosystem. This package provides a centralized design system to ensure visual consistency and logic reuse across multiple organization and admin portals.
+Ticketly's shared UI component library — a Vite-built React package designed to be consumed inside **Next.js** applications. Ships the full `AddEventStepper` flow (multi-step event creation/editing), Redux RTK Query APIs, utilities, and a provider for injecting auth services and environment config.
 
-## 🏗️ Architecture & Tech Stack
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Peer Dependencies](#peer-dependencies)
+- [Next.js Integration](#nextjs-integration)
+  - [1. transpilePackages](#1-transpilepackages)
+  - [2. Import styles](#2-import-styles)
+  - [3. Tailwind config](#3-tailwind-config)
+  - [4. Redux store](#4-redux-store)
+  - [5. Provider setup](#5-provider-setup)
+- [Components](#components)
+  - [AddEventStepper](#addeventstepper)
+- [Configuration Reference](#configuration-reference)
+- [Services Interface](#services-interface)
+- [Exported Utilities](#exported-utilities)
+- [Redux API Hooks](#redux-api-hooks)
+- [Development — Playground](#development--playground)
+
+---
+
+## Installation
+
+**From npm:**
+```bash
+npm install @123usmanhaider321/ui
+```
 
-- **Core**: React 19 + TypeScript 5
-- **Bundling**: [Vite](https://vitejs.dev/) + [Rollup](https://rollupjs.org/) (ESM + Tree-shaking)
-- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/) with a standalone PostCSS pipeline.
-- **Documentation**: [Storybook 8](https://storybook.js.org/) for interactive component development.
-- **Type Safety**: Automatic `.d.ts` generation via `vite-plugin-dts`.
+**Local file link (monorepo / sibling directory):**
+```json
+"dependencies": {
+  "@123usmanhaider321/ui": "file:../ticketly-shared-ui"
+}
+```
 
-## 🛠️ Key Features
+---
 
-- **Prop-Based Decoupling**: Components are extracted from legacy Redux states and rely entirely on prop-based injection, making them compatible with any React host.
-- **Production-Ready Bundle**: Optimized build targets with separate CSS extraction to prevent style-cascading issues.
-- **Advanced Form Tools**: Includes high-level abstractions like `StepperForm` and `FormBuilder` designed for complex industrial ticketing workflows.
-- **Component Integrity**: Rigidly tested named exports to ensure consistent consumption in both Vite and Next.js (including Turbopack) environments.
+## Peer Dependencies
 
-## 🚀 Installation
+These must be installed in the consuming app. They are **not** bundled.
 
 ```bash
-npm install @ticketly/ui
+npm install react react-dom @reduxjs/toolkit react-redux redux-persist framer-motion next
+```
+
+| Package | Required version |
+|---|---|
+| `react` | `^18.0.0` |
+| `react-dom` | `^18.0.0` |
+| `@reduxjs/toolkit` | `^2.0.0` |
+| `react-redux` | `^9.0.0` |
+| `redux-persist` | `^6.0.0` |
+| `framer-motion` | `^11.0.0` |
+| `next` | `^14.0.0` |
+
+---
+
+## Next.js Integration
+
+### 1. transpilePackages
+
+The package is published as ESM. Add it to `transpilePackages` so Next.js compiles it instead of loading it raw, and alias shared singletons to prevent duplicate-React/duplicate-framer-motion errors:
+
+```js
+// next.config.js
+const path = require('path');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@123usmanhaider321/ui'],
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      react: path.resolve('node_modules/react'),
+      'react-dom': path.resolve('node_modules/react-dom'),
+      'framer-motion': path.resolve('node_modules/framer-motion'),
+      next: path.resolve('node_modules/next'),
+    };
+    return config;
+  },
+};
+
+module.exports = nextConfig;
+```
+
+> If you see `TypeError: Cannot read properties of null (reading 'useContext')` it means there are two copies of React. The alias above forces both the app and the library to share the same one.
+
+### 2. Import styles
+
+**For Tailwind v3 consumers:** Import the pre-built stylesheet once at the root of your app:
+
+```tsx
+// app/layout.tsx  (App Router)
+import '@123usmanhaider321/ui/dist/styles.css';
+```
+
+**For Tailwind v4 consumers:** Import the pre-built stylesheet inside a cascade layer within your global CSS file (or a scoped CSS file). This prevents the unlayered Tailwind 3 package CSS from overriding your Tailwind 4 utility classes:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@123usmanhaider321/ui/dist/styles.css" layer(components);
+```
+
+> The CSS file contains all Tailwind utility classes used by the library. It is independent of the consuming app's Tailwind build.
+
+### 3. Tailwind config
+
+If you want the library's Tailwind classes generated by **your** app's build (instead of the pre-built CSS), add the compiled dist to your `content` array:
+
+```ts
+// tailwind.config.ts
+export default {
+  content: [
+    './app/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './node_modules/@123usmanhaider321/ui/dist/**/*.js',
+  ],
+};
+```
+
+### 4. Redux store
+
+The library exposes two RTK Query APIs that **must** be registered in your store. It also reads from a `state.event` key — this must exist to avoid a runtime crash in `EventSubmissionConfirmationModal`.
+
+```ts
+// store/index.ts
+'use client';
+
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+import { singleEventApi, eventApi } from '@123usmanhaider321/ui';
+
+// Required — EventSubmissionConfirmationModal selects these flags from state.event.
+// Replace with your own event slice if you have one.
+const eventSlice = createSlice({
+  name: 'event',
+  initialState: {
+    addLoading: false,
+    addError: null as string | null,
+    addSuccess: false,
+    updateLoading: false,
+    updateError: null as string | null,
+    updateSuccess: false,
+  },
+  reducers: {},
+});
+
+export const store = configureStore({
+  reducer: {
+    // ...your own reducers
+    [singleEventApi.reducerPath]: singleEventApi.reducer,
+    [eventApi.reducerPath]: eventApi.reducer,
+    event: eventSlice.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ serializableCheck: false })
+      .concat(singleEventApi.middleware)
+      .concat(eventApi.middleware),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+```
+
+Wrap your app with a `"use client"` Provider component:
+
+```tsx
+// app/providers.tsx
+'use client';
+import { Provider } from 'react-redux';
+import { store } from '@/store';
+
+export function StoreProvider({ children }: { children: React.ReactNode }) {
+  return <Provider store={store}>{children}</Provider>;
+}
+```
+
+### 5. Provider setup
+
+`TicketlyUIProvider` injects auth services and environment config into the library. It must sit inside a `"use client"` component, **below** the Redux `<Provider>`.
+
+```tsx
+// app/providers.tsx
+'use client';
+
+import { Provider } from 'react-redux';
+import { TicketlyUIProvider } from '@123usmanhaider321/ui';
+import { store } from '@/store';
+import { auth } from '@/lib/firebase'; // your app's Firebase Auth instance
+import { onAuthStateChanged } from 'firebase/auth';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const services = {
+    getAuthToken: () =>
+      auth.currentUser?.getIdToken() ?? Promise.resolve(null),
+    onAuthStateChanged: (cb: (user: any) => void) => {
+      return onAuthStateChanged(auth, cb);
+    },
+    getUserId: () => auth.currentUser?.uid ?? null,
+    isAuthenticated: () => !!auth.currentUser,
+  };
+
+  return (
+    <Provider store={store}>
+      <TicketlyUIProvider
+        services={services}
+        config={{
+          BASE_URL: process.env.NEXT_PUBLIC_API_URL!,
+          FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
+          FIREBASE_AUTH_DOMAIN: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN!,
+          FIREBASE_PROJECT_ID: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
+          FIREBASE_STORAGE_BUCKET: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET!,
+          FIREBASE_MESSAGING_SENDER_ID: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID!,
+          FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID!,
+          GOOGLE_MAPS_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
+          PAYFAST_MERCHANT_ID: process.env.NEXT_PUBLIC_PAYFAST_MERCHANT_ID!,
+          PAYFAST_CHECKOUT_URL: process.env.NEXT_PUBLIC_PAYFAST_CHECKOUT_URL!,
+          PAYFAST_API_URL: process.env.NEXT_PUBLIC_PAYFAST_API_URL!,
+          HEADER_KEY: process.env.NEXT_PUBLIC_HEADER_KEY!,
+          BODY_KEY: process.env.NEXT_PUBLIC_BODY_KEY!,
+          VENDOR_API_KEY: process.env.NEXT_PUBLIC_VENDOR_API_KEY!,
+          VENDOR_API_SECRET: process.env.NEXT_PUBLIC_VENDOR_API_SECRET!,
+        }}
+      >
+        {children}
+      </TicketlyUIProvider>
+    </Provider>
+  );
+}
 ```
 
-## 📖 Usage
+Then in your root layout:
 
-### Importing Components:
 ```tsx
-import { Button, Alert } from '@ticketly/ui';
-import '@ticketly/ui/styles.css';
+// app/layout.tsx
+import '@123usmanhaider321/ui/dist/styles.css';
+import { Providers } from './providers';
 
-function App() {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      <Button variant="primary">Click Me</Button>
-      <Alert type="success" message="Success!" isVisible={true} />
-    </>
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
   );
 }
 ```
 
-## 👨‍💻 Development & Integration
+> **Sticky layout warning:** Do not put `overflow: hidden` or `overflow-x: hidden` on any element that wraps these components. It breaks `position: sticky` used by the file upload sidebar inside the stepper. Use `overflow: clip` instead if you need to contain horizontal bleed.
 
-This library was built with a **"Resilient Development"** philosophy. To bypass modern filesystem-root security restrictions in Turbopack/Next.js 16, it supports physical mirroring via `npm install --install-links`, ensuring zero-friction development on Windows and local environments.
+---
+
+## Components
+
+### AddEventStepper
+
+The primary export. A fully self-contained multi-step form for creating and editing events. All steps, validation, API calls, and navigation guards are internal.
+
+```tsx
+// app/events/create/page.tsx
+'use client';
+
+import { AddEventStepper } from '@123usmanhaider321/ui';
+
+export default function CreateEventPage() {
+  return (
+    <AddEventStepper
+      organizer_id="org-123"
+      onEventCreated={(eventId) => {
+        console.log('Event created:', eventId);
+      }}
+    />
+  );
+}
+```
+
+**Edit mode:**
+
+```tsx
+<AddEventStepper
+  edit
+  id="existing-event-id"
+  organizer_id="org-123"
+  onEventCreated={(id) => router.push(`/events/${id}`)}
+/>
+```
+
+**Restricted modes** — open on a specific step group only:
+
+```tsx
+// Jump straight to the questions editor
+<AddEventStepper organizer_id="org-123" id="event-id" mode="questions" />
+
+// Jump straight to the social profiles step
+<AddEventStepper organizer_id="org-123" id="event-id" mode="social" />
+```
+
+**Persisting in-progress state across page reloads:**
+
+```tsx
+<AddEventStepper
+  organizer_id="org-123"
+  SCOPED_ID_KEY="create_event_id"
+  SCOPED_FORM_KEY="create_event_form"
+  onEventCreated={(id) => router.push(`/events/${id}`)}
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `organizer_id` | `string` | **required** | The organizer's ID — attached to all event API payloads. |
+| `edit` | `boolean` | `false` | Edit mode — loads the event specified by `id`. |
+| `id` | `string` | — | Event ID to fetch in edit mode, or to resume an in-progress creation. |
+| `onEventCreated` | `(id: string) => void` | — | Callback after a successful create or update. |
+| `isClearing` | `boolean` | `false` | Renders a global loading overlay while the parent is resetting state. |
+| `SCOPED_ID_KEY` | `string` | `""` | `localStorage` key for persisting the in-progress event ID between page reloads. |
+| `SCOPED_FORM_KEY` | `string` | `""` | `localStorage` key for persisting form state between page reloads. |
+| `isSameQuestionTitleAllowed` | `boolean` | — | Allow duplicate question titles in the custom form builder. |
+| `closed_loop_id` | `string` | — | Attaches a closed-loop ID to the event payload. |
+| `initialStep` | `number` | — | Force the stepper to open at a specific step number on mount. |
+| `mode` | `"questions" \| "social" \| null` | `null` | Restrict the stepper to only the questions steps or only the social profiles step. |
+| `test` | `boolean` | `false` | **Dev only.** Enables free click-navigation between all steps, bypassing validation and event ID guards. |
+
+---
+
+## Configuration Reference
+
+All keys are passed to `TicketlyUIProvider` via the `config` prop and stored in a singleton. Defaults are empty strings except `BASE_URL`.
 
-### Scripts:
-- `npm run dev`: Start Vite development server.
-- `npm run build`: Generate optimized production bundle and CSS.
-- `npm run storybook`: Launch interactive documentation.
+| Key | Description |
+|---|---|
+| `BASE_URL` | Base URL for all API calls. Default: `http://localhost:8080` |
+| `FIREBASE_API_KEY` | Firebase project API key |
+| `FIREBASE_AUTH_DOMAIN` | Firebase auth domain |
+| `FIREBASE_PROJECT_ID` | Firebase project ID |
+| `FIREBASE_STORAGE_BUCKET` | Firebase Storage bucket |
+| `FIREBASE_MESSAGING_SENDER_ID` | Firebase Cloud Messaging sender ID |
+| `FIREBASE_APP_ID` | Firebase app ID |
+| `FIREBASE_MEASUREMENT_ID` | Firebase Analytics measurement ID |
+| `GOOGLE_MAPS_API_KEY` | Google Maps API key (venue autocomplete) |
+| `PAYFAST_MERCHANT_ID` | PayFast merchant ID |
+| `PAYFAST_CHECKOUT_URL` | PayFast checkout callback URL |
+| `PAYFAST_API_URL` | PayFast API endpoint |
+| `PAYMO_PG_PAYFAST_CHECKOUT_URL` | Paymo PG PayFast callback URL |
+| `HEADER_KEY` | Request encryption header key |
+| `BODY_KEY` | Request encryption body key |
+| `TICKETING_PORTAL_HEADER_KEY` | Ticketing portal encryption header key |
+| `TICKETING_PORTAL_BODY_KEY` | Ticketing portal encryption body key |
+| `VENDOR_API_KEY` | Vendor API key |
+| `VENDOR_API_SECRET` | Vendor API secret |
+| `INSTAGRAM_URL` | Instagram URL used in social profile links |
 
 ---
-*Created with a focus on Frontend Systems Architecture and scalable component design.*
+
+## Services Interface
+
+```ts
+interface TicketlyUIServices {
+  // Returns a valid Firebase ID token for authenticated API requests
+  getAuthToken: () => Promise<string | null>;
+
+  // Subscribe to auth state changes; returns an unsubscribe function
+  onAuthStateChanged: (callback: (user: any) => void) => () => void;
+
+  // Returns the current user's UID, or null if unauthenticated
+  getUserId: () => string | null;
+
+  // Returns whether the current user is authenticated
+  isAuthenticated: () => boolean;
+}
+```
+
+---
+
+## Exported Utilities
+
+```ts
+import {
+  cn,                       // clsx + tailwind-merge
+  formatDateForApi,         // formats a Date to the API-expected string
+  formatDate,               // human-readable date string
+  formatDateTime,           // human-readable date + time string
+  isSameDay,                // compares two dates by calendar day
+  isDefaultDateRange,       // checks if a range is still the default placeholder
+  toDate,                   // parses multiple input types to a Date
+  extractDateAndTime,       // splits a datetime string → { date, time }
+  convertDateFormat,        // converts between date format conventions
+  getDateRange,             // builds a { start, end } range object
+  getCurrentTierAndMember,  // resolves the active ticket tier and member info
+  encrypt,                  // AES-encrypt a string using HEADER_KEY / BODY_KEY
+  decrypt,                  // AES-decrypt a string
+  fetchWrapper,             // typed fetch wrapper used internally by all API calls
+} from '@123usmanhaider321/ui';
+```
+
+---
+
+## Redux API Hooks
+
+Re-exported from the library for use alongside the stepper in your own components:
+
+```ts
+import {
+  useAddEventMutation,
+  useUpdateEventMutation,
+  useGetEventDetailsByIdQuery,
+  useUpdateEventSocialProfilesMutation,
+  useSubmitEventForApprovalMutation,
+} from '@123usmanhaider321/ui';
+```
+
+---
+
+## Development — Playground
+
+A standalone Vite playground lets you develop and test components without a Next.js app.
+
+```bash
+npm run playground
+# → http://127.0.0.1:5173
+```
+
+The playground mocks `next/navigation`, `next/image`, `next/link`, and `next/dynamic` via Vite aliases in `playground/vite.config.ts` — no Next.js install required.
+
+Edit `playground/App.tsx` to swap in different components and configs.
+
+```bash
+npm run build       # build the library → dist/ (ESM + type declarations)
+npm run build:css   # compile Tailwind → dist/styles.css
+```

package/dist/images/icon/1LINK.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="87.136124mm"
+   height="81.138878mm"
+   viewBox="0 0 87.136124 81.138878"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   sodipodi:docname="1LINK_logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.70911897"
+     inkscape:cx="209.41479"
+     inkscape:cy="136.78946"
+     inkscape:window-width="1920"
+     inkscape:window-height="992"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-49.710835,-112.40795)"><g
+       id="g1"
+       transform="translate(-11.566581,4.4773869)"><path
+         style="fill:#fbfcfb"
+         d="m 61.347516,184.21875 -0.0701,-5.02708 h 5.291667 5.291667 v -1.21861 -1.2186 l -2.38125,-0.10432 -2.38125,-0.10431 -0.10013,-3.79236 -0.100129,-3.79236 H 64.273782 61.64957 l -0.108372,5.02708 c -0.0596,2.7649 -0.121719,-4.18041 -0.138032,-15.43402 -0.01631,-11.25361 0.0367,-20.06424 0.117806,-19.57917 0.380423,2.27516 1.727581,5.51674 3.261044,7.84685 7.35462,11.17541 24.005478,17.80485 42.885684,17.07468 13.97438,-0.54044 26.2655,-5.2027 33.79029,-12.81731 3.51317,-3.5551 5.48982,-6.82996 6.4077,-10.61608 0.43188,-1.78143 0.4925,0.94225 0.51846,23.2945 0.0193,16.65894 -0.0912,25.3118 -0.32339,25.3118 -0.20159,0 -0.35278,-1.05833 -0.35278,-2.46944 v -2.46945 H 104.68454 61.661108 l -0.121748,2.55764 c -0.06696,1.4067 -0.153291,0.29545 -0.191844,-2.46944 z m 30.268795,-10.14236 v -5.11528 h -2.822223 -2.822222 v 5.11528 5.11528 h 2.822222 2.822223 z m 20.461109,3.66602 v -1.44926 l 1.14653,1.43105 c 1.11571,1.39259 1.20579,1.43154 3.35139,1.44926 l 2.20486,0.0182 v -5.11528 -5.11528 h -2.64583 -2.64584 l -0.0158,1.67569 -0.0158,1.6757 -1.50259,-1.6757 c -1.45899,-1.62707 -1.56088,-1.67569 -3.51197,-1.67569 h -2.00938 v 5.11528 5.11528 h 2.82222 2.82222 z m 27.23448,-0.48112 0.1058,-1.93038 0.88195,0.43968 c 0.54028,0.26935 1.08273,1.01718 1.40023,1.93038 l 0.51829,1.4907 h 2.7449 c 2.47894,0 2.74491,-0.0661 2.74491,-0.68259 0,-1.09252 -0.68109,-2.59609 -1.62366,-3.58437 -0.81073,-0.85004 -0.83045,-0.95102 -0.27568,-1.41111 0.75683,-0.62766 1.54656,-2.4962 1.54656,-3.65921 0,-0.8756 -0.0518,-0.89328 -2.6178,-0.89328 -2.601,0 -2.61924,0.007 -2.84222,1.02175 -0.23324,1.06194 -0.9771,1.88924 -2.03651,2.26495 -0.5345,0.18955 -0.61736,-0.0163 -0.61736,-1.53388 v -1.75282 h -2.82222 -2.82222 v 5.11528 5.11528 h 2.80462 2.80461 z m -78.005089,-56.54254 -0.02939,-12.78819 18.256251,0.0342 c 16.583221,0.031 17.979141,0.0774 15.232403,0.50558 -14.505432,2.26137 -26.314985,9.19464 -31.021898,18.21264 -0.775378,1.48555 -1.634373,3.62868 -1.908877,4.7625 -0.460417,1.90173 -0.501375,1.07042 -0.528488,-10.7267 z m 86.618639,10.84891 c -0.7885,-4.93098 -5.85072,-11.49008 -11.85914,-15.36582 -6.13299,-3.95611 -14.32877,-6.90862 -21.89646,-7.88815 -1.4304,-0.18514 4.47755,-0.3102 15.98744,-0.3384 l 18.25625,-0.0447 v 12.52361 c 0,6.88798 -0.0591,12.52361 -0.1313,12.52361 -0.0722,0 -0.23278,-0.63456 -0.35679,-1.41012 z"
+         id="path3" /><path
+         style="fill:#f8a01a"
+         d="m 138.91639,171.57755 c 0.0169,-0.41097 0.10052,-0.49456 0.21313,-0.21314 0.10191,0.25466 0.0894,0.55893 -0.0279,0.67616 -0.11722,0.11722 -0.2006,-0.0911 -0.18528,-0.46302 z m 0,-1.41112 c 0.0169,-0.41096 0.10052,-0.49455 0.21313,-0.21313 0.10191,0.25466 0.0894,0.55893 -0.0279,0.67616 -0.11722,0.11722 -0.2006,-0.0911 -0.18528,-0.46303 z m -39.009801,-9.69465 c -15.63299,-1.34152 -28.534082,-8.80606 -32.330297,-18.70622 -0.932057,-2.43072 -1.247617,-7.00231 -0.658057,-9.53343 0.681379,-2.92533 2.770324,-6.58914 5.265118,-9.23452 13.060472,-13.84878 42.794247,-15.98182 60.324757,-4.32756 2.91261,1.9363 6.92241,6.08217 8.40055,8.68562 2.94477,5.18664 3.00363,11.30843 0.16104,16.75158 -5.64597,10.81124 -23.44021,17.8854 -41.163111,16.36453 z m 14.287501,-24.319 v -19.05 h -6.66453 -6.66454 l -0.21067,0.83938 c -0.11587,0.46167 -0.934353,1.6443 -1.818851,2.62807 -2.605896,2.89838 -6.311294,4.33515 -12.422661,4.81689 l -3.263194,0.25723 v 3.66671 3.66672 h 6.879167 6.879167 v 11.1125 11.1125 h 8.643052 8.64306 z"
+         id="path2" /><path
+         style="fill:#084b24"
+         d="m 61.630198,186.6 v -2.46945 h 43.038892 43.03889 V 186.6 189.06944 H 104.66909 61.630198 Z m 0,-12.52361 v -5.11528 h 2.645833 2.645834 v 3.88056 3.88055 h 2.469444 2.469445 v 1.23472 1.23473 h -5.115278 -5.115278 z m 24.341668,0 v -5.11528 h 2.822222 2.822223 v 5.11528 5.11528 h -2.822223 -2.822222 z m 20.461114,0 v -5.11528 h 1.92087 c 1.83201,0 1.99485,0.0775 3.5196,1.67569 l 1.59873,1.6757 0.008,-1.6757 0.008,-1.67569 h 2.64584 2.64583 v 5.11528 5.11528 h -2.07562 c -1.97414,0 -2.13798,-0.069 -3.35138,-1.41213 l -1.27578,-1.41213 v 1.41213 1.41213 h -2.82222 -2.82222 z m 27.16389,-0.0148 v -5.13012 l 2.71983,0.10304 2.71983,0.10303 0.0142,1.5875 c 0.0124,1.3887 0.10255,1.57247 0.71975,1.46747 1.03224,-0.17562 1.86912,-1.04593 2.1247,-2.20961 0.2234,-1.01714 0.23642,-1.02175 2.88867,-1.02175 h 2.66425 l -0.19104,1.42432 c -0.10507,0.78337 -0.5959,1.95512 -1.09073,2.60387 l -0.89969,1.17956 0.74019,0.65932 c 0.84492,0.7526 1.70115,2.58803 1.70115,3.6466 0,0.65972 -0.22061,0.71689 -2.76638,0.71689 h -2.76638 l -0.41024,-1.36927 c -0.45034,-1.50308 -0.92382,-2.02848 -1.9945,-2.21318 -0.64177,-0.11072 -0.69612,0.0457 -0.60116,1.73036 l 0.1044,1.85209 h -2.83843 -2.83842 z M 97.470313,163.65952 c -17.279315,-1.97763 -31.545998,-10.85681 -35.155859,-21.88003 -1.215021,-3.71024 -1.174573,-8.66563 0.09846,-12.06193 1.304663,-3.48069 2.959392,-6.04628 5.743678,-8.90536 6.223736,-6.39093 17.235367,-11.24819 28.457943,-12.55288 5.496435,-0.639 16.534655,-0.26611 21.107345,0.71303 23.52514,5.03738 35.85506,20.37867 28.5579,35.53273 -4.26517,8.85752 -16.10424,16.12687 -30.32179,18.61798 -3.95296,0.69261 -14.45952,0.99748 -18.487672,0.53646 z m 15.489057,-3.5572 c 5.88692,-0.72582 12.87226,-3.02663 17.4625,-5.75176 8.42026,-4.99893 12.7,-11.18782 12.7,-18.36537 0,-5.11916 -1.59003,-8.74506 -5.75989,-13.13483 -14.92369,-15.71077 -50.298665,-15.63085 -65.178627,0.14725 -2.494794,2.64538 -4.583739,6.30919 -5.265118,9.23452 -0.58956,2.53112 -0.274,7.10271 0.658057,9.53343 2.657321,6.93003 10.27009,13.11435 19.99152,16.24032 8.047379,2.58768 16.048898,3.24832 25.391558,2.09644 z M 96.907978,144.09028 v -11.1125 h -6.879167 -6.879167 v -3.66672 -3.66671 l 3.263194,-0.25723 c 6.111367,-0.48174 9.816765,-1.91851 12.422661,-4.81689 0.884498,-0.98377 1.702981,-2.1664 1.818851,-2.62807 l 0.21067,-0.83938 h 6.66454 6.66453 v 19.05 19.05 h -8.64306 -8.643052 z"
+         id="path1" /></g></g></svg>

package/dist/images/icon/CreditCard.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#61B8CC;" d="M503.792,386.62c0,14.586-11.934,26.52-26.52,26.52H34.727c-14.586,0-26.52-11.934-26.52-26.52
+	V125.38c0-14.586,11.934-26.52,26.52-26.52h442.545c14.586,0,26.52,11.934,26.52,26.52V386.62z"/>
+<rect x="8.208" y="145.496" style="fill:#333E48;" width="495.582" height="31.383"/>
+<path style="fill:#FED771;" d="M462.189,267.934c0,5.835-4.773,10.609-10.608,10.609h-57.017c-5.833,0-10.608-4.774-10.608-10.609
+	v-34.476c0-5.834,4.775-10.607,10.608-10.607h57.017c5.835,0,10.608,4.773,10.608,10.607V267.934z"/>
+<ellipse style="fill:#E5AB46;" cx="423.07" cy="250.697" rx="29.143" ry="20.377"/>
+<rect x="47.818" y="222.408" style="fill:#99DAEA;" width="181.664" height="56.587"/>
+<path style="fill:#1E252B;" d="M180.55,324.565c-7.056,0-11.884,4.78-11.884,11.019v0.091c0,6.146,4.508,10.108,11.292,10.108
+	c3.416,0,5.873-1.458,7.468-3.368c-0.183,5.871-3.005,10.016-7.696,10.016c-2.187,0-3.961-0.637-5.829-1.958
+	c-0.455-0.274-0.956-0.455-1.549-0.455c-1.458,0-2.641,1.093-2.641,2.55c0,1.046,0.5,1.821,1.274,2.321
+	c2.368,1.594,5.008,2.642,8.605,2.642c8.605,0,13.66-7.102,13.66-17.348v-0.092c0-6.284-1.503-9.789-3.825-12.156
+	C187.154,325.703,184.559,324.565,180.55,324.565z M187.244,335.356c0,3.096-2.413,5.736-6.465,5.736
+	c-3.962,0-6.511-2.366-6.511-5.69v-0.091c0-3.279,2.367-5.919,6.329-5.919c4.052,0,6.647,2.55,6.647,5.872v0.092H187.244z
+	 M58.699,324.701h-0.091c-0.82,0-1.64,0.183-2.733,0.501l-4.826,1.547c-1.139,0.318-1.867,1.229-1.867,2.413
+	c0,1.275,1.139,2.368,2.459,2.368c0.274,0,0.683-0.047,1.001-0.137l3.28-1.002v24.041c0,1.55,1.275,2.777,2.777,2.777
+	c1.549,0,2.777-1.228,2.777-2.777v-26.955C61.477,325.93,60.293,324.701,58.699,324.701z M144.396,340.456
+	c2.687-1.412,4.644-3.551,4.644-7.102v-0.092c0-4.917-4.689-8.604-11.064-8.604s-11.064,3.734-11.064,8.604v0.092
+	c0,3.551,1.959,5.691,4.644,7.102c-3.597,1.503-5.738,3.915-5.738,7.74v0.09c0,5.51,5.192,9.153,12.157,9.153
+	c6.967,0,12.157-3.552,12.157-9.243v-0.092C150.133,344.326,147.902,342.049,144.396,340.456z M132.284,333.763
+	c0-2.414,2.277-4.418,5.692-4.418c3.416,0,5.692,2.004,5.692,4.462v0.091c0,2.733-2.413,4.69-5.692,4.69s-5.692-1.958-5.692-4.734
+	C132.284,333.854,132.284,333.763,132.284,333.763z M144.669,347.968c0,2.642-2.504,4.781-6.693,4.781s-6.648-2.185-6.648-4.781
+	v-0.091c0-2.914,2.868-4.825,6.648-4.825s6.693,1.911,6.693,4.825V347.968z M477.273,90.652H34.727C15.578,90.652,0,106.23,0,125.38
+	V386.62c0,19.149,15.578,34.727,34.727,34.727h442.545c19.148,0,34.727-15.578,34.727-34.727V125.38
+	C512,106.23,496.421,90.652,477.273,90.652z M495.585,386.62c0,10.098-8.214,18.312-18.312,18.312H34.727
+	c-10.097,0-18.312-8.215-18.312-18.312V185.091h479.169V386.62z M495.585,168.676H16.415v-14.968h479.169V168.676z M495.585,137.293
+	H16.415V125.38c0-10.098,8.214-18.312,18.312-18.312h442.545c10.098,0,18.312,8.215,18.312,18.312V137.293z M108.332,324.565
+	c-7.056,0-11.884,4.78-11.884,11.019v0.091c0,6.146,4.508,10.108,11.292,10.108c3.416,0,5.873-1.458,7.468-3.368
+	c-0.183,5.871-3.005,10.016-7.696,10.016c-2.185,0-3.961-0.637-5.829-1.958c-0.455-0.274-0.956-0.455-1.549-0.455
+	c-1.458,0-2.641,1.093-2.641,2.55c0,1.046,0.501,1.821,1.274,2.321c2.368,1.594,5.008,2.642,8.605,2.642
+	c8.605,0,13.66-7.102,13.66-17.348v-0.092c0-6.284-1.501-9.789-3.825-12.156C114.934,325.703,112.34,324.565,108.332,324.565z
+	 M115.025,335.356c0,3.096-2.413,5.736-6.465,5.736c-3.962,0-6.511-2.366-6.511-5.69v-0.091c0-3.279,2.367-5.919,6.329-5.919
+	c4.052,0,6.647,2.55,6.647,5.872v0.092H115.025z M88.889,352.066H75.958l6.556-5.464c5.646-4.597,8.288-7.33,8.288-12.339v-0.09
+	c0-5.692-4.28-9.515-10.518-9.515c-5.009,0-7.968,1.913-10.563,5.144c-0.41,0.501-0.637,1.138-0.637,1.731
+	c0,1.411,1.137,2.549,2.55,2.549c0.911,0,1.549-0.409,1.958-0.866c1.958-2.366,3.734-3.55,6.284-3.55
+	c2.914,0,5.145,1.82,5.145,4.963c0,2.867-1.594,4.916-5.964,8.604l-9.789,8.332c-0.956,0.774-1.458,1.685-1.458,2.779
+	c0,1.639,1.276,2.64,3.005,2.64H88.89c1.366,0,2.458-1.092,2.458-2.458C91.346,353.159,90.254,352.066,88.889,352.066z
+	 M356.637,354.07c2.595,2.003,5.873,3.46,10.199,3.46c6.829,0,11.655-4.326,11.655-10.79v-0.092c0-6.739-4.872-10.017-11.109-10.017
+	c-2.141,0-3.551,0.363-5.055,0.912l0.501-7.468h11.975c1.366,0,2.504-1.092,2.504-2.458c0-1.365-1.138-2.504-2.504-2.504h-14.434
+	c-1.367,0-2.46,1.047-2.551,2.504l-0.683,11.473c-0.046,1.048,0.272,1.867,1.092,2.458c1.092,0.775,1.776,1.093,2.642,1.093
+	c0.865,0,2.367-1.093,5.463-1.093c3.871,0,6.602,2.005,6.602,5.28v0.092c0,3.371-2.595,5.51-6.192,5.51
+	c-2.504,0-4.735-0.911-6.921-2.688c-0.455-0.362-0.956-0.545-1.639-0.545c-1.457,0-2.687,1.23-2.687,2.686
+	C355.498,352.795,355.954,353.523,356.637,354.07z M257.644,356.983h18.076c1.366,0,2.459-1.092,2.459-2.458
+	c0-1.366-1.093-2.459-2.459-2.459h-12.931l6.556-5.464c5.646-4.597,8.288-7.33,8.288-12.339v-0.09c0-5.692-4.28-9.515-10.518-9.515
+	c-5.009,0-7.968,1.913-10.563,5.143c-0.41,0.501-0.637,1.138-0.637,1.731c0,1.411,1.137,2.549,2.55,2.549
+	c0.911,0,1.547-0.409,1.958-0.866c1.959-2.366,3.734-3.55,6.284-3.55c2.914,0,5.145,1.82,5.145,4.963
+	c0,2.867-1.593,4.916-5.964,8.604l-9.789,8.332c-0.956,0.774-1.457,1.685-1.457,2.779
+	C254.639,355.983,255.914,356.983,257.644,356.983z M394.564,286.75h57.017c10.375,0,18.815-8.441,18.815-18.816v-34.476
+	c0-10.375-8.441-18.814-18.815-18.814h-57.017c-10.375,0-18.815,8.441-18.815,18.814v34.476
+	C375.749,278.309,384.189,286.75,394.564,286.75z M392.164,233.458c0-1.301,1.099-2.399,2.4-2.399h57.017
+	c1.301,0,2.4,1.099,2.4,2.399v34.476c0,1.301-1.099,2.401-2.4,2.401h-57.017c-1.301,0-2.4-1.1-2.4-2.401V233.458z M338.467,357.439
+	c6.967,0,12.157-3.552,12.157-9.243v-0.092c0-3.779-2.23-6.055-5.737-7.649c2.687-1.412,4.644-3.551,4.644-7.102v-0.092
+	c0-4.917-4.69-8.604-11.064-8.604c-6.375,0-11.064,3.734-11.064,8.604v0.092c0,3.551,1.958,5.691,4.643,7.102
+	c-3.597,1.503-5.737,3.915-5.737,7.74v0.09C326.31,353.796,331.501,357.439,338.467,357.439z M332.775,333.763
+	c0-2.414,2.277-4.418,5.692-4.418c3.415,0,5.692,2.004,5.692,4.462v0.091c0,2.733-2.413,4.69-5.692,4.69s-5.692-1.958-5.692-4.734
+	V333.763z M331.819,347.877c0-2.914,2.869-4.825,6.648-4.825s6.693,1.911,6.693,4.825v0.091c0,2.642-2.504,4.781-6.693,4.781
+	s-6.648-2.185-6.648-4.781V347.877z M308.232,345.783c3.415,0,5.873-1.458,7.467-3.368c-0.183,5.871-3.005,10.016-7.694,10.016
+	c-2.187,0-3.96-0.637-5.829-1.958c-0.455-0.274-0.956-0.455-1.549-0.455c-1.457,0-2.641,1.093-2.641,2.55
+	c0,1.046,0.5,1.821,1.275,2.321c2.368,1.594,5.008,2.642,8.605,2.642c8.606,0,13.66-7.102,13.66-17.348v-0.092
+	c0-6.284-1.503-9.789-3.825-12.156c-2.276-2.231-4.872-3.37-8.879-3.37c-7.056,0-11.884,4.78-11.884,11.019v0.091
+	C296.939,341.822,301.448,345.783,308.232,345.783z M302.541,335.31c0-3.279,2.367-5.919,6.329-5.919
+	c4.052,0,6.647,2.55,6.647,5.872v0.092c0,3.096-2.414,5.736-6.465,5.736c-3.962,0-6.511-2.366-6.511-5.69v-0.091H302.541z
+	 M407.771,345.236h-2.459v-17.894c0-1.503-1.229-2.686-2.732-2.686c-1.639,0-2.414,0.637-3.417,1.821l-14.98,17.758
+	c-0.82,0.955-1.229,1.866-1.229,2.958c0,1.547,1.229,2.641,2.732,2.641h14.251v4.735c0,1.503,1.185,2.641,2.688,2.641
+	s2.686-1.138,2.686-2.641v-4.735h2.459c1.321,0,2.322-1.001,2.322-2.276C410.093,346.283,409.092,345.236,407.771,345.236z
+	 M399.939,345.236h-10.472l10.472-12.611V345.236z M228.044,327.57c0,1.321,1.093,2.413,2.459,2.413h11.565l-7.468,7.968
+	c-0.865,0.866-1.184,1.549-1.184,2.275c0,1.321,1.092,2.414,2.414,2.414h1.138c4.463,0,7.331,1.776,7.331,4.917v0.091
+	c0,2.914-2.368,4.827-5.51,4.827c-2.959,0-5.235-1.047-7.239-3.052c-0.455-0.408-1.047-0.727-1.867-0.727
+	c-1.457,0-2.687,1.229-2.687,2.684c0,0.822,0.409,1.594,0.911,2.005c2.596,2.504,6.102,4.143,10.792,4.143
+	c6.647,0,11.155-4.235,11.155-10.108v-0.091c0-5.875-4.554-8.334-9.38-8.925l7.513-7.785c0.956-0.956,1.593-1.73,1.593-3.051
+	c0-1.503-1.185-2.458-2.777-2.458h-16.301C229.138,325.112,228.044,326.204,228.044,327.57z M216.614,340.456
+	c2.687-1.412,4.644-3.551,4.644-7.102v-0.092c0-4.917-4.689-8.604-11.064-8.604s-11.064,3.734-11.064,8.604v0.092
+	c0,3.551,1.959,5.691,4.644,7.102c-3.597,1.503-5.738,3.915-5.738,7.74v0.09c0,5.51,5.192,9.153,12.157,9.153
+	c6.967,0,12.157-3.552,12.157-9.243v-0.092C222.352,344.326,220.12,342.049,216.614,340.456z M204.504,333.763
+	c0-2.414,2.276-4.418,5.691-4.418c3.416,0,5.692,2.004,5.692,4.462v0.091c0,2.733-2.413,4.69-5.692,4.69s-5.691-1.958-5.691-4.734
+	V333.763z M216.887,347.968c0,2.642-2.504,4.781-6.693,4.781s-6.647-2.185-6.647-4.781v-0.091c0-2.914,2.868-4.825,6.647-4.825
+	c3.78,0,6.693,1.911,6.693,4.825V347.968z M47.818,287.199h181.66c4.533,0,8.208-3.674,8.208-8.208v-56.587
+	c0-4.534-3.675-8.208-8.208-8.208H47.818c-4.533,0-8.208,3.674-8.208,8.208v56.587C39.61,283.524,43.285,287.199,47.818,287.199z
+	 M56.026,230.611H221.27v40.172H56.026V230.611z"/>
+</svg>

package/dist/images/icon/add-circle-1.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99984 18.3337C14.5832 18.3337 18.3332 14.5837 18.3332 10.0003C18.3332 5.41699 14.5832 1.66699 9.99984 1.66699C5.4165 1.66699 1.6665 5.41699 1.6665 10.0003C1.6665 14.5837 5.4165 18.3337 9.99984 18.3337Z" stroke="#1F7A7A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.6665 10H13.3332" stroke="#1F7A7A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 13.3337V6.66699" stroke="#1F7A7A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/images/icon/check-circle-broken.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.0857V12.0057C21.9988 14.1621 21.3005 16.2604 20.0093 17.9875C18.7182 19.7147 16.9033 20.9782 14.8354 21.5896C12.7674 22.201 10.5573 22.1276 8.53447 21.3803C6.51168 20.633 4.78465 19.2518 3.61096 17.4428C2.43727 15.6338 1.87979 13.4938 2.02168 11.342C2.16356 9.19029 2.99721 7.14205 4.39828 5.5028C5.79935 3.86354 7.69279 2.72111 9.79619 2.24587C11.8996 1.77063 14.1003 1.98806 16.07 2.86572M22 4L12 14.01L9 11.01" stroke="#039855" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/images/icon/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#98A2B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.16992 14.83L14.8299 9.17" stroke="#98A2B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8299 14.83L9.16992 9.17" stroke="#98A2B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>