@lmnto/h-mall-shared 1.0.1

package/app.css

@@ -0,0 +1,457 @@
+@import "react-toastify/dist/ReactToastify.css";
+@import "react-responsive-carousel/lib/styles/carousel.min.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --scrollbar-track-bg: #e6f0ff;
+  --scrollbar-thumb-bg: #e6f0ff;
+  --scrollbar-thumb-hover-bg: #e6f0ff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  color: #1c222e;
+  background: #fff;
+}
+
+.overflow-unset {
+  overflow: unset !important;
+}
+
+.font-box {
+  display: -webkit-box;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+.loginBG {
+  background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 45%, #fef9c3 100%);
+}
+
+.card {
+  border-radius: 12px;
+  border: 0.62px solid #e0f2fe;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4px 6px 0 #dbeafe;
+}
+
+.productcarousel .carousel .thumbs {
+  text-align: center;
+}
+
+.productcarousel .carousel .thumb {
+  width: 75px !important;
+  height: 75px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-right: 6px;
+  padding: 0;
+}
+
+.carousel .thumbs-wrapper {
+  margin: 10px 30px;
+}
+
+.productcarousel .carousel .thumb.selected,
+.productcarousel .carousel .thumb:hover {
+  border: 1px solid #949494;
+}
+
+.productcarousel .carousel.carousel-slider {
+  overflow: inherit;
+}
+
+.productcarousel .arrow {
+  position: absolute;
+  top: auto;
+  bottom: -15%;
+  background-color: #f9f9f9;
+  border: 1px solid #cfd4db;
+  padding: 7px;
+  border-radius: 50%;
+  border: none;
+  font-size: 17px;
+  cursor: pointer;
+  z-index: 2;
+}
+.productcarousel .arrow:hover {
+  background-color: #eeeeee;
+}
+
+.productcarousel .arrow.prev {
+  left: 5px;
+}
+
+.productcarousel .arrow.next {
+  right: 5px;
+}
+
+.productcarousel .arrow svg {
+  color: #707172;
+}
+
+.productcarousel .thumbs-wrapper .control-arrow {
+  display: none;
+}
+
+.productcarousel .carousel .slide .productImg {
+  height: 450px;
+  background-color: #f6f5f7;
+  border-radius: 12px;
+  margin: 10px;
+}
+
+.productcarousel .carousel .slide .productImg img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.cartAutoHeight {
+  height: calc(100svh - 170px);
+  overflow-y: auto;
+}
+
+.subscriptionBanner {
+  border-radius: 12px;
+  border: 0.62px solid rgba(59, 130, 246, 0.2);
+  background: linear-gradient(
+    135deg,
+    rgba(219, 234, 254, 0.4) 0%,
+    rgba(209, 250, 229, 0.4) 100%
+  );
+}
+.subscriptionBannerBuy {
+  border-radius: 12px;
+  border: 0.62px solid rgba(59, 130, 246, 0.2);
+  background: linear-gradient(
+    135deg,
+    rgba(219, 234, 254, 0.6) 0%,
+    rgba(244, 232, 246, 0.6) 100%
+  );
+}
+.boostDialogBg {
+  background-image: url("./public/img/boost-dialog-bg.png");
+  background-position: bottom right;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.boostBanner {
+  background-image:
+    url("./public/img/boost-banner-right.png"),
+    url("./public/img/boost-banner-bg.png");
+  background-position:
+    right bottom,
+    left top;
+  background-repeat: no-repeat, no-repeat;
+  background-size: contain, cover;
+}
+.smartPayBanner {
+  background-image: url("./public/img/smart-pay-banner-own.png");
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.aiX1Banner {
+  background-image: url("./public/img/ai-x1.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.gen3Banner {
+  background-image: url("./public/img/gen3-home-banner-bg.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.smartPayBannerHow {
+  background-image: url("./public/img/smart-pay-banner-how.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.verticalCarouselOrderSummary {
+  border-radius: 8px;
+  background: linear-gradient(262deg, #fef6ff 0%, #fffcff 100%);
+}
+
+@media (max-width: 768px) {
+  .boostBanner {
+    background-image: url("./public/img/boost-banner-bg.png");
+    background-position: left top;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+.breadcrumbsComponent .w-max {
+  width: fit-content;
+}
+
+.skeleton-gradient {
+  background: linear-gradient(
+    90deg,
+    #ffffff 0%,
+    #ededed 50%,
+    #e7e7e7 70%,
+    #ffffff 100%
+  );
+  background-size: 200% 100%;
+  animation: pulse 2.5s infinite linear;
+}
+
+.tooltip-text {
+  z-index: 50;
+  opacity: 1;
+}
+
+.sidebar {
+  width: 215px;
+  min-width: 215px;
+  border-right-width: 1px;
+}
+
+.brandIcon svg {
+  width: 100%;
+}
+
+.no-scroll {
+  overflow: hidden;
+  padding-right: 7px;
+}
+
+.sidebar-body {
+  height: calc(100svh - 70px);
+  overflow-y: auto;
+  white-space: nowrap;
+}
+
+.cashback-bg {
+  padding: 16px;
+  background:
+    linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.2) 100%
+    ),
+    linear-gradient(180deg, #fff6e9 0%, #ffeef6 100%);
+  border-radius: 12px;
+}
+
+.phoneShippingBG {
+  background-image: url("./public/img/phoneShippingBG.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.specialOfferBG {
+  background-image: url("./public/img/specialOfferBg.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+@keyframes pulse {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1200px) {
+  .sidebar {
+    width: 190px;
+    min-width: 190px;
+  }
+}
+
+@media (max-width: 767px) {
+  .container {
+    max-width: 100%;
+  }
+
+  .cartAutoHeight {
+    height: calc(100svh - 155px);
+  }
+  .mobileNumberField .errorText {
+    position: absolute;
+  }
+}
+
+@media (max-width: 1023px) {
+  .mobileSidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 50;
+    width: 100%;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .mobileSidebar.open {
+    transform: translateX(0);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .no-scroll {
+    padding-right: 0px;
+  }
+}
+
+@media (max-height: 350px) {
+  .loginBG {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .loginBG .card {
+    margin: 30px 10px;
+  }
+}
+
+.product-key-features ul {
+  list-style: inside;
+  padding-left: 1px;
+}
+
+*::-webkit-scrollbar {
+  width: 7px;
+  height: 3px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-bg);
+  border-radius: 10px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-bg);
+}
+
+/* Internet Explorer */
+*::-ms-scrollbar {
+  width: 10px;
+}
+
+*::-ms-scrollbar-track {
+  background: var(--scrollbar-track-bg);
+}
+
+*::-ms-scrollbar-thumb {
+  background: var(--scrollbar-thumb-bg);
+  border-radius: 10px;
+}
+
+*::-ms-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-bg);
+}
+
+/* Add this to your global.css or tailwind.css */
+[data-dialog-backdrop="true"] {
+  z-index: 90 !important;
+}
+
+[data-dialog="true"] {
+  z-index: 91 !important;
+}
+
+[data-floating-ui-portal] {
+  z-index: 99999999 !important;
+  position: relative !important;
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+}
+.animate-slideDown {
+  animation: slideDown 0.5s ease-out;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
+}
+
+.custom-underline {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 8px;
+}
+
+.custom-underline::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(to right, #06b6d4, #0891b2);
+  border-radius: 2px;
+}
+
+.custom-left-line {
+  position: relative;
+  padding-left: 16px;
+}
+
+.custom-left-line::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  background: linear-gradient(to bottom, #06b6d4, #0891b2);
+  border-radius: 2px;
+}
+
+.step-completed {
+  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
+}
+
+.header-underline {
+  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
+}

package/bitbucket-pipelines.yml

@@ -0,0 +1,223 @@
+steps:
+  - step: &build
+      name: "CI (Build & Validate)"
+      image: node:18-alpine3.18
+      script:
+        - npm cache clean --force
+        - rm -rf node_modules
+        - MONGOMS_DISABLE_POSTINSTALL=true npm install --force --loglevel verbose
+        - echo "✓ Dependencies validated successfully"
+
+  - step: &copy_shared_library
+      name: "Copy Shared Library to CI Server"
+      runs-on:
+        - self.hosted
+        - linux.shell
+        - common.ci
+      script:
+        - |
+          # Copy to common CI server for h-mall-web builds
+          # This location is used by h-mall-web Dockerfile during build (COPY h-mall-shared)
+          SHARED_LIB_PATH_CI="${HOME}/with-zone/h-mall-shared"
+
+          # Ensure directory exists
+          mkdir -p ${SHARED_LIB_PATH_CI}
+
+          # Deploy shared library to CI server
+          set +e
+          rm -rf ${SHARED_LIB_PATH_CI}
+          set -e
+          mkdir -p ${SHARED_LIB_PATH_CI}
+          cp -r ./ ${SHARED_LIB_PATH_CI}/
+          rm -rf ${SHARED_LIB_PATH_CI}/node_modules ${SHARED_LIB_PATH_CI}/.git
+          rm -f ${SHARED_LIB_PATH_CI}/.env*
+
+          echo "✓ Shared library copied to CI server: ${SHARED_LIB_PATH_CI}"
+          echo "  This path is used by h-mall-web Dockerfile during build"
+
+  - step: &preview_deploy
+      name: "CD (Deploy Shared Library to Preview)"
+      runs-on:
+        - self.hosted
+        - linux.shell
+        - preview.runner
+      script:
+        - |
+          # Standard deployment location - user-writable directory
+          # Note: This path must match docker-compose.yml volume mount in h-mall-web
+          SHARED_LIB_PATH="${HOME}/with-zone/h-mall-shared"
+
+          # Ensure directory exists (user home directory is always writable)
+          mkdir -p ${SHARED_LIB_PATH}
+
+          # Deploy shared library
+          set +e
+          rm -rf ${SHARED_LIB_PATH}
+          set -e
+          mkdir -p ${SHARED_LIB_PATH}
+          cp -r ./ ${SHARED_LIB_PATH}/
+          rm -rf ${SHARED_LIB_PATH}/node_modules ${SHARED_LIB_PATH}/.git
+          rm -f ${SHARED_LIB_PATH}/.env*
+
+          echo "✓ Shared library deployed to: ${SHARED_LIB_PATH}"
+          echo "  This path is mounted in h-mall-web docker-compose.yml"
+
+  - step: &dev_deploy
+      name: "CD (Deploy Shared Library to Dev)"
+      runs-on:
+        - self.hosted
+        - linux.shell
+        - dev.runner
+      script:
+        - |
+          # Standard deployment location - user-writable directory
+          # Note: This path must match docker-compose.yml volume mount in h-mall-web
+          SHARED_LIB_PATH="${HOME}/with-zone/h-mall-shared"
+
+          # Ensure directory exists (user home directory is always writable)
+          mkdir -p ${SHARED_LIB_PATH}
+
+          # Deploy shared library
+          set +e
+          rm -rf ${SHARED_LIB_PATH}
+          set -e
+          mkdir -p ${SHARED_LIB_PATH}
+          cp -r ./ ${SHARED_LIB_PATH}/
+          rm -rf ${SHARED_LIB_PATH}/node_modules ${SHARED_LIB_PATH}/.git
+          rm -f ${SHARED_LIB_PATH}/.env*
+
+          echo "✓ Shared library deployed to: ${SHARED_LIB_PATH}"
+          echo "  This path is mounted in h-mall-web docker-compose.yml"
+
+  - step: &uat_deploy
+      name: "CD (Deploy Shared Library to UAT)"
+      runs-on:
+        - self.hosted
+        - linux.shell
+        - uat.runner
+      script:
+        - |
+          # Standard deployment location - user-writable directory
+          # Note: This path must match docker-compose.yml volume mount in h-mall-web
+          SHARED_LIB_PATH="${HOME}/with-zone/h-mall-shared"
+
+          # Ensure directory exists (user home directory is always writable)
+          mkdir -p ${SHARED_LIB_PATH}
+
+          # Deploy shared library
+          set +e
+          rm -rf ${SHARED_LIB_PATH}
+          set -e
+          mkdir -p ${SHARED_LIB_PATH}
+          cp -r ./ ${SHARED_LIB_PATH}/
+          rm -rf ${SHARED_LIB_PATH}/node_modules ${SHARED_LIB_PATH}/.git
+          rm -f ${SHARED_LIB_PATH}/.env*
+
+          echo "✓ Shared library deployed to: ${SHARED_LIB_PATH}"
+          echo "  This path is mounted in h-mall-web docker-compose.yml"
+
+  - step: &prod_deploy
+      name: "CD (Deploy Shared Library to Prod)"
+      runs-on:
+        - self.hosted
+        - linux.shell
+        - prod.runner
+      script:
+        - |
+          # Standard deployment location - user-writable directory
+          # Note: This path must match docker-compose.yml volume mount in h-mall-web
+          SHARED_LIB_PATH="${HOME}/with-zone/h-mall-shared"
+
+          # Ensure directory exists (user home directory is always writable)
+          mkdir -p ${SHARED_LIB_PATH}
+
+          # Deploy shared library
+          set +e
+          rm -rf ${SHARED_LIB_PATH}
+          set -e
+          mkdir -p ${SHARED_LIB_PATH}
+          cp -r ./ ${SHARED_LIB_PATH}/
+          rm -rf ${SHARED_LIB_PATH}/node_modules ${SHARED_LIB_PATH}/.git
+          rm -f ${SHARED_LIB_PATH}/.env*
+
+          echo "✓ Shared library deployed to: ${SHARED_LIB_PATH}"
+          echo "  This path is mounted in h-mall-web docker-compose.yml"
+
+definitions:
+  services:
+    docker:
+      memory: 3072
+
+pipelines:
+  default:
+    - step: *build
+    - step: *copy_shared_library
+
+  branches:
+    feature/*:
+      - stage:
+          name: CI
+          steps:
+            - step: *build
+            - step: *copy_shared_library
+      - stage:
+          name: CD
+          trigger: manual
+          steps:
+            - step: *preview_deploy
+
+    pull-requests:
+      - stage:
+          name: CI
+          steps:
+            - step: *build
+            - step: *copy_shared_library
+      - stage:
+          name: CD
+          condition:
+            or:
+              - equals:
+                  - ${BITBUCKET_PR_DESTINATION_BRANCH}
+                  - dev
+              - equals:
+                  - ${BITBUCKET_PR_DESTINATION_BRANCH}
+                  - develop
+
+          steps:
+            - step: *preview_deploy
+
+    develop:
+      - stage:
+          name: CI
+          steps:
+            - step: *build
+            - step: *copy_shared_library
+      - stage:
+          name: CD
+          trigger: manual
+          steps:
+            - step: *dev_deploy
+
+    release/*:
+      - stage:
+          name: CI
+          steps:
+            - step: *build
+            - step: *copy_shared_library
+      - stage:
+          name: CD
+          trigger: manual
+          steps:
+            - step: *uat_deploy
+
+    main:
+      - stage:
+          name: CI
+          steps:
+            - step: *build
+            - step: *copy_shared_library
+      - stage:
+          name: CD
+          trigger: manual
+          steps:
+            - step: *prod_deploy

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@lmnto/h-mall-shared",
+  "version": "1.0.1",
+  "private": false,
+  "sideEffects": false,
+  "scripts": {
+    "lint": "next lint",
+    "static:fix": "eslint . --fix && prettier --log-level silent --write --ignore-unknown ."
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.5",
+    "@hookform/resolvers": "^3.9.0",
+    "@material-tailwind/react": "^2.1.10",
+    "@tanstack/react-query": "^5.56.2",
+    "axios": "^1.7.7",
+    "clear": "^0.1.0",
+    "openapi-typescript": "^7.4.0",
+    "openapi-typescript-codegen": "^0.29.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-hook-form": "^7.53.0",
+    "react-icons": "^5.3.0",
+    "react-responsive-carousel": "^3.2.23",
+    "react-toastify": "^11.0.5",
+    "socket.io-client": "^4.8.0",
+    "yup": "^1.4.0",
+    "zustand": "^5.0.0-rc.2",
+    "next-international": "^1.3.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "20.16.4",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "16.0.7",
+    "next": "^16.0.7",
+    "postcss": "^8",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.11",
+    "typescript": "5.5.4"
+  }
+}