diff options
131 files changed, 8148 insertions, 2664 deletions
diff --git a/package.json b/package.json index 28fbc5d8..a846749c 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\" --config ./.prettierrc" }, "dependencies": { - "@chakra-ui/next-js": "^2.1.5", "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", @@ -26,7 +25,6 @@ "cookies-next": "^2.1.1", "flowbite": "^1.6.4", "framer-motion": "^7.10.3", - "http-proxy-middleware": "^3.0.0", "lodash-contrib": "^4.1200.1", "lucide-react": "^0.279.0", "midtrans-client": "^1.3.1", @@ -36,15 +34,12 @@ "next-progress": "^2.2.0", "next-pwa": "^5.6.0", "next-seo": "^5.15.0", - "node-fetch": "^3.3.2", "nodemailer": "^6.8.0", - "primereact": "^10.6.6", "react": "18.2.0", "react-dom": "18.2.0", "react-google-recaptcha": "^2.1.0", "react-hook-form": "^7.42.1", "react-hot-toast": "^2.4.0", - "react-infinite-scroll-component": "^6.1.0", "react-lazy-load": "^4.0.1", "react-lazy-load-image-component": "^1.5.5", "react-loading-skeleton": "^3.3.1", @@ -52,9 +47,7 @@ "react-query": "^3.39.3", "react-select": "^5.8.0", "react-web-share": "^2.0.2", - "sharp": "^0.33.2", "snakecase-keys": "^5.5.0", - "striptags": "^3.2.0", "swiper": "^8.4.4", "tw-merge": "^0.0.1-alpha.3", "usehooks-ts": "^2.9.1", @@ -65,9 +58,7 @@ "zustand": "^4.4.4" }, "devDependencies": { - "@svgr/webpack": "^6.5.0", "@tailwindcss/typography": "^0.5.9", - "@types/node": "^20.8.7", "@types/react": "^18.2.31", "@types/react-dom": "^18.2.14", "@types/react-google-recaptcha": "^2.1.7", diff --git a/public/images/CHECKOUT-PESANAN.svg b/public/images/CHECKOUT-PESANAN.svg new file mode 100644 index 00000000..6291b4cd --- /dev/null +++ b/public/images/CHECKOUT-PESANAN.svg @@ -0,0 +1,958 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#EBEBEB;} + .st1{fill:#FAFAFA;} + .st2{fill:#E0E0E0;} + .st3{fill:#F5F5F5;} + .st4{fill:#FFFFFF;} + .st5{display:none;} + .st6{display:inline;} + .st7{display:inline;fill:#EBEBEB;} + .st8{fill:#263238;} + .st9{fill:#EA0000;} + .st10{font-family:'Gilroy-Bold';} + .st11{font-size:12.4079px;} + .st12{font-family:'Gilroy-Regular';} + .st13{font-size:9.0789px;} + .st14{fill:#FFBE9D;} + .st15{fill:#EB996E;} + .st16{fill:#455A64;} + .st17{fill:none;stroke:#FFFFFF;stroke-width:2.000000e-02;stroke-miterlimit:10;} + .st18{opacity:0.3;} + .st19{fill:#E8505B;} + .st20{fill:#CC0000;} +</style> +<g id="Background_Complete"> + <g> + <g> + <g> + <path class="st0" d="M450.1,142.2L360.5,162c-3.7,0.8-7.3-1.5-8.1-5.2l-18.7-84.3c-0.8-3.7,1.5-7.3,5.2-8.1l89.6-19.8 + c3.7-0.8,7.3,1.5,8.1,5.2l18.7,84.3C456,137.8,453.7,141.4,450.1,142.2z"/> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st1" d="M414.9,114.2c0,0-0.2,0.1-0.7,0.2c-0.5,0.1-1.2,0.3-2,0.5c-1.8,0.4-4.3,1-7.4,1.7 + c-6.3,1.4-15,3.4-24.7,5.6l-0.2,0l-0.1-0.2c-0.5-1.3-1-2.6-1.5-4c-4.3-11.6-8.2-22-10.7-28.8l0.2,0.1 + c-2.8,0.6-5,1.1-6.6,1.4c-0.7,0.1-1.3,0.3-1.8,0.4c-0.4,0.1-0.6,0.1-0.6,0.1c0,0,0.2-0.1,0.6-0.2c0.4-0.1,1-0.3,1.7-0.4 + c1.6-0.4,3.8-0.9,6.6-1.5l0.1,0l0,0.1c2.6,6.8,6.5,17.1,10.9,28.7c0.5,1.4,1,2.7,1.5,4l-0.3-0.1c9.8-2.2,18.5-4.1,24.8-5.5 + c3.1-0.7,5.6-1.2,7.4-1.6c0.8-0.2,1.5-0.3,2-0.4C414.7,114.2,414.9,114.2,414.9,114.2z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st1" d="M377.5,115c0,0,0.1,0,0.2-0.1c0.1,0,0.3-0.1,0.5-0.1c0.5-0.1,1.1-0.3,2-0.5c1.8-0.4,4.3-1,7.4-1.7 + c6.4-1.5,15.3-3.5,25.7-5.8l-0.2,0.2c-0.2-4.5-0.4-9.3-0.7-14.4c-0.1-2.6-0.2-5.1-0.3-7.5l0.3,0.2c-12,2.7-22.6,5-30.3,6.7 + c-3.8,0.8-6.8,1.5-9,1.9c-1,0.2-1.8,0.4-2.4,0.5c-0.3,0-0.5,0.1-0.6,0.1c-0.1,0-0.2,0-0.2,0c0,0,0.1,0,0.2-0.1 + c0.2,0,0.4-0.1,0.6-0.2c0.6-0.1,1.4-0.3,2.4-0.6c2.1-0.5,5.2-1.2,8.9-2.1c7.6-1.7,18.2-4.1,30.2-6.9l0.3-0.1l0,0.3 + c0.1,2.4,0.2,5,0.3,7.5c0.2,5,0.4,9.9,0.6,14.4l0,0.2l-0.2,0c-10.4,2.3-19.3,4.3-25.7,5.7c-3.2,0.7-5.7,1.2-7.5,1.6 + c-0.8,0.2-1.5,0.3-2,0.4c-0.2,0-0.4,0.1-0.5,0.1C377.6,115,377.5,115,377.5,115z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st1" d="M391,129.5c0,0-0.1-0.3-0.4-0.8c-0.3-0.5-0.8-1.1-1.7-1.5c-0.9-0.4-2.1-0.4-3.2,0.3 + c-1.1,0.7-1.8,2.1-1.4,3.5c0.3,1.4,1.6,2.4,2.8,2.6c1.3,0.2,2.4-0.4,3-1.1c0.6-0.7,0.8-1.6,0.9-2.1 + C391,129.8,390.9,129.5,391,129.5c0,0,0.2,0.3,0.2,0.9c0,0.6-0.1,1.5-0.8,2.3c-0.6,0.8-1.9,1.5-3.3,1.3 + c-1.4-0.1-2.9-1.3-3.2-2.9c-0.4-1.6,0.5-3.3,1.7-4c1.2-0.8,2.7-0.7,3.6-0.2c1,0.5,1.5,1.2,1.7,1.7 + C391,129.2,391,129.5,391,129.5z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st1" d="M413.3,124.5c0,0-0.1-0.3-0.4-0.8c-0.3-0.5-0.8-1.1-1.7-1.5c-0.9-0.4-2.1-0.4-3.2,0.3 + c-1.1,0.7-1.8,2.1-1.4,3.5c0.3,1.4,1.6,2.4,2.8,2.6c1.3,0.2,2.4-0.4,3-1.1c0.6-0.7,0.8-1.6,0.9-2.1 + C413.4,124.8,413.3,124.5,413.3,124.5c0,0,0.2,0.3,0.2,0.9c0,0.6-0.1,1.5-0.8,2.3c-0.6,0.8-1.9,1.5-3.3,1.3 + c-1.4-0.1-2.9-1.3-3.2-2.9c-0.4-1.6,0.5-3.3,1.7-4c1.2-0.8,2.7-0.7,3.6-0.2c1,0.5,1.5,1.2,1.7,1.7 + C413.4,124.1,413.4,124.5,413.3,124.5z"/> + </g> + </g> + </g> + <g> + <g> + <path class="st1" d="M419.6,79.8c1.2,5.5-2.2,10.9-7.7,12.2c-5.5,1.2-10.9-2.2-12.2-7.7c-1.2-5.5,2.2-10.9,7.7-12.2 + C412.9,70.8,418.3,74.3,419.6,79.8z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st2" d="M414.2,77.1c0.1,0-0.3,0.8-0.9,1.9c-0.6,1.1-1.5,2.7-2.5,4.4c-0.4,0.6-0.7,1.2-1.1,1.8l-0.1,0.2 + l-0.2-0.1c-2.6-1.4-4.4-2.5-4.3-2.6c0.1-0.1,2,0.8,4.6,2.2l-0.3,0.1c0.3-0.6,0.7-1.2,1.1-1.8c1-1.7,2-3.2,2.7-4.3 + C413.7,77.7,414.1,77,414.2,77.1z"/> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st2" d="M72.3,194.4c-1.8-6.5-10.3-5.9-10.3-5.9l0.2,4.5c4.9-0.8,8,4.9,8,4.9L72.3,194.4z"/> + </g> + </g> + <g> + <g> + <path class="st2" d="M197,118.9c9.8,3,16-8.4,16-8.4l-6-3.4c-2.9,7-12.8,6.2-12.8,6.2L197,118.9z"/> + </g> + </g> + <g> + <g> + <path class="st2" d="M278.7,179.9c-1.9-5.4-9.1-4.4-9.1-4.4l0.4,3.8c4.1-1,7,3.7,7,3.7L278.7,179.9z"/> + </g> + </g> + <g> + <g> + <path class="st2" d="M165.8,52.7c-1.9-5.4-9.1-4.4-9.1-4.4l0.4,3.8c4.1-1,7,3.7,7,3.7L165.8,52.7z"/> + </g> + </g> + <g> + <g> + <path class="st0" d="M80.4,122.2c-1.9-5.4-9.1-4.4-9.1-4.4l0.4,3.8c4.1-1,7,3.7,7,3.7L80.4,122.2z"/> + </g> + </g> + <g> + <g> + <path class="st0" d="M62.5,71.4c-5.7,0.9-6,8.1-6,8.1l3.9,0.2c-0.2-4.2,4.9-6.2,4.9-6.2L62.5,71.4z"/> + </g> + </g> + <g> + <g> + <path class="st0" d="M21.6,240.4c9.9,3,16-8.4,16-8.4l-6-3.4c-2.9,7-12.8,6.2-12.8,6.2L21.6,240.4z"/> + </g> + </g> + <g> + <g> + <path class="st2" d="M302.2,119.6c0.7-4.6-4.8-6.5-4.8-6.5l-1.1,2.9c3.3,0.8,3.6,5.2,3.6,5.2L302.2,119.6z"/> + </g> + </g> + <g> + <g> + <path class="st0" d="M269.5,69.5c-3.8,2.5-1.7,7.9-1.7,7.9l2.9-1.1c-1.6-3,1.5-6.2,1.5-6.2L269.5,69.5z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <polygon class="st3" points="436.1,171.6 422.8,210.7 462.1,218.5 464.4,177.2 "/> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <path class="st4" d="M460,182.4c0,0-0.1,0.4-0.4,1.1c-0.4,0.7-1,1.6-2,2.6c-1,1-2.4,2-4.2,2.6c-1.8,0.6-3.9,0.7-6,0.3 + c-2.1-0.4-4-1.2-5.5-2.5c-1.5-1.2-2.3-2.7-2.8-4c-0.5-1.3-0.6-2.5-0.7-3.2c0-0.8,0-1.2,0.1-1.2c0.1,0,0,1.7,1.1,4.2 + c0.5,1.2,1.4,2.6,2.8,3.7c1.4,1.1,3.2,1.9,5.2,2.3c2,0.4,4,0.3,5.7-0.2c1.7-0.5,3-1.4,4-2.3 + C459.2,183.9,459.9,182.3,460,182.4z"/> + </g> + </g> + </g> + </g> + </g> +</g> +<g id="Background_Simple" class="st5"> + <g class="st6"> + <path class="st0" d="M462.6,168.7c-10.1-32-28.2-62.7-55.9-80.6c-25.8-16.7-58.9-21-88-11.3c-29,9.7-53.4,33.1-64.6,62.2 + c-6,15.6-8.4,32.4-13.4,48.4c-5,16-13.4,31.9-27.6,40.2c-15.9,9.3-35.8,7.3-53.6,2.5c-17.7-4.8-35.1-12.1-53.5-12.5 + c-38-0.8-67.2,33.9-75.5,72c-9.2,42.5-4.1,86.6,51.5,117.4c0.9,0.5,1.2,0.7,1.1,0.7c20.2,12.8,32,22.3,54.3,28.4 + c52.7,12.9,110.8,2.8,152.9,0c54.8-3.7,73.2-18.6,107.5-43.8c32.9-24.2,56.8-60.6,67.8-100.6C476.7,251.5,475.1,208.2,462.6,168.7 + z"/> + <path class="st0" d="M83.2,407.6c-0.4-0.2-0.7-0.5-1.1-0.7C78.8,405.6,83,407.6,83.2,407.6z"/> + </g> + <path class="st7" d="M175.1,60.3c-10.8-8.5-25.8-11-39.1-7.5c-11.6,3-22.4,10.8-26.5,22.1c-3.3,9-2,19.3,2.2,27.9 + c5.9,12.2,17.5,21.6,30.7,24.9c13.2,3.2,27.8,0.3,38.7-7.8l-1.8,0.7c6.6-4.5,7.8-13.9,9.9-23.7C191.9,83.5,185.9,68.8,175.1,60.3z" + /> +</g> +<g id="Desk"> + <g> + <g> + <path class="st8" d="M474.1,454.2c0,0.1-102.6,0.3-229.1,0.3c-126.5,0-229.1-0.1-229.1-0.3s102.5-0.3,229.1-0.3 + C371.5,453.9,474.1,454,474.1,454.2z"/> + </g> + </g> +</g> +<g id="Screen"> + <g> + <g> + <g> + <rect x="32.8" y="145.8" class="st1" width="243.9" height="190.9"/> + </g> + <g> + <g> + <path class="st8" d="M276.6,336.7c0-1.8-0.1-75.7-0.2-190.9l0.2,0.2c-69.5,0-153.4,0-243.8,0h0l0.3-0.3c0,68.8,0,133.9,0,190.9 + l-0.2-0.2C177.5,336.6,274.6,336.7,276.6,336.7c-2,0-99.1,0.1-243.9,0.2l-0.2,0l0-0.2c0-57,0-122.1,0-190.9l0-0.3h0.3h0 + c90.4,0,174.3,0,243.8,0l0.2,0l0,0.2C276.7,261,276.6,334.9,276.6,336.7z"/> + </g> + </g> + </g> + <g> + <g> + <path class="st9" d="M190.9,310.7h-72.5c-8.3,0-15-6.7-15-15l0,0c0-8.3,6.7-15,15-15h72.5c8.3,0,15,6.7,15,15l0,0 + C206,304,199.2,310.7,190.9,310.7z"/> + </g> + <g> + <path class="st1" d="M136.4,298.7c-0.8,0-1.4-0.2-2-0.5c-0.5-0.3-0.9-0.8-1.1-1.4l1.5-0.9c0.3,0.7,0.8,1.1,1.6,1.1 + c0.7,0,1-0.2,1-0.6c0-0.2-0.1-0.4-0.3-0.5c-0.2-0.1-0.6-0.3-1.3-0.4c-0.3-0.1-0.6-0.2-0.8-0.3c-0.2-0.1-0.5-0.3-0.7-0.4 + c-0.2-0.2-0.4-0.4-0.5-0.7s-0.2-0.6-0.2-0.9c0-0.7,0.3-1.3,0.8-1.7c0.5-0.4,1.1-0.6,1.8-0.6c0.6,0,1.2,0.1,1.7,0.4 + c0.5,0.3,0.9,0.7,1.1,1.3l-1.5,0.9c-0.1-0.3-0.3-0.5-0.5-0.7c-0.2-0.1-0.5-0.2-0.8-0.2c-0.3,0-0.5,0.1-0.6,0.2 + c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.2,0.1,0.4,0.3,0.5c0.2,0.1,0.6,0.3,1.1,0.5c0.3,0.1,0.5,0.2,0.7,0.2c0.2,0.1,0.4,0.2,0.6,0.3 + c0.3,0.1,0.5,0.3,0.6,0.4s0.3,0.3,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.7-0.3,1.3-0.8,1.7C137.9,298.5,137.2,298.7,136.4,298.7z + "/> + <path class="st1" d="M142,296.8h3.1v1.7h-4.8v-7.7h4.8v1.7h-3v1.3h2.8v1.7H142V296.8z"/> + <path class="st1" d="M148.1,296.8h2.8v1.7h-4.5v-7.7h1.8V296.8z"/> + <path class="st1" d="M153.6,296.8h3.1v1.7h-4.8v-7.7h4.8v1.7h-3v1.3h2.8v1.7h-2.8V296.8z"/> + <path class="st1" d="M160.6,298.7c-0.8,0-1.4-0.2-2-0.5c-0.5-0.3-0.9-0.8-1.1-1.4l1.5-0.9c0.3,0.7,0.8,1.1,1.6,1.1 + c0.7,0,1-0.2,1-0.6c0-0.2-0.1-0.4-0.3-0.5c-0.2-0.1-0.6-0.3-1.3-0.4c-0.3-0.1-0.6-0.2-0.8-0.3c-0.2-0.1-0.5-0.3-0.7-0.4 + c-0.2-0.2-0.4-0.4-0.5-0.7s-0.2-0.6-0.2-0.9c0-0.7,0.3-1.3,0.8-1.7c0.5-0.4,1.1-0.6,1.8-0.6c0.6,0,1.2,0.1,1.7,0.4 + c0.5,0.3,0.9,0.7,1.1,1.3l-1.5,0.9c-0.1-0.3-0.3-0.5-0.5-0.7c-0.2-0.1-0.5-0.2-0.8-0.2c-0.3,0-0.5,0.1-0.6,0.2 + c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.2,0.1,0.4,0.3,0.5c0.2,0.1,0.6,0.3,1.1,0.5c0.3,0.1,0.5,0.2,0.7,0.2c0.2,0.1,0.4,0.2,0.6,0.3 + c0.3,0.1,0.5,0.3,0.6,0.4s0.3,0.3,0.4,0.6c0.1,0.2,0.2,0.5,0.2,0.8c0,0.7-0.3,1.3-0.8,1.7C162.1,298.5,161.4,298.7,160.6,298.7z + "/> + <path class="st1" d="M169.4,298.5l-0.4-1.2h-3l-0.4,1.2h-1.9l2.6-7.7h2.2l2.6,7.7H169.4z M166.6,295.7h1.9l-1-2.8L166.6,295.7z" + /> + <path class="st1" d="M172.1,290.8h1.8v7.7h-1.8V290.8z"/> + </g> + </g> + <g> + <g> + <path class="st9" d="M156.7,219c-10.7,0-19.4-8.7-19.4-19.4c0-10.7,8.7-19.4,19.4-19.4s19.4,8.7,19.4,19.4 + C176.1,210.3,167.4,219,156.7,219z M156.7,182.2c-9.6,0-17.4,7.8-17.4,17.4c0,9.6,7.8,17.4,17.4,17.4c9.6,0,17.4-7.8,17.4-17.4 + C174.1,190,166.3,182.2,156.7,182.2z"/> + </g> + <g> + <path class="st9" d="M155.3,205.6c-0.2,0-0.5-0.1-0.7-0.2c-1.7-1.5-4.6-4.1-5-4.6c-0.3-0.5-0.2-1.1,0.3-1.4 + c0.5-0.3,1.1-0.2,1.4,0.3c0.3,0.3,2.1,2,4,3.7l9.8-9.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4l-10.5,9.9 + C155.8,205.5,155.5,205.6,155.3,205.6z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M276.6,164.5c0,0.1-54.5,0.3-121.6,0.3c-67.2,0-121.6-0.1-121.6-0.3s54.4-0.3,121.6-0.3 + C222.2,164.2,276.6,164.3,276.6,164.5z"/> + </g> + </g> + <g> + <g> + <circle class="st8" cx="41.4" cy="154.9" r="1.4"/> + </g> + <g> + <circle class="st8" cx="46.7" cy="154.9" r="1.4"/> + </g> + <g> + <path class="st8" d="M53.3,154.9c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4 + C52.6,153.5,53.3,154.1,53.3,154.9z"/> + </g> + </g> + <text transform="matrix(1 0 0 1 61.8303 245.5229)" class="st8 st10 st11">Pembelianmu sudah kami terima</text> + <text transform="matrix(1 0 0 1 69.6563 258.5025)" class="st8 st12 st13">Mohon cek pesananmu di detail pesanan</text> + </g> +</g> +<g id="Character"> + <g> + <g> + <path class="st14" d="M436.9,274.1c0,0,12.1-7.4,14.9-5.2c3.9,3.1,5.3,8.4,5.3,8.4s6.4-24.4,12.5-23.5c3.5,0.5,1.8,3.3,0.2,6.7 + c-1.5,3.2-4,14.9-4,14.9s11.6-13.8,15-13.5c2.6,0.2,3,2.5-0.8,6.2c-3.8,3.7-10.1,15.4-10.1,15.4s8.1-7.6,11.5-7.6 + c2.7,0,4.4,1.8,0.9,4.8c-3.5,3-8.7,5.3-11.5,10.7c-3.4,6.7-10.8,23.4-10.8,23.4l-25.7-9.1c0,0-4.2-17.1-4.4-21.2 + c0,0,0.4-8.8,0.3-10.3c0-1.6,4.1-2,5.3,1c1.3,3,0.7,6.1,1.2,8.1c0.5,2,1.4,3.8,2.9,4.7c1.5,0.9,5.2,1,6.1-0.1 + c0.9-1.1,2.1-4.3,2.3-6.3c0.2-2-0.1-5.1-0.1-5.1S437.4,280.9,436.9,274.1z"/> + </g> + <g> + <g> + <g> + <path class="st14" d="M147.9,353.7L130,347c0,0-18.2-10.7-21.6-6.9c0,0-3.6-1.7-5.2,2.1c-0.9,2.2,2.1,5.5,2.1,5.5s-1,1,0.6,4.2 + c1.5,3.3,18.8,13.6,18.8,13.6s22.5,12.2,31.5,18.1l15.7-21.3l-2.2-0.8c0,0-1.3-10.6-5.6-13.5c-4.7-3.1-10.4-11.4-11.7-14.7 + c-1.3-3.3-7.3-1.8-6.3,5c1,6.8,6.3,8.5,5.8,13.1C151.4,356,147.9,353.7,147.9,353.7z"/> + </g> + <g> + <g> + <path class="st15" d="M120.5,356.2c-0.1,0.1-3.6-1.7-7.8-4.1c-4.2-2.4-7.6-4.4-7.5-4.5c0.1-0.1,3.6,1.7,7.8,4.1 + C117.2,354,120.5,356.1,120.5,356.2z"/> + </g> + </g> + <g> + <g> + <path class="st15" d="M129.2,351.2c0,0.1-1.3-0.4-3.2-1.3c-2-0.9-4.6-2.1-7.5-3.6c-2.9-1.5-5.5-3-7.2-4.1 + c-0.9-0.6-1.6-1.1-2.1-1.4c-0.5-0.4-0.7-0.6-0.7-0.6c0-0.1,1.1,0.7,3,1.7c1.8,1.1,4.4,2.5,7.3,4c2.9,1.5,5.5,2.7,7.5,3.7 + C128.1,350.5,129.2,351.1,129.2,351.2z"/> + </g> + </g> + <g> + <g> + <path class="st15" d="M133,361c0,0-0.6-0.3-1.6-0.9c-1.1-0.6-2.5-1.5-4.2-2.5l0,0l0-0.1c-0.8-1.7-1.8-3.7-3-5.8 + c-0.6-1-1.3-2.1-2.3-3c-0.9-0.9-2.4-1-3.5-0.3c-0.2,0.1-0.5,0.4-0.6,0.5c0,0,0,0.1,0,0.1l0.1,0.2c0,0.1,0.1,0.3,0.2,0.4 + c0.2,0.6,0.5,1.2,0.7,1.8c0.5,1.2,0.9,2.3,1.4,3.3c0.9,2.1,1.7,4.1,2.4,5.8l0-0.1c1.5,1.7,2.7,3.1,3.6,4.2 + c0.4,0.5,0.7,0.9,1,1.2c0.2,0.3,0.3,0.4,0.3,0.4c0,0-0.2-0.1-0.4-0.4c-0.3-0.3-0.6-0.7-1-1.1c-0.9-1-2.2-2.4-3.7-4.1l0,0l0,0 + c-0.7-1.7-1.6-3.6-2.5-5.7c-0.4-1.1-0.9-2.2-1.4-3.3c-0.2-0.6-0.5-1.2-0.7-1.8c-0.1-0.2-0.1-0.3-0.2-0.5l-0.1-0.2 + c0-0.1,0-0.2-0.1-0.4c0.1-0.3,0.2-0.4,0.4-0.5c0.1-0.1,0.3-0.2,0.4-0.3c0.6-0.4,1.4-0.6,2.2-0.6c0.8,0,1.4,0.4,2,0.9 + c1,1,1.7,2.1,2.4,3.1c1.3,2.1,2.2,4.2,3,5.9l-0.1-0.1c1.7,1.1,3.1,2,4.1,2.7C132.5,360.6,133,361,133,361z"/> + </g> + </g> + </g> + <g> + <g> + <path class="st15" d="M150.9,361.2c0,0.1-0.9-0.2-2.2-0.5c-1.3-0.4-3.2-0.9-5.3-0.9c-2.1,0-3.9,0.5-5.1,1.2 + c-1.2,0.7-1.7,1.4-1.8,1.4c0,0,0.4-0.8,1.6-1.7c1.2-0.8,3.1-1.5,5.3-1.5c2.2,0.1,4.1,0.6,5.4,1.1 + C150.1,360.8,150.9,361.1,150.9,361.2z"/> + </g> + </g> + <g> + <g> + <path class="st15" d="M149.5,356.5c0.1,0.1-0.3,0.9-0.8,1.9c-0.4,1-0.7,1.8-0.9,1.8c-0.1,0-0.1-1,0.4-2 + C148.8,357.1,149.4,356.4,149.5,356.5z"/> + </g> + </g> + </g> + <g> + <g> + <path class="st8" d="M252.6,271.5c1.2-8.4,11-20.5,19.7-20.5c-5-7.2-5.1-17.4-0.2-24.6c3.3-5,8.8-8.7,11-14.3 + c2.6-6.3,0.6-13.4,0.9-20.2c0.4-9.9,5.5-19,10.5-27.6c4.6-7.9,10.2-16.5,19.3-18.5c5.7-1.2,11.7,0.6,17.1,2.9 + c25.7,11,45.8,34.1,52.6,60.8c1.6,6.4,2.7,13.3,7.2,18.2c4.7,5.2,13,8.1,14.4,14.9c1,4.9-2.1,9.8-1.7,14.8 + c0.4,4.2,8.2,16.3,10,20.1c3.1,6.5,2,13.6-1.2,20.1c-3.2,6.5-11.2,12.9-18.3,14.7l-79.8-26.6c-7.5,4.3-15,20.8-23.6,21.8 + c-8.6,1-19.1,4.8-27.4-4.3C254.4,293.8,251.3,279.9,252.6,271.5z"/> + </g> + <g> + <path class="st8" d="M384.9,192.1c-0.9,6.7,0.9,17.7,4.6,23.4c2.4,3.8,6.5,6.3,10.6,8.5c4,2.2,8.3,4.3,11.3,7.7 + c3.1,3.4,4.7,8.5,2.7,12.5c7.2,2.7,10.4,11.8,7.8,18.9c-2.6,7.1-9.9,11.8-17.4,13.3l-32.9-9.9l-7.2-42l19-32.4"/> + </g> + <g> + <g> + <path class="st16" d="M388.9,234.9c0,0,0.2,0.1,0.6,0.3c0.4,0.2,1.1,0.5,1.8,0.9c1.5,0.9,3.6,2.4,5.8,4.8 + c1.1,1.2,2.1,2.6,3.1,4.3c0.9,1.7,1.8,3.5,2.4,5.6c1.3,4.1,1.6,9.1,0.1,14l-0.1-0.3c1.9,1.1,3.7,2.4,5.4,4.1 + c4.2,4.2,6.6,9.6,7.2,14.7c0.6,5.1-0.7,9.7-2.4,13.2c-1.7,3.5-3.8,5.8-5.4,7.3c-0.8,0.7-1.4,1.2-1.9,1.6 + c-0.5,0.3-0.7,0.5-0.7,0.5c0,0,0.2-0.2,0.7-0.6c0.4-0.3,1.1-0.9,1.8-1.6c1.5-1.5,3.6-3.8,5.2-7.3c1.6-3.4,2.8-8,2.2-13 + c-0.6-5-3-10.3-7.1-14.3c-1.6-1.6-3.4-3-5.2-4l-0.2-0.1l0.1-0.2c1.4-4.8,1.2-9.7,0-13.7c-0.6-2.1-1.4-3.9-2.3-5.5 + c-0.9-1.6-1.9-3.1-3-4.2c-2.1-2.4-4.1-4-5.6-4.9c-0.7-0.5-1.4-0.8-1.7-1C389.1,235.1,388.9,234.9,388.9,234.9z"/> + </g> + </g> + </g> + <g> + <g> + <path class="st9" d="M291.6,278.4c0,0-14.7,4.5-19.9,12c-3.6,5.3-41,86.2-41,86.2l-56.7-17l-20.3,26.8l63.1,35 + c11.7,6.5,25.9,6.4,37.5-0.2l0,0c6.5-3.7,11.7-9.1,15.1-15.7l16-30.7L291.6,278.4z"/> + </g> + <g> + <g> + <path class="st9" d="M276.5,454.5l8.9-38.1l-6.7-27.7c-4.3-14.3-8-37.5-3.3-56.2l15.7-53.8l17.2-7.9l39.4-6.8 + c1.5,0.5,41.2,11.7,41.2,11.7c5.5,1.3,7.7,2.2,7.7,2.2l4.6,29.5l-13.7,48.6l-6,48.4l13.1,50.3H276.5z"/> + </g> + <g> + <g> + <path class="st17" d="M273.6,335.9"/> + </g> + </g> + <g> + <g> + <path class="st17" d="M366,339.4"/> + </g> + </g> + </g> + <g> + <path class="st14" d="M299.3,274.9l11.4-5.1l51.5,0.7l12.2,7.1c0,0-42.6,47-53.3,48.6C294.3,330,299.3,274.9,299.3,274.9z"/> + </g> + <g> + <path class="st9" d="M395.5,277.4c0,0,7.7,1.7,14.3,15.9c6.6,14.1,17.3,53.4,17.3,53.4l4.6-41.6l37.3,4.1l-7.2,99.5 + c0,0-13.2,19.1-35.3,17.4c-22.1-1.8-50.1-71.5-50.1-71.5L395.5,277.4z"/> + </g> + <g> + <g> + <path class="st8" d="M421.4,397.6c0,0,0-0.1,0-0.2c0-0.2,0-0.4,0-0.7c0-0.7,0.1-1.6,0.2-2.7c0.1-2.4,0.4-5.8,0.8-9.9 + c0.8-8.4,2.2-19.9,3.9-32.7c1.7-12.7,3.2-24.3,4.1-32.7c0.4-4.2,0.8-7.6,1-9.9c0.1-1.1,0.2-2,0.3-2.7c0-0.3,0.1-0.5,0.1-0.7 + c0-0.2,0-0.2,0-0.2c0,0,0,0.1,0,0.2c0,0.2,0,0.4,0,0.7c0,0.7-0.1,1.6-0.2,2.7c-0.1,2.4-0.4,5.8-0.8,9.9 + c-0.8,8.4-2.2,19.9-3.9,32.7c-1.7,12.7-3.2,24.3-4.1,32.6c-0.4,4.2-0.8,7.6-1,9.9c-0.1,1.1-0.2,2-0.3,2.7 + c0,0.3-0.1,0.5-0.1,0.7C421.4,397.5,421.4,397.6,421.4,397.6z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M231.4,398c0,0-0.2-0.3-0.4-0.7c-0.2-0.5-0.5-1.2-0.9-2.1c-0.7-1.8-1.3-4.5-1.6-7.5 + c-0.3-3-0.1-5.7,0.2-7.6c0.1-1,0.3-1.7,0.4-2.3c0.1-0.5,0.2-0.8,0.3-0.8c0.1,0-0.1,1.2-0.3,3.1c-0.2,1.9-0.3,4.6,0,7.5 + c0.3,2.9,0.9,5.5,1.5,7.4C231,396.9,231.4,398,231.4,398z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M237.6,399c0,0-0.3-0.2-0.7-0.7c-0.4-0.5-0.9-1.2-1.6-2.2c-1.2-1.9-2.7-4.7-3.9-8 + c-1.1-3.3-1.7-6.4-1.9-8.7c-0.1-1.1-0.2-2.1-0.2-2.7c0-0.6,0-1,0.1-1c0.1,0,0.2,1.4,0.5,3.6c0.3,2.2,0.9,5.3,2.1,8.6 + c1.1,3.3,2.6,6,3.7,8C236.9,397.8,237.7,398.9,237.6,399z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M281.7,310c0,0,0,0.3-0.2,0.8c-0.2,0.6-0.4,1.3-0.6,2.3c-0.6,2-1.4,4.9-2.4,8.4 + c-1.9,7.1-4.6,16.9-5.9,28.1c-0.6,5.6-0.8,10.9-0.2,15.8c0.5,4.8,1.6,9.1,2.6,12.6c1.1,3.5,2.1,6.3,2.7,8.3 + c0.3,0.9,0.6,1.7,0.8,2.2c0.2,0.5,0.3,0.8,0.2,0.8c0,0-0.1-0.3-0.3-0.8c-0.2-0.5-0.5-1.3-0.9-2.2c-0.7-1.9-1.8-4.7-2.9-8.2 + c-1.1-3.5-2.2-7.8-2.8-12.7c-0.6-4.9-0.5-10.3,0.2-15.9c1.3-11.2,4.1-21.1,6.1-28.1c1-3.5,1.9-6.4,2.5-8.3 + c0.3-0.9,0.5-1.7,0.7-2.3C281.6,310.3,281.7,310,281.7,310z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M386,375.6c0,0-0.1-0.1-0.1-0.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.3-0.7-0.7-1.6-1.3-2.9 + c-0.6-1.2-1.3-2.8-2-4.6c-0.7-1.8-1.5-3.9-2.4-6.1c-0.9-2.3-1.7-4.8-2.7-7.5c-0.4-1.4-0.9-2.8-1.3-4.3 + c-0.2-0.7-0.5-1.5-0.7-2.2c-0.2-0.8-0.4-1.5-0.6-2.3c-1.7-6.2-3.1-13.2-3.5-20.7c-0.5-7.5,0.3-14.7,2.2-20.9 + c1.8-6.3,4.9-11.4,8.3-15c3.3-3.6,6.8-5.7,9.3-6.8c1.3-0.5,2.3-0.9,3-1.1c0.3-0.1,0.6-0.2,0.8-0.2c0.2,0,0.3-0.1,0.3-0.1 + c0,0-0.1,0-0.3,0.1c-0.2,0.1-0.5,0.2-0.8,0.3c-0.7,0.2-1.7,0.6-2.9,1.2c-2.4,1.2-5.9,3.3-9.1,6.9c-3.3,3.6-6.3,8.7-8.1,14.8 + c-1.9,6.2-2.5,13.3-2.1,20.7c0.4,7.4,1.8,14.4,3.5,20.6c0.2,0.8,0.4,1.5,0.6,2.3c0.2,0.8,0.4,1.5,0.7,2.2 + c0.4,1.5,0.9,2.9,1.3,4.3c1,2.7,1.8,5.2,2.6,7.5c0.9,2.3,1.7,4.3,2.4,6.1c0.7,1.8,1.4,3.3,1.9,4.6c0.5,1.2,0.9,2.2,1.2,2.9 + c0.1,0.3,0.2,0.6,0.3,0.8C385.9,375.5,386,375.6,386,375.6z"/> + </g> + </g> + <g class="st18"> + <g> + <path d="M371.8,330.5c-4.9,23-4.9,46.8,3.5,68.8c0.5,1.3,2.4,5.8,3.8,5.9c1.7,0.1,2.6-2.1,2.9-3.8c0.6-3.5,1-9.3,1.6-12.8 + c0.8-4.4,1.8-14.6,1.8-14.6s-4-9.2-5.8-14.2c-3.3-9.2-6.1-17.9-7.6-28.6"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M367.8,419.8c0,0-0.1,0.2-0.4,0.6c-0.3,0.4-0.7,1-1.2,1.7c-0.3,0.4-0.6,0.8-0.9,1.2 + c-0.3,0.4-0.7,0.9-1.1,1.3c-0.8,0.9-1.7,2.1-2.9,3.2c-0.6,0.6-1.2,1.1-1.8,1.8c-0.6,0.6-1.4,1.2-2.1,1.8 + c-1.4,1.3-3.1,2.4-4.8,3.6c-3.5,2.3-7.6,4.6-12.2,6.4c-4.6,1.7-9.1,2.9-13.3,3.5c-2.1,0.2-4.1,0.5-6,0.6 + c-0.9,0-1.8,0.1-2.7,0.1c-0.9,0-1.7-0.1-2.5-0.1c-1.6,0-3-0.2-4.3-0.4c-0.6-0.1-1.2-0.1-1.8-0.2c-0.5-0.1-1-0.2-1.5-0.3 + c-0.8-0.2-1.5-0.3-2-0.4c-0.5-0.1-0.7-0.2-0.7-0.2c0,0,0.3,0,0.7,0.1c0.5,0.1,1.2,0.2,2,0.3c0.4,0.1,0.9,0.2,1.5,0.2 + c0.5,0.1,1.1,0.1,1.8,0.2c1.3,0.1,2.7,0.3,4.3,0.3c0.8,0,1.6,0,2.5,0c0.9,0,1.8-0.1,2.7-0.1c1.9,0,3.8-0.3,5.9-0.6 + c4.1-0.7,8.6-1.8,13.2-3.5c4.5-1.8,8.6-4,12.1-6.3c1.7-1.2,3.4-2.3,4.8-3.6c0.7-0.6,1.4-1.1,2.1-1.7c0.6-0.6,1.2-1.2,1.8-1.7 + c1.2-1.1,2.1-2.2,3-3.1c0.4-0.5,0.8-0.9,1.2-1.3c0.3-0.4,0.6-0.8,0.9-1.2c0.5-0.7,0.9-1.2,1.3-1.6 + C367.6,420,367.8,419.8,367.8,419.8z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M359.7,404.6c0,0,0,0.4-0.1,1.1c-0.1,0.7-0.3,1.7-0.7,2.9c-0.7,2.4-2,5.7-4.1,9c-2.1,3.3-4.6,5.8-6.5,7.4 + c-1,0.8-1.8,1.4-2.4,1.8c-0.6,0.4-0.9,0.6-0.9,0.6c-0.1-0.1,1.2-1,3.1-2.7c1.9-1.7,4.2-4.2,6.3-7.5c2.1-3.2,3.4-6.4,4.2-8.8 + C359.3,406.1,359.6,404.6,359.7,404.6z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st9" d="M341.5,139.4c14,0.1,27.6,8,34.7,20c7.1,12,7.3,27.8,0.6,40c-2.3,4.2-5.6,8.1-10.1,9.6 + c1.5-23.9-8-48.3-25.3-64.9"/> + </g> + <g> + <path class="st9" d="M357.8,143.1c-2.1-4.3,0.1-9.7,3.8-12.7c3.7-3,8.5-4.3,13.2-5.4c4.6-1.1,9.5-2.3,13.2-5.2 + c-0.5,7.5-2.4,15.2-7.3,20.9c-4.8,5.7-13.2,8.9-20.2,6"/> + </g> + <g> + <path class="st9" d="M362.6,148c-3.2,1.3-7,0.5-9.8-1.4c-2.8-2-4.9-4.9-6.6-7.9c-2.1-3.7-3.7-7.7-4.2-11.9s0-8.6,2.1-12.3 + c5.5,5.8,11.5,10.7,14.6,18.1c1.8,4.3,1.6,11.3-0.4,15.5"/> + </g> + <g> + <g> + <path class="st8" d="M378.1,172.2c0,0,0.1,0.5,0.3,1.4c0.1,0.5,0.2,1,0.2,1.6c0.1,0.6,0.1,1.4,0.2,2.2 + c0.1,1.6,0.1,3.6-0.1,5.7c-0.2,2.2-0.5,4.5-1.1,6.9c-0.6,2.4-1.3,4.7-2.1,6.7c-0.8,2-1.7,3.8-2.5,5.2 + c-0.4,0.7-0.8,1.3-1.1,1.9c-0.3,0.6-0.7,1-0.9,1.4c-0.5,0.7-0.8,1.1-0.9,1.1c0,0,0.2-0.5,0.7-1.2c0.2-0.4,0.5-0.9,0.8-1.4 + c0.3-0.6,0.7-1.2,1.1-1.9c0.8-1.4,1.6-3.2,2.4-5.2c0.8-2,1.5-4.2,2.1-6.6c0.6-2.4,0.9-4.7,1.1-6.9c0.2-2.1,0.3-4.1,0.2-5.7 + c0-0.8-0.1-1.5-0.1-2.2c0-0.6-0.1-1.2-0.1-1.6C378.1,172.8,378.1,172.2,378.1,172.2z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M375,145.4c0,0-0.4,0.3-1.1,0.9c-0.8,0.4-2,1.1-3.6,1.4c-3.2,0.7-7.9,0.6-12.8-0.7l-0.1,0l0-0.1 + c-0.1-0.3-0.1-0.6-0.2-0.9c-0.5-2.6-0.6-5.2-0.3-7.4c0.3-2.3,1.1-4.3,2.1-5.7c1-1.5,2.2-2.3,3-2.8c0.9-0.5,1.3-0.7,1.3-0.7 + c0,0-0.4,0.3-1.2,0.8c-0.7,0.6-1.9,1.4-2.8,2.9c-0.9,1.4-1.7,3.3-1.9,5.6c-0.3,2.2-0.2,4.7,0.4,7.3c0.1,0.3,0.1,0.6,0.2,0.9 + l-0.2-0.2c4.8,1.3,9.4,1.5,12.5,0.9c1.6-0.3,2.8-0.8,3.6-1.2C374.6,145.7,375,145.4,375,145.4z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M379.1,132.5c0,0.1-1.5,0.3-3.8,1c-1.1,0.3-2.5,0.8-3.9,1.5c-1.4,0.7-3,1.5-4.5,2.5c-1.5,1-2.9,2.1-4,3.1 + c-1.2,1.1-2.1,2.1-2.9,3c-1.5,1.8-2.3,3.1-2.4,3.1c0,0,0.1-0.3,0.5-0.9c0.3-0.6,0.9-1.4,1.6-2.4c0.7-1,1.7-2,2.9-3.1 + c1.2-1.1,2.5-2.2,4.1-3.2c1.6-1,3.1-1.8,4.6-2.5c1.5-0.6,2.8-1.1,4-1.4c1.2-0.3,2.1-0.5,2.8-0.6 + C378.7,132.5,379.1,132.4,379.1,132.5z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M362.4,147.9c0,0,0,0.1,0,0.3c0,0.2-0.1,0.5-0.3,0.8c-0.3,0.7-0.9,1.7-2,2.5c-1.1,0.8-2.6,1.5-4.5,1.5 + c-1.8-0.1-3.8-1.2-4.9-2.9c-1.2-1.7-1.5-3.9-0.9-5.7c0.6-1.8,1.8-3,3-3.7c1.2-0.7,2.3-0.9,3-0.9c0.4,0,0.7,0,0.9,0 + c0.2,0,0.3,0.1,0.3,0.1c0,0.1-0.4,0-1.1,0.1c-0.7,0.1-1.8,0.4-2.9,1.1c-1.1,0.7-2.2,1.9-2.7,3.5c-0.5,1.6-0.2,3.6,0.9,5.2 + c1.1,1.6,2.9,2.6,4.5,2.7c1.7,0.1,3.2-0.5,4.2-1.3c1-0.8,1.7-1.6,2-2.3C362.3,148.3,362.4,147.9,362.4,147.9z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M350.3,148.1c0,0-0.3-0.5,0.1-1.3c0.2-0.4,0.6-0.7,1.2-0.9c0.5-0.2,1.2-0.2,1.8-0.2 + c2.5,0.2,4.3,1.2,4.2,1.3c-0.1,0.1-1.9-0.6-4.3-0.7c-1.2-0.1-2.2,0.2-2.6,0.8C350.3,147.6,350.4,148.1,350.3,148.1z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M344.1,114.4c0.1,0-1.1,1.5-1.5,4.3c-0.2,1.4-0.3,3.1-0.2,5c0,1.9,0.1,3.9,0.5,6.1 + c0.9,4.2,2.7,7.8,4.3,10.1c0.8,1.2,1.5,2.1,2,2.7c0.5,0.6,0.8,0.9,0.8,0.9c-0.1,0.1-1.4-1.1-3.1-3.4 + c-1.7-2.3-3.5-5.9-4.5-10.2c-0.4-2.2-0.5-4.3-0.5-6.2c0-1.9,0.1-3.6,0.4-5c0.3-1.4,0.7-2.5,1.1-3.2 + C343.8,114.7,344.1,114.4,344.1,114.4z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M349.3,126.3c0.1,0,0.6,0.6,1.4,1.7c0.8,1.1,1.8,2.7,2.7,4.6c0.9,1.9,1.4,3.7,1.8,5 + c0.3,1.3,0.4,2.2,0.3,2.2c-0.2,0-0.8-3.3-2.6-7C351.2,129.1,349.2,126.4,349.3,126.3z"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M347.6,132.5c0.1-0.1,1.8,1.6,4,3.6c2.2,2,4,3.6,3.9,3.8c-0.1,0.1-2-1.4-4.2-3.4 + C349.1,134.5,347.5,132.6,347.6,132.5z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M373.8,156c0,0,0,0.1-0.1,0.1c-0.1,0.1-0.3,0.2-0.4,0.4c-0.4,0.3-1,0.8-1.7,1.3c-1.5,1-3.7,2.2-6.3,3.1 + c-2.6,0.9-5.1,1.2-6.9,1.3c-0.9,0-1.6,0-2.1,0c-0.2,0-0.4,0-0.6,0c-0.1,0-0.2,0-0.2,0c0,0,0.1,0,0.2,0c0.2,0,0.4,0,0.6,0 + c0.5,0,1.2,0,2.1-0.1c1.8-0.1,4.2-0.5,6.8-1.3c2.6-0.9,4.8-2,6.3-3c0.7-0.5,1.3-0.9,1.7-1.2c0.2-0.1,0.3-0.2,0.5-0.3 + C373.7,156,373.8,155.9,373.8,156z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M379.7,168.1c0,0,0,0.1-0.1,0.1c-0.1,0.1-0.3,0.2-0.4,0.4c-0.4,0.3-1,0.8-1.7,1.3c-1.5,1-3.7,2.2-6.3,3.2 + c-2.6,0.9-5.1,1.4-6.8,1.6c-0.9,0.1-1.6,0.1-2.1,0.1c-0.2,0-0.4,0-0.6,0c-0.1,0-0.2,0-0.2,0c0,0,0.1,0,0.2,0 + c0.2,0,0.4,0,0.6,0c0.5,0,1.2-0.1,2.1-0.2c1.8-0.2,4.2-0.7,6.8-1.6c2.6-0.9,4.7-2.1,6.2-3.1c0.8-0.5,1.3-0.9,1.7-1.2 + c0.2-0.1,0.3-0.2,0.5-0.3C379.6,168.1,379.7,168,379.7,168.1z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M378.1,185.7c0,0-0.1,0.1-0.4,0.3c-0.3,0.2-0.7,0.4-1.2,0.7c-1.1,0.6-2.6,1.3-4.4,1.7 + c-1.8,0.5-3.5,0.6-4.7,0.6c-0.6,0-1.1,0-1.4,0c-0.3,0-0.5-0.1-0.5-0.1c0,0,0.2,0,0.5,0c0.3,0,0.8,0,1.4,0 + c1.2,0,2.9-0.2,4.6-0.7c1.8-0.5,3.3-1.1,4.4-1.7c0.5-0.3,1-0.5,1.3-0.7C377.9,185.8,378.1,185.7,378.1,185.7z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M381.5,183c0,0.1-0.6,0.2-1.4,0.4c-0.8,0.1-1.4,0.2-1.4,0.2s0.6-0.2,1.4-0.4 + C380.8,183,381.4,182.9,381.5,183z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M371.5,203.8c0,0.1-1,0.2-2.3,0.1c-1.3-0.1-2.3-0.4-2.2-0.4c0-0.1,1,0.2,2.3,0.2 + C370.5,203.8,371.5,203.7,371.5,203.8z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M352.6,151.5c0,0.1-0.6,0.4-1.3,0.9c-0.8,0.4-1.4,0.7-1.4,0.7s0.6-0.4,1.3-0.9 + C351.9,151.7,352.5,151.4,352.6,151.5z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M347.6,141c0,0.1-1.4,0.5-2.9,1.6c-1.5,1.1-2.4,2.3-2.5,2.3c0,0,0.2-0.3,0.6-0.8c0.4-0.5,1-1.1,1.8-1.6 + c0.8-0.5,1.5-0.9,2.1-1.1C347.2,141,347.6,140.9,347.6,141z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M356.6,152.6c-0.1,0,0.3-1.4,0.1-3c-0.2-1.7-0.9-2.9-0.8-2.9c0,0,0.2,0.3,0.4,0.8 + c0.2,0.5,0.5,1.3,0.6,2.1c0.1,0.9,0.1,1.6,0,2.2C356.7,152.3,356.6,152.6,356.6,152.6z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M387.5,120c0,0-0.4,0.5-1.1,1.2c-0.7,0.7-1.9,1.7-3.5,2.7c-1.6,1-3.5,2-5.8,3c-2.2,1-4.7,2-7.2,3.2 + c-2.5,1.2-4.8,2.6-6.6,4.2c-1.8,1.6-3.1,3.4-3.9,5.1c-0.8,1.7-1.1,3.1-1.2,4.1c-0.1,1,0,1.6,0,1.6c0,0,0-0.1,0-0.4 + c0-0.3,0-0.7,0-1.2c0.1-1,0.4-2.5,1.1-4.2c0.8-1.7,2.1-3.5,3.9-5.1c1.8-1.6,4.1-3.1,6.7-4.3c2.5-1.2,5-2.2,7.3-3.2 + c2.2-1,4.2-2,5.7-2.9c1.6-1,2.7-1.9,3.5-2.6c0.4-0.3,0.7-0.6,0.9-0.8C387.4,120.1,387.5,120,387.5,120z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M384.8,131.9c0,0,0,0.1-0.1,0.2c-0.1,0.2-0.3,0.4-0.4,0.6c-0.4,0.5-0.9,1.3-1.7,2.2 + c-1.5,1.8-3.7,4.2-6.5,6.4c-2.8,2.2-5.7,3.8-7.8,4.7c-1.1,0.5-1.9,0.8-2.6,1.1c-0.3,0.1-0.5,0.2-0.7,0.2 + c-0.2,0.1-0.3,0.1-0.3,0.1c0,0,0.1,0,0.2-0.1c0.2-0.1,0.4-0.2,0.7-0.3c0.6-0.2,1.5-0.6,2.5-1.1c2.1-1,4.9-2.6,7.7-4.8 + c2.8-2.2,5-4.5,6.5-6.3c0.7-0.9,1.3-1.6,1.7-2.2c0.2-0.2,0.3-0.4,0.4-0.6C384.8,131.9,384.8,131.8,384.8,131.9z"/> + </g> + </g> + <g> + <g> + <path class="st1" d="M343.1,117.8c0,0,1.2,0.5,3,1.6c1.8,1.1,4.1,3,6.1,5.5c2,2.6,3.3,5.2,4,7.2c0.7,2,0.9,3.3,0.9,3.3 + c0,0,0-0.1-0.1-0.2c-0.1-0.2-0.1-0.4-0.2-0.7c-0.1-0.6-0.4-1.4-0.8-2.4c-0.7-2-2-4.6-4-7.2c-2-2.5-4.3-4.4-6-5.5 + c-0.9-0.6-1.6-1-2.1-1.3c-0.2-0.1-0.4-0.2-0.6-0.3C343.2,117.8,343.1,117.8,343.1,117.8z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <path class="st8" d="M292.9,155.4c0.4,5.3-3.1,10-6.6,14c-3.5,4-7.5,8.1-8.2,13.4c-1.4,9.3,7.8,18,5.9,27.2 + c-1,4.9-5.1,8.9-5.8,13.9c-0.7,4.8,1.9,9.6,5.1,13.2c3.2,3.7,6.9,3.1,9.8,7.1c3,4.2,7.8,8.5,12.3,10.9 + c10.2,5.6,22.5-2.5,27.4-4"/> + </g> + </g> + <g> + <g> + <path class="st8" d="M370.3,177.1c4.7-2.1,5.1-18.9-6.7-20.9c-4.7-0.8-8.7-3.1-12.7-5.8c-3.5-2.4-4.6-8.4-7.6-11.4 + c-7.3-7.4-18.8-10.5-28.9-7.8c-10.1,2.7-18.4,11.2-20.9,21.4c-1.7,6.8-0.5,14.9,4.9,19.5c6.3,5.3,15.5,4.1,23.6,2.5 + c8-1.6,17.1-3.3,23.8,1.5c4,2.8,6.4,7.5,8.8,11.7c2.5,4.3,5.6,8.6,10.2,10.3c0,0,3.6,8.4,0.7,14.2s3.4-4.1,3.4-4.1 + S380.4,187.6,370.3,177.1"/> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st14" d="M310.4,295.7c-0.1-11,0-42,0-41.9c0,0-17.5-2.9-21.1-25.8c-1.8-11.4-1.2-30-0.2-45.3 + c0.9-13.7,10-30.5,23.7-29.1l42.7,10.9c4.2,0.4,7.3,4,7.2,8.2l0,0l-2.6,106L310.4,295.7z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M296.4,195.7c-0.1,1.5,1.2,2.9,2.8,3c1.6,0.1,3-1.1,3-2.6c0.1-1.5-1.2-2.9-2.8-3 + C297.8,193,296.4,194.2,296.4,195.7z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M293.1,192.4c0.4,0.4,2.6-1.3,5.7-1.2c3.2,0,5.5,1.6,5.8,1.2c0.2-0.2-0.2-0.9-1.2-1.6 + c-1-0.7-2.7-1.4-4.6-1.4c-2,0-3.6,0.7-4.6,1.5C293.3,191.5,292.9,192.2,293.1,192.4z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M324.1,197.4c0.4,0.4,2.6-1.3,5.7-1.2c3.2,0,5.5,1.6,5.8,1.2c0.2-0.2-0.2-0.9-1.2-1.6 + c-1-0.7-2.7-1.4-4.6-1.4c-2,0-3.6,0.7-4.6,1.5C324.3,196.5,324,197.2,324.1,197.4z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M312.6,216.4c0-0.2-1.9-0.5-5.1-0.9c-0.8-0.1-1.6-0.2-1.7-0.8c-0.2-0.6,0.2-1.5,0.5-2.4 + c0.8-1.9,1.6-4,2.4-6.1c3.3-8.7,5.7-15.9,5.4-16c-0.4-0.1-3.3,6.8-6.7,15.6c-0.8,2.2-1.6,4.2-2.3,6.2 + c-0.3,0.9-0.8,2-0.4,3.2c0.2,0.6,0.8,1,1.3,1.2c0.5,0.2,1,0.2,1.4,0.2C310.6,216.6,312.6,216.6,312.6,216.4z" + /> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st15" d="M310.4,253.8c0,0,15.4,1,30.6-8.1c-0.3,0.1-8.4,15.9-30.3,13.5L310.4,253.8z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <path class="st15" d="M313.5,225.5c-0.4-1.9,1.9-2.6,3.6-3.6c1.7-1,2.6-2.4,4.2-1.2c0.9,0.7,1.5,1.7,1.9,2.7 + c0.3,0.7,0.4,1.5,0.3,2.2c-0.2,0.9-0.7,1.7-1.4,2.3c-0.9,0.9-2.1,1.6-3.4,1.8c-1.3,0.2-2.7-0.1-3.7-0.9 + c-1-0.8-1.6-2.2-1.4-3.5"/> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M321.9,218.6c-0.5,0-0.5,3.4-3.5,5.8c-2.9,2.4-6.6,2-6.6,2.5c0,0.2,0.8,0.7,2.4,0.7 + c1.5,0.1,3.7-0.4,5.5-1.9c1.8-1.5,2.6-3.5,2.7-4.9C322.5,219.4,322.2,218.6,321.9,218.6z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M323.7,190.4c0.3,0.9,3.5,0.5,7.2,0.9c3.7,0.4,6.7,1.5,7.2,0.7c0.2-0.4-0.3-1.2-1.5-2 + c-1.2-0.8-3.1-1.6-5.3-1.9c-2.2-0.2-4.3,0.1-5.6,0.6C324.2,189.3,323.5,189.9,323.7,190.4z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <g> + <path class="st8" d="M293.6,181.5c0.6,0.7,2.7,0,5.3-0.1c2.6-0.1,4.8,0.5,5.3-0.3c0.2-0.4-0.1-1.1-1.1-1.8 + c-1-0.7-2.5-1.2-4.3-1.2c-1.8,0.1-3.4,0.7-4.3,1.4C293.6,180.4,293.3,181.1,293.6,181.5z"/> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + </g> + <g> + <g> + <path class="st8" d="M365.1,241c-6.3,1.3-6.9-1.9-11.5-6.3c-4.7-4.4-7.1-11.1-6.3-17.4c0.7-5.6,3.7-11.3,1.8-16.6 + c-2.6-7-12.4-9.2-15-16.2c-1.5-4.1-0.2-8.8-1.9-12.8c-1.6-3.8-5.6-5.9-9.4-7.3c-3.8-1.4-8-2.4-11.2-4.9 + c-3.2-2.5-5.2-7.2-3.2-10.8c17.1,2,33.9,6.1,50,12.1c3.7,1.4,7.7,3.1,9.9,6.4c2.3,3.5,2.2,8,2,12.3 + c-1,20.5-1.9,41.1-2.9,61.6"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st16" d="M379.7,233.3c0,0,0.1-0.1,0.3-0.3c0.1-0.2,0.4-0.5,0.6-0.9c0.5-0.8,1.1-2.2,1.5-4 + c0.4-1.8,0.4-4.2-0.4-6.8c-0.7-2.6-2.5-5.3-5.3-7.2c-2.7-1.9-6.2-3.2-8.5-6.3c-1.1-1.5-1.6-3.4-1.2-5.4c0.3-2,1.2-3.9,2-5.9 + c1.7-4.1,1.8-9.2-0.3-13.7c-1-2.2-2.6-4.3-4.6-5.8c-2-1.5-4.5-2.3-7-2.9c-2.5-0.6-4.9-0.9-7.2-1.6c-2.3-0.7-4.5-1.7-6.1-3.3 + c-1.6-1.6-2.3-3.8-2.6-6c-0.3-2.2-0.5-4.5-1.1-6.6c-1.1-4.3-3.3-8.1-6.2-10.8c-2.9-2.7-6.4-4.3-9.7-4.8 + c-3.3-0.5-6.5,0.1-8.8,1.3c-2.4,1.2-4,2.9-5.1,4.4c-1.1,1.5-1.6,2.9-1.8,3.9c-0.2,1-0.2,1.5-0.2,1.5c0.1,0.1,0.2-2.1,2.3-5.1 + c1.1-1.4,2.7-3,5-4.2c2.3-1.1,5.3-1.7,8.5-1.1c3.2,0.5,6.5,2.1,9.2,4.7c2.7,2.6,4.8,6.3,5.9,10.5c0.6,2.1,0.7,4.3,1,6.6 + c0.3,2.3,1.1,4.8,2.9,6.5c1.8,1.8,4.1,2.9,6.5,3.6c2.4,0.7,4.9,1.1,7.3,1.6c2.4,0.5,4.8,1.3,6.6,2.7c1.9,1.4,3.4,3.3,4.3,5.4 + c1.9,4.2,2,9,0.3,12.9c-0.8,2-1.7,4-2,6.1c-0.4,2.1,0.2,4.4,1.4,6c2.5,3.3,6.1,4.6,8.8,6.4c2.7,1.8,4.4,4.3,5.2,6.7 + c0.8,2.4,0.8,4.7,0.5,6.5C381.1,231.7,379.6,233.3,379.7,233.3z"/> + </g> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st8" d="M349.9,210.6c-5.2,11.9-6.1,25.6-2.7,38.1c1,3.7,2.5,7.6,1.6,11.4c-1,4.1-4.4,7.1-6.9,10.4 + c-4.3,5.8-6,13.5-4.5,20.6c1.5,7.1,6.1,13.4,12.4,17c0.7-3.8,4.2-6.3,7.6-8c3.5-1.6,7.3-2.8,9.9-5.6c2.6-2.8,3.4-7.8,0.3-10.1 + c8.8-2.3,13.8-12.8,11.9-21.7c-1.9-8.9-9.1-15.9-17.3-19.8"/> + </g> + <g> + <path class="st8" d="M359.3,299.4c-1.6,0.9-3.1,1.6-3.3,3.4c-0.2,2.1,1.8,5.8,2.5,7.8c1.4,3.9,0.3,8.5-2.6,11.4 + c-3,2.9-7.6,3.8-11.5,2.3c2.8,0.2,5.2-2.5,5.5-5.3c0.3-2.8-1.1-5.5-2.8-7.8c-1.7-2.3-3.7-4.3-5.1-6.7 + c-2.9-5-7.2-18.5-3.9-26.1"/> + </g> + </g> + <g> + <g> + <path class="st16" d="M367.3,284.9c0,0,0.2-0.2,0.5-0.5c0.4-0.3,0.9-0.7,1.6-1.3c1.3-1.1,3.2-2.8,5.1-5.3 + c1.9-2.5,3.9-5.7,4.9-9.7c1-4,1.1-8.7-0.6-13.1c-0.9-2.2-2.1-4.2-3.6-5.8c-1.5-1.7-3.1-3.2-4.6-4.6c-1.5-1.4-2.9-2.8-4.1-4.3 + c-1.2-1.4-2.1-3-2.7-4.4c-1.3-2.9-1.3-5.6-0.9-7.3c0.2-0.9,0.5-1.5,0.7-1.9c0.2-0.4,0.4-0.6,0.4-0.6c0.1,0-0.5,0.8-0.9,2.5 + c-0.4,1.7-0.3,4.3,1,7.2c0.6,1.4,1.5,2.9,2.7,4.3c1.2,1.4,2.6,2.8,4.1,4.2c1.5,1.4,3.1,2.9,4.6,4.6c1.5,1.7,2.8,3.7,3.7,6 + c1.8,4.6,1.7,9.4,0.6,13.4c-1.1,4.1-3.1,7.4-5,9.8c-2,2.5-3.9,4.2-5.3,5.2c-0.7,0.5-1.2,0.9-1.6,1.2 + C367.6,284.7,367.3,284.9,367.3,284.9z"/> + </g> + </g> + </g> + </g> + </g> +</g> +<g id="Plant"> + <g> + <g> + <g> + <path class="st19" d="M79.9,404.3c2.5,3.2,7,1.8,8.9-0.4c2-2.2,2.7-5.1,3.3-8c1.4-6.5,2.9-13.3,1.1-19.7 + c-0.5-1.9-1.4-3.8-2.8-5.2c-1.5-1.4-3.6-2.1-5.5-1.5c-2.2,0.7-3.5,3.1-4.4,5.2c-2.6,6.4-3.8,13.4-3.4,20.3 + C77.4,398.4,78,401.7,79.9,404.3"/> + </g> + </g> + <g> + <g> + <path class="st20" d="M79.9,404.3c2.5,3.2,7,1.8,8.9-0.4c2-2.2,2.7-5.1,3.3-8c1.4-6.5,2.9-13.3,1.1-19.7 + c-0.5-1.9-1.4-3.8-2.8-5.2c-1.5-1.4-3.6-2.1-5.5-1.5c-2.2,0.7-3.5,3.1-4.4,5.2c-2.6,6.4-3.8,13.4-3.4,20.3 + C77.4,398.4,78,401.7,79.9,404.3"/> + </g> + </g> + <g> + <g> + <path class="st9" d="M89.7,420.5c3.7-2.2,8.1-2.7,12.4-2.3c2.3,0.2,4.7,0.8,6.3,2.4c1.6,1.6,2.1,4.6,0.5,6.1 + c-1,0.9-2.5,1.2-3.8,1.2c-3.3,0.2-7-0.2-9.5,2c-1.4,1.2-2.3,3.2-4.1,3.8c-1.7,0.7-3.8-0.3-4.8-1.8c-1-1.5-1.2-3.5-0.9-5.3 + C85.8,426.7,86,422.7,89.7,420.5z"/> + </g> + </g> + <g> + <g> + <path class="st9" d="M73.9,409.4c2.3-3.1,2.5-7.5,1.2-11.2c-1.4-3.7-4.1-6.7-7.2-9.1c-3.6-2.8-7.8-5-12.2-6.2 + c-1.7-0.5-3.6-0.9-5.3-0.6c-1.8,0.3-3.5,1.3-4.3,3c-1.1,2.4,0.3,5.2,1.7,7.5c2.5,4,5.4,7.8,8.5,11.3c2.5,2.8,5.3,5.6,9,6.7 + c3.6,1.1,7.3,0.7,9-1.8"/> + </g> + </g> + <g> + <g> + <g> + <path class="st8" d="M82.9,454.3c0,0,0.1-0.5,0.1-1.5c0-1.1,0.1-2.5,0.1-4.1c0.1-1.7,0.2-3.8,0.5-6.1c0.3-2.3,0.9-4.7,1.7-7.3 + c0.8-2.5,1.9-4.8,3.2-6.7c1.3-1.9,2.9-3.3,4.4-4.1c1.5-0.9,2.8-1.3,3.8-1.4c1-0.2,1.5-0.3,1.5-0.3c0,0-0.5,0-1.5,0.1 + c-1,0.1-2.4,0.5-4,1.3c-1.6,0.8-3.2,2.2-4.6,4.2c-1.4,1.9-2.5,4.3-3.4,6.8c-0.8,2.6-1.4,5.1-1.7,7.4c-0.3,2.3-0.4,4.4-0.4,6.2 + c0,1.8,0,3.2,0.1,4.1C82.8,453.7,82.9,454.3,82.9,454.3z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st8" d="M83,451.1c0,0,0-0.2,0-0.7c0-0.5-0.1-1.2-0.1-2c-0.1-1.7-0.3-4.2-0.4-7.3c-0.2-6.2-0.2-14.8,0.2-24.3 + c0.4-9.5,1.3-18,2.2-24.2c0.2-1.5,0.4-2.9,0.6-4.1c0.2-1.2,0.4-2.3,0.5-3.1c0.1-0.8,0.3-1.5,0.3-2c0.1-0.5,0.1-0.7,0.1-0.7 + c0,0-0.1,0.2-0.2,0.7c-0.1,0.5-0.3,1.2-0.5,2c-0.2,0.8-0.4,1.9-0.6,3.1c-0.2,1.2-0.5,2.6-0.7,4.1c-1,6.1-1.9,14.7-2.3,24.2 + c-0.4,9.5-0.4,18.1,0,24.3c0.2,3.1,0.4,5.6,0.6,7.3c0.1,0.8,0.2,1.5,0.2,2C83,450.9,83,451.1,83,451.1z"/> + </g> + </g> + </g> + <g> + <g> + <g> + <path class="st8" d="M82,434.6c0,0,0-0.7-0.1-2.1c-0.2-1.3-0.5-3.3-1-5.6c-0.5-2.3-1.3-5.1-2.4-8.1c-1-3-2.4-6.3-4.1-9.5 + c-3.3-6.6-7.5-11.9-11.1-15.1c-0.8-0.9-1.8-1.5-2.5-2.1c-0.4-0.3-0.7-0.6-1.1-0.8c-0.3-0.2-0.7-0.4-1-0.6 + c-1.2-0.7-1.8-1.1-1.8-1c-0.1,0.1,2.6,1.5,6.1,4.8c3.5,3.3,7.6,8.5,10.9,15.1c1.7,3.2,3,6.5,4.1,9.4c1.1,3,1.9,5.7,2.5,8 + c0.6,2.3,0.9,4.2,1.2,5.5C81.8,433.8,82,434.6,82,434.6z"/> + </g> + </g> + </g> + </g> +</g> +<g id="Confetti"> + <g> + <g> + <path class="st19" d="M234.6,205.8c-1.8-6.5-10.3-5.9-10.3-5.9l0.2,4.5c4.9-0.8,8,4.9,8,4.9L234.6,205.8z"/> + </g> + </g> + <g> + <g> + <path class="st19" d="M151,129.7c-4.6,0.5-5.1,6.2-5.1,6.2l3.1,0.4c0-3.4,4.2-4.8,4.2-4.8L151,129.7z"/> + </g> + </g> + <g> + <g> + <path class="st19" d="M193.7,68.8c2.8,7.1,12.3,5.5,12.3,5.5l-0.8-5.1c-5.4,1.5-9.5-4.6-9.5-4.6L193.7,68.8z"/> + </g> + </g> + <g> + <g> + <path class="st19" d="M87.1,189.1c-4.6,0.5-5.1,6.2-5.1,6.2l3.1,0.4c0-3.4,4.2-4.8,4.2-4.8L87.1,189.1z"/> + </g> + </g> + <g> + <g> + <path class="st19" d="M106,91.5c0.7-4.6-4.8-6.5-4.8-6.5l-1.1,2.9c3.3,0.8,3.6,5.2,3.6,5.2L106,91.5z"/> + </g> + </g> + <g> + <g> + <path class="st19" d="M27.6,161.5c-0.8,7.2,8.7,8.9,8.7,8.9l1.7-4.7c-5.7-0.5-6.5-7.2-6.5-7.2L27.6,161.5z"/> + </g> + </g> + <g> + <g> + <path class="st19" d="M252.8,127c4.6,0.3,6.1-5.3,6.1-5.3l-3-0.9c-0.5,3.3-4.9,4-4.9,4L252.8,127z"/> + </g> + </g> +</g> +</svg> diff --git a/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg b/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg Binary files differnew file mode 100644 index 00000000..63001bb5 --- /dev/null +++ b/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg diff --git a/public/images/PICKUP-NOW.png b/public/images/PICKUP-NOW.png Binary files differnew file mode 100644 index 00000000..d7c01f44 --- /dev/null +++ b/public/images/PICKUP-NOW.png diff --git a/public/robots.txt b/public/robots.txt index 7ae1495b..3972ad17 100644 --- a/public/robots.txt +++ b/public/robots.txt @@ -16,6 +16,8 @@ Disallow: /shop/search/* Disallow: /promo/* Disallow: /shop/brands/*?* Disallow: /shop/category/*?* +Disallow: /login?* +Disallow: /register?* User-agent: Adsbot-Google Allow: /my/* diff --git a/src-migrate/libs/auth.ts b/src-migrate/libs/auth.ts index 86ce26e1..e8516747 100644 --- a/src-migrate/libs/auth.ts +++ b/src-migrate/libs/auth.ts @@ -1,5 +1,8 @@ import { deleteCookie, getCookie, setCookie } from 'cookies-next'; import { AuthProps } from '~/types/auth'; +// @ts-ignore +import camelcaseObjectDeep from 'camelcase-object-deep'; + const COOKIE_KEY = 'auth'; @@ -14,7 +17,7 @@ export const getAuth = (): AuthProps | boolean => { }; export const setAuth = (user: AuthProps): boolean => { - setCookie(COOKIE_KEY, JSON.stringify(user)); + setCookie(COOKIE_KEY, JSON.stringify(camelcaseObjectDeep(user))); return true; }; diff --git a/src-migrate/libs/odooApi.ts b/src-migrate/libs/odooApi.ts index 9482542b..cf839fd9 100644 --- a/src-migrate/libs/odooApi.ts +++ b/src-migrate/libs/odooApi.ts @@ -73,7 +73,7 @@ const odooApi = async ( return authResponse.result || null; } catch (error) { - console.log(error); + // console.log(error); return null; } }; diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index 47893498..6ffbb524 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -17,11 +17,11 @@ import CartItemSelect from './ItemSelect' type Props = { item: CartItemProps editable?: boolean + selfPicking?: boolean pilihSemuaCart?: boolean } -const CartItem = ({ item, editable = true,}: Props) => { - +const CartItem = ({ item, editable = true, selfPicking}: Props) => { return ( <div className={style.wrapper}> {item.cart_type === 'promotion' && ( @@ -53,6 +53,11 @@ const CartItem = ({ item, editable = true,}: Props) => { <CartItem.Image item={item} /> <div className={style.details}> + {(item.is_in_bu) && (item.on_hand_qty >= item.quantity) && ( + <div className='text-[10px] text-red-500 italic'> + *Barang ini bisa di pickup maksimal pukul 16.00 + </div> + )} <CartItem.Name item={item} /> <div className='mt-2 flex justify-between w-full'> diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx index e5e7f314..7220e362 100644 --- a/src-migrate/modules/cart/components/ItemAction.tsx +++ b/src-migrate/modules/cart/components/ItemAction.tsx @@ -13,7 +13,6 @@ import { useDebounce } from 'usehooks-ts' import { useCartStore } from '../stores/useCartStore' import { useProductCartContext } from '@/contexts/ProductCartContext' - type Props = { item: CartItem } diff --git a/src-migrate/modules/cart/stores/useCartStore.ts b/src-migrate/modules/cart/stores/useCartStore.ts index 3b50ec32..c2ebf50f 100644 --- a/src-migrate/modules/cart/stores/useCartStore.ts +++ b/src-migrate/modules/cart/stores/useCartStore.ts @@ -54,7 +54,7 @@ export const useCartStore = create<State & Action>((set, get) => ({ const computeSummary = (cart: CartProps) => { let subtotal = 0; let discount = 0; - for (const item of cart.products) { + for (const item of cart?.products) { if (!item.selected) continue; let price = 0; @@ -71,4 +71,4 @@ const computeSummary = (cart: CartProps) => { let grandTotal = total + tax; return { subtotal, discount, total, tax, grandTotal }; -}; +};
\ No newline at end of file diff --git a/src-migrate/modules/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx index 547b1957..edecb855 100644 --- a/src-migrate/modules/page-content/index.tsx +++ b/src-migrate/modules/page-content/index.tsx @@ -1,44 +1,44 @@ -import { useMemo } from "react" -import { useQuery } from "react-query" -import { PageContentProps } from "~/types/pageContent" -import { getPageContent } from "~/services/pageContent" +import { useMemo } from 'react'; +import { useQuery } from 'react-query'; +import { PageContentProps } from '~/types/pageContent'; +import { getPageContent } from '~/services/pageContent'; type Props = { - path: string -} + path: string; +}; const PageContent = ({ path }: Props) => { - const { data, isLoading } = useQuery<PageContentProps>(`page-content:${path}`, async () => await getPageContent({ path })) + const { data, isLoading } = useQuery<PageContentProps>( + `page-content:${path}`, + async () => await getPageContent({ path }) + ); const parsedContent = useMemo<string>(() => { - if (!data) return '' + if (!data) return ''; return data.content.replaceAll( 'src="/web/image', `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image` - ) - }, [data]) + ); + }, [data]); + if (isLoading) return <PageContentSkeleton />; - if (isLoading) return <PageContentSkeleton /> - - return ( - <div dangerouslySetInnerHTML={{ __html: parsedContent || '' }}></div> - ) -} + return <div dangerouslySetInnerHTML={{ __html: parsedContent || '' }}></div>; +}; const PageContentSkeleton = () => ( - <div className="animate-pulse grid gap-y-4"> - <div className="w-full h-10 bg-gray-300 rounded" /> - <div className="h-2" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-8/12 h-4 bg-gray-300 rounded" /> - <div className="h-2" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-full h-4 bg-gray-300 rounded" /> - <div className="w-1/2 h-4 bg-gray-300 rounded" /> + <div className='animate-pulse grid gap-y-4'> + <div className='w-full h-10 bg-gray-300 rounded' /> + <div className='h-2' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-8/12 h-4 bg-gray-300 rounded' /> + <div className='h-2' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-full h-4 bg-gray-300 rounded' /> + <div className='w-1/2 h-4 bg-gray-300 rounded' /> </div> -) +); -export default PageContent
\ No newline at end of file +export default PageContent; diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx index 097db98a..a5284637 100644 --- a/src-migrate/modules/product-detail/components/AddToCart.tsx +++ b/src-migrate/modules/product-detail/components/AddToCart.tsx @@ -1,19 +1,35 @@ -import { Button, useToast } from '@chakra-ui/react' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import style from '../styles/price-action.module.css'; +import { Button, Link, useToast } from '@chakra-ui/react' +import product from 'next-seo/lib/jsonld/product' import { useRouter } from 'next/router' - +import { useEffect, useState } from 'react' +import Image from '~/components/ui/image' import { getAuth } from '~/libs/auth' import { upsertUserCart } from '~/services/cart' +import LazyLoad from 'react-lazy-load'; +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; +import ImageNext from 'next/image'; +import { useProductCartContext } from '@/contexts/ProductCartContext' +import { createSlug } from '~/libs/slug' +import formatCurrency from '~/libs/formatCurrency' +import { useProductDetail } from '../stores/useProductDetail'; type Props = { variantId: number | null, quantity?: number; source?: 'buy' | 'add_to_cart'; + products : IProductDetail } +type Status = 'idle' | 'loading' | 'success' + const AddToCart = ({ variantId, quantity = 1, - source = 'add_to_cart' + source = 'add_to_cart', + products }: Props) => { const auth = getAuth() const router = useRouter() @@ -22,40 +38,65 @@ const AddToCart = ({ isClosable: true }) - const handleClick = async () => { + const { + askAdminUrl, + } = useProductDetail(); + + const [product, setProducts] = useState(products); + const [status, setStatus] = useState<Status>('idle') + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() + + const productSimilarQuery = [ + product?.name, + `fq=-product_id_i:${product.id}`, + `fq=-manufacture_id_i:${product.manufacture?.id || 0}`, + ].join('&'); + const [addCartAlert, setAddCartAlert] = useState(false); + + const handleButton = async () => { if (typeof auth !== 'object') { const currentUrl = encodeURIComponent(router.asPath) router.push(`/login?next=${currentUrl}`) return; } - + if ( !variantId || isNaN(quantity) || typeof auth !== 'object' ) return; - - toast.promise( - upsertUserCart({ - userId: auth.id, + if (status === 'success') return + setStatus('loading') + await upsertUserCart({ + userId: auth.id, type: 'product', id: variantId, qty: quantity, selected: true, source: source, qtyAppend: true - }), - { - loading: { title: 'Menambahkan ke keranjang', description: 'Mohon tunggu...' }, - success: { title: 'Menambahkan ke keranjang', description: 'Berhasil menambahkan ke keranjang belanja' }, - error: { title: 'Menambahkan ke keranjang', description: 'Gagal menambahkan ke keranjang belanja' }, - } - ) - + }) + setStatus('idle') + setRefreshCart(true); + setAddCartAlert(true); + + toast({ + title: 'Tambah ke keranjang', + description: 'Berhasil menambahkan barang ke keranjang belanja', + status: 'success', + duration: 3000, + isClosable: true, + position: 'top', + }) + if (source === 'buy') { router.push('/shop/checkout?source=buy') } } + useEffect(() => { + if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000) + }, [status]) const btnConfig = { 'add_to_cart': { @@ -69,10 +110,98 @@ const AddToCart = ({ } return ( - <Button onClick={handleClick} colorScheme={btnConfig[source].colorScheme} className='w-full'> - {btnConfig[source].text} - </Button> + <div className='w-full'> + <Button onClick={handleButton} colorScheme={btnConfig[source].colorScheme} className='w-full'> + {btnConfig[source].text} + </Button> + <BottomPopup + className='!container' + title='Berhasil Ditambahkan' + active={addCartAlert} + close={() => { + setAddCartAlert(false); + }} + > + <div className='flex mt-4'> + <div className='w-[10%]'> + <ImageNext + src={product.image} + alt={product.name} + className='h-32 object-contain object-center w-full border border-gray_r-4' + width={80} + height={80} + /> + </div> + <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'> + {!!product.manufacture.name ? ( + <Link + href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())} + className=' hover:underline' + color={"red"} + > + {product.manufacture.name} + </Link> + ) : '-'} + <p className='text-ellipsis overflow-hidden'> + {product.name} + </p> + <p> + {product.code} + </p> + {!!product.lowest_price && product.lowest_price.price > 0 && ( + <> + <div className='flex items-end gap-x-2'> + {product.lowest_price.discount_percentage > 0 && ( + <> + <div className='badge-solid-red'> + {Math.floor(product.lowest_price.discount_percentage)}% + </div> + <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'> + Rp {formatCurrency(product.lowest_price.price || 0)} + </div> + </> + )} + <div className='text-danger-500 font-semibold'> + Rp {formatCurrency(product.lowest_price.price_discount || 0)} + </div> + </div> + </> + )} + + {!!product.lowest_price && product.lowest_price.price === 0 && ( + <span> + Hubungi kami untuk dapatkan harga terbaik,{' '} + <Link + href={askAdminUrl} + target='_blank' + className='font-medium underline' + color={'red'} + > + klik disini + </Link> + </span> + )} + </div> + <div className='ml-3 flex items-center font-normal'> + <Link + href='/shop/cart' + className='flex-1 py-2 text-gray_r-12 btn-yellow' + > + Lihat Keranjang + </Link> + </div> + </div> + <div className='mt-8 mb-4'> + <div className='text-h-sm font-semibold mb-6'> + Kamu Mungkin Juga Suka + </div> + <LazyLoad> + <ProductSimilar query={productSimilarQuery} /> + </LazyLoad> + </div> + </BottomPopup> + </div> ) } -export default AddToCart
\ No newline at end of file +export default AddToCart
\ No newline at end of file diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 52eb6b88..75ae3c41 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -19,7 +19,7 @@ type Props = { const Information = ({ product }: Props) => { const querySLA = useQuery<IProductVariantSLA>({ - queryKey: ['variant-sla', product.variants[0].id], + queryKey: ['variant-sla', product.variants[0]?.id], queryFn: () => getVariantSLA(product.variants[0].id), enabled: product.variant_total === 1 }) diff --git a/src-migrate/modules/product-detail/components/PriceAction.tsx b/src-migrate/modules/product-detail/components/PriceAction.tsx index 81271f6e..9021264e 100644 --- a/src-migrate/modules/product-detail/components/PriceAction.tsx +++ b/src-migrate/modules/product-detail/components/PriceAction.tsx @@ -97,12 +97,14 @@ const PriceAction = ({ product }: Props) => { className={style['quantity-input']} /> <AddToCart + products={product} variantId={activeVariantId} quantity={Number(quantityInput)} /> {!isApproval && ( <AddToCart source='buy' + products={product} variantId={activeVariantId} quantity={Number(quantityInput)} /> diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index fad35a7d..e4555913 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -129,7 +129,7 @@ const ProductDetail = ({ product }: Props) => { )} <div className='h-4 md:h-10' /> - {!!activeVariantId && !isApproval && <ProductPromoSection productId={activeVariantId} />} + {!!activeVariantId && !isApproval && <ProductPromoSection product={product} productId={activeVariantId} />} <div className={style['section-card']}> <h2 className={style['heading']}> diff --git a/src-migrate/modules/product-detail/stores/useProductDetail.ts b/src-migrate/modules/product-detail/stores/useProductDetail.ts index 2da8835d..eb409930 100644 --- a/src-migrate/modules/product-detail/stores/useProductDetail.ts +++ b/src-migrate/modules/product-detail/stores/useProductDetail.ts @@ -23,7 +23,7 @@ export const useProductDetail = create<State & Action>((set, get) => ({ askAdminUrl: '', isApproval : false, setActive: (variant) => { - set({ activeVariantId: variant.id, activePrice: variant.price }); + set({ activeVariantId: variant?.id, activePrice: variant?.price }); }, setQuantityInput: (value: string) => { set({ quantityInput: value }); diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 87017c14..7b3863f9 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -5,53 +5,71 @@ import { useEffect, useState } from 'react' import { getAuth } from '~/libs/auth' import { upsertUserCart } from '~/services/cart' -import { IPromotion } from '~/types/promotion' +import { IPromotion, IProductVariantPromo } from '~/types/promotion' import DesktopView from '../../../../src/core/components/views/DesktopView'; import MobileView from '../../../../src/core/components/views/MobileView'; - +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import ImageNext from 'next/image'; +import Link from 'next/link' +import LazyLoad from 'react-lazy-load' +import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar'; +import { IProductDetail } from '~/types/product'; +import { useProductCartContext } from '@/contexts/ProductCartContext' +import { createSlug } from '~/libs/slug' +import formatCurrency from '~/libs/formatCurrency' +import { useProductDetail } from '../../product-detail/stores/useProductDetail'; type Props = { promotion: IPromotion + product: IProductDetail + variant: IProductVariantPromo, } type Status = 'idle' | 'loading' | 'success' -const ProductPromoAddToCart = ({ promotion }: Props) => { +const ProductPromoAddToCart = ({product, promotion, variant }: Props) => { const auth = getAuth() const toast = useToast() const router = useRouter() - + const {askAdminUrl} = useProductDetail(); const [status, setStatus] = useState<Status>('idle') - + const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } = + useProductCartContext() + const productSimilarQuery = [ + promotion?.name, + `fq=-product_id_i:${promotion.products[0].product_id}`, + ].join('&'); + const [addCartAlert, setAddCartAlert] = useState(false); + const handleButton = async () => { if (typeof auth !== 'object') { - const currentUrl = encodeURIComponent(router.asPath) - router.push(`/login?next=${currentUrl}`) - return - } - if (status === 'success') return - - setStatus('loading') - await upsertUserCart({ - userId: auth.id, - type: 'promotion', - id: promotion.id, - qty: 1, - selected: true, - source: 'add_to_cart', - qtyAppend: true - }) - setStatus('idle') - - toast({ - title: 'Tambah ke keranjang', - description: 'Berhasil menambahkan barang ke keranjang belanja', - status: 'success', - duration: 3000, - isClosable: true, - position: 'top', - }) + const currentUrl = encodeURIComponent(router.asPath) + router.push(`/login?next=${currentUrl}`) + return } + if (status === 'success') return + setStatus('loading') + await upsertUserCart({ + userId: auth.id, + type: 'promotion', + id: promotion.id, + qty: 1, + selected: true, + source: 'add_to_cart', + qtyAppend: true + }) + setStatus('idle') + setRefreshCart(true); + setAddCartAlert(true); + toast({ + title: 'Tambah ke keranjang', + description: 'Berhasil menambahkan barang ke keranjang belanja', + status: 'success', + duration: 3000, + isClosable: true, + position: 'top', + }) +} useEffect(() => { if (status === 'success') setTimeout(() => { setStatus('idle') }, 3000) @@ -92,6 +110,97 @@ const ProductPromoAddToCart = ({ promotion }: Props) => { {status === 'success' && <span>Berhasil</span>} {status !== 'success' && <span>Keranjang</span>} </Button> + <BottomPopup + className='!container' + title='Berhasil Ditambahkan' + active={addCartAlert} + close={() => { + setAddCartAlert(false); + }} + > + <div className='flex mt-4'> + <div className='w-[10%]'> + <ImageNext + src={ + product?.image + ? product?.image + : variant?.image || '' + } + alt={product?.name ? product?.name : variant?.display_name || ''} + className='h-32 object-contain object-center w-full border border-gray_r-4' + width={80} + height={80} + /> + + </div> + <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'> + {!!product?.manufacture?.name || variant?.manufacture && ( + <Link + href={createSlug('/shop/brands/', product?.manufacture?.name? product?.manufacture?.name : variant?.manufacture?.manufacture_name, product?.manufacture?.id? product?.manufacture?.id.toString() : variant?.manufacture?.manufacture_id.toString())} + className=' hover:underline text-red-500' + color={"red"} + > + {product?.manufacture?.name ? product?.manufacture?.name : variant?.manufacture?.manufacture_name} + </Link> + )} + <p className='text-ellipsis overflow-hidden'> + {product?.name ? product?.name : variant?.name} + </p> + <p> + {product?.code} + </p> + {(!!product?.lowest_price && product?.lowest_price?.price > 0) || variant?.price?.price > 0 && ( + <> + <div className='flex items-end gap-x-2'> + {(product?.lowest_price?.discount_percentage > 0) || variant?.price?.discount_percentage > 0 && ( + <> + <div className='badge-solid-red'> + {Math.floor(product?.lowest_price?.discount_percentage ? product?.lowest_price?.discount_percentage : variant?.price?.discount_percentage)}% + </div> + <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'> + Rp {formatCurrency(product?.lowest_price?.price ? product?.lowest_price?.price || 0 : variant?.price?.price || 0)} + </div> + </> + )} + <div className='text-danger-500 font-semibold'> + Rp {formatCurrency(product?.lowest_price?.price_discount? product?.lowest_price?.price_discount || 0 : variant?.price?.price_discount)} + </div> + </div> + </> + )} + + {(!!product?.lowest_price && product?.lowest_price?.price === 0) || variant?.price?.price === 0 && ( + <span> + Hubungi kami untuk dapatkan harga terbaik,{' '} + <Link + href={askAdminUrl} + target='_blank' + className='font-medium underline' + color={'red'} + > + klik disini + </Link> + </span> + )} + </div> + <div className='ml-3 flex items-center font-normal'> + <Link + href='/shop/cart' + className='flex-1 py-2 text-gray_r-12 btn-yellow' + > + Lihat Keranjang + </Link> + </div> + </div> + <div className='mt-8 mb-4'> + <div className='text-h-sm font-semibold mb-6'> + Kamu Mungkin Juga Suka + </div> + <LazyLoad> + <ProductSimilar query={productSimilarQuery} /> + </LazyLoad> + </div> + </BottomPopup> </DesktopView> </div> ) diff --git a/src-migrate/modules/product-promo/components/Card.tsx b/src-migrate/modules/product-promo/components/Card.tsx index 728d23ca..b8abe5ec 100644 --- a/src-migrate/modules/product-promo/components/Card.tsx +++ b/src-migrate/modules/product-promo/components/Card.tsx @@ -15,16 +15,16 @@ import clsxm from '~/libs/clsxm' import ProductPromoItem from './Item' import ProductPromoAddToCart from "./AddToCart" import ProductPromoCardCountdown from "./CardCountdown" - +import { IProductDetail } from '~/types/product'; import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '../../../../src/core/components/views/DesktopView'; type Props = { promotion: IPromotion - + product: IProductDetail } -const ProductPromoCard = ({ promotion}: Props) => { +const ProductPromoCard = ({product, promotion}: Props) => { const [products, setProducts] = useState<IProductVariantPromo[]>([]) const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([]) const [error, setError] = useState<string | null>(null) @@ -132,7 +132,7 @@ const ProductPromoCard = ({ promotion}: Props) => { </div> <div> - <ProductPromoAddToCart promotion={promotion} /> + <ProductPromoAddToCart product={product} promotion={promotion} variant={products[0]} /> </div> </div> @@ -189,7 +189,7 @@ const ProductPromoCard = ({ promotion}: Props) => { </div> </div> <div> - <ProductPromoAddToCart promotion={promotion} /> + <ProductPromoAddToCart product={product} promotion={promotion} variant={products[0]}/> </div> </div> diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx index b396160f..4b345654 100644 --- a/src-migrate/modules/product-promo/components/Item.tsx +++ b/src-migrate/modules/product-promo/components/Item.tsx @@ -1,34 +1,35 @@ -import style from '../styles/item.module.css' +import style from '../styles/item.module.css'; -import { Tooltip } from '@chakra-ui/react' +import { Tooltip } from '@chakra-ui/react'; -import Image from '~/components/ui/image' -import { IProductVariantPromo } from '~/types/promotion' +import Image from '~/components/ui/image'; +import { IProductVariantPromo } from '~/types/promotion'; type Props = { - variant: IProductVariantPromo, - isFree?: boolean -} + variant: IProductVariantPromo; + isFree?: boolean; +}; -const ProductPromoItem = ({ - variant, - isFree = false -}: Props) => { +const ProductPromoItem = ({ variant, isFree = false }: Props) => { return ( <div className={style.item}> <div className={style.image}> - <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} /> + <Image + src={variant.image || '/images/noimage.jpeg'} + alt={variant.display_name} + width={120} + height={120} + quality={85} + /> <div className={style.quantity}> {variant.qty} pcs {isFree ? '(free)' : ''} </div> </div> <Tooltip label={variant.display_name} placement='top' fontSize='sm'> - <div className={style.name}> - {variant.name} - </div> + <div className={style.name}>{variant.name}</div> </Tooltip> </div> - ) -} + ); +}; -export default ProductPromoItem
\ No newline at end of file +export default ProductPromoItem; diff --git a/src-migrate/modules/product-promo/components/Modal.tsx b/src-migrate/modules/product-promo/components/Modal.tsx index 0de672c2..1722b9df 100644 --- a/src-migrate/modules/product-promo/components/Modal.tsx +++ b/src-migrate/modules/product-promo/components/Modal.tsx @@ -3,8 +3,12 @@ import { Modal } from "~/components/ui/modal" import { useModalStore } from '../stores/useModalStore' import ProductPromoCategoryTab from './CategoryTab' import ProductPromoModalContent from './ModalContent' +import { IProductDetail } from '~/types/product'; -const ProductPromoModal = () => { +type Props = { + product: IProductDetail +} +const ProductPromoModal = ({product}:Props) => { const { active, closeModal } = useModalStore() return ( @@ -17,7 +21,7 @@ const ProductPromoModal = () => { <div className='h-4' /> - <ProductPromoModalContent /> + <ProductPromoModalContent product={product} /> </Modal> ) } diff --git a/src-migrate/modules/product-promo/components/ModalContent.tsx b/src-migrate/modules/product-promo/components/ModalContent.tsx index ab5129f8..256ef61a 100644 --- a/src-migrate/modules/product-promo/components/ModalContent.tsx +++ b/src-migrate/modules/product-promo/components/ModalContent.tsx @@ -6,7 +6,11 @@ import { getVariantPromoByCategory } from "~/services/productVariant" import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from "./Card" -const ProductPromoModalContent = () => { +import { IProductDetail } from '~/types/product'; +type Props = { + product: IProductDetail +} +const ProductPromoModalContent = ({product}:Props) => { const { activeTab, variantId } = useModalStore() const promotionsQuery = useQuery( @@ -24,7 +28,7 @@ const ProductPromoModalContent = () => { <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[70vh] max-h-[70vh]'> <div className="grid grid-cols-1 gap-y-6 pb-6"> {promotions?.data.map((promo) => ( - <ProductPromoCard key={promo.id} promotion={promo} /> + <ProductPromoCard key={promo.id} promotion={promo} product={product} /> ))} {promotions?.data.length === 0 && ( <div className="py-10 rounded-lg h-fit text-center text-body-1 font-semibold text-gray-800 bg-gray-200">Belum ada promo pada kategori ini</div> diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 4e8a7dd5..e1719998 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -9,12 +9,14 @@ import { IPromotion } from '~/types/promotion' import { useModalStore } from "../stores/useModalStore" import ProductPromoCard from './Card' import ProductPromoModal from "./Modal" +import { IProductDetail } from '~/types/product'; type Props = { productId: number; + product: IProductDetail; } -const ProductPromoSection = ({ productId }: Props) => { +const ProductPromoSection = ({ product, productId }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } @@ -23,14 +25,13 @@ const ProductPromoSection = ({ productId }: Props) => { const promotions = promotionsQuery.data const { openModal } = useModalStore() - return ( <SmoothRender isLoaded={(promotions?.data && promotions?.data.length > 0) || false} height='450px' duration='700ms' > - <ProductPromoModal /> + <ProductPromoModal product={product}/> {promotions?.data && promotions?.data.length > 0 && ( <div className={style.titleWrapper}> @@ -50,7 +51,7 @@ const ProductPromoSection = ({ productId }: Props) => { > {promotions?.data.map((promotion) => ( <div key={promotion.id} className="min-w-[400px] max-w-[400px]"> - <ProductPromoCard promotion={promotion} /> + <ProductPromoCard product={product} promotion={promotion} /> </div> ))} </Skeleton> diff --git a/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx b/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx index 1c5cc86d..5685b83a 100644 --- a/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx +++ b/src-migrate/modules/promo/components/FlashSaleNonDisplay.tsx @@ -1,20 +1,17 @@ -import dynamic from "next/dynamic"; -import React from "react"; -import { FlashSaleSkeleton } from "@/lib/flashSale/skeleton/FlashSaleSkeleton"; - +import dynamic from 'next/dynamic'; +import React from 'react'; +import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton'; const FlashSaleNonDisplay = dynamic( - () => import('@/lib/flashSale/components/FlashSaleNonDisplay'), - { - loading: () => <FlashSaleSkeleton />, - } - ); - - const FlashSalePromo = ()=> { - return( - <> - <FlashSaleNonDisplay/> - </> - ) + () => import('@/lib/flashSale/components/FlashSaleNonDisplay'), + { + loading: () => <FlashSaleSkeleton />, } - - export default FlashSalePromo
\ No newline at end of file +); +const FlashSalePromo = () => { + return ( + <> + <FlashSaleNonDisplay /> + </> + ); +}; +export default FlashSalePromo; diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx index c5f0afad..7d0aad11 100644 --- a/src-migrate/modules/promo/components/Hero.tsx +++ b/src-migrate/modules/promo/components/Hero.tsx @@ -3,34 +3,34 @@ import 'swiper/css'; import Image from 'next/image'; import { useEffect, useMemo } from 'react'; import { useQuery } from 'react-query'; -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; import style from '../styles/hero.module.css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { Navigation, Pagination, Autoplay } from 'swiper'; +import { Navigation, Pagination, Autoplay } from 'swiper'; import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '@/core/components/views/DesktopView'; -import {bannerApi} from '../../../../src/api/bannerApi' +import { bannerApi } from '../../../../src/api/bannerApi'; interface IPromotionProgram { headlineBanner: string; descriptionBanner: string; - image: string ; + image: string; name: string; } const swiperBanner: SwiperProps = { - modules:[Navigation, Pagination, Autoplay], + modules: [Navigation, Pagination, Autoplay], autoplay: { delay: 6000, - disableOnInteraction: false + disableOnInteraction: false, }, loop: true, className: 'h-[400px] w-full', slidesPerView: 1, spaceBetween: 10, - pagination:true, -} + pagination: true, +}; const swiperBannerMob = { autoplay: { delay: 6000, @@ -43,7 +43,10 @@ const swiperBannerMob = { }; const Hero = () => { - const heroBanner = useQuery('allPromo', bannerApi({ type: 'banner-semua-promo' })); + const heroBanner = useQuery( + 'allPromo', + bannerApi({ type: 'banner-semua-promo' }) + ); const banners: IPromotionProgram[] = useMemo( () => heroBanner?.data || [], @@ -54,52 +57,60 @@ const Hero = () => { ...swiperBannerMob, pagination: { dynamicBullets: false, clickable: true }, }; - + return ( <> <DesktopView> <div className={style['wrapper']}> - <Swiper {...swiperBanner}> - {banners.map((banner, index) => ( - <SwiperSlide key={index} className='flex flex-row'> - <div className={style['desc-section']}> - <div className={style['title']}>{banner.headlineBanner? banner.headlineBanner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div> - <div className='h-4' /> - <div className={style['subtitle']}>{banner.descriptionBanner? banner.descriptionBanner : "Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!"}</div> + <Swiper {...swiperBanner}> + {banners?.map((banner, index) => ( + <SwiperSlide key={index} className='flex flex-row'> + <div className={style['desc-section']}> + <div className={style['title']}> + {banner?.headlineBanner + ? banner?.headlineBanner + : 'Pasti Hemat & Untung Selama Belanja di Indoteknik.com!'} </div> - <div className={style['banner-section']}> - <Image - src={banner.image} - alt={banner.name} - width={666} - height={450} - quality={90} - className='w-full h-full object-fit object-center rounded-2xl' /> + <div className='h-4' /> + <div className={style['subtitle']}> + {banner?.descriptionBanner + ? banner?.descriptionBanner + : 'Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!'} </div> - </SwiperSlide> - ))} - </Swiper> - </div> - </DesktopView> - <MobileView> - <Swiper {...swiperBannerMobile}> - {banners?.map((banner, index) => ( - <SwiperSlide key={index}> - <Image - width={439} - height={150} - quality={100} - src={banner.image} - alt={banner.name} - className='w-full h-full object-cover object-center rounded-2xl' - /> + </div> + <div className={style['banner-section']}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={450} + quality={85} + className='w-full h-full object-fit object-center rounded-2xl' + /> + </div> </SwiperSlide> ))} </Swiper> - + </div> + </DesktopView> + <MobileView> + <Swiper {...swiperBannerMobile}> + {banners?.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + width={439} + height={150} + quality={85} + src={banner?.image} + alt={banner?.name} + className='w-full h-full object-cover object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> </MobileView> </> - ) -} + ); +}; -export default Hero
\ No newline at end of file +export default Hero; diff --git a/src-migrate/modules/promo/components/HeroDiskon.tsx b/src-migrate/modules/promo/components/HeroDiskon.tsx index 6d38c763..8b8edcc0 100644 --- a/src-migrate/modules/promo/components/HeroDiskon.tsx +++ b/src-migrate/modules/promo/components/HeroDiskon.tsx @@ -39,7 +39,7 @@ const Hero = () => { queryFn: () => getBanner({ type: 'banner-promotion' }) }) - const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]); + const banners = useMemo(() => bannerQuery?.data || [], [bannerQuery?.data]); useEffect(() => { if (banners.length > 1) { @@ -56,8 +56,8 @@ const Hero = () => { {banners.map((banner, index) => ( <SwiperSlide key={index}> <Image - src={banner.image} - alt={banner.name} + src={banner?.image} + alt={banner?.name} width={666} height={480} className='w-[446px] h-[446px] object-fill object-center rounded-2xl' @@ -71,8 +71,8 @@ const Hero = () => { {banners.map((banner, index) => ( <SwiperSlide key={index}> <Image - src={banner.image} - alt={banner.name} + src={banner?.image} + alt={banner?.name} width={666} height={450} className='w-[400px] h-[217px] object-cover object-center rounded-2xl ' @@ -86,8 +86,8 @@ const Hero = () => { {banners.map((banner, index) => ( <SwiperSlide key={index}> <Image - src={banner.image} - alt={banner.name} + src={banner?.image} + alt={banner?.name} width={666} height={450} className='w-[400px] h-[217px] object-cover object-center rounded-2xl' @@ -101,8 +101,8 @@ const Hero = () => { {banners.map((banner, index) => ( <SwiperSlide key={index}> <Image - src={banner.image} - alt={banner.name} + src={banner?.image} + alt={banner?.name} width={666} height={450} className='w-[400px] h-[217px] object-cover object-center rounded-2xl' @@ -116,8 +116,8 @@ const Hero = () => { {banners.map((banner, index) => ( <SwiperSlide key={index}> <Image - src={banner.image} - alt={banner.name} + src={banner?.image} + alt={banner?.name} width={666} height={450} className='w-[400px] h-[217px] object-cover object-center rounded-2xl' diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx index be74fc93..9f808718 100644 --- a/src-migrate/modules/promo/components/PromoList.tsx +++ b/src-migrate/modules/promo/components/PromoList.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import { Button, Skeleton } from '@chakra-ui/react' -import clsxm from "~/libs/clsxm" +import { Button, Skeleton } from '@chakra-ui/react'; +import clsxm from '~/libs/clsxm'; import ProductPromoCard from '../../product-promo/components/Card'; import { fetchPromoItemsSolr } from '../../../../src/api/promoApi'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -8,7 +8,7 @@ import SwiperCore, { Navigation, Pagination } from 'swiper'; import useDevice from '@/core/hooks/useDevice'; import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner'; import usePromoStore from './promoStore'; -import Link from "next/link" +import Link from 'next/link'; import { IPromotion } from '~/types/promotion'; interface PromoListProps { selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string @@ -35,8 +35,8 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => { className: 'h-full w-full', slidesPerView: isMobile ? 1.1 : 3.25, spaceBetween: 10, - navigation:isMobile? true : false, - allowTouchMove:isMobile? false : true, + navigation: isMobile ? true : false, + allowTouchMove: isMobile ? false : true, }; useEffect(() => { @@ -56,10 +56,10 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => { const fetchPromotions = async () => { setIsLoading(true); try { - const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); + const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); setPromoItems(items); - const promoDataPromises = items.map(async (item) => { + const promoDataPromises = items?.map(async (item) => { try { const response = await fetchPromoItemsSolr(`id:${item.id}`, 0, 10); return response; @@ -69,9 +69,11 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => { }); const promoDataArray = await Promise.all(promoDataPromises); - const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); + const mergedPromoData = promoDataArray?.reduce( + (accumulator, currentValue) => accumulator.concat(currentValue), + [] + ); setPromoData(mergedPromoData); - } catch (error) { console.error('Error fetching promo items:', error); } finally { @@ -92,44 +94,49 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => { <div className='flex justify-between items-center'> <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1> <div> - <Link href={`/shop/promo/${slug}`} className='!text-red-500 font-semibold'> + <Link + href={`/shop/promo/${slug}`} + className='!text-red-500 font-semibold' + > Lihat Semua </Link> </div> </div> {isLoading ? ( - <div className="loading-spinner flex justify-center"> + <div className='loading-spinner flex justify-center'> <LogoSpinner width={48} height={48} /> </div> ) : ( <Skeleton - isLoaded={!isLoading} - className={clsxm( - "flex gap-x-4 overflow-x-auto px-4 md:px-0", { - "min-h-[340px]": promoData[0] && promoData?.length > 0 - })} - > - {isDesktop && ( - <Swiper {...swiperBanner}> - {promoData?.map((promotion: IPromotion) => ( - <SwiperSlide key={promotion.id}> - <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full"> - <ProductPromoCard promotion={promotion} /> - </div> - </SwiperSlide> - ))} - </Swiper> - )} - {isMobile && (promoData?.map((promotion: IPromotion) => ( - <div key={promotion.id} className="min-w-[400px] max-w-[400px]"> - <ProductPromoCard promotion={promotion} /> - </div> - )))} - - </Skeleton> + isLoaded={!isLoading} + className={clsxm('flex gap-x-4 overflow-x-auto px-4 md:px-0', { + 'min-h-[340px]': promoData[0] && promoData?.length > 0, + })} + > + {isDesktop && ( + <Swiper {...swiperBanner}> + {promoData?.map((promotion: IPromotion) => ( + <SwiperSlide key={promotion.id}> + <div className='min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full'> + <ProductPromoCard + product={promoItems} + promotion={promotion} + /> + </div> + </SwiperSlide> + ))} + </Swiper> + )} + {isMobile && + promoData?.map((promotion: IPromotion) => ( + <div key={promotion.id} className='min-w-[400px] max-w-[400px]'> + <ProductPromoCard product={promoItems} promotion={promotion} /> + </div> + ))} + </Skeleton> )} </div> ); }; -export default PromoList;
\ No newline at end of file +export default PromoList; diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx index 33839944..43e4eedf 100644 --- a/src-migrate/modules/promo/components/PromotinProgram.jsx +++ b/src-migrate/modules/promo/components/PromotinProgram.jsx @@ -1,9 +1,7 @@ import React from 'react'; import Image from 'next/image'; -import { InfoIcon } from "lucide-react"; -import MobileView from '../../../../src/core/components/views/MobileView'; -import DesktopView from '@/core/components/views/DesktopView'; -import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import { InfoIcon } from 'lucide-react'; +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import useDevice from '@/core/hooks/useDevice'; @@ -11,9 +9,12 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { const { isMobile } = useDevice(); return ( <> - <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div> + <h1 className='text-h-sm md:text-h-lg font-semibold py-4'> + {' '} + Serba Serbi Promo + </h1> <div className='px-4 sm:px-0'> - {/* <div className='w-full h-full '> + {/* <div className='w-full h-full '> <div onClick={() => onSelectPromo('Diskon')} className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} @@ -39,93 +40,147 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { </div> </div> </div> */} - - <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}> - <SwiperSlide> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Bundling')} - className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/silat.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div > - <div className='flex w-full flex-row items-center justify-start'> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}> - Pilihan bundling barang kombinasi Silat. - </p> + + <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}> + <SwiperSlide> + <div className='w-full h-full '> + <div + onClick={() => onSelectPromo('Bundling')} + className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${ + selectedPromo === 'Bundling' + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div> + <Image + width={24} + height={24} + quality={85} + src='/images/icon_promo/silat.svg' + alt='' + className='h-12 w-12 rounded' + /> + </div> + <div> + <div className='flex w-full flex-row items-center justify-start'> + <h1 + className={`mr-1 font-semibold text-base ${ + selectedPromo === 'Bundling' + ? 'text-red-500' + : 'text-gray-900' + }`} + > + Paket Silat + </h1> + <InfoIcon className='mt-[1px] text-red-500' size={14} /> </div> + <p + className={`text-xs md:text-sm ${ + selectedPromo === 'Bundling' + ? 'text-red-500' + : 'text-gray-500' + }`} + > + Pilihan bundling barang kombinasi Silat. + </p> </div> </div> - </SwiperSlide> - <SwiperSlide> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Loading')} - className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/barong.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div> - <div className='flex w-full flex-row items-center justify-start'> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}> - Beli banyak barang/partai barang borong. - </p> + </div> + </SwiperSlide> + <SwiperSlide> + <div className='w-full h-full '> + <div + onClick={() => onSelectPromo('Loading')} + className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${ + selectedPromo === 'Loading' + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div> + <Image + width={24} + height={24} + quality={85} + src='/images/icon_promo/barong.svg' + alt='' + className='h-12 w-12 rounded' + /> + </div> + <div> + <div className='flex w-full flex-row items-center justify-start'> + <h1 + className={`mr-1 font-semibold text-base ${ + selectedPromo === 'Loading' + ? 'text-red-500' + : 'text-gray-900' + }`} + > + Paket Barong + </h1> + <InfoIcon className='mt-[1px] text-red-500' size={14} /> </div> + <p + className={`text-xs md:text-sm ${ + selectedPromo === 'Loading' + ? 'text-red-500' + : 'text-gray-500' + }`} + > + Beli banyak barang/partai barang borong. + </p> </div> </div> - </SwiperSlide> - <SwiperSlide> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Merchandise')} - className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/angklung.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div > - <div className='flex w-full flex-row items-center justify-start '> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={` m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}> - Gratis barang promosi/merchandise menang langsung. - </p> + </div> + </SwiperSlide> + <SwiperSlide> + <div className='w-full h-full '> + <div + onClick={() => onSelectPromo('Merchandise')} + className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${ + selectedPromo === 'Merchandise' + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div> + <Image + width={24} + height={24} + quality={85} + src='/images/icon_promo/angklung.svg' + alt='' + className='h-12 w-12 rounded' + /> + </div> + <div> + <div className='flex w-full flex-row items-center justify-start '> + <h1 + className={`mr-1 font-semibold text-base ${ + selectedPromo === 'Merchandise' + ? 'text-red-500' + : 'text-gray-900' + }`} + > + Paket Angklung + </h1> + <InfoIcon className='mt-[1px] text-red-500' size={14} /> </div> + <p + className={` m1 text-xs md:text-sm ${ + selectedPromo === 'Merchandise' + ? 'text-red-500' + : 'text-gray-500' + }`} + > + Gratis barang promosi/merchandise menang langsung. + </p> </div> </div> - </SwiperSlide> - </Swiper> + </div> + </SwiperSlide> + </Swiper> </div> </> ); diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index e5877e51..034d13e9 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -55,15 +55,18 @@ const VoucherComponent = () => { slidesPerView: isMobile ? 1.2 : 3.2, spaceBetween: 2, }; - - const dataVouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); - const vouchers = auth?.id? listVouchers : dataVouchers; + const dataVouchers = useMemo( + () => voucherQuery?.data || [], + [voucherQuery?.data] + ); + const vouchers = auth?.id ? listVouchers : dataVouchers; const copyText = (text: string) => { if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard.writeText(text) + navigator.clipboard + .writeText(text) .then(() => { toast({ title: 'Salin ke papan klip', @@ -72,7 +75,7 @@ const VoucherComponent = () => { duration: 3000, isClosable: true, position: 'top', - }) + }); }) .catch(() => { fallbackCopyTextToClipboard(text); @@ -80,10 +83,10 @@ const VoucherComponent = () => { } else { fallbackCopyTextToClipboard(text); } - } + }; const fallbackCopyTextToClipboard = (text: string) => { - const textArea = document.createElement("textarea"); + const textArea = document.createElement('textarea'); textArea.value = text; // Tambahkan style untuk menyembunyikan textArea secara visual textArea.style.position = 'fixed'; @@ -108,43 +111,65 @@ const VoucherComponent = () => { duration: 3000, isClosable: true, position: 'top', - }) + }); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } document.body.removeChild(textArea); - } + }; return ( <> - <div className={style['title']}>Pakai Voucher Belanja</div> + <h1 className={style['title']}>Pakai Voucher Belanja</h1> <div className='h-6' /> - {voucherQuery.isLoading && ( + {voucherQuery?.isLoading && ( <div className='grid grid-cols-3 gap-x-4 animate-pulse'> {Array.from({ length: 3 }).map((_, index) => ( - <div key={index} className='w-full h-[160px] bg-gray-200 rounded-xl' /> + <div + key={index} + className='w-full h-[160px] bg-gray-200 rounded-xl' + /> ))} </div> )} - {!voucherQuery.isLoading && ( + {!voucherQuery?.isLoading && ( <div className={style['voucher-section']}> <Swiper {...swiperVoucher}> {vouchers?.map((voucher) => ( <SwiperSlide key={voucher.id} className='pb-2'> <div className={style['voucher-card']}> - <Image src={voucher.image} alt={voucher.name} width={128} height={128} className={style['voucher-image']} /> + <Image + src={voucher?.image} + alt={voucher?.name} + width={128} + height={128} + className={style['voucher-image']} + /> <div className={style['voucher-content']}> - <div className={style['voucher-title']}>{voucher.name}</div> - <div className={style['voucher-desc']}>{voucher.description}</div> + <div className={style['voucher-title']}> + {voucher?.name} + </div> + <div className={style['voucher-desc']}> + {voucher?.description} + </div> <div className={style['voucher-bottom']}> <div> - <div className={style['voucher-code-desc']}>Kode Promo</div> - <div className={style['voucher-code']}>{voucher.code}</div> + <div className={style['voucher-code-desc']}> + Kode Promo + </div> + <div className={style['voucher-code']}> + {voucher?.code} + </div> </div> - <button className={style['voucher-copy']} onClick={() => copyText(voucher.code)}>Salin</button> + <button + className={style['voucher-copy']} + onClick={() => copyText(voucher?.code)} + > + Salin + </button> </div> </div> </div> @@ -154,7 +179,7 @@ const VoucherComponent = () => { </div> )} </> - ) -} + ); +}; -export default VoucherComponent +export default VoucherComponent; diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b834f97a..38e9c810 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -1,179 +1,169 @@ -import { ChangeEvent, useMemo } from "react"; -import { useMutation } from "react-query"; -import { useRegisterStore } from "../stores/useRegisterStore"; -import { RegisterProps } from "~/types/auth"; -import { registerUser } from "~/services/auth"; -import TermCondition from "./TermCondition"; -import FormCaptcha from "./FormCaptcha"; -import { useRouter } from "next/router"; -import { UseToastOptions, useToast } from "@chakra-ui/react"; -import Link from "next/link"; - -const Form = () => { - const { - form, - isCheckedTNC, - isValidCaptcha, - errors, - updateForm, - validate, - } = useRegisterStore() - - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) - - const router = useRouter() - const toast = useToast() +import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react'; +import { useMutation } from 'react-query'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import TermCondition from './TermCondition'; +import FormCaptcha from './FormCaptcha'; +import { useRouter } from 'next/router'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import Link from 'next/link'; + +interface FormProps { + type: string; + required: boolean; + isBisnisRegist: boolean; + chekValid: boolean; + buttonSubmitClick: boolean; +} + +const Form: React.FC<FormProps> = ({ + type, + required, + isBisnisRegist = false, + chekValid, + buttonSubmitClick, +}) => { + const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = + useRegisterStore(); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + + const router = useRouter(); + const toast = useToast(); + + const emailRef = useRef<HTMLInputElement>(null); + const nameRef = useRef<HTMLInputElement>(null); + const passwordRef = useRef<HTMLInputElement>(null); + const phoneRef = useRef<HTMLInputElement>(null); const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; - updateForm(name, value) - validate() - } - - const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) - }) - - const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => { - e.preventDefault() - - const response = await mutation.mutateAsync(form) - - if (response?.register === true) { - const urlParams = new URLSearchParams({ - activation: 'otp', - email: form.email, - redirect: (router.query?.next || '/') as string - }) - router.push(`${router.route}?${urlParams}`) - } - - const toastProps: UseToastOptions = { - duration: 5000, - isClosable: true - } - - switch (response?.reason) { - case 'EMAIL_USED': - toast({ - ...toastProps, - title: 'Email sudah digunakan', - status: 'warning' - }) - break; - case 'NOT_ACTIVE': - const activationUrl = `${router.route}?activation=email` - toast({ - ...toastProps, - title: 'Akun belum aktif', - description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>, - status: 'warning' - }) - break - } - } + updateForm(name, value); + validate(); + }; + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options: ScrollIntoViewOptions = { + behavior: 'smooth', + block: 'center', + }; + + if (errors.email_partner && emailRef.current) { + emailRef.current.scrollIntoView(options); + return; + } + if (errors.name && nameRef.current) { + nameRef.current.scrollIntoView(options); + return; + } + + if (errors.password && passwordRef.current) { + passwordRef.current.scrollIntoView(options); + return; + } + + if (errors.phone && phoneRef.current) { + phoneRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); return ( - <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}> + <form className='mt-6 grid grid-cols-1 gap-y-4'> <div> - <label htmlFor="company"> - Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span> + <label htmlFor='name' className='text-black font-bold'> + Nama Lengkap </label> <input - type="text" - name="company" - id="company" - className="form-input mt-3" - placeholder="cth: INDOTEKNIK DOTCOM GEMILANG" - autoCapitalize="true" - value={form.company} - onChange={handleInputChange} - /> - </div> - - <div> - <label htmlFor='name'>Nama Lengkap</label> - - <input type='text' id='name' name='name' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-700' placeholder='Masukan nama lengkap anda' value={form.name} + ref={nameRef} onChange={handleInputChange} - aria-invalid={!!errors.name} - /> - - {!!errors.name && <span className="form-msg-danger">{errors.name}</span>} - </div> - - <div> - <label htmlFor='phone'>No Handphone</label> - - <input - type='tel' - id='phone' - name='phone' - className='form-input mt-3' - placeholder='08xxxxxxxx' - value={form.phone} - onChange={handleInputChange} - aria-invalid={!!errors.phone} + aria-invalid={chekValid && !!errors.name} /> - {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>} + {chekValid && !!errors.name && ( + <span className='form-msg-danger'>{errors.name}</span> + )} </div> <div> - <label htmlFor='email'>Alamat Email</label> + <label htmlFor='email' className='text-black font-bold'> + Alamat Email + </label> <input type='text' id='email' name='email' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='Masukan alamat email anda' value={form.email} + ref={emailRef} onChange={handleInputChange} - autoComplete="username" - aria-invalid={!!errors.email} + autoComplete='username' + aria-invalid={chekValid && !!errors.email} /> - {!!errors.email && <span className="form-msg-danger">{errors.email}</span>} + {chekValid && !!errors.email && ( + <span className='form-msg-danger'>{errors.email}</span> + )} </div> <div> - <label htmlFor='password'>Kata Sandi</label> + <label htmlFor='password' className='text-black font-bold'> + Kata Sandi + </label> <input type='password' name='password' id='password' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='••••••••••••' value={form.password} + ref={passwordRef} onChange={handleInputChange} - autoComplete="current-password" - aria-invalid={!!errors.password} + autoComplete='current-password' + aria-invalid={chekValid && !!errors.password} /> - {!!errors.password && <span className="form-msg-danger">{errors.password}</span>} + {chekValid && !!errors.password && ( + <span className='form-msg-danger'>{errors.password}</span> + )} </div> - <FormCaptcha /> + <div> + <label htmlFor='phone' className='text-black font-bold'> + No Handphone + </label> - <TermCondition /> + <input + type='tel' + id='phone' + name='phone' + className='form-input mt-3 transition-all duration-500' + placeholder='08xxxxxxxx' + value={form.phone} + ref={phoneRef} + onChange={handleInputChange} + aria-invalid={chekValid && !!errors.phone} + /> - <button - type="submit" - className="btn-yellow w-full mt-2" - disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha} - > - {mutation.isLoading ? 'Loading...' : 'Daftar'} - </button> + {chekValid && !!errors.phone && ( + <span className='form-msg-danger'>{errors.phone}</span> + )} + </div> </form> - ) -} + ); +}; -export default Form
\ No newline at end of file +export default Form; diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx new file mode 100644 index 00000000..e4cf3442 --- /dev/null +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -0,0 +1,715 @@ +import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'; +import { useMutation } from 'react-query'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import { useRouter } from 'next/router'; +import { + Button, + Checkbox, + UseToastOptions, + color, + useToast, +} from '@chakra-ui/react'; +import Link from 'next/link'; +import getFileBase64 from '@/core/utils/getFileBase64'; +import { Controller, useForm } from 'react-hook-form'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import odooApi from '~/libs/odooApi'; +import { toast } from 'react-hot-toast'; +import { EyeIcon } from '@heroicons/react/24/outline'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import Image from 'next/image'; +import useDevice from '@/core/hooks/useDevice'; +interface FormProps { + type: string; + required: boolean; + isPKP: boolean; + chekValid: boolean; + buttonSubmitClick: boolean; +} + +interface industry_id { + label: string; + value: string; + category: string; +} + +interface companyType { + value: string; + label: string; +} + +const form: React.FC<FormProps> = ({ + type, + required, + isPKP, + chekValid, + buttonSubmitClick, +}) => { + const { form, errors, updateForm, validate } = useRegisterStore(); + const { control, watch, setValue } = useForm(); + const [selectedCategory, setSelectedCategory] = useState<string>(''); + const [isChekBox, setIsChekBox] = useState<boolean>(false); + const [isExample, setIsExample] = useState<boolean>(false); + const { isDesktop, isMobile } = useDevice(); + // Inside your component + const [formattedNpwp, setFormattedNpwp] = useState<string>(''); // State for formatted NPWP + const [unformattedNpwp, setUnformattedNpwp] = useState<string>(''); // State for unformatted NPWP + + const [industries, setIndustries] = useState<industry_id[]>([]); + const [companyTypes, setCompanyTypes] = useState<companyType[]>([]); + + const router = useRouter(); + const toast = useToast(); + + const emailRef = useRef<HTMLInputElement>(null); + const businessNameRef = useRef<HTMLInputElement>(null); + const companyTypeRef = useRef<HTMLInputElement>(null); + const industryRef = useRef<HTMLDivElement>(null); + const addressRef = useRef<HTMLInputElement>(null); + const namaWajibPajakRef = useRef<HTMLInputElement>(null); + const alamatWajibPajakRef = useRef<HTMLInputElement>(null); + const npwpRef = useRef<HTMLInputElement>(null); + const sppkpRef = useRef<HTMLInputElement>(null); + const docsSppkpRef = useRef<HTMLInputElement>(null); + const docsNpwpRef = useRef<HTMLInputElement>(null); + + useEffect(() => { + const loadCompanyTypes = async () => { + const dataCompanyTypes = await odooApi( + 'GET', + '/api/v1/partner/company_type' + ); + setCompanyTypes( + dataCompanyTypes?.map((o: { id: any; name: any }) => ({ + value: o.id, + label: o.name, + })) + ); + }; + loadCompanyTypes(); + }, []); + + useEffect(() => { + const selectedCompanyType = companyTypes.find( + (company) => company.value === watch('companyType') + ); + if (selectedCompanyType) { + updateForm('company_type_id', `${selectedCompanyType?.value}`); + validate(); + } + }, [watch('companyType'), companyTypes]); + + useEffect(() => { + const selectedIndustryType = industries.find( + (industry) => industry.value === watch('industry_id') + ); + if (selectedIndustryType) { + updateForm('industry_id', `${selectedIndustryType?.value}`); + setSelectedCategory(selectedIndustryType.category); + validate(); + } + }, [watch('industry_id'), industries]); + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o: { id: any; name: any; category: any }) => ({ + value: o.id, + label: o.name, + category: o.category, + })) + ); + }; + loadIndustries(); + }, []); + + const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { + const { name, value } = event.target; + + updateForm('type_acc', 'business'); + updateForm('is_pkp', `${isPKP}`); + + // Update form dengan nilai terbaru dari input yang berubah + updateForm(name, value); + + // Jika checkbox aktif, sinkronisasi alamat_wajib_pajak dengan alamat_bisnis + if (isChekBox) { + if (name === 'alamat_wajib_pajak') { + updateForm('alamat_bisnis', value); + } else if (name === 'alamat_bisnis') { + updateForm('alamat_wajib_pajak', value); + } + } + + // Validasi setelah perubahan dilakukan + validate(); + }; + + const handleInputChangeNpwp = (event: ChangeEvent<HTMLInputElement>) => { + const { name, value } = event.target; + updateForm('type_acc', `business`); + updateForm('is_pkp', `${isPKP}`); + updateForm('npwp', value); + validate(); + }; + + const handleChange = (event: ChangeEvent<HTMLInputElement>) => { + setIsChekBox(!isChekBox); + }; + + const formatNpwp = (value: string) => { + try { + const cleaned = ('' + value).replace(/\D/g, ''); + let match; + if (cleaned.length <= 15) { + match = cleaned.match( + /(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/ + ); + } else { + match = cleaned.match( + /(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/ + ); + } + + if (match) { + return [ + match[1], + match[2] ? '.' : '', + match[2], + match[3] ? '.' : '', + match[3], + match[4] ? '.' : '', + match[4], + match[5] ? '-' : '', + match[5], + match[6] ? '.' : '', + match[6], + ].join(''); + } + + // If match is null, return the original cleaned string or handle as needed + return cleaned; + } catch (error) { + // Handle error or return a default value + console.error('Error formatting NPWP:', error); + return value; + } + }; + + useEffect(() => { + if (isChekBox) { + updateForm('isChekBox', 'true'); + updateForm('alamat_wajib_pajak', `${form.alamat_bisnis}`); + validate(); + } else { + updateForm('isChekBox', 'false'); + validate(); + } + }, [isChekBox]); + + const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => { + const toastProps: UseToastOptions = { + duration: 5000, + isClosable: true, + position: 'top', + }; + + let fileBase64 = ''; + const { name } = event.target; + const file = event.target.files?.[0]; + + // Allowed file extensions + const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg']; + + if (file) { + const fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension + + // Check if the file extension is allowed + if (!fileExtension || !allowedExtensions.includes(fileExtension)) { + toast({ + ...toastProps, + title: + 'Format file yang diijinkan adalah .pdf, .doc, .docx, .png, .jpg, atau .jpeg', + status: 'error', + }); + event.target.value = ''; + return; + } + + // Check for file size + if (file.size > 5000000) { + toast({ + ...toastProps, + title: 'Maksimal ukuran file adalah 5MB', + status: 'error', + }); + event.target.value = ''; + return; + } + + // Convert file to Base64 + fileBase64 = await getFileBase64(file); + updateForm(name, fileBase64); // Update form with the Base64 string + validate(); // Perform form validation + } + }; + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + + useEffect(() => { + const loadIndustries = async () => { + if (!isFormValid) { + const options: ScrollIntoViewOptions = { + behavior: 'smooth', + block: 'center', + }; + if (errors.email_partner && emailRef.current) { + emailRef.current.scrollIntoView(options); + return; + } + if (errors.company_type_id && companyTypeRef.current) { + companyTypeRef.current.scrollIntoView(options); + return; + } + + if (errors.business_name && businessNameRef.current) { + businessNameRef.current.scrollIntoView(options); + return; + } + + if (errors.industry_id && industryRef.current) { + industryRef.current.scrollIntoView(options); + return; + } + + if (errors.alamat_bisnis && addressRef.current) { + addressRef.current.scrollIntoView(options); + return; + } + + if (errors.npwp && npwpRef.current) { + npwpRef.current.scrollIntoView(options); + return; + } + + if (errors.sppkp && sppkpRef.current) { + sppkpRef.current.scrollIntoView(options); + return; + } + if (errors.sppkp_document && docsSppkpRef.current) { + docsSppkpRef.current.scrollIntoView(options); + return; + } + if (errors.npwp_document && docsNpwpRef.current) { + docsNpwpRef.current.scrollIntoView(options); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick, chekValid]); + return ( + <> + <BottomPopup + className='' + title='Contoh SPPKP' + active={isExample} + close={() => setIsExample(false)} + > + <div className='flex p-2'> + <Image + src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg' + alt='Contoh SPPKP' + className='w-full h-full ' + width={800} + height={800} + quality={85} + /> + </div> + </BottomPopup> + <form + className={` ${ + type === 'bisnis' + ? 'mt-6 grid grid-cols-1 gap-y-4' + : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2' + }`} + > + <div> + <label htmlFor='email' className='font-bold'> + Email Bisnis{' '} + {!isPKP && !required && ( + <span className='font-normal text-gray_r-11'>(opsional)</span> + )} + </label> + + <input + type='text' + id='email_partner' + name='email_partner' + placeholder='example@email.com' + value={!required ? form.email_partner : ''} + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ + required ? 'cursor-no-drop' : '' + }`} + disabled={required} + contentEditable={required} + readOnly={required} + onChange={handleInputChange} + autoComplete='username' + ref={emailRef} + aria-invalid={ + chekValid && !required && isPKP && !!errors.email_partner + } + /> + + {chekValid && !required && isPKP && !!errors.email_partner && ( + <span className='form-msg-danger'>{errors.email_partner}</span> + )} + </div> + + <div> + <label className='font-bold' htmlFor='company'> + Nama Bisnis + </label> + <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'> + <div + className='w-4/5 pr-1 max-h-11 transition-all duration-500' + ref={companyTypeRef} + > + <Controller + name='companyType' + control={control} + render={(props) => ( + <HookFormSelect + {...props} + options={companyTypes} + disabled={required} + placeholder='Badan Usaha' + /> + )} + /> + {chekValid && !required && !!errors.company_type_id && ( + <span className='form-msg-danger'> + {errors.company_type_id} + </span> + )} + </div> + <div className='w-[120%] '> + <input + type='text' + name='business_name' + id='business_name' + className='form-input max-h-11 transition-all duration-500' + placeholder='Nama Perusahaan' + autoCapitalize='true' + value={form.business_name} + ref={businessNameRef} + aria-invalid={chekValid && !!errors.business_name} + onChange={handleInputChange} + /> + + {chekValid && !!errors.business_name && ( + <span className='form-msg-danger'>{errors.business_name}</span> + )} + </div> + </div> + </div> + + <div className='mt-8 md:mt-0'> + <label className='font-bold' htmlFor='business_name'> + Klasifikasi Jenis Usaha + </label> + <div + className='max-h-10 transition-all duration-500' + ref={industryRef} + > + <Controller + name='industry_id' + control={control} + render={(props) => ( + <HookFormSelect + {...props} + options={industries} + disabled={required} + placeholder={'Select industry'} + /> + )} + /> + </div> + {selectedCategory && ( + <span className='text-gray_r-11 text-xs'> + Kategori : {selectedCategory} + </span> + )} + {chekValid && !required && !!errors.industry_id && ( + <span className='form-msg-danger'>{errors.industry_id}</span> + )} + </div> + + <div> + <label htmlFor='alamat_bisnis' className='font-bold'> + Alamat Bisnis + </label> + + <input + type='text' + id='alamat_bisnis' + name='alamat_bisnis' + placeholder='Masukan alamat bisnis anda' + value={!required ? form.alamat_bisnis : ''} + className={`form-input mt-3 max-h-11 transition-all duration-500 ${ + required ? 'cursor-no-drop' : '' + }`} + disabled={required} + contentEditable={required} + readOnly={required} + ref={addressRef} + onChange={handleInputChange} + aria-invalid={chekValid && !required && !!errors.alamat_bisnis} + /> + + {chekValid && !required && !!errors.alamat_bisnis && ( + <span className='form-msg-danger'>{errors.alamat_bisnis}</span> + )} + </div> + + <div> + <label htmlFor='nama_wajib_pajak' className='font-bold'> + Nama Wajib Pajak{' '} + {!isPKP && !required && ( + <span className='font-normal text-gray_r-11'>(opsional)</span> + )} + </label> + + <input + type='text' + id='nama_wajib_pajak' + name='nama_wajib_pajak' + placeholder='Masukan nama lengkap anda' + value={!required ? form.nama_wajib_pajak : ''} + className={`form-input mt-3 max-h-11 transition-all duration-500${ + required ? 'cursor-no-drop' : '' + }`} + disabled={required} + contentEditable={required} + readOnly={required} + onChange={handleInputChange} + ref={namaWajibPajakRef} + aria-invalid={ + chekValid && isPKP && !required && !!errors.nama_wajib_pajak + } + /> + + {chekValid && isPKP && !required && !!errors.nama_wajib_pajak && ( + <span className='form-msg-danger'>{errors.nama_wajib_pajak}</span> + )} + </div> + + <div> + <label + htmlFor='alamat_wajib_pajak' + className='font-bold flex items-center' + > + <p> + Alamat Wajib Pajak{' '} + {!isPKP && !required && ( + <span className='font-normal text-gray_r-11'>(opsional)</span> + )} + </p> + <div className='flex items-center ml-2 mt-1 '> + <Checkbox + borderColor='gray.600' + colorScheme='red' + size='md' + isChecked={isChekBox} + onChange={handleChange} + /> + <span className='text-caption-2 ml-2 font-normal italic'> + sama dengan alamat bisnis? + </span> + </div> + </label> + + <input + type='text' + id='alamat_wajib_pajak' + name='alamat_wajib_pajak' + placeholder='Masukan alamat wajib pajak anda' + value={ + !required + ? isChekBox + ? form.alamat_bisnis + : form.alamat_wajib_pajak + : '' + } + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ + required ? 'cursor-no-drop' : '' + }`} + disabled={isChekBox || required} + contentEditable={required} + readOnly={required} + onChange={handleInputChange} + ref={alamatWajibPajakRef} + aria-invalid={ + chekValid && isPKP && !required && !!errors.alamat_wajib_pajak + } + /> + + {chekValid && isPKP && !required && !!errors.alamat_wajib_pajak && ( + <span className='form-msg-danger'>{errors.alamat_wajib_pajak}</span> + )} + </div> + + <div> + <label htmlFor='npwp' className='font-bold'> + Nomor NPWP{' '} + {!isPKP && !required && ( + <span className='font-normal text-gray_r-11'>(opsional)</span> + )} + </label> + + <input + type='tel' + id='npwp' + name='npwp' + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ + required ? 'cursor-no-drop' : '' + }`} + disabled={required} + contentEditable={required} + readOnly={required} + ref={npwpRef} + placeholder='000.000.000.0-000.000' + value={!required ? formattedNpwp : ''} + maxLength={21} // Set maximum length to 16 characters + onChange={(e) => { + if (!required) { + const unformatted = e.target.value.replace(/\D/g, ''); // Remove all non-digit characters + const formattedValue = formatNpwp(unformatted); // Format the value + setUnformattedNpwp(unformatted); // Store unformatted value + setFormattedNpwp(formattedValue); // Store formatted value + handleInputChangeNpwp({ + ...e, + target: { ...e.target, value: unformatted }, + }); // Update form state with unformatted value + } + }} + aria-invalid={chekValid && !required && !!errors.npwp} + /> + + {chekValid && !required && !!errors.npwp && ( + <span className='form-msg-danger'>{errors.npwp}</span> + )} + </div> + + <div> + <label + htmlFor='sppkp' + className='font-bold flex flex-row items-center justify-between' + > + <div className='flex flex-row items-center'> + Nomor SPPKP{' '} + {!required && ( + <span className='ml-2 font-normal text-gray_r-11'> + (opsional){' '} + </span> + )} + </div> + { + <div + onClick={() => setIsExample(!isExample)} + className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400' + > + <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} /> + {isDesktop && ( + <p className='font-light text-xs'>Lihat Contoh</p> + )} + </div> + } + </label> + + <input + type='tel' + id='sppkp' + name='sppkp' + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ + required ? 'cursor-no-drop' : '' + }`} + disabled={required} + contentEditable={required} + readOnly={required} + ref={sppkpRef} + placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX' + onChange={handleInputChange} + value={!required ? form.sppkp : ''} + aria-invalid={chekValid && !required && !!errors.sppkp} + /> + + {chekValid && !required && !!errors.sppkp && ( + <span className='form-msg-danger'>{errors.sppkp}</span> + )} + </div> + + <div> + <label htmlFor='npwp_document' className='font-bold'> + Dokumen NPWP{' '} + {!isPKP && !required && ( + <span className='font-normal text-gray_r-11'>(opsional)</span> + )} + </label> + + <input + type='file' + id='npwp_document' + name='npwp_document' + className={`form-input transition-all duration-500 ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + ref={docsNpwpRef} + readOnly={required} + onChange={handleFileChange} + accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types + /> + + {chekValid && isPKP && !required && !!errors.npwp_document && ( + <span className='form-msg-danger'>{errors.npwp_document}</span> + )} + </div> + + <div> + <label htmlFor='sppkp_document' className='font-bold'> + Dokumen SPPKP{' '} + {!isPKP && !required && ( + <span className='font-normal text-gray_r-11'>(opsional)</span> + )} + </label> + + <input + type='file' + id='sppkp_document' + name='sppkp_document' + className={`form-input transition-all duration-500 ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + ref={docsSppkpRef} + readOnly={required} + onChange={handleFileChange} + accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types + /> + + {chekValid && isPKP && !required && !!errors.sppkp_document && ( + <span className='form-msg-danger'>{errors.sppkp_document}</span> + )} + </div> + </form> + </> + ); +}; + +export default form; diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx new file mode 100644 index 00000000..ce4d3972 --- /dev/null +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -0,0 +1,197 @@ +import { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import FormBisnis from './FormBisnis'; +import Form from './Form'; +import TermCondition from './TermCondition'; +import FormCaptcha from './FormCaptcha'; +import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'; +import React from 'react'; +import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { useMutation } from 'react-query'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import router from 'next/router'; +import { useRouter } from 'next/router'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import Link from 'next/link'; +interface FormProps { + chekValid: boolean; + buttonSubmitClick: boolean; +} +const RegistrasiBisnis: React.FC<FormProps> = ({ + chekValid, + buttonSubmitClick, +}) => { + const [isPKP, setIsPKP] = useState(true); + const [isTerdaftar, setIsTerdaftar] = useState(false); + const [isDropIndividu, setIsDropIndividu] = useState(true); + const [isBisnisClicked, setisBisnisClicked] = useState(true); + const [selectedValue, setSelectedValue] = useState('PKP'); + const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); + const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = + useRegisterStore(); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const toast = useToast(); + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data), + }); + + useEffect(() => { + if (selectedValue === 'PKP') { + updateForm('is_pkp', 'true'); + validate(); + } else { + updateForm('is_pkp', 'false'); + validate(); + } + }, [selectedValue]); + + useEffect(() => { + if (isTerdaftar) { + updateForm('is_terdaftar', 'true'); + validate(); + } else { + updateForm('is_terdaftar', 'false'); + validate(); + } + }, [isTerdaftar]); + + const handleChange = (value: string) => { + setSelectedValue(value); + if (value === 'PKP') { + validate(); + setIsPKP(true); + } else { + validate(); + setIsPKP(false); + setIsPKP(false); + } + }; + + const handleChangeBisnis = (value: string) => { + setSelectedValueBisnis(value); + if (value === 'true') { + validate(); + setIsTerdaftar(true); + } else { + validate(); + setIsTerdaftar(false); + } + }; + + const handleClick = () => { + setIsDropIndividu(!isDropIndividu); + }; + + const handleClickBisnis = () => { + setisBisnisClicked(!isBisnisClicked); + }; + + return ( + <> + <div className='mt-4 border'> + <div className='p-4'> + <div onClick={handleClick} className='flex justify-between'> + <p className='text-2xl font-semibold text-center md:text-left'> + Data Akun + </p> + {isDropIndividu ? ( + <div className='flex'> + <ChevronDownIcon + onClick={handleClick} + className='h-6 w-6 text-black' + /> + </div> + ) : ( + <ChevronRightIcon + onClick={handleClick} + className='h-6 w-6 text-black' + /> + )} + </div> + {isDropIndividu && ( + <div> + <Divider my={4} /> + <Form + type='bisnis' + required={true} + isBisnisRegist={true} + chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} + /> + </div> + )} + </div> + </div> + <div className='mt-4 border'> + <div className='p-4'> + <div onClick={handleClickBisnis} className='flex justify-between'> + <p className='text-2xl font-semibold text-center md:text-left'> + Data Bisnis + </p> + {isBisnisClicked ? ( + <div className='flex'> + <ChevronDownIcon + onClick={handleClickBisnis} + className='h-6 w-6 text-black' + /> + </div> + ) : ( + <ChevronRightIcon + onClick={handleClickBisnis} + className='h-6 w-6 text-black' + /> + )} + </div> + {isBisnisClicked && ( + <div> + <Divider my={4} /> + <div> + <p className='text-black font-bold mb-2'> + Bisnis Terdaftar di Indoteknik? + </p> + <RadioGroup + onChange={handleChangeBisnis} + value={selectedValueBisnis} + > + <Stack direction='row'> + <Radio colorScheme='red' value='true'> + Sudah Terdaftar + </Radio> + <Radio colorScheme='red' value='false' className='ml-2'> + Belum Terdaftar + </Radio> + </Stack> + </RadioGroup> + </div> + <div className='mt-4'> + <p className='text-black font-bold mb-2'>Tipe Bisnis</p> + <RadioGroup onChange={handleChange} value={selectedValue}> + <Stack direction='row' className='font-bold'> + <Radio colorScheme='red' value='PKP'> + PKP + </Radio> + <Radio colorScheme='red' value='Non-PKP' className='ml-4'> + Non-PKP + </Radio> + </Stack> + </RadioGroup> + </div> + <FormBisnis + type='bisnis' + required={isTerdaftar} + isPKP={isPKP} + chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} + /> + </div> + )} + </div> + </div> + + <h1 className=''></h1> + </> + ); +}; + +export default RegistrasiBisnis; diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx new file mode 100644 index 00000000..84049065 --- /dev/null +++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx @@ -0,0 +1,34 @@ +import Form from './Form'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { useEffect } from 'react'; +interface FormProps { + chekValid: boolean; + buttonSubmitClick: boolean; +} +const RegistrasiIndividu: React.FC<FormProps> = ({ + chekValid, + buttonSubmitClick, +}) => { + const { form, errors, updateForm, validate } = useRegisterStore(); + + useEffect(() => { + updateForm('is_pkp', 'false'); + updateForm('is_terdaftar', 'false'); + updateForm('type_acc', 'individu'); + validate(); + }, []); + + return ( + <> + <Form + type='individu' + required={false} + isBisnisRegist={false} + chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} + /> + </> + ); +}; + +export default RegistrasiIndividu; diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx index b7729deb..d54fe921 100644 --- a/src-migrate/modules/register/components/TermCondition.tsx +++ b/src-migrate/modules/register/components/TermCondition.tsx @@ -10,7 +10,7 @@ const TermCondition = () => { return ( <> <div className="mt-4 flex items-center gap-x-2"> - <Checkbox id='tnc' name='tnc' isChecked={isCheckedTNC} onChange={toggleCheckTNC} /> + <Checkbox id='tnc' name='tnc' colorScheme='red' isChecked={isCheckedTNC} onChange={toggleCheckTNC} /> <div> <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label> {' '} diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 00931284..da41fd8b 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,54 +1,212 @@ -import PageContent from "~/modules/page-content" -import Form from "./components/Form" -import Link from "next/link" -import Image from "next/image" -import IndoteknikLogo from "~/images/logo.png" -import AccountActivation from "../account-activation" +import PageContent from '~/modules/page-content'; +import RegistrasiIndividu from './components/RegistrasiIndividu'; +import RegistrasiBisnis from './components/RegistrasiBisnis'; +import Link from 'next/link'; +import Image from 'next/image'; +import IndoteknikLogo from '~/images/logo.png'; +import AccountActivation from '../account-activation'; +import { useMemo, useState } from 'react'; +import { useRegisterStore } from './stores/useRegisterStore'; +import FormCaptcha from './components/FormCaptcha'; +import TermCondition from './components/TermCondition'; +import { Button } from '@chakra-ui/react'; +import { useMutation } from 'react-query'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import { useRouter } from 'next/router'; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { + const [isIndividuClicked, setIsIndividuClicked] = useState(true); + const [notValid, setNotValid] = useState(false); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); + const [isBisnisClicked, setIsBisnisClicked] = useState(false); + const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } = + useRegisterStore(); + + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const toast = useToast(); + const router = useRouter(); + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data), + }); + + const handleIndividuClick = () => { + resetForm(); + setIsIndividuClicked(true); + setIsBisnisClicked(false); + }; + + const handleBisnisClick = () => { + resetForm(); + updateForm('is_terdaftar', 'false'); + updateForm('type_acc', 'business'); + setIsIndividuClicked(false); + setIsBisnisClicked(true); + }; + const handleSubmit = async () => { + if (!isFormValid) { + setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); + return; + } else { + setButtonSubmitClick(!buttonSubmitClick); + setNotValid(false); + } + const response = await mutation.mutateAsync(form); + if (response?.register === true) { + const urlParams = new URLSearchParams({ + activation: 'otp', + email: form.email, + redirect: (router.query?.next || '/') as string, + }); + router.push(`${router.route}?${urlParams}`); + } + + const toastProps: UseToastOptions = { + duration: 5000, + isClosable: true, + position: 'top', + }; + + switch (response?.reason) { + case 'EMAIL_USED': + toast({ + ...toastProps, + title: 'Email sudah digunakan', + status: 'warning', + }); + break; + case 'NOT_ACTIVE': + const activationUrl = `${router.route}?activation=email`; + toast({ + ...toastProps, + title: 'Akun belum aktif', + description: ( + <> + Akun sudah terdaftar namun belum aktif.{' '} + <Link href={activationUrl} className='underline'> + Klik untuk aktivasi akun + </Link> + </> + ), + status: 'warning', + }); + break; + } + }; return ( - <div className="container"> - <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16"> - <section> - <Link href='/' className="block md:hidden"> - <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority /> - </Link> - - <h1 className="text-2xl font-semibold text-center md:text-left"> - Daftar Akun Indoteknik - </h1> - <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left"> - Buat akun sekarang lebih mudah dan terverifikasi - </h2> - - <Form /> - - <div className='text-gray_r-11 mt-4 text-center md:text-left'> - Sudah punya akun Indoteknik?{' '} - <Link href='/login' className='inline font-medium text-danger-500'> - Masuk + <div className='container'> + <div className='grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16'> + <section className=''> + <div className='px-8 py-4 border'> + <Link href='/' className='block md:hidden'> + <Image + src={IndoteknikLogo} + alt='Logo Indoteknik' + width={LOGO_WIDTH} + height={LOGO_HEIGHT} + className='mx-auto mb-4 w-auto h-auto' + priority + /> </Link> - </div> - <div className='text-gray_r-11 mt-4 text-center md:text-left'> - Akun anda belum aktif?{' '} - <Link href='/register?activation=email' className='inline font-medium text-danger-500'> - Aktivasi - </Link> + <h1 className='text-2xl font-semibold text-center md:text-left'> + Daftar Akun Indoteknik + </h1> + <h2 className='text-gray_r-11 mt-1 mb-4 text-center md:text-left'> + Buat akun sekarang lebih mudah dan terverifikasi + </h2> + + <label htmlFor='name' className='text-black font-bold'> + Tipe Akun + </label> + <div className='grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer'> + <div + className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ + isIndividuClicked ? 'bg-red-500 text-white' : '' + }`} + onClick={handleIndividuClick} + > + <p>Individu</p> + </div> + <div + className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${ + isBisnisClicked ? 'bg-red-500 text-white' : '' + }`} + onClick={handleBisnisClick} + > + <p>Bisnis</p> + </div> + </div> + <div className='transition-opacity duration-300 ease-in-out'> + {isIndividuClicked && ( + <div className='opacity-100'> + <RegistrasiIndividu + chekValid={notValid} + buttonSubmitClick={buttonSubmitClick} + /> + </div> + )} + {isBisnisClicked && ( + <div className='opacity-100'> + <RegistrasiBisnis + chekValid={notValid} + buttonSubmitClick={buttonSubmitClick} + /> + </div> + )} + </div> + <section className='mt-2'> + <FormCaptcha /> + <TermCondition /> + <Button + type='submit' + colorScheme='red' + className='w-full mt-2' + size='lg' + onClick={handleSubmit} + isDisabled={ + !isCheckedTNC || mutation.isLoading || !isValidCaptcha + } + > + {mutation.isLoading ? 'Loading...' : 'Daftar'} + </Button> + </section> + <section className='flex justify-center items-center flex-col'> + <div className='text-gray_r-11 mt-4 text-center md:text-left'> + Sudah punya akun Indoteknik?{' '} + <Link + href='/login' + className='inline font-medium text-danger-500' + > + Masuk + </Link> + </div> + <div className='text-gray_r-11 mt-4 text-center md:text-left'> + Akun anda belum aktif?{' '} + <Link + href='/register?activation=email' + className='inline font-medium text-danger-500' + > + Aktivasi + </Link> + </div> + </section> </div> </section> - <section className="my-10 md:my-0"> - <PageContent path="/register" /> + <section className='my-10 md:my-0'> + <PageContent path='/register' /> </section> </div> <AccountActivation /> </div> - ) -} + ); +}; -export default Register
\ No newline at end of file +export default Register; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index d8abf52b..273472be 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -1,7 +1,7 @@ import { create } from 'zustand'; import { RegisterProps } from '~/types/auth'; import { registerSchema } from '~/validations/auth'; -import { ZodError } from 'zod'; +import { boolean, ZodError } from 'zod'; type State = { form: RegisterProps; @@ -20,18 +20,33 @@ type Action = { openTNC: () => void; closeTNC: () => void; validate: () => void; + resetForm: () => void; }; export const useRegisterStore = create<State & Action>((set, get) => ({ form: { - company: '', + company_type_id: '', + business_name: '', name: '', + nama_wajib_pajak : '', email: '', + email_partner: '', password: '', phone: '', + sppkp_document: '', + npwp_document: '', + industry_id: '', + npwp: '', + sppkp: '', + is_pkp: '', + type_acc:'', + is_terdaftar:'', + alamat_bisnis:'', + alamat_wajib_pajak:'', }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), + errors: {}, validate: () => { @@ -48,6 +63,7 @@ export const useRegisterStore = create<State & Action>((set, get) => ({ } } }, + isCheckedTNC: false, toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })), @@ -57,4 +73,27 @@ export const useRegisterStore = create<State & Action>((set, get) => ({ isValidCaptcha: false, updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), + + resetForm: () => set({ + form: { + company_type_id: '', + business_name: '', + name: '', + nama_wajib_pajak : '', + email: '', + email_partner: '', + password: '', + phone: '', + sppkp_document: '', + npwp_document: '', + industry_id: '', + npwp: '', + sppkp: '', + is_pkp: '', + type_acc:'', + is_terdaftar:'', + alamat_bisnis:'', + alamat_wajib_pajak:'', + }, + }), })); diff --git a/src-migrate/pages/api/product-variant/[id].tsx b/src-migrate/pages/api/product-variant/[id].tsx index 955fde6a..2c46ac89 100644 --- a/src-migrate/pages/api/product-variant/[id].tsx +++ b/src-migrate/pages/api/product-variant/[id].tsx @@ -38,6 +38,7 @@ const map = async (variant: any, price_tier: string) => { data.name = variant.name_s data.default_code = variant.default_code_s data.price = { discount_percentage: 0, price, price_discount: price } + data.manufacture = {manufacture_name: variant.manufacture_name_s, manufacture_id:variant.manufacture_id_i} return data } diff --git a/src-migrate/pages/shop/cart/cart.module.css b/src-migrate/pages/shop/cart/cart.module.css index 806104be..b756fb15 100644 --- a/src-migrate/pages/shop/cart/cart.module.css +++ b/src-migrate/pages/shop/cart/cart.module.css @@ -19,7 +19,7 @@ } .summary-wrapper { - @apply w-full md:w-1/4 md:pl-6 mt-6 md:mt-0 bottom-0 md:sticky sticky bg-white; + @apply w-[85%] md:w-1/4 md:pl-6 mt-6 md:mt-0 bottom-8 md:sticky fixed bg-white; } .summary { diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx index 5e3e042a..c5386c91 100644 --- a/src-migrate/pages/shop/cart/index.tsx +++ b/src-migrate/pages/shop/cart/index.tsx @@ -14,10 +14,10 @@ import clsxm from '~/libs/clsxm'; import useDevice from '@/core/hooks/useDevice'; import CartSummaryMobile from '~/modules/cart/components/CartSummaryMobile'; import Image from '~/components/ui/image'; -import { CartItem } from '~/types/cart' -import { deleteUserCart ,upsertUserCart } from '~/services/cart' +import { CartItem } from '~/types/cart'; +import { deleteUserCart, upsertUserCart } from '~/services/cart'; import { Trash2Icon } from 'lucide-react'; -import { useProductCartContext } from '@/contexts/ProductCartContext' +import { useProductCartContext } from '@/contexts/ProductCartContext'; const CartPage = () => { const router = useRouter(); @@ -26,11 +26,11 @@ const CartPage = () => { const [isSelectedAll, setIsSelectedAll] = useState(false); const [isButtonChek, setIsButtonChek] = useState(false); const [buttonSelectNow, setButtonSelectNow] = useState(true); - const [isLoad, setIsLoad] = useState<boolean>(false) - const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false) + const [isLoad, setIsLoad] = useState<boolean>(false); + const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false); const { loadCart, cart, summary, updateCartItem } = useCartStore(); const useDivvice = useDevice(); - const { setRefreshCart } = useProductCartContext() + const { setRefreshCart } = useProductCartContext(); const [isTop, setIsTop] = useState(true); const [hasChanged, setHasChanged] = useState(false); const prevCartRef = useRef<CartItem[] | null>(null); @@ -64,18 +64,19 @@ const CartPage = () => { const hasSelectedChanged = () => { if (prevCartRef.current && cart) { const prevCart = prevCartRef.current; - return cart.products.some((item, index) => - prevCart[index] && prevCart[index].selected !== item.selected + return cart.products.some( + (item, index) => + prevCart[index] && prevCart[index].selected !== item.selected ); } return false; }; if (hasSelectedChanged()) { - setHasChanged(true) + setHasChanged(true); // Perform necessary actions here if selection has changed - }else{ - setHasChanged(false) + } else { + setHasChanged(false); } prevCartRef.current = cart ? [...cart.products] : null; @@ -83,35 +84,38 @@ const CartPage = () => { const hasSelectedPromo = useMemo(() => { if (!cart) return false; - return cart.products.some(item => item.cart_type === 'promotion' && item.selected); + return cart.products.some( + (item) => item.cart_type === 'promotion' && item.selected + ); }, [cart]); const hasSelected = useMemo(() => { if (!cart) return false; - return cart.products.some(item => item.selected); + return cart.products.some((item) => item.selected); }, [cart]); const hasSelectNoPrice = useMemo(() => { if (!cart) return false; - return cart.products.some(item => item.selected && item.price.price_discount === 0); + return cart.products.some( + (item) => item.selected && item.price.price_discount === 0 + ); }, [cart]); const hasSelectedAll = useMemo(() => { if (!cart || !Array.isArray(cart.products)) return false; - return cart.products.every(item => item.selected); + return cart.products.every((item) => item.selected); }, [cart]); - useEffect(() => { const updateCartItems = async () => { if (typeof auth === 'object' && cart) { - const upsertPromises = cart.products.map(item => + const upsertPromises = cart.products.map((item) => upsertUserCart({ userId: auth.id, type: item.cart_type, id: item.id, qty: item.quantity, - selected: item.selected + selected: item.selected, }) ); try { @@ -128,7 +132,7 @@ const CartPage = () => { const handleCheckout = () => { router.push('/shop/checkout'); - } + }; const handleQuotation = () => { if (hasSelectedPromo || !hasSelected) { @@ -136,54 +140,53 @@ const CartPage = () => { } else { router.push('/shop/quotation'); } - } + }; const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => { - - if (cart) { const updatedCart = { ...cart, - products: cart.products.map(item => ({ + products: cart.products.map((item) => ({ ...item, - selected: !hasSelectedAll - })) + selected: !hasSelectedAll, + })), }; - - updateCartItem(updatedCart); - if(hasSelectedAll){ + + updateCartItem(updatedCart); + if (hasSelectedAll) { setIsSelectedAll(false); - }else{ + } else { setIsSelectedAll(true); } } }; - const handleDelete = async () => { if (typeof auth !== 'object' || !cart) return; - setIsLoadDelete(true) + setIsLoadDelete(true); for (const item of cart.products) { - if(item.selected === true){ - await deleteUserCart(auth.id, [item.cart_id]) - await loadCart(auth.id) + if (item.selected === true) { + await deleteUserCart(auth.id, [item.cart_id]); + await loadCart(auth.id); } } - setIsLoadDelete(false) - setRefreshCart(true) - } + setIsLoadDelete(false); + setRefreshCart(true); + }; return ( <> - <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[157px] bg-white py-4 border-gray-300 z-50 w-3/4`}> - <div className={`${style['title']}`}>Keranjang Belanja</div> + <div + className={`${ + isTop ? 'border-b-[0px]' : 'border-b-[1px]' + } sticky md:top-[157px] flex-col bg-white py-4 border-gray-300 z-50 sm:w-full md:w-3/4`} + > + <h1 className={`${style['title']}`}>Keranjang Belanja</h1> <div className='h-2' /> <div className={`flex items-center object-center justify-between `}> <div className='flex items-center object-center'> - {isLoad && ( - <Spinner className='my-auto' size='sm' /> - )} + {isLoad && <Spinner className='my-auto' size='sm' />} {!isLoad && ( <Checkbox borderColor='gray.600' @@ -193,34 +196,31 @@ const CartPage = () => { onChange={handleChange} /> )} - <p className='p-2 text-caption-2'> - {hasSelectedAll ? "Uncheck all" : "Select all"} - </p> + <p className='p-2 text-caption-2'> + {hasSelectedAll ? 'Uncheck all' : 'Select all'} + </p> + </div> + <div className='delate all flex items-center object-center'> + <Tooltip + label={clsxm({ + 'Tidak ada item yang dipilih': !hasSelected, + })} + > + <Button + bg='#fadede' + variant='outline' + colorScheme='red' + w='full' + isDisabled={!hasSelected} + onClick={handleDelete} + > + {isLoadDelete && <Spinner size='xs' />} + {!isLoadDelete && <Trash2Icon size={16} />} + <p className='text-sm ml-2'>Hapus Barang</p> + </Button> + </Tooltip> </div> - <div className='delate all flex items-center object-center'> - <Tooltip - label={clsxm({ - 'Tidak ada item yang dipilih': !hasSelected, - })} - > - <Button - bg='#fadede' - variant='outline' - colorScheme='red' - w='full' - isDisabled={!hasSelected} - onClick={handleDelete} - > - {isLoadDelete && <Spinner size='xs' />} - {!isLoadDelete && <Trash2Icon size={16} />} - <p className='text-sm ml-2'> - Hapus Barang - </p> - </Button> - </Tooltip> - </div> </div> - </div> <div className={style['content']}> @@ -274,7 +274,13 @@ const CartPage = () => { <CartSummary {...summary} isLoaded={!!cart} /> )} - <div className={isStepApproval ? style['summary-buttons-step-approval'] : style['summary-buttons']}> + <div + className={ + isStepApproval + ? style['summary-buttons-step-approval'] + : style['summary-buttons'] + } + > <Tooltip label={ hasSelectedPromo && diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx index 3bc2afb4..689c2537 100644 --- a/src-migrate/pages/shop/promo/index.tsx +++ b/src-migrate/pages/shop/promo/index.tsx @@ -1,14 +1,14 @@ -import dynamic from 'next/dynamic' -import React, { useState } from 'react' -import { LazyLoadComponent } from 'react-lazy-load-image-component' -import Hero from '~/modules/promo/components/Hero' -import PromotionProgram from '~/modules/promo/components/PromotinProgram' -import Voucher from '~/modules/promo/components/Voucher' -import FlashSale from '../../../modules/promo/components/FlashSale' -import FlashSaleNonDisplay from '../../../modules/promo/components/FlashSaleNonDisplay' -const PromoList = dynamic(() => import('../../../modules/promo/components/PromoList')); - - +import dynamic from 'next/dynamic'; +import React, { useState } from 'react'; +import { LazyLoadComponent } from 'react-lazy-load-image-component'; +import Hero from '~/modules/promo/components/Hero'; +import PromotionProgram from '~/modules/promo/components/PromotinProgram'; +import Voucher from '~/modules/promo/components/Voucher'; +import FlashSale from '../../../modules/promo/components/FlashSale'; +import FlashSaleNonDisplay from '../../../modules/promo/components/FlashSaleNonDisplay'; +const PromoList = dynamic( + () => import('../../../modules/promo/components/PromoList') +); const PromoPage = () => { const [selectedPromo, setSelectedPromo] = useState('Bundling'); @@ -18,12 +18,13 @@ const PromoPage = () => { <Hero /> </LazyLoadComponent> <LazyLoadComponent> - <PromotionProgram - selectedPromo={selectedPromo} - onSelectPromo={setSelectedPromo} - /> + <PromotionProgram + selectedPromo={selectedPromo} + onSelectPromo={setSelectedPromo} + /> <PromoList selectedPromo={selectedPromo} /> </LazyLoadComponent> + <LazyLoadComponent> <FlashSale /> </LazyLoadComponent> @@ -36,7 +37,7 @@ const PromoPage = () => { <Voucher /> </LazyLoadComponent> </> - ) -} + ); +}; -export default PromoPage
\ No newline at end of file +export default PromoPage; diff --git a/src-migrate/services/product.ts b/src-migrate/services/product.ts index fe415d11..77b645f0 100644 --- a/src-migrate/services/product.ts +++ b/src-migrate/services/product.ts @@ -43,9 +43,9 @@ export const getProductSimilar = async ({ const query = [ `q=${name}`, 'page=1', - 'orderBy=popular-weekly', 'operation=OR', - 'priceFrom=1', + // 'priceFrom=1', + `source=similar`, ]; if (except?.productId) query.push(`fq=-product_id_i:${except.productId}`); diff --git a/src-migrate/types/auth.ts b/src-migrate/types/auth.ts index e93a475a..593e120f 100644 --- a/src-migrate/types/auth.ts +++ b/src-migrate/types/auth.ts @@ -10,6 +10,7 @@ export type AuthProps = { name: string; email: string; phone: string; + npwp: string; mobile: string; external: boolean; company: boolean; diff --git a/src-migrate/types/cart.ts b/src-migrate/types/cart.ts index 4e3c8b99..a3115103 100644 --- a/src-migrate/types/cart.ts +++ b/src-migrate/types/cart.ts @@ -32,6 +32,8 @@ export type CartItem = { id: number; name: string; stock: number; + is_in_bu: boolean; + on_hand_qty: number; weight: number; attributes: string[]; parent: { diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts index 681cdc8e..31ea0ce1 100644 --- a/src-migrate/types/product.ts +++ b/src-migrate/types/product.ts @@ -12,6 +12,7 @@ export interface IProduct { variant_total: number; description: string; isSni: boolean; + is_in_bu: boolean; isTkdn: boolean; categories: { id: string; diff --git a/src-migrate/types/promotion.ts b/src-migrate/types/promotion.ts index 85190aad..dce442ad 100644 --- a/src-migrate/types/promotion.ts +++ b/src-migrate/types/promotion.ts @@ -10,15 +10,18 @@ export interface IPromotion { limit_user: number; limit_trx: number; price: number; + image: string; total_qty: number; products: { product_id: number; qty: number; + name: string; }[]; free_products: { product_id: number; qty: number; }[]; + } export interface IProductVariantPromo { @@ -34,6 +37,10 @@ export interface IProductVariantPromo { price_discount: number; }; qty: number; + manufacture: { + manufacture_name: string; + manufacture_id:number; + } } export type CategoryPromo = 'bundling' | 'discount_loading' | 'merchandise'; diff --git a/src-migrate/validations/auth.ts b/src-migrate/validations/auth.ts index 78fc5e71..3abdfb57 100644 --- a/src-migrate/validations/auth.ts +++ b/src-migrate/validations/auth.ts @@ -1,17 +1,147 @@ import { z } from 'zod'; -export const registerSchema = z.object({ - name: z.string().min(1, { message: 'Nama harus diisi' }), - email: z - .string() - .min(1, { message: 'Email harus diisi' }) - .email({ message: 'Email harus menggunakan format example@mail.com' }), - password: z.string().min(6, { message: 'Password minimal 6 karakter' }), - company: z.string().optional(), - phone: z - .string() - .min(1, { message: 'Nomor telepon harus diisi' }) - .refine((val) => /^\d{10,12}$/.test(val), { - message: 'Format nomor telepon tidak valid, contoh: 081234567890', +export const registerSchema = z + .object({ + name: z.string().min(1, { message: 'Nama harus diisi' }), + email: z + .string() + .min(1, { message: 'Email harus diisi' }) + .email({ message: 'Email harus menggunakan format example@mail.com' }), + password: z.string().min(6, { message: 'Password minimal 6 karakter' }), + phone: z + .string() + .min(1, { message: 'Nomor telepon harus diisi' }) + .refine((val) => /^\d{10,12}$/.test(val), { + message: 'Format nomor telepon tidak valid, contoh: 081234567890', + }), + type_acc: z.string().optional(), + nama_wajib_pajak: z.string().optional(), + alamat_bisnis: z.string().optional(), + alamat_wajib_pajak: z.string().optional(), + is_pkp: z.string(), + is_terdaftar: z.string(), + sppkp_document: z.string().optional(), + npwp_document: z.string().optional(), + industry_id: z.string().optional(), + email_partner: z.string().optional(), + business_name: z.string().optional(), + company_type_id: z.string().optional(), + isChekBox: z.string().optional(), + npwp: z.string().optional().refine((val) => !val || /^\d{15,16}$/.test(val), { + message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', }), -}); + sppkp: z.string().optional(), + }) + .superRefine((data, ctx) => { + if (data.type_acc === 'business') { + if (data.is_terdaftar === 'false') { + if (data.is_pkp === 'true') { + const requiredFields: { field: keyof typeof data; message: string }[] = [ + { field: 'business_name', message: 'Nama perusahaan harus diisi' }, + { field: 'alamat_bisnis', message: 'Alamat perusahaan harus diisi' }, + // { field: 'alamat_wajib_pajak', message: 'Alamat wajib pajak harus diisi' }, + { field: 'company_type_id', message: 'Badan usaha wajib dipilih' }, + { field: 'industry_id', message: 'Jenis usaha harus dipilih' }, + { field: 'sppkp_document', message: 'Document harus diisi' }, + { field: 'npwp_document', message: 'Document harus diisi' }, + { field: 'npwp', message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.' }, + { field: 'nama_wajib_pajak', message: 'Nama wajib pajak harus diisi' }, + ]; + + requiredFields.forEach(({ field, message }) => { + if (!data[field]) { + ctx.addIssue({ + code: 'custom', + path: [field], + message, + }); + } + }); + + if (!data.email_partner || !z.string().email().safeParse(data.email_partner).success) { + ctx.addIssue({ + code: 'custom', + path: ['email_partner'], + message: 'Email partner harus diisi dengan format example@mail.com', + }); + } + if(data.isChekBox === 'false'){ + if (!data.alamat_wajib_pajak) { + ctx.addIssue({ + code: 'custom', + path: ['alamat_wajib_pajak'], + message: 'Alamat wajib pajak harus diisi', + }); + } + } + + } else { + if (!data.business_name) { + ctx.addIssue({ + code: 'custom', + path: ['business_name'], + message: 'Nama perusahaan harus diisi', + }); + } + if (!data.alamat_bisnis) { + ctx.addIssue({ + code: 'custom', + path: ['alamat_bisnis'], + message: 'Alamat perusahaan harus diisi', + }); + } + + if (!data.company_type_id) { + ctx.addIssue({ + code: 'custom', + path: ['company_type_id'], + message: 'Badan usaha wajib dipilih', + }); + } + if (!data.industry_id) { + ctx.addIssue({ + code: 'custom', + path: ['industry_id'], + message: 'Jenis usaha harus dipilih', + }); + } + + if (data.npwp && !/^\d{15,16}$/.test(data.npwp)) { + ctx.addIssue({ + code: 'custom', + path: ['npwp'], + message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.', + }); + } + + } + }else{ + if (data.is_pkp === 'true') { + if (!data.business_name) { + ctx.addIssue({ + code: 'custom', + path: ['business_name'], + message: 'Nama perusahaan harus diisi', + }); + } + } else { + if (!data.business_name) { + ctx.addIssue({ + code: 'custom', + path: ['business_name'], + message: 'Nama perusahaan harus diisi', + }); + } + } + } + + // Remove this unconditional issue addition to prevent blocking form submission + // ctx.addIssue({ + // code: 'custom', + // path: ['business_name'], + // message: 'Nama perusahaan harus diisi', + // }); + }else{ + + } + }); diff --git a/src/api/productApi.js b/src/api/productApi.js index 009d95ef..4a29b59d 100644 --- a/src/api/productApi.js +++ b/src/api/productApi.js @@ -2,8 +2,11 @@ import axios from 'axios' export const popularProductApi = () => { return async () => { + const today = new Date(); + const dayOfYear = Math.floor((today - new Date(today.getFullYear(), 0, 0)) / 86400000); + const page = (dayOfYear % 24) + 1; const dataPopularProducts = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular-weekly&priceFrom=1` + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=*&page=${page}&orderBy=stock&priceFrom=1` ) return dataPopularProducts.data.response } diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx index 9a62465d..64838b85 100644 --- a/src/components/ui/HeroBanner.jsx +++ b/src/components/ui/HeroBanner.jsx @@ -39,16 +39,28 @@ const HeroBanner = () => { pagination: { dynamicBullets: false, clickable: true }, }; + const customLoader = ({ src }) => { + return src; // Loader yang mengembalikan URL gambar asli + }; + const BannerComponent = useMemo(() => { - return heroBanner.data?.map((banner, index) => ( + if (!heroBanner.data) return null; + + return heroBanner.data.map((banner, index) => ( <SwiperSlide key={index}> <Link href={banner.url} className='w-full h-auto'> <Image + loader={customLoader} src={banner.image} alt={banner.name} width={1152} height={768} className='w-full h-auto' + priority={index === 0} + loading={index === 0 ? 'eager' : 'lazy'} + placeholder="blur" + blurDataURL="/images/indoteknik-placeholder.png" + sizes="(max-width: 768px) 100vw, 50vw" /> </Link> </SwiperSlide> diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx index b1023990..a7b32a4a 100644 --- a/src/components/ui/HeroBannerSecondary.jsx +++ b/src/components/ui/HeroBannerSecondary.jsx @@ -18,18 +18,22 @@ const HeroBannerSecondary = () => { if (heroBannerSecondary.isLoading) return <HeroBannerSkeleton /> return ( - heroBannerSecondary.data && ( - <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'> + heroBannerSecondary.data && randomIndex !== null && ( + <Link href={heroBannerSecondary.data[randomIndex].url} className="h-full"> <Image src={heroBannerSecondary.data[randomIndex].image} width={512} height={1024} alt={heroBannerSecondary.data[randomIndex].name} - className='object-cover object-center h-full' + className="object-cover object-center h-full" + loading="lazy" + placeholder="blur" + blurDataURL="/images/indoteknik-placeholder.png" + sizes="(max-width: 768px) 100vw, 50vw" /> </Link> ) - ) + ); } export default HeroBannerSecondary diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx index bbbd18bc..92b2a1b6 100644 --- a/src/components/ui/PopularProduct.jsx +++ b/src/components/ui/PopularProduct.jsx @@ -5,6 +5,7 @@ import { useQuery } from 'react-query' import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton' import DesktopView from '@/core/components/views/DesktopView' import ProductCard from '@/lib/product/components/ProductCard' +import Link from '@/core/components/elements/Link/Link' const PopularProduct = () => { const popularProduct = useQuery('popularProduct', popularProductApi()) @@ -16,15 +17,31 @@ const PopularProduct = () => { <> <MobileView> <div className='px-4'> - <div className='font-semibold mb-4'>Produk Banyak Dilihat</div> + <div className='font-semibold mb-4 flex justify-between items-center'><p> + Produk Ready Stock + </p> + <Link + href='/shop/search?orderBy=stock' + className='' + > + <p className='text-danger-500 font-semibold'>Lihat Semua</p> + </Link></div> <ProductSlider products={popularProduct.data} simpleTitle /> </div> </MobileView> <DesktopView> <div className='border border-gray_r-6 h-full overflow-auto'> - <div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'> - Produk Banyak Dilihat + <div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10 flex justify-between items-center'> + <p> + Produk Ready Stock + </p> + <Link + href='/shop/search?orderBy=stock' + className='' + > + <p className='text-danger-500 font-semibold'>Lihat Semua</p> + </Link> </div> <div className='h-full divide-y divide-gray_r-6'> {popularProduct.data && diff --git a/src/contexts/ProductCartContext.js b/src/contexts/ProductCartContext.js index 06e97563..3a21d2e0 100644 --- a/src/contexts/ProductCartContext.js +++ b/src/contexts/ProductCartContext.js @@ -6,10 +6,11 @@ export const ProductCartProvider = ({ children }) => { const [productCart, setProductCart] = useState(null) const [refreshCart, setRefreshCart] = useState(false) const [isLoading, setIsloading] = useState(false) + const [productQuotation, setProductQuotation] = useState(null) return ( <ProductCartContext.Provider - value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading }} + value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation}} > {children} </ProductCartContext.Provider> diff --git a/src/core/api/odooApi.js b/src/core/api/odooApi.js index 3349ff4b..504d097a 100644 --- a/src/core/api/odooApi.js +++ b/src/core/api/odooApi.js @@ -64,7 +64,7 @@ const odooApi = async (method, url, data = {}, headers = {}) => { } return camelcaseObjectDeep(res.data.result) || []; } catch (error) { - console.log(error); + // console.log(error); } }; diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 16bccbd5..e9abe657 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -1,8 +1,16 @@ -import { useRouter } from 'next/router' -import Link from '../Link/Link' -import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { getCart, getCountCart } from '@/core/utils/cart' +import { useRouter } from 'next/router'; +import Link from '../Link/Link'; +import { + HomeIcon, + Bars3Icon, + ShoppingCartIcon, + ChevronLeftIcon, +} from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { getCart, getCountCart } from '@/core/utils/cart'; +import useTransactions from '@/lib/transaction/hooks/useTransactions'; +import { useCartStore } from '~/modules/cart/stores/useCartStore'; +import useAuth from '@/core/hooks/useAuth'; /** * The AppBar component is a navigation component used to display a header or toolbar @@ -13,26 +21,31 @@ import { getCart, getCountCart } from '@/core/utils/cart' * @returns {JSX.Element} - Rendered AppBar component. */ const AppBar = ({ title }) => { - const router = useRouter() - - const [cartCount, setCartCount] = useState(0) - + const router = useRouter(); + const auth = useAuth(); + const { cart } = useCartStore(); + const query = { + context: 'quotation', + site: auth?.webRole === null && auth?.site ? auth.site : null, + }; + const [cartCount, setCartCount] = useState(0); + const { transactions } = useTransactions({ query }); useEffect(() => { const handleCartChange = () => { const cart = async () => { - const listCart = await getCountCart() - setCartCount(listCart) - } - cart() - } - handleCartChange() + const listCart = await getCountCart(); + setCartCount(listCart); + }; + cart(); + }; + handleCartChange(); - window.addEventListener('localStorageChange', handleCartChange) + window.addEventListener('localStorageChange', handleCartChange); return () => { - window.removeEventListener('localStorageChange', handleCartChange) - } - }, []) + window.removeEventListener('localStorageChange', handleCartChange); + }; + }, [transactions.data, cart]); return ( <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'> @@ -46,9 +59,11 @@ const AppBar = ({ title }) => { <Link href='/shop/cart' className='py-4 px-2'> <div className='relative'> <ShoppingCartIcon className='w-6 text-gray_r-12' /> - <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> - {cartCount} - </span> + {cartCount > 0 && ( + <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> + {cartCount} + </span> + )} </div> </Link> <Link href='/' className='py-4 px-2'> @@ -59,7 +74,7 @@ const AppBar = ({ title }) => { </Link> </div> </nav> - ) -} + ); +}; -export default AppBar +export default AppBar; diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx index 4beea604..4688b15b 100644 --- a/src/core/components/elements/Footer/BasicFooter.jsx +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -210,6 +210,11 @@ const CustomerGuide = () => ( Panduan Pick Up Service </InternalItemLink> </li> + <li> + <InternalItemLink href='/tracking-order'> + Tracking Order + </InternalItemLink> + </li> </ul> </div> ); @@ -390,7 +395,7 @@ const Payments = () => ( alt='Metode Pembayaran - Indoteknik' width={512} height={512} - quality={100} + quality={85} className='w-full' /> </div> @@ -404,7 +409,7 @@ const Shippings = () => ( alt='Jasa Pengiriman - Indoteknik' width={512} height={512} - quality={100} + quality={85} className='w-full' /> </div> @@ -418,7 +423,7 @@ const Secures = () => ( alt='Keamanan Belanja - Indoteknik' width={512} height={512} - quality={100} + quality={85} className='w-full' /> </div> diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 2ddf5efe..04cf76d1 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -6,29 +6,27 @@ import whatsappUrl from '@/core/utils/whatsappUrl'; import IndoteknikLogo from '@/images/logo.png'; import Cardheader from '@/lib/cart/components/Cartheader'; import Category from '@/lib/category/components/Category'; +import useTransactions from '@/lib/transaction/hooks/useTransactions'; +import { + Menu, + MenuButton, + MenuItem, + MenuList, + useDisclosure +} from '@chakra-ui/react'; import { ChevronDownIcon, - DocumentCheckIcon, - HeartIcon, - ArrowUpRightIcon, + HeartIcon } from '@heroicons/react/24/outline'; import dynamic from 'next/dynamic'; -import Image from 'next/image'; +import { default as Image, default as NextImage } from 'next/image'; import { useRouter } from 'next/router'; import { useCallback, useEffect, useState } from 'react'; +import { useCartStore } from '~/modules/cart/stores/useCartStore'; +import Quotationheader from '../../../../../src/lib/quotation/components/Quotationheader.jsx'; import DesktopView from '../../views/DesktopView'; import Link from '../Link/Link'; import NavbarUserDropdown from './NavbarUserDropdown'; -import NextImage from 'next/image'; -import { - Button, - Menu, - MenuButton, - MenuItem, - MenuList, - useDisclosure, -} from '@chakra-ui/react'; -import style from "./style/NavbarDesktop.module.css"; const Search = dynamic(() => import('./Search'), { ssr: false }); const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false }); @@ -38,16 +36,27 @@ const NavbarDesktop = () => { const auth = useAuth(); const [cartCount, setCartCount] = useState(0); - + const [quotationCount, setQuotationCount] = useState(0); + const [pendingTransactions, setPendingTransactions] = useState([]); const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); - + const { loadCart, cart, summary, updateCartItem } = useCartStore(); const router = useRouter(); const { product } = useProductContext(); const { isOpen, onOpen, onClose } = useDisclosure(); + const query = { + context: 'quotation', + site: auth?.webRole === null && auth?.site ? auth.site : null, + }; + + const { transactions } = useTransactions({ query }); + const data = transactions?.data?.saleOrders.filter( + (transaction) => transaction.status === 'draft' + ); + const [showPopup, setShowPopup] = useState(false); const [isTop, setIsTop] = useState(true); @@ -89,6 +98,10 @@ const NavbarDesktop = () => { }, []); useEffect(() => { + setPendingTransactions(data); + }, [transactions.data]); + + useEffect(() => { if (router.pathname === '/shop/product/[slug]') { setPayloadWa({ name: product?.name, @@ -116,7 +129,23 @@ const NavbarDesktop = () => { return () => { window.removeEventListener('localStorageChange', handleCartChange); }; - }, []); + }, [transactions.data, cart]); + + useEffect(() => { + const handleQuotationChange = () => { + const quotation = async () => { + setQuotationCount(pendingTransactions?.length); + }; + quotation(); + }; + handleQuotationChange(); + + window.addEventListener('localStorageChange', handleQuotationChange); + + return () => { + window.removeEventListener('localStorageChange', handleQuotationChange); + }; + }, [pendingTransactions]); return ( <DesktopView> @@ -137,7 +166,7 @@ const NavbarDesktop = () => { > <div className='flex gap-x-1'> <div>Fitur Layanan </div> - <ChevronDownIcon className='w-5'/> + <ChevronDownIcon className='w-5' /> </div> </MenuButton> <MenuList @@ -180,17 +209,10 @@ const NavbarDesktop = () => { <Search /> </div> <div className='flex gap-x-4 items-center'> - <Link - href='/my/transactions' - target='_blank' - rel='noreferrer' - className='flex items-center gap-x-2 !text-gray_r-12/80' - > - <DocumentCheckIcon className='w-7' /> - Daftar - <br /> - Quotation - </Link> + <Quotationheader + quotationCount={quotationCount} + data={pendingTransactions} + /> <Cardheader cartCount={cartCount} /> @@ -225,8 +247,7 @@ const NavbarDesktop = () => { <div className='container mx-auto mt-6'> <div className='flex'> - <button - type='button' + <div onClick={() => setIsOpenCategory((isOpen) => !isOpen)} onBlur={() => setIsOpenCategory(false)} className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative' @@ -243,31 +264,32 @@ const NavbarDesktop = () => { > <Category /> </div> - </button> + </div> <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> - - <Link - href="/shop/promo" + <Link + href='/shop/promo' className={`${ router.asPath === '/shop/promo' && 'bg-gray_r-3' } flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position - target="_blank" - rel="noreferrer" + target='_blank' + rel='noreferrer' > - {showPopup && ( - <div className='w-full h-full relative justify-end items-start'> + {showPopup && ( + <div className='w-full h-full relative justify-end items-start'> <Image - src='/images/penawaran-terbatas.jpg' - alt='penawaran terbatas' - width={1440} - height={160} - quality={100} - // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`} - className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`} - /> + src='/images/penawaran-terbatas.jpg' + alt='penawaran terbatas' + width={1440} + height={160} + quality={100} + // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`} + className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`} + /> </div> - )} - <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p> + )} + <span className='absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10'> + Semua Promo + </span> </Link> {/* {showPopup && router.pathname === '/' && ( <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}> @@ -276,28 +298,31 @@ const NavbarDesktop = () => { </p> </div> )} */} - <Link href='/shop/brands' - className={`${ + className={`${ router.asPath === '/shop/brands' && 'bg-gray_r-3' } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`} target='_blank' rel='noreferrer' > - <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p> + <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'> + Semua Brand + </span> </Link> <Link href='/shop/search?orderBy=stock' className={`${ - router.asPath === '/shop/search?orderBy=stock' && + router.asPath.includes('/shop/search?orderBy=stock') && 'bg-gray_r-3' } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`} target='_blank' rel='noreferrer' > - <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p> + <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'> + Ready Stock + </span> </Link> <Link href='https://blog.indoteknik.com/' @@ -305,7 +330,9 @@ const NavbarDesktop = () => { target='_blank' rel='noreferrer noopener' > - <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p> + <span className='group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200'> + Blog Indoteknik + </span> </Link> {/* <Link href='/video' diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index bcf45e0a..90314671 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -11,7 +11,7 @@ import Image from 'next/image'; import { useEffect, useState } from 'react'; import MobileView from '../../views/MobileView'; import Link from '../Link/Link'; -// import TopBanner from './TopBanner'; +import TopBanner from './TopBanner'; const Search = dynamic(() => import('./Search')); @@ -39,7 +39,7 @@ const NavbarMobile = () => { return ( <MobileView> - {/* <TopBanner /> */} + <TopBanner /> <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> <div className='flex justify-between items-center mb-2'> <Link href='/'> diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index 42bdc12a..c0698b6e 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -1,37 +1,38 @@ -import { deleteAuth } from '@/core/utils/auth' -import Link from '../Link/Link' -import { useRouter } from 'next/router' -import { signOut, useSession } from 'next-auth/react' -import useAuth from '@/core/hooks/useAuth' +import { deleteAuth } from '@/core/utils/auth'; +import Link from '../Link/Link'; +import { useRouter } from 'next/router'; +import { signOut, useSession } from 'next-auth/react'; +import useAuth from '@/core/hooks/useAuth'; const NavbarUserDropdown = () => { - const router = useRouter() - const atuh = useAuth() + const router = useRouter(); + const atuh = useAuth(); const logout = async () => { deleteAuth().then(() => { - router.push('/login') - }) - } + router.push('/login'); + }); + }; return ( <div className='navbar-user-dropdown-wrapper'> <div className='navbar-user-dropdown'> + <Link href='/my/profile'>Profil Saya</Link> <Link href='/my/quotations'>Daftar Quotation</Link> <Link href='/my/transactions'>Daftar Transaksi</Link> <Link href='/my/shipments'>Daftar Pengiriman</Link> <Link href='/my/invoices'>Invoice & Faktur Pajak</Link> <Link href='/my/wishlist'>Wishlist</Link> <Link href='/my/address'>Daftar Alamat</Link> - {!atuh?.external && + {!atuh?.external && ( <Link href='/my/recomendation'>Dashboard Recomendation</Link> - } + )} <button type='button' onClick={logout}> Keluar Akun </button> </div> </div> - ) -} + ); +}; -export default NavbarUserDropdown +export default NavbarUserDropdown; diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index 6cce6b03..f438ae67 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -1,19 +1,20 @@ import Image from 'next/image'; -import { useQuery } from 'react-query'; - +import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice' import odooApi from '@/core/api/odooApi'; import SmoothRender from '~/components/ui/smooth-render'; import Link from '../Link/Link'; +import { background } from '@chakra-ui/react'; import { useEffect } from 'react'; const TopBanner = ({ onLoad = () => {} }) => { + const { isDesktop, isMobile } = useDevice() const topBanner = useQuery({ queryKey: 'topBanner', queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'), refetchOnWindowFocus: false, }); - const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent'; + // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent'; const hasData = topBanner.data?.length > 0; const data = topBanner.data?.[0] || null; @@ -26,21 +27,21 @@ const TopBanner = ({ onLoad = () => {} }) => { return ( <SmoothRender isLoaded={hasData} - height='36px' + // height='36px' duration='700ms' delay='300ms' - style={{ backgroundColor }} - > - <Link href={data?.url}> - <Image - src={data?.image} - alt={data?.name} - width={1440} - height={40} - className='object-cover object-center h-full mx-auto' - /> - </Link> - </SmoothRender> + className='h-auto' + > + <Link + href={data?.url} + className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]" + style={{ + backgroundImage: `url('${data?.image}')`, + }} + > + </Link> + + </SmoothRender> ); }; diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 55838890..ddae3e20 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -5,6 +5,8 @@ import { AnimatePresence, motion } from 'framer-motion' import { ChevronDownIcon, ChevronUpIcon, CogIcon, UserIcon } from '@heroicons/react/24/outline' import { Fragment, useEffect, useState } from 'react' import odooApi from '@/core/api/odooApi' +import { createSlug } from '@/core/utils/slug' +import Image from 'next/image' const Sidebar = ({ active, close }) => { const auth = useAuth() @@ -79,7 +81,7 @@ const Sidebar = ({ active, close }) => { exit={{ left: '-80%' }} transition={transition} > - <div className='divide-y divide-gray_r-6'> + <div className='divide-y divide-gray_r-6 h-full flex flex-col'> <div className='p-4 flex gap-x-3'> {!auth && ( <> @@ -112,104 +114,115 @@ const Sidebar = ({ active, close }) => { href='/my/menu' className='!text-gray_r-11 ml-auto my-auto' > - <UserIcon class='h-6 w-6 text-gray-500' /> + <UserIcon className='h-6 w-6 text-gray-500' /> </Link> </> )} </div> - <SidebarLink className={itemClassName} href='/shop/promo'> - Semua Promo - </SidebarLink> - <SidebarLink className={itemClassName} href='/shop/brands'> - Semua Brand - </SidebarLink> - <SidebarLink - className={itemClassName} - href='https://blog.indoteknik.com/' - target='_blank' - rel='noreferrer noopener' - > - Blog Indoteknik - </SidebarLink> - {/* <SidebarLink className={itemClassName} href='/video'> - Indoteknik TV - </SidebarLink> */} - <SidebarLink className={itemClassName} href='/tentang-kami'> - Tentang Indoteknik - </SidebarLink> - <SidebarLink className={itemClassName} href='/contact-us'> - Hubungi Kami - </SidebarLink> - <button - className={`${itemClassName} w-full text-left flex`} - onClick={() => setOpenCategory(!isOpenCategory)} - > - Kategori - <div className='ml-auto'> - {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />} - {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />} - </div> - </button> - {isOpenCategory && - categories.map((category) => ( - <Fragment key={category.id}> - <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'> - <Link - href={`/shop/search?category=${category.name}`} - className='flex-1 font-normal !text-gray_r-11 py-4' - > - {category.name} - </Link> - <div - className='ml-4 h-full py-4' - onClick={() => toggleCategories(category.id)} - > - {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />} - {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />} + <div className='overflow-y-auto flex-1'> + <SidebarLink className={itemClassName} href='/shop/promo'> + Semua Promo + </SidebarLink> + <SidebarLink className={itemClassName} href='/shop/brands'> + Semua Brand + </SidebarLink> + <SidebarLink + className={itemClassName} + href='https://blog.indoteknik.com/' + target='_blank' + rel='noreferrer noopener' + > + Blog Indoteknik + </SidebarLink> + {/* <SidebarLink className={itemClassName} href='/video'> + Indoteknik TV + </SidebarLink> */} + <SidebarLink className={itemClassName} href='/tentang-kami'> + Tentang Indoteknik + </SidebarLink> + <SidebarLink className={itemClassName} href='/contact-us'> + Hubungi Kami + </SidebarLink> + <button + className={`${itemClassName} w-full text-left flex`} + onClick={() => setOpenCategory(!isOpenCategory)} + > + Kategori + <div className='ml-auto'> + {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />} + {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />} + </div> + </button> + {isOpenCategory && + categories.map((category) => ( + <Fragment key={category.id}> + <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'> + <Link + href={createSlug('/shop/category/', category.name, category.id)} + className='flex-1 font-normal !text-gray_r-11 py-4 flex items-center flex-row' + > + <div className='mr-2 flex justify-center items-center'> + <Image src={category.image} alt='' width={25} height={25} /> + </div> + {category.name} + </Link> + <div + className='ml-4 h-full py-4' + onClick={() => toggleCategories(category.id)} + > + {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />} + {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />} + </div> </div> - </div> - {category.isOpen && - category.childs.map((child1Category) => ( - <Fragment key={child1Category.id}> - <div - className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${ - category.isOpen ? 'bg-gray_r-2' : '' - }`} - > - <Link - href={`/shop/search?category=${child1Category.name}`} - className='flex-1 font-normal !text-gray_r-11' + {category.isOpen && + category.childs.map((child1Category) => ( + <Fragment key={child1Category.id}> + <div + className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${ + category.isOpen ? 'bg-gray_r-2' : '' + }`} > - {child1Category.name} - </Link> - {child1Category.childs.length > 0 && ( - <div - className='ml-4 h-full' - onClick={() => toggleCategories(child1Category.id)} - > - {!child1Category.isOpen && ( - <ChevronDownIcon className='text-gray_r-11 w-5' /> - )} - {child1Category.isOpen && ( - <ChevronUpIcon className='text-gray_r-11 w-5' /> - )} - </div> - )} - </div> - {child1Category.isOpen && - child1Category.childs.map((child2Category) => ( <Link - key={child2Category.id} - href={`/shop/search?category=${child2Category.name}`} - className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16' + href={createSlug('/shop/category/', child1Category.name, child1Category.id)} + className='flex-1 font-normal !text-gray_r-11 flex flex-row items-center' > - {child2Category.name} + <div className='mr-2 flex justify-center items-center'> + <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child1Category.id}`} alt='' width={25} height={25} /> + </div> + {child1Category.name} </Link> - ))} - </Fragment> - ))} - </Fragment> - ))} + {child1Category.childs.length > 0 && ( + <div + className='ml-4 h-full' + onClick={() => toggleCategories(child1Category.id)} + > + {!child1Category.isOpen && ( + <ChevronDownIcon className='text-gray_r-11 w-5' /> + )} + {child1Category.isOpen && ( + <ChevronUpIcon className='text-gray_r-11 w-5' /> + )} + </div> + )} + </div> + {child1Category.isOpen && + child1Category.childs.map((child2Category) => ( + <Link + key={child2Category.id} + href={createSlug('/shop/category/', child2Category.name, child2Category.id)} + className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16 flex-row' + > + <div className='mr-2 flex justify-center items-center'> + <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child2Category.id}`} alt='' width={25} height={25} /> + </div> + {child2Category.name} + </Link> + ))} + </Fragment> + ))} + </Fragment> + ))} + </div> </div> </motion.div> </> diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx index ebbc1ad5..ec61ca06 100644 --- a/src/core/components/layouts/AppLayout.jsx +++ b/src/core/components/layouts/AppLayout.jsx @@ -10,13 +10,15 @@ const BasicFooter = dynamic(() => import('../elements/Footer/BasicFooter'), { const AppLayout = ({ children, title, withFooter = true }) => { return ( - <> - <AnimationLayout> - <AppBar title={title} /> - {children} - </AnimationLayout> - {withFooter && <BasicFooter />} - </> + <div className='flex flex-col min-h-screen max-h-screen overflow-y-auto'> + <AppBar title={title} /> + <div className='flex-grow p-4'>{children}</div> + {withFooter && ( + <div className='mt-auto'> + <BasicFooter /> + </div> + )} + </div> ); }; diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index ba51022d..c4674344 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -1,12 +1,13 @@ import dynamic from 'next/dynamic'; import Image from 'next/image'; import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { useProductContext } from '@/contexts/ProductContext'; import odooApi from '@/core/api/odooApi'; import whatsappUrl from '@/core/utils/whatsappUrl'; import Navbar from '../elements/Navbar/Navbar'; +import styles from './BasicLayout.module.css'; // Import modul CSS const AnimationLayout = dynamic(() => import('./AnimationLayout'), { ssr: false, @@ -19,10 +20,15 @@ const BasicLayout = ({ children }) => { const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); + const [highlight, setHighlight] = useState(false); + const [buttonPosition, setButtonPosition] = useState(null); + const [wobble, setWobble] = useState(false); const router = useRouter(); + const buttonRef = useRef(null); const { product } = useProductContext(); + useEffect(() => { if ( router.pathname === '/shop/product/[slug]' || @@ -39,6 +45,32 @@ const BasicLayout = ({ children }) => { } }, [product, router]); + useEffect(() => { + const handleMouseOut = (event) => { + const rect = buttonRef.current.getBoundingClientRect(); + if (event.clientY <= 0) { + setButtonPosition(rect) + setHighlight(true); + } else { + setHighlight(false); + } + }; + + window.addEventListener('mouseout', handleMouseOut); + + return () => { + window.removeEventListener('mouseout', handleMouseOut); + }; + }, []); + + useEffect(() => { + if (highlight) { + // Set wobble animation after overlay highlight animation completes + const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed + return () => clearTimeout(timer); + } + }, [highlight]); + const recordActivity = async (pathname) => { const ONLY_ON_PATH = false; const recordedPath = []; @@ -60,32 +92,50 @@ const BasicLayout = ({ children }) => { return ( <> + {highlight && buttonPosition && ( + <div + className={styles['overlay-highlight']} + style={{ + '--button-x': `${buttonPosition.x + buttonPosition.width / 2}px`, + '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`, + '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px` + }} + onAnimationEnd={() => setHighlight(false)} + /> + )} <Navbar /> <AnimationLayout> {children} <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'> - <a - href={whatsappUrl(templateWA, payloadWA, urlPath)} - className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' - rel='noopener noreferrer' - target='_blank' - > - <Image - src='/images/socials/WHATSAPP.svg' - alt='Whatsapp' - className='block sm:hidden' - width={36} - height={36} - /> - <Image - src='/images/socials/WHATSAPP.svg' - alt='Whatsapp' - className='hidden sm:block' - width={44} - height={44} - /> - <span className='text-white font-bold ml-1.5'>Whatsapp</span> - </a> + <div className='flex flex-row items-center'> + <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'> + <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}> + Whatsapp + </span> + </a> + <a + href={whatsappUrl(templateWA, payloadWA, urlPath)} + className='elemen-whatsapp p-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' + rel='noopener noreferrer' + target='_blank' + ref={buttonRef} + > + <Image + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='block sm:hidden' + width={36} + height={36} + /> + <Image + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='hidden sm:block' + width={44} + height={44} + /> + </a> + </div> </div> </AnimationLayout> <BasicFooter /> @@ -93,4 +143,4 @@ const BasicLayout = ({ children }) => { ); }; -export default BasicLayout;
\ No newline at end of file +export default BasicLayout; diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css new file mode 100644 index 00000000..4945c420 --- /dev/null +++ b/src/core/components/layouts/BasicLayout.module.css @@ -0,0 +1,13 @@ +.overlay-highlight { + @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/30 z-[900]; + animation: closeOverlay 1s forwards; + } + + @keyframes closeOverlay { + from { + clip-path: circle(100% at 50% 50%); + } + to { + clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y)); + } + } diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index a610d371..9ca617ae 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -1,34 +1,72 @@ -import Link from '@/core/components/elements/Link/Link' -import Spinner from '@/core/components/elements/Spinner/Spinner' -import useAuth from '@/core/hooks/useAuth' -import { getItemAddress, updateItemAddress } from '@/core/utils/address' -import { useRouter } from 'next/router' -import useAddresses from '../hooks/useAddresses' -import MobileView from '@/core/components/views/MobileView' -import DesktopView from '@/core/components/views/DesktopView' -import Menu from '@/lib/auth/components/Menu' +import { useState } from 'react'; +import Link from '@/core/components/elements/Link/Link'; +import Spinner from '@/core/components/elements/Spinner/Spinner'; +import useAuth from '@/core/hooks/useAuth'; +import { getItemAddress, updateItemAddress } from '@/core/utils/address'; +import { useRouter } from 'next/router'; +import useAddresses from '../hooks/useAddresses'; +import MobileView from '@/core/components/views/MobileView'; +import DesktopView from '@/core/components/views/DesktopView'; +import Menu from '@/lib/auth/components/Menu'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; const Addresses = () => { - const router = useRouter() - const { select = null } = router.query - const { addresses } = useAddresses() - const selectedAddress = getItemAddress(select || '') + const router = useRouter(); + const { select = null } = router.query; + const { addresses } = useAddresses(); + const selectedAddress = getItemAddress(select || ''); + const [changeConfirmation, setChangeConfirmation] = useState(false); + const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah + const changeSelectedAddress = (id) => { - if (!select) return - updateItemAddress(select, id) - router.back() - } + if (!select) return; + updateItemAddress(select, id); + router.back(); + }; + + const handleConfirmSubmit = () => { + setChangeConfirmation(false); + if (selectedForChange) { + router.push(`/my/address/${selectedForChange}/edit`); + } + }; if (addresses.isLoading) { return ( <div className='flex justify-center my-6'> <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> </div> - ) + ); } return ( <> + <BottomPopup + active={changeConfirmation} + close={() => setChangeConfirmation(false)} // Menutup popup + title='Ubah alamat Bisnis' + > + <div className='leading-7 text-gray_r-12/80'> + Anda akan mengubah alamat utama bisnis? + </div> + <div className='flex mt-6 gap-x-4 md:justify-end'> + <button + className='btn-solid-red flex-1 md:flex-none' + type='button' + onClick={handleConfirmSubmit} + > + Yakin + </button> + <button + className='btn-light flex-1 md:flex-none' + type='button' + onClick={() => setChangeConfirmation(false)} + > + Batal + </button> + </div> + </BottomPopup> + <MobileView> <div className='p-4'> <div className='text-right'> @@ -37,7 +75,10 @@ const Addresses = () => { <div className='grid gap-y-4 mt-4'> {addresses.data?.map((address, index) => { - const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' + const type = + address.type.charAt(0).toUpperCase() + + address.type.slice(1) + + ' Address'; return ( <AddressCard key={index} @@ -45,9 +86,11 @@ const Addresses = () => { type={type} changeSelectedAddress={changeSelectedAddress} selectedAddress={selectedAddress} + setChangeConfirmation={setChangeConfirmation} // Memanggil popup + setSelectedForChange={setSelectedForChange} // Simpan id address yang akan diubah select={select} /> - ) + ); })} </div> </div> @@ -72,7 +115,9 @@ const Addresses = () => { <div className='grid grid-cols-2 gap-4'> {addresses.data?.map((address, index) => { const type = - address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address' + address.type.charAt(0).toUpperCase() + + address.type.slice(1) + + ' Address'; return ( <AddressCard key={index} @@ -80,20 +125,31 @@ const Addresses = () => { type={type} changeSelectedAddress={changeSelectedAddress} selectedAddress={selectedAddress} + setChangeConfirmation={setChangeConfirmation} + setSelectedForChange={setSelectedForChange} select={select} /> - ) + ); })} </div> </div> </div> </DesktopView> </> - ) -} + ); +}; -const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => { - const auth = useAuth() +const AddressCard = ({ + address, + selectedAddress, + changeSelectedAddress, + type, + select, + setChangeConfirmation, + setSelectedForChange, +}) => { + const auth = useAuth(); + const router = useRouter(); return ( <div @@ -106,23 +162,37 @@ const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, se (select && 'cursor-pointer hover:bg-gray_r-4 transition') }`} > - <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}> + <div + onClick={() => changeSelectedAddress(address.id)} + className={select && 'cursor-pointer'} + > <div className='flex gap-x-2'> <div className='badge-red'>{type}</div> - {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>} + {auth?.partnerId == address.id && ( + <div className='badge-green'>Utama</div> + )} </div> <p className='font-medium mt-2'>{address.name}</p> - {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>} + {address.mobile && ( + <p className='mt-2 text-gray_r-11'>{address.mobile}</p> + )} <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p> </div> - <Link - href={`/my/address/${address.id}/edit`} + <button + onClick={() => { + if (type == 'Contact Address' && auth.parentId) { + setSelectedForChange(address.id); // Set alamat yang dipilih + setChangeConfirmation(true); // Tampilkan popup konfirmasi + } else { + router.push(`/my/address/${address.id}/edit`); + } + }} className='btn-light bg-white mt-3 w-full !text-gray_r-11' > Ubah Alamat - </Link> + </button> </div> - ) -} + ); +}; -export default Addresses +export default Addresses; diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index 86519147..e315affe 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -1,76 +1,101 @@ -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import useAuth from '@/core/hooks/useAuth' -import { useRouter } from 'next/router' -import { Controller, useForm } from 'react-hook-form' -import * as Yup from 'yup' -import cityApi from '../api/cityApi' -import districtApi from '../api/districtApi' -import subDistrictApi from '../api/subDistrictApi' -import { useEffect, useState } from 'react' -import createAddressApi from '../api/createAddressApi' -import { toast } from 'react-hot-toast' -import { yupResolver } from '@hookform/resolvers/yup' -import Menu from '@/lib/auth/components/Menu' +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import useAuth from '@/core/hooks/useAuth'; +import { useRouter } from 'next/router'; +import { Controller, useForm } from 'react-hook-form'; +import * as Yup from 'yup'; +import cityApi from '../api/cityApi'; +import districtApi from '../api/districtApi'; +import subDistrictApi from '../api/subDistrictApi'; +import { useEffect, useState } from 'react'; +import createAddressApi from '../api/createAddressApi'; +import { toast } from 'react-hot-toast'; +import { yupResolver } from '@hookform/resolvers/yup'; +import Menu from '@/lib/auth/components/Menu'; +import useAddresses from '../hooks/useAddresses'; const CreateAddress = () => { - const auth = useAuth() - const router = useRouter() + const auth = useAuth(); + const router = useRouter(); const { register, formState: { errors }, handleSubmit, watch, setValue, - control + control, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) - - const [cities, setCities] = useState([]) - const [districts, setDistricts] = useState([]) - const [subDistricts, setSubDistricts] = useState([]) + defaultValues, + }); + const { addresses = [] } = useAddresses(); // Ensure addresses is an array + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); + const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types useEffect(() => { const loadCities = async () => { - let dataCities = await cityApi() - dataCities = dataCities.map((city) => ({ value: city.id, label: city.name })) - setCities(dataCities) + let dataCities = await cityApi(); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + }, []); + + useEffect(() => { + if (addresses) { + let hasContactAddress = false; + + for (let i = 0; i < addresses?.data?.length; i++) { + if (addresses.data[i].type === 'contact') { + hasContactAddress = true; + break; + } + } + if (hasContactAddress) { + setFilteredTypes(types.filter((type) => type.value !== 'contact')); + } else { + setFilteredTypes(types); + } } - loadCities() - }, []) + }, [auth]); - const watchCity = watch('city') + const watchCity = watch('city'); useEffect(() => { - setValue('district', '') + setValue('district', ''); if (watchCity) { const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }) + let dataDistricts = await districtApi({ cityId: watchCity }); dataDistricts = dataDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setDistricts(dataDistricts) - } - loadDistricts() + label: district.name, + })); + setDistricts(dataDistricts); + }; + loadDistricts(); } - }, [watchCity, setValue]) + }, [watchCity, setValue]); - const watchDistrict = watch('district') + const watchDistrict = watch('district'); useEffect(() => { - setValue('subDistrict', '') + setValue('subDistrict', ''); if (watchDistrict) { const loadSubDistricts = async () => { - let dataSubDistricts = await subDistrictApi({ districtId: watchDistrict }) + let dataSubDistricts = await subDistrictApi({ + districtId: watchDistrict, + }); dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setSubDistricts(dataSubDistricts) - } - loadSubDistricts() + label: district.name, + })); + setSubDistricts(dataSubDistricts); + }; + loadSubDistricts(); } - }, [watchDistrict, setValue]) + }, [watchDistrict, setValue]); const onSubmitHandler = async (values) => { const data = { @@ -78,15 +103,15 @@ const CreateAddress = () => { city_id: values.city, district_id: values.district, sub_district_id: values.subDistrict, - parent_id: auth.partnerId - } + parent_id: auth.partnerId, + }; - const address = await createAddressApi({ data }) + const address = await createAddressApi({ data }); if (address?.id) { - toast.success('Berhasil menambahkan alamat') - router.back() + toast.success('Berhasil menambahkan alamat'); + router.back(); } - } + }; return ( <div className='max-w-none md:container mx-auto flex p-0 md:py-10'> @@ -102,10 +127,16 @@ const CreateAddress = () => { name='type' control={control} render={(props) => ( - <HookFormSelect {...props} isSearchable={false} options={types} /> + <HookFormSelect + {...props} + isSearchable={false} + options={filteredTypes} + /> )} /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.type?.message} + </div> </div> <div> @@ -116,7 +147,9 @@ const CreateAddress = () => { type='text' className='form-input' /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.name?.message} + </div> </div> <div> @@ -127,7 +160,9 @@ const CreateAddress = () => { type='email' className='form-input' /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.email?.message} + </div> </div> <div> @@ -138,7 +173,9 @@ const CreateAddress = () => { type='tel' className='form-input' /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.mobile?.message} + </div> </div> <div> @@ -149,7 +186,9 @@ const CreateAddress = () => { type='text' className='form-input' /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.street?.message} + </div> </div> <div> @@ -160,7 +199,9 @@ const CreateAddress = () => { type='number' className='form-input' /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.zip?.message} + </div> </div> <div> @@ -168,9 +209,13 @@ const CreateAddress = () => { <Controller name='city' control={control} - render={(props) => <HookFormSelect {...props} options={cities} />} + render={(props) => ( + <HookFormSelect {...props} options={cities} /> + )} /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.city?.message} + </div> </div> <div> @@ -179,10 +224,16 @@ const CreateAddress = () => { name='district' control={control} render={(props) => ( - <HookFormSelect {...props} options={districts} disabled={!watchCity} /> + <HookFormSelect + {...props} + options={districts} + disabled={!watchCity} + /> )} /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.district?.message} + </div> </div> <div> @@ -191,31 +242,37 @@ const CreateAddress = () => { name='subDistrict' control={control} render={(props) => ( - <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} /> + <HookFormSelect + {...props} + options={subDistricts} + disabled={!watchDistrict} + /> )} /> </div> </div> - <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'> + <button + type='submit' + className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto' + > Simpan </button> </form> </div> </div> - ) -} + ); +}; const validationSchema = Yup.object().shape({ type: Yup.string().required('Harus di-pilih'), name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'), - // email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'), mobile: Yup.string().required('Harus di-isi'), street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), city: Yup.string().required('Harus di-pilih'), - district: Yup.string().required('Harus di-pilih') -}) + district: Yup.string().required('Harus di-pilih'), +}); const defaultValues = { type: '', @@ -226,14 +283,14 @@ const defaultValues = { city: '', district: '', subDistrict: '', - zip: '' -} + zip: '', +}; const types = [ { value: 'contact', label: 'Contact Address' }, { value: 'invoice', label: 'Invoice Address' }, { value: 'delivery', label: 'Delivery Address' }, - { value: 'other', label: 'Other Address' } -] + { value: 'other', label: 'Other Address' }, +]; -export default CreateAddress +export default CreateAddress; diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 520bba51..182c8a31 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -1,18 +1,22 @@ -import { yupResolver } from '@hookform/resolvers/yup' -import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' -import * as Yup from 'yup' -import cityApi from '../api/cityApi' -import { Controller, useForm } from 'react-hook-form' -import districtApi from '../api/districtApi' -import subDistrictApi from '../api/subDistrictApi' -import editAddressApi from '../api/editAddressApi' -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import { toast } from 'react-hot-toast' -import Menu from '@/lib/auth/components/Menu' +import { yupResolver } from '@hookform/resolvers/yup'; +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import * as Yup from 'yup'; +import cityApi from '../api/cityApi'; +import { Controller, useForm } from 'react-hook-form'; +import districtApi from '../api/districtApi'; +import subDistrictApi from '../api/subDistrictApi'; +import addressApi from '@/lib/address/api/addressApi'; +import editAddressApi from '../api/editAddressApi'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import { toast } from 'react-hot-toast'; +import Menu from '@/lib/auth/components/Menu'; +import useAuth from '@/core/hooks/useAuth'; +import odooApi from '@/core/api/odooApi'; const EditAddress = ({ id, defaultValues }) => { - const router = useRouter() + const auth = useAuth(); + const router = useRouter(); const { register, formState: { errors }, @@ -20,205 +24,282 @@ const EditAddress = ({ id, defaultValues }) => { watch, setValue, getValues, - control + control, } = useForm({ resolver: yupResolver(validationSchema), - defaultValues - }) + defaultValues, + }); + const [cities, setCities] = useState([]); + const [districts, setDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); - const [cities, setCities] = useState([]) - const [districts, setDistricts] = useState([]) - const [subDistricts, setSubDistricts] = useState([]) + useEffect(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ id: auth.parentId }); + setValue('industry', dataProfile.industryId); + setValue('companyType', dataProfile.companyTypeId); + setValue('taxName', dataProfile.taxName); + setValue('npwp', dataProfile.npwp); + setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + setValue('alamat_bisnis', dataProfile.alamatBisnis); + setValue('business_name', dataProfile.name); + }; + if (auth) loadProfile(); + }, [auth?.parentId]); useEffect(() => { const loadCities = async () => { - let dataCities = await cityApi() + let dataCities = await cityApi(); dataCities = dataCities.map((city) => ({ value: city.id, - label: city.name - })) - setCities(dataCities) - } - loadCities() - }, []) + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + }, []); - const watchCity = watch('city') + const watchCity = watch('city'); useEffect(() => { - setValue('district', '') + setValue('district', ''); if (watchCity) { const loadDistricts = async () => { - let dataDistricts = await districtApi({ cityId: watchCity }) + let dataDistricts = await districtApi({ cityId: watchCity }); dataDistricts = dataDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setDistricts(dataDistricts) - let oldDistrict = getValues('oldDistrict') + label: district.name, + })); + setDistricts(dataDistricts); + let oldDistrict = getValues('oldDistrict'); if (oldDistrict) { - setValue('district', oldDistrict) - setValue('oldDistrict', '') + setValue('district', oldDistrict); + setValue('oldDistrict', ''); } - } - loadDistricts() + }; + loadDistricts(); } - }, [watchCity, setValue, getValues]) + }, [watchCity, setValue, getValues]); - const watchDistrict = watch('district') + const watchDistrict = watch('district'); useEffect(() => { - setValue('subDistrict', '') + setValue('subDistrict', ''); if (watchDistrict) { const loadSubDistricts = async () => { let dataSubDistricts = await subDistrictApi({ - districtId: watchDistrict - }) + districtId: watchDistrict, + }); dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, - label: district.name - })) - setSubDistricts(dataSubDistricts) - let oldSubDistrict = getValues('oldSubDistrict') + label: district.name, + })); + setSubDistricts(dataSubDistricts); + let oldSubDistrict = getValues('oldSubDistrict'); if (oldSubDistrict) { - setValue('subDistrict', oldSubDistrict) - setValue('oldSubDistrict', '') + setValue('subDistrict', oldSubDistrict); + setValue('oldSubDistrict', ''); } - } - loadSubDistricts() + }; + loadSubDistricts(); } - }, [watchDistrict, setValue, getValues]) - + }, [watchDistrict, setValue, getValues]); const onSubmitHandler = async (values) => { const data = { ...values, + phone: values.mobile, city_id: values.city, district_id: values.district, - sub_district_id: values.subDistrict + sub_district_id: values.subDistrict, + }; + if (!auth.company) { + data.alamat_lengkap_text = values.street; + } + const address = await editAddressApi({ id, data }); + let dataAlamat; + let isUpdated = true; + if (auth.company) { + if (auth?.partnerId == id) { + dataAlamat = { + id_user: auth.partnerId, + alamat_lengkap_text: values.alamat_wajib_pajak, + street: values.street, + }; + isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + dataAlamat + ); + } } - const address = await editAddressApi({ id, data }) - if (address?.id) { - toast.success('Berhasil mengubah alamat') - router.back() + // if (isUpdated?.id) { + if (address?.id && auth.company ? isUpdated?.id : true) { + toast.success('Berhasil mengubah alamat'); + router.back(); + } else { + toast.error('Terjadi kesalahan internal'); + router.back(); } - } + }; return ( - <div className='max-w-none md:container mx-auto flex p-0 md:py-10'> - <div className='hidden md:block w-3/12 pr-4'> - <Menu /> - </div> - <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'> - <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>Ubah Alamat</h1> - <form onSubmit={handleSubmit(onSubmitHandler)}> - <div className='grid grid-cols-1 md:grid-cols-2 gap-4'> - <div> - <label className='form-label mb-2'>Label Alamat</label> - <Controller - name='type' - control={control} - render={(props) => ( - <HookFormSelect {...props} isSearchable={false} options={types} /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div> - </div> + <> + <div className='max-w-none md:container mx-auto flex p-0 md:py-10'> + <div className='hidden md:block w-3/12 pr-4'> + <Menu /> + </div> + <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'> + <div className='flex justify-start items-center mb-6'> + <h1 className='text-title-sm font-semibold hidden md:block mr-2'> + Ubah Alamat + </h1> + {auth?.partnerId == id && <div className='badge-green'>Utama</div>} + </div> + <form onSubmit={handleSubmit(onSubmitHandler)}> + <div className='grid grid-cols-1 md:grid-cols-2 gap-4'> + <div> + <label className='form-label mb-2'>Label Alamat</label> + <Controller + name='type' + control={control} + render={(props) => ( + <HookFormSelect + {...props} + isSearchable={false} + options={types} + /> + )} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.type?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Nama</label> - <input - {...register('name')} - placeholder='John Doe' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Nama</label> + <input + {...register('name')} + placeholder='John Doe' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.name?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Email</label> - <input - {...register('email')} - placeholder='johndoe@example.com' - type='email' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Email</label> + <input + {...register('email')} + placeholder='johndoe@example.com' + type='email' + className='form-input' + disabled={auth?.partnerId == id && true} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.email?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Mobile</label> - <input - {...register('mobile')} - placeholder='08xxxxxxxx' - type='tel' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Mobile</label> + <input + {...register('mobile')} + placeholder='08xxxxxxxx' + type='tel' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.mobile?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Alamat</label> - <input - {...register('street')} - placeholder='Jl. Bandengan Utara 85A' - type='text' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Alamat</label> + <input + {...register('street')} + placeholder='Jl. Bandengan Utara 85A' + type='text' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.street?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Kode Pos</label> - <input - {...register('zip')} - placeholder='10100' - type='number' - className='form-input' - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Kode Pos</label> + <input + {...register('zip')} + placeholder='10100' + type='number' + className='form-input' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.zip?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Kota</label> - <Controller - name='city' - control={control} - render={(props) => <HookFormSelect {...props} options={cities} />} - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Kota</label> + <Controller + name='city' + control={control} + render={(props) => ( + <HookFormSelect {...props} options={cities} /> + )} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.city?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Kecamatan</label> - <Controller - name='district' - control={control} - render={(props) => ( - <HookFormSelect {...props} options={districts} disabled={!watchCity} /> - )} - /> - <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div> - </div> + <div> + <label className='form-label mb-2'>Kecamatan</label> + <Controller + name='district' + control={control} + render={(props) => ( + <HookFormSelect + {...props} + options={districts} + disabled={!watchCity} + /> + )} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.district?.message} + </div> + </div> - <div> - <label className='form-label mb-2'>Kelurahan</label> - <Controller - name='subDistrict' - control={control} - render={(props) => ( - <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} /> - )} - /> + <div> + <label className='form-label mb-2'>Kelurahan</label> + <Controller + name='subDistrict' + control={control} + render={(props) => ( + <HookFormSelect + {...props} + options={subDistricts} + disabled={!watchDistrict} + /> + )} + /> + </div> </div> - </div> - <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'> - Simpan - </button> - </form> + <button + type='submit' + className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto' + > + Simpan + </button> + </form> + </div> </div> - </div> - ) -} + </> + ); +}; const validationSchema = Yup.object().shape({ type: Yup.string().required('Harus di-pilih'), @@ -228,14 +309,14 @@ const validationSchema = Yup.object().shape({ street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), city: Yup.string().required('Harus di-pilih'), - district: Yup.string().required('Harus di-pilih') -}) + district: Yup.string().required('Harus di-pilih'), +}); const types = [ { value: 'contact', label: 'Contact Address' }, { value: 'invoice', label: 'Invoice Address' }, { value: 'delivery', label: 'Delivery Address' }, - { value: 'other', label: 'Other Address' } -] + { value: 'other', label: 'Other Address' }, +]; -export default EditAddress +export default EditAddress; diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 2faede9b..7bda992f 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -1,78 +1,136 @@ -import odooApi from '@/core/api/odooApi' -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import useAuth from '@/core/hooks/useAuth' -import addressApi from '@/lib/address/api/addressApi' -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { Controller, useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' +import odooApi from '@/core/api/odooApi'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import useAuth from '@/core/hooks/useAuth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { Controller, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import * as Yup from 'yup'; const CompanyProfile = () => { - const auth = useAuth() - const [isOpen, setIsOpen] = useState(false) - const toggle = () => setIsOpen(!isOpen) - const { register, setValue, control, handleSubmit } = useForm({ - defaultValues: { - industry: '', - companyType: '', - name: '', - taxName: '', - npwp: '' - } - }) + const [changeConfirmation, setChangeConfirmation] = useState(false); + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(false); + const toggle = () => setIsOpen(!isOpen); + const { + register, + formState: { errors }, + setValue, + control, + handleSubmit, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }); - const [industries, setIndustries] = useState([]) + const [industries, setIndustries] = useState([]); useEffect(() => { const loadIndustries = async () => { - const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') - setIndustries(dataIndustries?.map((o) => ({ value: o.id, label: o.name }))) - } - loadIndustries() - }, []) + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries( + dataIndustries?.map((o) => ({ value: o.id, label: o.name })) + ); + }; + loadIndustries(); + }, []); - const [companyTypes, setCompanyTypes] = useState([]) + const [companyTypes, setCompanyTypes] = useState([]); useEffect(() => { const loadCompanyTypes = async () => { - const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') - setCompanyTypes(dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name }))) - } - loadCompanyTypes() - }, []) + const dataCompanyTypes = await odooApi( + 'GET', + '/api/v1/partner/company_type' + ); + setCompanyTypes( + dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name })) + ); + }; + loadCompanyTypes(); + }, []); useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.parentId }) - setValue('name', dataProfile.name) - setValue('industry', dataProfile.industryId) - setValue('companyType', dataProfile.companyTypeId) - setValue('taxName', dataProfile.taxName) - setValue('npwp', dataProfile.npwp) - } - if (auth) loadProfile() - }, [auth, setValue]) + const dataProfile = await addressApi({ id: auth.parentId }); + setValue('name', dataProfile.name); + setValue('industry', dataProfile.industryId); + setValue('companyType', dataProfile.companyTypeId); + setValue('taxName', dataProfile.taxName); + setValue('npwp', dataProfile.npwp); + setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak); + setValue('alamat_bisnis', dataProfile.alamatBisnis); + }; + if (auth) loadProfile(); + }, [auth, setValue]); const onSubmitHandler = async (values) => { - const data = { - ...values, - company_type_id: values.companyType, - industry_id: values.industry, - tax_name: values.taxName + if (changeConfirmation) { + const data = { + ...values, + id_user: auth.partnerId, + company_type_id: values.companyType, + industry_id: values.industry, + tax_name: values.taxName, + alamat_lengkap_text: values.alamat_wajib_pajak, + street: values.alamat_bisnis, + }; + const isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + data + ); + if (isUpdated?.id) { + toast.success('Berhasil mengubah profil', { duration: 1500 }); + return; + } + toast.error('Terjadi kesalahan internal'); } - const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data) - if (isUpdated?.id) { - toast.success('Berhasil mengubah profil', { duration: 1500 }) - return - } - toast.error('Terjadi kesalahan internal') - } + }; + + const handleConfirmSubmit = () => { + setChangeConfirmation(false); + handleSubmit(onSubmitHandler)(); + }; return ( <> - <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'> + <BottomPopup + active={changeConfirmation} + close={() => setChangeConfirmation(true)} + title='Ubah profil Bisnis' + > + <div className='leading-7 text-gray_r-12/80'> + Apakah anda yakin mengubah data bisnis? + </div> + <div className='flex mt-6 gap-x-4 md:justify-end'> + <button + className='btn-solid-red flex-1 md:flex-none' + type='button' + onClick={handleConfirmSubmit} + > + Ya, Ubah + </button> + <button + className='btn-light flex-1 md:flex-none' + type='button' + onClick={() => setChangeConfirmation(false)} + > + Batal + </button> + </div> + </BottomPopup> + <button + type='button' + onClick={toggle} + className='p-4 flex items-center text-left w-full' + > <div> <div className='font-semibold mb-2'>Informasi Usaha</div> <div className='text-gray_r-11'> - Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda. + Dibawah ini adalah data usaha yang anda masukkan, periksa kembali + data usaha anda. </div> </div> <div className='ml-auto p-2 bg-gray_r-3 rounded'> @@ -82,15 +140,26 @@ const CompanyProfile = () => { </button> {isOpen && ( - <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}> + <form + className='p-4 border-t border-gray_r-6' + onSubmit={(e) => { + e.preventDefault(); + setChangeConfirmation(true); + }} + > <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'> <div> <label className='block mb-3'>Klasifikasi Jenis Usaha</label> <Controller name='industry' control={control} - render={(props) => <HookFormSelect {...props} options={industries} />} + render={(props) => ( + <HookFormSelect {...props} options={industries} /> + )} /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.industry?.message} + </div> </div> <div className='flex flex-wrap'> <div className='w-full mb-3'>Badan Usaha</div> @@ -98,8 +167,13 @@ const CompanyProfile = () => { <Controller name='companyType' control={control} - render={(props) => <HookFormSelect {...props} options={companyTypes} />} + render={(props) => ( + <HookFormSelect {...props} options={companyTypes} /> + )} /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.companyType?.message} + </div> </div> <div className='w-9/12 pl-1'> <input @@ -108,15 +182,55 @@ const CompanyProfile = () => { className='form-input' placeholder='Cth: Indoteknik Dotcom Gemilang' /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.name?.message} + </div> </div> </div> <div> <label>Nama Wajib Pajak</label> - <input {...register('taxName')} type='text' className='form-input mt-3' /> + <input + {...register('taxName')} + type='text' + className='form-input mt-3' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.taxName?.message} + </div> + </div> + <div> + <label>Alamat Wajib Pajak</label> + <input + {...register('alamat_wajib_pajak')} + type='text' + className='form-input mt-3' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.alamat_wajib_pajak?.message} + </div> + </div> + <div> + <label>Alamat Bisnis</label> + <input + {...register('alamat_bisnis')} + type='text' + className='form-input mt-3' + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.alamat_bisnis?.message} + </div> </div> <div> <label>Nomor NPWP</label> - <input {...register('npwp')} type='text' className='form-input mt-3' /> + <input + {...register('npwp')} + type='text' + className='form-input mt-3' + maxLength={16} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.npwp?.message} + </div> </div> </div> <button type='submit' className='btn-yellow w-full mt-6'> @@ -125,7 +239,27 @@ const CompanyProfile = () => { </form> )} </> - ) -} + ); +}; + +export default CompanyProfile; + +const validationSchema = Yup.object().shape({ + alamat_bisnis: Yup.string().required('Harus di-isi'), + alamat_wajib_pajak: Yup.string().required('Harus di-isi'), + taxName: Yup.string().required('Harus di-isi'), + npwp: Yup.string().required('Harus di-isi'), + name: Yup.string().required('Harus di-isi'), + industry: Yup.string().required('Harus di-pilih'), + companyType: Yup.string().required('Harus di-pilih'), +}); -export default CompanyProfile +const defaultValues = { + industry: '', + companyType: '', + name: '', + taxName: '', + npwp: '', + alamat_wajib_pajak: '', + alamat_bisnis: '', +}; diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx index 731214ff..ebd41a67 100644 --- a/src/lib/brand/components/BrandCard.jsx +++ b/src/lib/brand/components/BrandCard.jsx @@ -1,33 +1,37 @@ -import Image from '~/components/ui/image' -import Link from '@/core/components/elements/Link/Link' -import useDevice from '@/core/hooks/useDevice' -import { createSlug } from '@/core/utils/slug' +import NextImage from 'next/image'; +import Link from '@/core/components/elements/Link/Link'; +import useDevice from '@/core/hooks/useDevice'; +import { createSlug } from '@/core/utils/slug'; const BrandCard = ({ brand }) => { - const { isMobile } = useDevice() + const { isMobile } = useDevice(); return ( <Link href={createSlug('/shop/brands/', brand.name, brand.id)} - className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${ + className={`py-1 px-2 border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${ isMobile ? 'h-16' : 'h-24' }`} > {brand.logo && ( - <Image + <NextImage src={brand.logo} alt={brand.name} - width={128} - height={128} - className='h-full w-full object-contain object-center' + width={500} + height={500} + quality={85} + className='h-full w-[122px] object-contain object-center' /> )} {!brand.logo && ( - <span className='text-center' style={{ fontSize: `${16 - brand.name.length * 0.5}px` }}> + <span + className='text-center' + style={{ fontSize: `${16 - brand.name.length * 0.5}px` }} + > {brand.name} </span> )} </Link> - ) -} + ); +}; -export default BrandCard +export default BrandCard; diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx index 19f79bc9..ddb77c1f 100644 --- a/src/lib/cart/components/Cartheader.jsx +++ b/src/lib/cart/components/Cartheader.jsx @@ -1,14 +1,20 @@ import { useCallback, useEffect, useMemo, useState } from 'react' import { getCartApi } from '../api/CartApi' +import currencyFormat from '@/core/utils/currencyFormat' +import { createSlug } from '@/core/utils/slug' import useAuth from '@/core/hooks/useAuth' import { useRouter } from 'next/router' import odooApi from '@/core/api/odooApi' import { useProductCartContext } from '@/contexts/ProductCartContext' - +import Image from '@/core/components/elements/Image/Image' +import whatsappUrl from '@/core/utils/whatsappUrl' +import { AnimatePresence, motion } from 'framer-motion' +import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css' const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline') const { default: Link } = require('next/link') const Cardheader = (cartCount) => { + const router = useRouter() const [subTotal, setSubTotal] = useState(null) const [buttonLoading, SetButtonTerapkan] = useState(false) @@ -19,7 +25,7 @@ const Cardheader = (cartCount) => { useProductCartContext() const [isHovered, setIsHovered] = useState(false) - + const [isTop, setIsTop] = useState(true) const products = useMemo(() => { return productCart?.products || [] }, [productCart]) @@ -42,7 +48,7 @@ const Cardheader = (cartCount) => { setIsloading(true) let cart = await getCartApi() setProductCart(cart) - setCountCart(cart.productTotal) + setCountCart(cart?.productTotal) setIsloading(false) }, [setProductCart, setIsloading]) @@ -75,14 +81,26 @@ const Cardheader = (cartCount) => { useEffect(() => { setCountCart(cartCount.cartCount) + setRefreshCart(false) }, [cartCount]) + useEffect(() => { + const handleScroll = () => { + setIsTop(window.scrollY === 0) + } + window.addEventListener('scroll', handleScroll) + return () => { + window.removeEventListener('scroll', handleScroll) + } + }, []) + const handleCheckout = async () => { SetButtonTerapkan(true) let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`) router.push('/shop/checkout') } + return ( <div className='relative group'> <div> @@ -109,6 +127,246 @@ const Cardheader = (cartCount) => { </span> </Link> </div> + <AnimatePresence> + {isHovered && ( + <> + <motion.div + initial={{ opacity: 0 }} + animate={{ opacity: 1, top: isTop ? 230 : 155 }} + exit={{ opacity: 0 }} + transition={{ duration: 0.15, top: { duration: 0.3 } }} + className={`fixed left-0 w-full h-full bg-black/50 z-10`} + /> + <motion.div + initial={{ opacity: 0 }} + animate={{ opacity: 1, transition: { duration: 0.2 } }} + exit={{ opacity: 0, transition: { duration: 0.3 } }} + className='absolute z-10 left-0 w-96' + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > + <motion.div + initial={{ height: 0 }} + animate={{ height: 'auto' }} + exit={{ height: 0 }} + className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden' + > + <div className='p-2 flex justify-between items-center'> + <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5> + <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'> + Lihat Semua + </Link> + </div> + <hr className='mt-3 mb-3 border border-gray-100' /> + <div className='flow-root max-h-[250px] overflow-y-auto'> + {!auth && ( + <div className='justify-center p-4'> + <p className='text-gray-500 text-center '> + Silahkan{' '} + <Link href='/login' className='text-red-600 underline leading-6'> + Login + </Link>{' '} + Untuk Melihat Daftar Keranjang Belanja Anda + </p> + </div> + )} + {isLoading && + itemLoading.map((item) => ( + <div key={item} role='status' className='max-w-sm animate-pulse'> + <div className='flex items-center space-x-4 mb- 2'> + <div className='flex-shrink-0'> + <PhotoIcon className='h-16 w-16 text-gray-500' /> + </div> + <div className='flex-1 min-w-0'> + <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div> + <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div> + <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + </div> + </div> + </div> + ))} + {auth && products.length === 0 && !isLoading && ( + <div className='justify-center p-4'> + <p className='text-gray-500 text-center '> + Tidak Ada Produk di Keranjang Belanja Anda + </p> + </div> + )} + {auth && products.length > 0 && !isLoading && ( + <> + <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'> + {products && + products?.map((product, index) => ( + <> + <li className='py-1 sm:py-2'> + <div className='flex items-center space-x-4'> + <div className='bagian gambar flex-shrink-0'> + {product.cartType === 'promotion' && ( + <Image + src={product.imageProgram[0]} + alt={product.name} + className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md' + /> + )} + {product.cartType === 'product' && ( + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' + > + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md' + /> + </Link> + )} + </div> + <div className='bagian tulisan dan harga flex-1 min-w-0'> + {product.cartType === 'promotion' && ( + <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'> + {product.name} + </p> + )} + {product.cartType === 'product' && ( + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' + > + {' '} + <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'> + {product.parent.name} + </p> + </Link> + )} + {product?.hasFlashsale && ( + <div className='flex gap-x-1 items-center mb-2 mt-1'> + <div className='badge-solid-red'> + {product?.price?.discountPercentage}% + </div> + <div className='text-gray_r-11 line-through text-caption-2'> + {currencyFormat(product?.price?.price)} + </div> + </div> + )} + + <div className='flex justify-between items-center'> + <div className='font-semibold text-sm text-red-600'> + {product?.price?.priceDiscount > 0 ? ( + currencyFormat(product?.price?.priceDiscount) + ) : ( + <span className='text-gray_r-12/90 font-normal text-caption-1'> + <a + href={whatsappUrl('product', { + name: product.name, + manufacture: product.manufacture?.name, + url: createSlug( + '/shop/product/', + product.name, + product.id, + true + ) + })} + className='text-danger-500 underline' + rel='noopener noreferrer' + target='_blank' + > + Call For Price + </a> + </span> + )} + </div> + </div> + </div> + </div> + <div className="flex flex-col w-3/4"> + {product.products?.map((product) => + <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'> + <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '> + {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />} + </Link> + + <div className="ml-4 w-full flex flex-col gap-y-1"> + <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white"> + {product.displayName} + </Link> + + <div className='flex w-full'> + <div className="flex flex-col"> + {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */} + <div> + <span className="text-gray-500 text-caption-1">Berat Barang: </span> + <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span> + </div> + </div> + </div> + </div> + + </div> + )} + {product.freeProducts?.map((product) => + <div key={product.id} className='md:ml-8 ml-4 mt-2 flex'> + <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className='md:h-12 md:w-12 md:min-w-[48px] h-10 w-10 min-w-[40px] border border-gray-300 rounded '> + {product?.image && <Image src={product.image} alt={product.name} width={40} height={40} className='w-full h-full object-fill' />} + </Link> + + <div className="ml-4 w-full flex flex-col gap-y-1"> + <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className="text-caption-2 font-medium text-gray-900 truncate dark:text-white"> + {product.displayName} + </Link> + + <div className='flex w-full'> + <div className="flex flex-col"> + {/* <div className="text-gray-500 text-caption-1">{product.code}</div> */} + <div> + <span className="text-gray-500 text-caption-1">Berat Barang: </span> + <span className="text-gray-500 text-caption-1">{product.packageWeight} Kg</span> + </div> + </div> + </div> + </div> + + </div> + )} + </div> + </li> + </> + ))} + </ul> + <hr /> + </> + )} + </div> + {auth && products.length > 0 && !isLoading && ( + <> + <div className='mt-3'> + <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span> + <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span> + </div> + <div className='mt-5 mb-2'> + <button + type='button' + className='btn-solid-red rounded-lg w-full' + onClick={handleCheckout} + disabled={buttonLoading} + > + {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'} + </button> + </div> + </> + )} + </motion.div> + </motion.div> + </> + )} + </AnimatePresence> </div> ) } diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js new file mode 100644 index 00000000..3fdfc41c --- /dev/null +++ b/src/lib/category/api/popularProduct.js @@ -0,0 +1,32 @@ + +export const fetchPopulerProductSolr = async (category_id_ids) => { + let sort ='sort=qty_sold_f desc'; + try { + const queryParams = new URLSearchParams({ q: category_id_ids }); + const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s,qty_sold_f,qty_sold_f&${sort}`); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + const promotions = await map(data.response.docs); + return promotions; + } catch (error) { + console.error("Error fetching promotion data:", error); + return []; + } + }; + + const map = async (promotions) => { + const result = []; + for (const promotion of promotions) { + const data = { + id: promotion.id, + name: promotion.display_name_s, + manufacture_name: promotion.manufacture_name_s, + manufacture_id: promotion.manufacture_id_i, + qty_sold: promotion.qty_sold_f, + }; + result.push(data); + } + return result; + };
\ No newline at end of file diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index e6ea5acf..91553295 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -2,11 +2,20 @@ import odooApi from '@/core/api/odooApi' import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import { createSlug } from '@/core/utils/slug' +import { ChevronRightIcon } from '@heroicons/react/24/outline' +import Image from 'next/image' import { useEffect, useState } from 'react' +import PopularBrand from './PopularBrand' +import { bannerApi } from '@/api/bannerApi'; +const { useQuery } = require('react-query') const Category = () => { const [categories, setCategories] = useState([]) + const [openCategories, setOpenCategory] = useState([]); + const [banner, setBanner] = useState([]); + const promotionProgram = useQuery('banner-promo-category-card', bannerApi({ type: 'banner-promo-category-card' })); + useEffect(() => { const loadCategories = async () => { let dataCategories = await odooApi('GET', '/api/v1/category/tree') @@ -26,46 +35,65 @@ const Category = () => { } loadCategories() }, []) - return ( <DesktopView> <div className='category-mega-box'> {categories?.map((category) => ( - <div key={category.id}> + <div key={category.id} className='flex'> <Link href={createSlug('/shop/category/', category.name, category.id)} - className='category-mega-box__parent' + className='category-mega-box__parent flex items-center' > + <div className='mr-2 flex justify-center items-center'> + <Image src={category.image} alt='' width={25} height={25} /> + </div> {category.name} </Link> <div className='category-mega-box__child-wrapper'> - <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'> + <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'> {category.childs.map((child1Category) => ( - <div key={child1Category.id}> + <div key={child1Category.id} className='w-full'> <Link href={createSlug('/shop/category/', child1Category.name, child1Category.id)} - className='category-mega-box__child-one mb-4' + className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2' > {child1Category.name} </Link> - <div className='flex flex-col gap-y-3'> - {child1Category.childs.map((child2Category) => ( - <Link - href={createSlug( - '/shop/category/', - child2Category.name, - child2Category.id - )} - className='category-mega-box__child-two' - key={child2Category.id} - > - {child2Category.name} - </Link> + <div className='flex flex-col gap-y-3 w-full'> + {child1Category.childs.map((child2Category, index) => ( + (index < 4) && ( + <Link + href={createSlug('/shop/category/', child2Category.name, child2Category.id)} + className='category-mega-box__child-two truncate' + key={child2Category.id} + > + {child2Category.name} + </Link> + ) ))} + {child1Category.childs.length > 5 && ( + <div className='flex hover:bg-gray_r-8/35 rounded-10'> + <Link + href={createSlug('/shop/category/', child1Category.name, child1Category.id)} + className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4' + > + <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p> + <ChevronRightIcon className='w-4 text-danger-500 font-bold' /> + </Link> + </div> + )} </div> </div> ))} </div> + {/* <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'> + <PopularBrand category={category} /> + {Array.isArray(promotionProgram?.data) && promotionProgram?.data.length > 0 && promotionProgram?.data[0]?.map((banner, index) => ( + <div key={index} className='flex w-60 h-20 object-cover'> + <Image src={`${banner.image}`} alt={`${banner.name}`} width={275} height={4} /> + </div> + ))} + </div> */} </div> </div> ))} diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx new file mode 100644 index 00000000..8124b5b4 --- /dev/null +++ b/src/lib/category/components/PopularBrand.jsx @@ -0,0 +1,96 @@ +import odooApi from '@/core/api/odooApi' +import React, { useEffect, useState } from 'react' +import axios from 'axios'; +import { useQuery } from 'react-query' +import Link from '@/core/components/elements/Link/Link' +import { createSlug } from '@/core/utils/slug' +import Image from 'next/image' +import { ChevronRightIcon } from '@heroicons/react/24/outline' +import useProductSearch from '../../../lib/product/hooks/useProductSearch'; +import { SolrResponse } from "~/types/solr"; +import { fetchPopulerProductSolr } from '../api/popularProduct' + +const SOLR_HOST = process.env.SOLR_HOST + +const PopularBrand = ({ category }) => { + // const [topBrands, setTopBrands] = useState([]); + + // const fetchTopBrands = async () => { + // try { + // const items = await fetchPopulerProductSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`); + // const getTop12UniqueBrands = (prod) => { + // const brandMap = new Map(); + + // for (const product of prod) { + // const { manufacture_name, manufacture_id, qty_sold } = product; + + // if (brandMap.has(manufacture_name)) { + // // Update the existing brand's qty_sold + // brandMap.set(manufacture_name, { + // name: manufacture_name, + // id: manufacture_id, + // qty_sold: brandMap.get(manufacture_name).qty_sold + qty_sold + // }); + // } else { + // // Add a new brand to the map + // brandMap.set(manufacture_name, { + // name: manufacture_name, + // id: manufacture_id, + // qty_sold + // }); + // } + // } + + // // Convert the map to an array and sort by qty_sold in descending order + // const sortedBrands = Array.from(brandMap.values()).sort((a, b) => b.qty_sold - a.qty_sold); + + // // Return the top 12 brands + // return sortedBrands.slice(0, 18); + // }; + + // // Using the fetched products + // const products = items; + // const top12UniqueBrands = getTop12UniqueBrands(products); + + // // Set the top 12 brands to the state + // setTopBrands(top12UniqueBrands); + // } catch (error) { + // console.error("Error fetching data from Solr", error); + // throw error; + // } + // } + + // useEffect(() => { + // fetchTopBrands(); + // }, [category]); + + return ( + <div className='flex flex-col'> + {/* <div className='grid grid-cols-3 max-h-full w-full gap-2'> + {topBrands.map((brand, index) => ( + <div key={index} className='w-full flex items-center justify-center pb-2'> + <Link + href={createSlug('/shop/brands/', brand.name, brand.id)} + className='category-mega-box__child-one w-8 h-full flex items-center justify-center ' + > + <Image src={`https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/${brand.id}` } alt={`${brand.name}`} width={104} height={44} objectFit='cover' /> + </Link> + </div> + ))} + </div> */} + {/* {topBrands.length > 8 && ( + <div className='flex hover:bg-gray_r-8/35 rounded-10'> + <Link + href={createSlug('/shop/category/', category.name, category.id)} + className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4' + > + <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p> + <ChevronRightIcon className='w-4 text-danger-500 font-bold' /> + </Link> + </div> + )} */} + </div> + ) +} + +export default PopularBrand; diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 09a791ee..4c7e852f 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -77,6 +77,9 @@ const Checkout = () => { if (!addresses) return; const matchAddress = (key) => { + if (key === 'invoicing') { + key = 'invoice'; + } const addressToMatch = getItemAddress(key); const foundAddress = addresses.filter( (address) => address.id == addressToMatch @@ -131,6 +134,7 @@ const Checkout = () => { setLoadingVoucher(true); let dataVoucher = await getVoucher(auth?.id, { source: query, + type: 'all,brand', }); SetListVoucher(dataVoucher); @@ -146,40 +150,94 @@ const Checkout = () => { }; const VoucherCode = async (code) => { - const source = 'code=' + code + '&source=' + query; // let dataVoucher = await findVoucher(code, auth.id, query); - let dataVoucher = await getVoucherNew(source); + let dataVoucher = await getVoucher(auth?.id, { + source: query, + code: code, + }); if (dataVoucher.length <= 0) { SetFindVoucher(1); return; } - let addNewLine = dataVoucher[0]; - let checkList = listVouchers?.findIndex( - (voucher) => voucher.code == addNewLine.code - ); - if (checkList >= 0) { - if (listVouchers[checkList].canApply) { - ToggleSwitch(code); - SetCodeVoucher(null); + dataVoucher.forEach((addNewLine) => { + if (addNewLine.applyType !== 'shipping') { + // Mencari voucher dalam listVouchers + let checkList = listVouchers?.findIndex( + (voucher) => voucher.code === addNewLine.code + ); + + if (checkList >= 0) { + if (listVouchers[checkList].canApply) { + ToggleSwitch(addNewLine.code); // Perbaikan: Gunakan code voucher yang benar + SetCodeVoucher(null); + } else { + SetSelisihHargaCode(listVouchers[checkList].differenceToApply); + SetFindVoucher(2); + } + return; // Hentikan eksekusi lebih lanjut pada iterasi ini + } + // Memeriksa apakah subtotal memenuhi syarat minimal pembelian + if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) { + SetSelisihHargaCode( + currencyFormat( + addNewLine.minPurchaseAmount - cartCheckout?.subtotal + ) + ); + SetFindVoucher(2); + return; + } else { + SetFindVoucher(3); + SetButtonTerapkan(true); + } + + // Tambahkan voucher ke list dan set voucher aktif + SetListVoucher((prevList) => [addNewLine, ...prevList]); + if (addNewLine.canApply) { + SetActiveVoucher(addNewLine.code); + } } else { - SetSelisihHargaCode(listVouchers[checkList].differenceToApply); - SetFindVoucher(2); + // Mencari voucher dalam listVoucherShippings + let checkList = listVoucherShippings?.findIndex( + (voucher) => voucher.code === addNewLine.code + ); + + if (checkList >= 0) { + if (listVoucherShippings[checkList].canApply) { + ToggleSwitch(addNewLine.code); // Perbaikan: Gunakan code voucher yang benar + SetCodeVoucher(null); + } else { + SetSelisihHargaCode( + listVoucherShippings[checkList].differenceToApply + ); + SetFindVoucher(2); + } + return; // Hentikan eksekusi lebih lanjut pada iterasi ini + } + + // Memeriksa apakah subtotal memenuhi syarat minimal pembelian + if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) { + SetSelisihHargaCode( + currencyFormat( + addNewLine.minPurchaseAmount - cartCheckout?.subtotal + ) + ); + SetFindVoucher(2); + return; + } else { + SetFindVoucher(3); + SetButtonTerapkan(true); + } + + // Tambahkan voucher ke list pengiriman dan set voucher aktif pengiriman + SetListVoucherShipping((prevList) => [addNewLine, ...prevList]); + if (addNewLine.canApply) { + setActiveVoucherShipping(addNewLine.code); + } } - return; - } - if (cartCheckout?.subtotal < addNewLine.minPurchaseAmount) { - SetSelisihHargaCode( - currencyFormat(addNewLine.minPurchaseAmount - cartCheckout?.subtotal) - ); - SetFindVoucher(2); - return; - } else { - SetFindVoucher(3); - SetButtonTerapkan(true); - } - SetListVoucher((prevList) => [addNewLine, ...prevList]); - SetActiveVoucher(addNewLine.code); + }); + + // let addNewLine = dataVoucher[0]; }; useEffect(() => { @@ -187,7 +245,7 @@ const Checkout = () => { }, [bottomPopup]); useEffect(() => { - voucher(); + // voucher(); const loadExpedisi = async () => { let dataExpedisi = await ExpedisiList(); dataExpedisi = dataExpedisi.map((expedisi) => ({ @@ -210,13 +268,23 @@ const Checkout = () => { }; }, []); - const hitungDiscountVoucher = (code) => { - let dataVoucherIndex = listVouchers.findIndex( - (voucher) => voucher.code == code - ); - let dataActiveVoucher = listVouchers[dataVoucherIndex]; + const hitungDiscountVoucher = (code, source) => { + let countDiscount = 0; + if (source === 'voucher') { + let dataVoucherIndex = listVouchers.findIndex( + (voucher) => voucher.code == code + ); + let dataActiveVoucher = listVouchers[dataVoucherIndex]; + + countDiscount = dataActiveVoucher.discountVoucher; + } else { + let dataVoucherIndex = listVoucherShippings.findIndex( + (voucher) => voucher.code == code + ); + let dataActiveVoucher = listVoucherShippings[dataVoucherIndex]; - let countDiscount = dataActiveVoucher.discountVoucher; + countDiscount = dataActiveVoucher.discountVoucher; + } /*if (dataActiveVoucher.discountType === 'percentage') { countDiscount = cartCheckout?.subtotal * (dataActiveVoucher.discountAmount / 100) @@ -233,14 +301,24 @@ const Checkout = () => { return countDiscount; }; - useEffect(() => { - if (!listVouchers) return; - if (!activeVoucher) return; + // useEffect(() => { + // if (!listVouchers) return; + // if (!activeVoucher) return; + + // console.log('voucher') + // const countDiscount = hitungDiscountVoucher(activeVoucher, 'voucher'); - const countDiscount = hitungDiscountVoucher(activeVoucher); + // SetDiscountVoucher(countDiscount); + // }, [activeVoucher, listVouchers]); - SetDiscountVoucher(countDiscount); - }, [activeVoucher, listVouchers]); + // useEffect(() => { + // if (!listVoucherShippings) return; + // if (!activeVoucherShipping) return; + + // const countDiscount = hitungDiscountVoucher(activeVoucherShipping, 'voucher_shipping'); + + // SetDiscountVoucherOngkir(countDiscount); + // }, [activeVoucherShipping, listVoucherShippings]); useEffect(() => { if (qVoucher === 'PASTIHEMAT' && listVouchers) { @@ -335,7 +413,7 @@ const Checkout = () => { Math.round(parseInt(finalShippingAmt * 1.1) / 1000) * 1000; const finalGT = GT < 0 ? 0 : GT; setGrandTotal(finalGT); - }, [biayaKirim, cartCheckout?.grandTotal, activeVoucher]); + }, [biayaKirim, cartCheckout?.grandTotal, activeVoucher, activeVoucherShipping]); const checkout = async () => { const file = poFile.current.files[0]; @@ -389,14 +467,22 @@ const Checkout = () => { if (typeof file !== 'undefined') data.po_file = await getFileBase64(file); const isCheckouted = await checkoutApi({ data }); + if (!isCheckouted?.id) { toast.error('Gagal melakukan transaksi, terjadi kesalahan internal'); return; - } - - gtagPurchase(products, biayaKirim, isCheckouted.name); + } else { + gtagPurchase(products, biayaKirim, isCheckouted.name); + + gtag('event', 'conversion', { + send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD', + value: + cartCheckout?.grandTotal + + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000, + currency: 'IDR', + transaction_id: isCheckouted.id, + }); - const midtrans = async () => { for (const product of products) deleteItemCart({ productId: product.id }); if (grandTotal > 0) { const payment = await axios.post( @@ -412,17 +498,25 @@ const Checkout = () => { '-' )}`; } - }; + } - gtag('event', 'conversion', { - send_to: 'AW-954540379/nDymCL3BhaQYENvClMcD', - value: - cartCheckout?.grandTotal + - Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000, - currency: 'IDR', - transaction_id: isCheckouted.id, - event_callback: midtrans, - }); + /* const midtrans = async () => { + for (const product of products) deleteItemCart({ productId: product.id }); + if (grandTotal > 0) { + const payment = await axios.post( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}` + ); + setIsLoading(false); + window.location.href = payment.data.redirectUrl; + } else { + window.location.href = `${ + process.env.NEXT_PUBLIC_SELF_HOST + }/shop/checkout/success?order_id=${isCheckouted.name.replace( + /\//g, + '-' + )}`; + } + };*/ }; const handlingActivateCode = async () => { @@ -483,6 +577,10 @@ const Checkout = () => { const finalShippingAmt = biayaKirim - discShippingAmt; + const totalDiscountVoucher = + cartCheckout?.discountVoucher + + (cartCheckout?.discountVoucherShipping || 0); + return ( <> <BottomPopup @@ -593,10 +691,25 @@ const Checkout = () => { )} <hr className='mt-8 mb-4 border-gray_r-8' /> + {/* {!loadingVoucher && + listVouchers?.length === 1 && + listVoucherShippings?.length === 1} + { + <div className='flex items-center justify-center mt-4 mb-4'> + <div className='text-center'> + <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1> + <p className='text-gray-500'> + Maaf, saat ini tidak ada voucher yang tersedia. + </p> + </div> + </div> + } */} {listVoucherShippings && listVoucherShippings?.length > 0 && ( <div> - <h3 className='font-semibold mb-4'>Promo Gratis Ongkir</h3> + <h3 className='font-semibold mb-4'> + Promo Extra Potongan Ongkir + </h3> {listVoucherShippings?.map((item) => ( <div key={item.id} className='relative'> <div @@ -731,16 +844,7 @@ const Checkout = () => { <hr className='mt-8 mb-4 border-gray_r-8' /> <div> - {!loadingVoucher && listVouchers?.length === 0 ? ( - <div className='flex items-center justify-center mt-4 mb-4'> - <div className='text-center'> - <h1 className='font-bold mb-4'>Tidak ada voucher tersedia</h1> - <p className='text-gray-500'> - Maaf, saat ini tidak ada voucher yang tersedia. - </p> - </div> - </div> - ) : ( + {!loadingVoucher && listVouchers?.length > 0 && ( <h3 className='font-semibold mb-4'> Promo Khusus Untuk {auth?.name} </h3> @@ -932,7 +1036,7 @@ const Checkout = () => { </div> <span className='leading-5'> Jika mengalami kesulitan dalam melakukan pembelian di website - Indoteknik. Hubungi kami disini + Indoteknik. <a href={whatsappUrl()}>Hubungi kami disini</a> </span> </Alert> </div> @@ -1004,7 +1108,12 @@ const Checkout = () => { <div className='p-4 flex flex-col gap-y-4'> {!!products && snakecaseKeys(products).map((item, index) => ( - <CartItem key={index} item={item} editable={false} /> + <CartItem + key={index} + item={item} + editable={false} + selfPicking={selectedExpedisi === '1,32' ? true : false} + /> ))} </div> @@ -1067,7 +1176,7 @@ const Checkout = () => { <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Diskon Voucher</div> <div className='text-danger-500'> - - {currencyFormat(discountVoucher)} + - {currencyFormat(cartCheckout?.discountVoucher)} </div> </div> )} @@ -1083,7 +1192,7 @@ const Checkout = () => { <div className='text-gray_r-11'> Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p> </div> - <div>{currencyFormat(biayaKirim)}</div> + <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</div> </div> {activeVoucherShipping && voucherShippingAmt && ( <div className='flex gap-x-2 justify-between'> @@ -1135,10 +1244,10 @@ const Checkout = () => { className='object-contain object-center h-6 rounded-md' /> </span> - {activeVoucher ? ( + {activeVoucher || activeVoucherShipping ? ( <div className=''> <div className='text-left text-sm text-black font-semibold'> - Potongan Senilai {currencyFormat(discountVoucher)} + Potongan Senilai {currencyFormat(totalDiscountVoucher)} </div> <div className='text-left mt-1 text-green-600 text-xs'> Voucher berhasil digunakan @@ -1295,7 +1404,12 @@ const Checkout = () => { <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'> {!!products && snakecaseKeys(products).map((item, index) => ( - <CartItem key={index} item={item} editable={false} /> + <CartItem + key={index} + item={item} + editable={false} + selfPicking={selectedExpedisi === '1,32' ? true : false} + /> ))} </div> </div> @@ -1362,7 +1476,7 @@ const Checkout = () => { <div className='flex gap-x-2 justify-between'> <div className='text-gray_r-11'>Diskon Voucher</div> <div className='text-danger-500'> - - {currencyFormat(discountVoucher)} + - {currencyFormat(cartCheckout?.discountVoucher)} </div> </div> )} @@ -1379,7 +1493,7 @@ const Checkout = () => { Biaya Kirim <p className='text-xs mt-1'>{etdFix}</p> </div> - <div>{currencyFormat(biayaKirim)}</div> + <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000) }</div> </div> {activeVoucherShipping && voucherShippingAmt && ( <div className='flex gap-x-2 justify-between'> @@ -1431,10 +1545,10 @@ const Checkout = () => { className='object-contain object-center h-6 w-full rounded-md' /> </span> - {activeVoucher ? ( + {activeVoucher || activeVoucherShipping ? ( <div className=''> <div className='text-left text-sm text-black font-semibold'> - Hemat {currencyFormat(discountVoucher)} + Hemat {currencyFormat(totalDiscountVoucher)} </div> <div className='text-left mt-1 text-green-600 text-xs'> Voucher berhasil digunakan diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx index 92245e31..4a67b252 100644 --- a/src/lib/checkout/components/FinishCheckout.jsx +++ b/src/lib/checkout/components/FinishCheckout.jsx @@ -1,27 +1,86 @@ -import Link from '@/core/components/elements/Link/Link' +import Link from 'next/link'; +import Image from '~/components/ui/image'; +import whatsappUrl from '@/core/utils/whatsappUrl'; +import { useEffect, useState } from 'react'; +import odooApi from '@/core/api/odooApi'; +import useDevice from '@/core/hooks/useDevice'; +import useAuth from '@/core/hooks/useAuth'; +import axios from 'axios'; +import { toast } from 'react-hot-toast'; const FinishCheckout = ({ query }) => { + const [data, setData] = useState(); + const [transactionData, setTransactionData] = useState(); + const { isDesktop, isMobile } = useDevice(); + const auth = useAuth(); + + const so_order = query?.order_id?.replaceAll('-', '/'); + useEffect(() => { + const fetchData = async () => { + const fetchedData = await odooApi( + 'GET', + `/api/v1/sale_order_number?sale_number=${so_order}` + ); + setData(fetchedData[0]); + }; + fetchData(); + }, [query]); + + // Kirim email ketika komponen ini dimount atau sesuai kondisi + const sendEmail = async () => { + try { + const send = await axios.post( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${query?.order_id}`, + {} + ); + if (send.status === 200) { + toast.success('Berhasil mengirim rincian pesanan'); + } else { + toast.error('Gagal mengirimkan rincian pesanan'); + } + } catch (error) { + console.error(error); + toast.error('Gagal mengirimkan rincian pesanan'); + } + }; + return ( - <div className='mx-auto container p-4 md:p-0 mt-0 md:mt-10'> - <div className='rounded-xl bg-warning-100 text-center border border-warning-300 w-full md:w-1/2 mx-auto'> - <div className='px-4 py-6 text-warning-900'> - <p className='font-semibold mb-2'>Terima Kasih atas Pembelian Anda</p> - <p className='text-warning-800 mb-4 leading-6'> - Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak - menerima email, anda dapat menghubungi kami disini. - </p> - <p className='mb-2 font-medium'>{query?.order_id?.replaceAll('-', '/')}</p> - <p className='text-caption-2 text-warning-800'>No. Transaksi</p> - </div> + <div className='flex flex-col items-center'> + <Image + src='/images/CHECKOUT-PESANAN.svg' + alt='Checkout Pesanan' + width={isMobile ? 300 : 450} + height={isMobile ? 300 : 450} + /> + <div className='text-title-sm md:text-title-lg text-center font-semibold'> + Terima Kasih atas Pembelian Kamu + </div> + <div className='flex flex-col justify-center items-center text-body-2 md:text-body-1 text-center mt-3 px-24 md:px-36 py-4 border-2 gap-y-2 rounded'> + <p className='font-bold'>No. Transaksi</p> + <p className='mb-2 font-medium text-red-500 text-xl'> + {query?.order_id?.replaceAll('-', '/')} + </p> <Link - href='/my/quotations' - className='bg-warning-400 text-warning-900 rounded-b-xl py-4 block' + href={`/my/quotations/${data?.id}`} + className='btn-solid-red rounded-md text-base' > - Lihat detail pembelian Anda disini + Cek Detail Transaksi </Link> </div> + <div className='mt-2 text-center leading-6 text-base p-4 md:p-0 md:max-w-[700px]'> + Rincian pembelian sudah kami kirimkan ke email kamu. Mohon dicek + kembali. jika tidak menerima email, kamu dapat menghubungi kami{' '} + <a className='text-red-500' href={whatsappUrl()}> + di sini + </a>{' '} + atau{' '} + <span onClick={sendEmail} className='text-red-500 cursor-pointer'> + kirim rincian pesanan ulang + </span> + . + </div> </div> - ) -} + ); +}; -export default FinishCheckout +export default FinishCheckout; diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx index 85afb818..89c46de4 100644 --- a/src/lib/flashSale/components/FlashSale.jsx +++ b/src/lib/flashSale/components/FlashSale.jsx @@ -37,7 +37,7 @@ const FlashSale = () => { </div> <CountDown initialTime={flashSale.duration} /> </div> - + <div className='relative'> <Image src={flashSale.banner} @@ -59,7 +59,6 @@ const FlashSale = () => { ))} </div> )} - </div> ); }; diff --git a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx index 6e379500..c91de2be 100644 --- a/src/lib/flashSale/components/FlashSaleNonDisplay.jsx +++ b/src/lib/flashSale/components/FlashSaleNonDisplay.jsx @@ -1,20 +1,16 @@ import Image from 'next/image'; import { useEffect, useState } from 'react'; - import CountDown from '@/core/components/elements/CountDown/CountDown'; import productSearchApi from '@/lib/product/api/productSearchApi'; import ProductSlider from '@/lib/product/components/ProductSlider'; - import flashSaleApi from '../api/flashSaleApi'; import { FlashSaleSkeleton } from '../skeleton/FlashSaleSkeleton'; import Link from 'next/link'; -import { useRouter } from 'next/router' - +import { useRouter } from 'next/router'; const FlashSaleNonDisplay = () => { const [flashSales, setFlashSales] = useState(null); const [isLoading, setIsLoading] = useState(true); - const router = useRouter() - + const router = useRouter(); useEffect(() => { const loadFlashSales = async () => { const dataFlashSales = await flashSaleApi(); @@ -23,15 +19,12 @@ const FlashSaleNonDisplay = () => { }; loadFlashSales(); }, []); - const handleSubmit = () => { - router.push(`/shop/search?penawaran=${flashSales[0]?.pricelistId}`) - } - + router.push(`/shop/search?penawaran=${flashSales[0]?.pricelistId}`); + }; if (isLoading) { return <FlashSaleSkeleton />; } - return ( flashSales?.length > 0 && ( @@ -42,11 +35,13 @@ const FlashSaleNonDisplay = () => { <div className='font-medium sm:text-h-lg mt-1.5'> Penawaran Terbatas </div> - <div onClick={handleSubmit} className='!text-red-500 font-semibold cursor-pointer'> - Lihat Semua + <div + onClick={handleSubmit} + className='!text-red-500 font-semibold cursor-pointer' + > + Lihat Semua </div> </div> - <div className='relative'> <FlashSaleProduct flashSaleId={flashSale.pricelistId} /> </div> @@ -56,10 +51,8 @@ const FlashSaleNonDisplay = () => { ) ); }; - const FlashSaleProduct = ({ flashSaleId }) => { const [products, setProducts] = useState(null); - useEffect(() => { const loadProducts = async () => { const dataProducts = await productSearchApi({ @@ -70,8 +63,6 @@ const FlashSaleProduct = ({ flashSaleId }) => { }; loadProducts(); }, [flashSaleId]); - return <ProductSlider products={products} />; }; - export default FlashSaleNonDisplay; diff --git a/src/lib/home/api/CategoryPilihanApi.js b/src/lib/home/api/CategoryPilihanApi.js new file mode 100644 index 00000000..8a0b38d3 --- /dev/null +++ b/src/lib/home/api/CategoryPilihanApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi' + +const categoryPilihanApi = async () => { + const dataCategoryPilihan = await odooApi('GET', '/api/v1/lob_homepage') + return dataCategoryPilihan +} + +export default categoryPilihanApi diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js new file mode 100644 index 00000000..2ff4fdfc --- /dev/null +++ b/src/lib/home/api/categoryManagementApi.js @@ -0,0 +1,44 @@ +export const fetchCategoryManagementSolr = async () => { + let sort = 'sort=sequence_i asc'; + try { + const response = await fetch( + `/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20` + ); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + const promotions = await map(data.response.docs); + return promotions; + } catch (error) { + console.error('Error fetching promotion data:', error); + return []; + } +}; + +const map = async (promotions) => { + return promotions.map((promotion) => { + let parsedCategories = promotion.categories.map((category) => { + // Parse string JSON utama + let parsedCategory = JSON.parse(category); + + // Parse setiap elemen di child_frontend_id_i jika ada + if (parsedCategory.child_frontend_id_i) { + parsedCategory.child_frontend_id_i = + parsedCategory.child_frontend_id_i.map((child) => JSON.parse(child)); + } + + return parsedCategory; + }); + let productMapped = { + id: promotion.id, + name: promotion.name_s, + image: promotion.image_s, + sequence: promotion.sequence_i, + numFound: promotion.numFound_i, + categories: parsedCategories, + category_id: promotion.category_id_i, + }; + return productMapped; + }); +}; diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx index 2010503d..f83c36fc 100644 --- a/src/lib/home/components/BannerSection.jsx +++ b/src/lib/home/components/BannerSection.jsx @@ -1,12 +1,12 @@ -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' +import Link from '@/core/components/elements/Link/Link'; +import Image from 'next/image'; -const { useQuery } = require('react-query') -const { default: bannerSectionApi } = require('../api/bannerSectionApi') +const { useQuery } = require('react-query'); +const { default: bannerSectionApi } = require('../api/bannerSectionApi'); const BannerSection = () => { - const fetchBannerSection = async () => await bannerSectionApi() - const bannerSection = useQuery('bannerSection', fetchBannerSection) + const fetchBannerSection = async () => await bannerSectionApi(); + const bannerSection = useQuery('bannerSection', fetchBannerSection); return ( bannerSection.data && @@ -17,7 +17,7 @@ const BannerSection = () => { <Image width={1024} height={512} - quality={100} + quality={85} src={banner.image} alt={banner.name} className='h-auto w-full rounded' @@ -26,7 +26,7 @@ const BannerSection = () => { ))} </div> ) - ) -} + ); +}; -export default BannerSection +export default BannerSection; diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx new file mode 100644 index 00000000..49a9a93f --- /dev/null +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -0,0 +1,182 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; +import NextImage from 'next/image'; +import Link from 'next/link'; +import { createSlug } from '@/core/utils/slug'; +import { Skeleton } from '@chakra-ui/react'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; +import { Pagination } from 'swiper'; + +const CategoryDynamic = () => { + const [categoryManagement, setCategoryManagement] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const loadBrand = useCallback(async () => { + setIsLoading(true); + const items = await fetchCategoryManagementSolr(); + + setIsLoading(false); + setCategoryManagement(items); + }, []); + + useEffect(() => { + loadBrand(); + }, [loadBrand]); + + // const [categoryData, setCategoryData] = useState({}); + // const [subCategoryData, setSubCategoryData] = useState({}); + + // useEffect(() => { + // const fetchCategoryData = async () => { + // if (categoryManagement && categoryManagement.data) { + // const updatedCategoryData = {}; + // const updatedSubCategoryData = {}; + + // for (const category of categoryManagement.data) { + // const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`); + + // updatedCategoryData[category.categoryIdI] = countLevel1?.numFound; + + // for (const subCategory of countLevel1?.children) { + // updatedSubCategoryData[subCategory.id] = subCategory?.numFound; + // } + // } + + // setCategoryData(updatedCategoryData); + // setSubCategoryData(updatedSubCategoryData); + // } + // }; + + // fetchCategoryData(); + // }, [categoryManagement.isLoading]); + + const swiperBanner = { + modules: [Pagination], + classNames: 'mySwiper', + slidesPerView: 3, + spaceBetween: 10, + pagination: { + dynamicBullets: true, + clickable: true, + }, + }; + + return ( + <div> + {categoryManagement && + categoryManagement?.map((category) => { + // const countLevel1 = categoryData[category.categoryIdI] || 0; + return ( + <Skeleton key={category.id} isLoaded={!isLoading}> + <div key={category.id}> + <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'> + <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'> + {category.name} + </h1> + {/* <Skeleton isLoaded={countLevel1 != 0}> + <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p> + </Skeleton> */} + <Link + href={createSlug( + '/shop/category/', + category?.name, + category?.category_id + )} + className='!text-red-500 font-semibold' + > + Lihat Semua + </Link> + </div> + + {/* Swiper for SubCategories */} + <Swiper {...swiperBanner}> + {category.categories.map((subCategory) => { + // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; + + return ( + <SwiperSlide key={subCategory.id}> + <div className='border rounded justify-start items-start '> + <div className='p-3'> + <div className='flex flex-row border rounded mb-2 justify-start items-center'> + <NextImage + src={ + subCategory.image + ? subCategory.image + : '/images/noimage.jpeg' + } + alt={subCategory.name} + width={90} + height={30} + className='object-fit p-4' + /> + <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'> + <h2 className='font-semibold text-lg mr-2'> + {subCategory?.name} + </h2> + {/* <Skeleton isLoaded={countLevel2 != 0}> + <p className={`text-gray_r-10 text-sm`}> + {countLevel2} Produk tersedia + </p> + </Skeleton> */} + <Link + href={createSlug( + '/shop/category/', + subCategory?.name, + subCategory?.id_level_2 + )} + className='!text-red-500 font-semibold' + > + Lihat Semua + </Link> + </div> + </div> + <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'> + {subCategory.child_frontend_id_i.map( + (childCategory) => ( + <div key={childCategory.id} className=''> + <Link + href={createSlug( + '/shop/category/', + childCategory?.name, + childCategory?.id_level_3 + )} + className='flex flex-row gap-2 border rounded group hover:border-red-500' + > + <NextImage + src={ + childCategory.image + ? childCategory.image + : '/images/noimage.jpeg' + } + alt={childCategory.name} + className='p-2 ml-1' + width={40} + height={40} + /> + <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'> + <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'> + {childCategory.name} + </h3> + </div> + </Link> + </div> + ) + )} + </div> + </div> + </div> + </SwiperSlide> + ); + })} + </Swiper> + </div> + </Skeleton> + ); + })} + </div> + ); +}; + +export default CategoryDynamic; diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx new file mode 100644 index 00000000..4a8f13cf --- /dev/null +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -0,0 +1,150 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import NextImage from 'next/image'; +import Link from 'next/link'; +import { createSlug } from '@/core/utils/slug'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; + +const CategoryDynamicMobile = () => { + const [selectedCategory, setSelectedCategory] = useState({}); + const [categoryManagement, setCategoryManagement] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + const loadBrand = useCallback(async () => { + setIsLoading(true); + const items = await fetchCategoryManagementSolr(); + + setIsLoading(false); + setCategoryManagement(items); + }, []); + + useEffect(() => { + loadBrand(); + }, [loadBrand]); + + useEffect(() => { + const loadPromo = async () => { + try { + if (categoryManagement?.length > 0) { + const initialSelections = categoryManagement.reduce( + (acc, category) => { + if (category.categories.length > 0) { + acc[category.id] = category.categories[0].id_level_2; + } + return acc; + }, + {} + ); + setSelectedCategory(initialSelections); + } + } catch (loadError) { + // console.error("Error loading promo items:", loadError); + } + }; + + loadPromo(); + }, [categoryManagement]); + + const handleCategoryLevel2Click = (categoryIdI, idLevel2) => { + setSelectedCategory((prev) => ({ + ...prev, + [categoryIdI]: idLevel2, + })); + }; + + return ( + <div className='p-4'> + {categoryManagement && + categoryManagement?.map((category) => ( + <div key={category.id}> + <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'> + <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'> + {category.name} + </h1> + <Link + href={createSlug( + '/shop/category/', + category?.name, + category?.category_id + )} + className='!text-red-500 font-semibold text-sm' + > + Lihat Semua + </Link> + </div> + <Swiper slidesPerView={2.3} spaceBetween={10}> + {category.categories.map((index) => ( + <SwiperSlide key={index.id}> + <div + onClick={() => + handleCategoryLevel2Click(category.id, index?.id_level_2) + } + className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${ + selectedCategory[category.id] === index?.id_level_2 + ? 'bg-red-50 border-red-500 text-red-500' + : 'border-gray-200 text-gray-900' + }`} + > + <div className='p-1 flex justify-start items-center'> + <div className='flex flex-row justify-center items-center'> + <NextImage + src={ + index.image ? index.image : '/images/noimage.jpeg' + } + alt={index.name} + width={30} + height={30} + className='' + /> + <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'> + <h2 className='font-semibold text-[10px] line-clamp-1'> + {index?.name} + </h2> + </div> + </div> + </div> + </div> + </SwiperSlide> + ))} + </Swiper> + <div className='p-3 mt-2 border'> + <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'> + {category.categories.map( + (index) => + selectedCategory[category.id] === index?.id_level_2 && + index?.child_frontend_id_i.map((x) => ( + <div key={x.id}> + <Link + href={createSlug( + '/shop/category/', + x?.name, + x?.id_level_3 + )} + className='flex flex-row gap-1 border rounded group hover:border-red-500' + > + <NextImage + src={x.image ? x.image : '/images/noimage.jpeg'} + alt={x.name} + width={40} + height={40} + className='p-2' + /> + <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'> + <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'> + {x?.name} + </h3> + </div> + </Link> + </div> + )) + )} + </div> + </div> + </div> + ))} + </div> + ); +}; + +export default CategoryDynamicMobile; diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx index 71428e27..9f436dac 100644 --- a/src/lib/home/components/CategoryHomeId.jsx +++ b/src/lib/home/components/CategoryHomeId.jsx @@ -1,13 +1,15 @@ -import { LazyLoadComponent } from 'react-lazy-load-image-component' -import useCategoryHomeId from '../hooks/useCategoryHomeId' -import CategoryHome from './CategoryHome' +import { LazyLoadComponent } from 'react-lazy-load-image-component'; +import useCategoryHomeId from '../hooks/useCategoryHomeId'; +import CategoryHome from './CategoryHome'; const CategoryHomeId = () => { - const { categoryHomeIds } = useCategoryHomeId() + const { categoryHomeIds } = useCategoryHomeId(); return ( <div> - <div className='font-semibold sm:text-h-lg mb-6 px-4 sm:px-0'>Kategori Pilihan</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg mb-6 px-4 sm:px-0'> + Kategori Pilihan + </h1> <div className='flex flex-col gap-y-10'> {categoryHomeIds.data?.map((id) => ( <LazyLoadComponent key={id}> @@ -16,7 +18,7 @@ const CategoryHomeId = () => { ))} </div> </div> - ) -} + ); +}; -export default CategoryHomeId +export default CategoryHomeId; diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx new file mode 100644 index 00000000..2e5ca721 --- /dev/null +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -0,0 +1,168 @@ +import Image from 'next/image'; +import useCategoryHome from '../hooks/useCategoryHome'; +import Link from '@/core/components/elements/Link/Link'; +import { createSlug } from '@/core/utils/slug'; +import { useEffect, useState } from 'react'; +import { bannerApi } from '../../../api/bannerApi'; +const { useQuery } = require('react-query'); +import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; +import useCategoryPilihan from '../hooks/useCategoryPilihan'; +import useDevice from '@/core/hooks/useDevice'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; + +const CategoryPilihan = ({ id, categories }) => { + const { isDesktop, isMobile } = useDevice(); + const { categoryPilihan } = useCategoryPilihan(); + const heroBanner = useQuery( + 'categoryPilihan', + bannerApi({ type: 'banner-category-list' }) + ); + return ( + categoryPilihan.length > 0 && ( + <section> + {isDesktop && ( + <div> + <div className='flex flex-row items-center mb-4'> + <div className='font-semibold sm:text-h-lg mr-2'> + LOB Kategori Pilihan + </div> + <p className='text-gray_r-10 text-sm'> + 200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia! + </p> + </div> + {heroBanner.data && heroBanner.data?.length > 0 && ( + <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'> + <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}> + <Image + width={1260} + height={170} + quality={85} + src={heroBanner.data[0].image} + alt={heroBanner.data[0].name} + className='h-full object-cover w-full' + /> + </Link> + </div> + )} + <div className='group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 '> + {categoryPilihan?.data?.map((category) => ( + <div + key={category.id} + className='KartuInti h-48 w-60 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group' + > + <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '> + <div className='group/edit flex items-center justify-end h-48 w-60 flex-col group-hover/item:visible'> + <div className=' h-36 flex justify-end items-end'> + <Image + className='group-hover:scale-105 transition-transform duration-300 ' + src={ + category?.image + ? category?.image + : '/images/noimage.jpeg' + } + width={120} + height={120} + alt={category?.name} + /> + </div> + <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center'> + {category?.industries} + </h2> + </div> + </div> + <div className='KartuA relative inset-0 flex h-36 w-60 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '> + <Link + href={createSlug( + '/shop/lob/', + category?.industries, + category?.id + )} + className='category-mega-box__parent text-white rounded-lg' + > + Lihat semua + </Link> + </div> + </div> + ))} + </div> + </div> + )} + {isMobile && ( + <div className='p-4'> + <div className='flex flex-row items-center mb-4'> + <div className='font-semibold sm:text-h-md mr-2'> + LOB Kategori Pilihan + </div> + {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */} + </div> + <div className='flex'> + {heroBanner.data && heroBanner.data?.length > 0 && ( + <div className=' object-fill '> + <Link + key={heroBanner.data[0].id} + href={heroBanner.data[0].url} + > + <Image + width={439} + height={150} + quality={85} + src={heroBanner.data[0].image} + alt={heroBanner.data[0].name} + className='object-cover' + /> + </Link> + </div> + )} + </div> + <Swiper slidesPerView={2.1} spaceBetween={10}> + {categoryPilihan?.data?.map((category) => ( + <SwiperSlide key={category.id}> + <div + key={category.id} + className='KartuInti mt-2 h-48 w-48 max-w-sm lg:max-w-full flex flex-col border-[1px] border-gray-200 relative group' + > + <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '> + <div className='group/edit flex items-center justify-end h-48 w-48 flex-col group-hover/item:visible'> + <div className=' h-36 flex justify-end items-end'> + <Image + className='group-hover:scale-105 transition-transform duration-300 ' + src={ + category?.image + ? category?.image + : '/images/noimage.jpeg' + } + width={120} + height={120} + alt={category?.name} + /> + </div> + <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center'> + {category?.industries} + </h2> + </div> + </div> + <div className='KartuA relative inset-0 flex h-36 w-48 items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '> + <Link + href={createSlug( + '/shop/lob/', + category?.industries, + category?.id + )} + className='category-mega-box__parent text-white rounded-lg' + > + Lihat semua + </Link> + </div> + </div> + </SwiperSlide> + ))} + </Swiper> + </div> + )} + </section> + ) + ); +}; + +export default CategoryPilihan; diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx index 6b64a444..eefced60 100644 --- a/src/lib/home/components/PreferredBrand.jsx +++ b/src/lib/home/components/PreferredBrand.jsx @@ -1,4 +1,5 @@ import { Swiper, SwiperSlide } from 'swiper/react' +import { Navigation, Pagination, Autoplay } from 'swiper'; import { useCallback, useEffect, useState } from 'react' import usePreferredBrand from '../hooks/usePreferredBrand' import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton' @@ -8,7 +9,7 @@ import Link from '@/core/components/elements/Link/Link' import axios from 'axios' const PreferredBrand = () => { - let query = 'level_s' + let query = '' let params = 'prioritas' const [isLoading, setIsLoading] = useState(true) const [startWith, setStartWith] = useState(null) @@ -17,7 +18,7 @@ const PreferredBrand = () => { const loadBrand = useCallback(async () => { setIsLoading(true) const name = startWith ? `${startWith}*` : '' - const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=${name}`) + const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?rows=20`) setIsLoading(false) setManufactures((manufactures) => [...result.data]) @@ -34,38 +35,51 @@ const PreferredBrand = () => { useEffect(() => { loadBrand() - }, [loadBrand]) + }, []) - const { preferredBrands } = usePreferredBrand(query) + // const { preferredBrands } = usePreferredBrand(query) const { isMobile, isDesktop } = useDevice() - + const swiperBanner = { + modules:[Navigation, Pagination, Autoplay], + autoplay: { + delay: 4000, + disableOnInteraction: false + }, + loop: true, + className: 'h-[70px] md:h-[100px] w-full', + slidesPerView: isMobile ? 4 : 8, + spaceBetween: isMobile ? 12 : 0, + pagination: { + dynamicBullets: true, + dynamicMainBullets: isMobile ? 6 : 8, + clickable: true, + } + } + const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : [] return ( <div className='px-4 sm:px-0'> <div className='flex justify-between items-center mb-4'> - <div className='font-semibold sm:text-h-lg'>Brand Pilihan</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg'><Link href='/shop/brands' className='!text-black font-semibold'>Brand Pilihan</Link></h1> {isDesktop && ( <Link href='/shop/brands' className='!text-red-500 font-semibold'> Lihat Semua </Link> )} - {isMobile && ( - <Link href='/shop/brands' className='!text-red-500 font-semibold sm:text-h-sm'> - Lihat Semua - </Link> + </div> + <div className=''> + {manufactures.isLoading && <PreferredBrandSkeleton />} + {!manufactures.isLoading && ( + <Swiper {...swiperBanner}> + {preferredBrandsData.map((manufacture) => ( + <SwiperSlide key={manufacture.id}> + <BrandCard brand={manufacture} /> + </SwiperSlide> + ))} + </Swiper> )} </div> - {manufactures.isLoading && <PreferredBrandSkeleton />} - {!manufactures.isLoading && ( - <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 24} freeMode> - {manufactures.map((manufacture) => ( - <SwiperSlide key={manufacture.id}> - <BrandCard brand={manufacture} /> - </SwiperSlide> - ))} - </Swiper> - )} </div> ) } -export default PreferredBrand +export default PreferredBrand
\ No newline at end of file diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index 99258d94..ae06bd4d 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -1,70 +1,83 @@ -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' +import Link from '@/core/components/elements/Link/Link'; +import Image from 'next/image'; import { bannerApi } from '@/api/bannerApi'; -import useDevice from '@/core/hooks/useDevice' +import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; -const { useQuery } = require('react-query') +import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton'; +const { useQuery } = require('react-query'); const BannerSection = () => { - const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' })); - const { isMobile, isDesktop } = useDevice() + const promotionProgram = useQuery( + 'promotionProgram', + bannerApi({ type: 'banner-promotion' }) + ); + const { isMobile, isDesktop } = useDevice(); + + if (promotionProgram.isLoading) { + return <BannerPromoSkeleton />; + } return ( <div className='px-4 sm:px-0'> <div className='flex justify-between items-center mb-4 '> - <div className='font-semibold sm:text-h-lg'>Promo Tersedia</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg'> + {' '} + <Link href='/shop/promo' className='!text-black font-semibold'> + Promo Tersedia + </Link> + </h1> {isDesktop && ( <Link href='/shop/promo' className='!text-red-500 font-semibold'> - Lihat Semua - </Link> + Lihat Semua + </Link> )} {isMobile && ( - <Link href='/shop/promo' className='!text-red-500 font-semibold sm:text-h-sm'> - Lihat Semua - </Link> - )} - </div> - {isDesktop && (promotionProgram.data && - promotionProgram.data?.length > 0 && ( - <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'> - {promotionProgram.data?.map((banner) => ( - <Link key={banner.id} href={banner.url}> - <Image - width={439} - height={150} - quality={100} - src={banner.image} - alt={banner.name} - className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out' - /> + <Link + href='/shop/promo' + className='!text-red-500 font-semibold sm:text-h-sm' + > + Lihat Semua </Link> - ))} + )} </div> - - ))} + {isDesktop && + promotionProgram.data && + promotionProgram.data?.length > 0 && ( + <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'> + {promotionProgram.data?.map((banner) => ( + <Link key={banner.id} href={banner.url}> + <Image + width={439} + height={150} + quality={85} + src={banner.image} + alt={banner.name} + className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out' + /> + </Link> + ))} + </div> + )} -{isMobile && ( - - <Swiper slidesPerView={1.1} spaceBetween={8} freeMode> - {promotionProgram.data?.map((banner) => ( - <SwiperSlide key={banner.id}> - <Link key={banner.id} href={banner.url}> - <Image - width={439} - height={150} - quality={100} - src={banner.image} - alt={banner.name} - className='h-auto w-full rounded ' - /> - </Link> - </SwiperSlide> - ))} - </Swiper> - - )} + {isMobile && ( + <Swiper slidesPerView={1.1} spaceBetween={8} freeMode> + {promotionProgram.data?.map((banner) => ( + <SwiperSlide key={banner.id}> + <Link key={banner.id} href={banner.url}> + <Image + width={439} + height={150} + quality={85} + src={banner.image} + alt={banner.name} + className='h-auto w-full rounded ' + /> + </Link> + </SwiperSlide> + ))} + </Swiper> + )} </div> - - ) -} + ); +}; -export default BannerSection +export default BannerSection; diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index b8799d7d..5b16915d 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -1,5 +1,5 @@ -import Image from 'next/image' -import Link from '@/core/components/elements/Link/Link' +import Image from 'next/image'; +import Link from '@/core/components/elements/Link/Link'; const ServiceList = () => { return ( @@ -14,14 +14,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/ONE-STOP-SOLUTIONS.svg' alt='' className='h-20 w-20 rounded' /> </div> <div className=''> - <h1 className='text-gray-900 font-semibold text-base'>One Stop Solution</h1> + <h1 className='text-gray-900 font-semibold text-base'> + One Stop Solution + </h1> <p className='text-xs md:text-sm text-gray-500'> Temukan Solusi Lengkap Anda dalam Satu Tempat. </p> @@ -37,14 +39,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/WARRANTY.svg' alt='' className='h-20 w-20 rounded' /> </div> <div> - <h1 className='text-gray-900 font-semibold text-base'>Garansi Resmi</h1> + <h1 className='text-gray-900 font-semibold text-base'> + Garansi Resmi + </h1> <p className='text-xs md:text-sm text-gray-500'> Garansi Keaslian Barang dan Jaminan Purna Jual. </p> @@ -60,14 +64,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/DUE-PAYMENT.svg' alt='' className='h-20 w-20 rounded' /> </div> <div> - <h1 className='text-gray-900 font-semibold text-base'>Pembayaran Tempo</h1> + <h1 className='text-gray-900 font-semibold text-base'> + Pembayaran Tempo + </h1> <p className='text-xs md:text-sm text-gray-500'> Lebih mudah mengatur pembelian dengan pembayaran tempo. </p> @@ -83,14 +89,16 @@ const ServiceList = () => { <Image width={24} height={24} - quality={100} + quality={85} src='/images/icon_service/TAX.svg' alt='' className='h-20 w-20 rounded' /> </div> <div> - <h1 className='text-gray-900 font-semibold text-base'>Faktur Pajak</h1> + <h1 className='text-gray-900 font-semibold text-base'> + Faktur Pajak + </h1> <p className='text-xs md:text-sm text-gray-500'> Dapat Faktur pajak untuk setiap transaksi dengan indoteknik.com </p> @@ -99,7 +107,7 @@ const ServiceList = () => { </div> </div> </div> - ) -} + ); +}; -export default ServiceList +export default ServiceList; diff --git a/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx new file mode 100644 index 00000000..c5f39f19 --- /dev/null +++ b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx @@ -0,0 +1,16 @@ +import useDevice from '@/core/hooks/useDevice' +import Skeleton from 'react-loading-skeleton' + +const BannerPromoSkeleton = () => { + const { isDesktop } = useDevice() + + return ( + <div className='grid grid-cols-1 md:grid-cols-3 gap-x-3'> + {Array.from({ length: isDesktop ? 3 : 1.2 }, (_, index) => ( + <Skeleton count={1} height={isDesktop ? 60 : 36} key={index} /> + ))} + </div> + ) +} + +export default BannerPromoSkeleton diff --git a/src/lib/home/hooks/useCategoryPilihan.js b/src/lib/home/hooks/useCategoryPilihan.js new file mode 100644 index 00000000..12a86f7e --- /dev/null +++ b/src/lib/home/hooks/useCategoryPilihan.js @@ -0,0 +1,13 @@ +import categoryPilihanApi from '../api/CategoryPilihanApi' +import { useQuery } from 'react-query' + +const useCategoryPilihan = () => { + const fetchCategoryPilihan = async () => await categoryPilihanApi() + const { isLoading, data } = useQuery('categoryPilihanApi', fetchCategoryPilihan) + + return { + categoryPilihan: { data, isLoading } + } +} + +export default useCategoryPilihan
\ No newline at end of file diff --git a/src/lib/lob/components/Breadcrumb.jsx b/src/lib/lob/components/Breadcrumb.jsx new file mode 100644 index 00000000..5722fd39 --- /dev/null +++ b/src/lib/lob/components/Breadcrumb.jsx @@ -0,0 +1,55 @@ +import odooApi from '@/core/api/odooApi' +import { createSlug } from '@/core/utils/slug' +import { + Breadcrumb as ChakraBreadcrumb, + BreadcrumbItem, + BreadcrumbLink, + Skeleton +} from '@chakra-ui/react' +import Link from 'next/link' +import React from 'react' +import { useQuery } from 'react-query' + +/** + * Render a breadcrumb component. + * + * @param {object} categoryId - The ID of the category. + * @return {JSX.Element} The breadcrumb component. + */ +const Breadcrumb = ({ categoryId }) => { + const breadcrumbs = useQuery( + `lob-breadcrumbs/${categoryId}`, + async () => await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`) + ) + return ( + <div className='container mx-auto py-4 md:py-6'> + <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'> + <ChakraBreadcrumb> + <BreadcrumbItem> + <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'> + Home + </BreadcrumbLink> + </BreadcrumbItem> + + {breadcrumbs?.data?.map((category, index) => ( + <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}> + {index === breadcrumbs.data.length - 1 ? ( + <BreadcrumbLink className='whitespace-nowrap'>{category.industries}</BreadcrumbLink> + ) : ( + <BreadcrumbLink + as={Link} + href={createSlug('/shop/lob/', category.industries, category.id)} + className='!text-danger-500 whitespace-nowrap' + > + {category.industries} + </BreadcrumbLink> + )} + </BreadcrumbItem> + ))} + </ChakraBreadcrumb> + </Skeleton> + </div> + ) +} + +export default Breadcrumb diff --git a/src/lib/product/api/productSearchApi.js b/src/lib/product/api/productSearchApi.js index 1626b7b7..8ff8e57d 100644 --- a/src/lib/product/api/productSearchApi.js +++ b/src/lib/product/api/productSearchApi.js @@ -1,7 +1,7 @@ import _ from 'lodash-contrib' import axios from 'axios' -const productSearchApi = async ({ query, operation = 'AND' }) => { +const productSearchApi = async ({ query, operation = 'OR' }) => { const dataProductSearch = await axios( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=${operation}` ) diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js index ecd6724a..51cc17fa 100644 --- a/src/lib/product/api/productSimilarApi.js +++ b/src/lib/product/api/productSimilarApi.js @@ -19,7 +19,7 @@ const productSimilarApi = async ({ query, source }) => { } } const dataProductSimilar = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR&priceFrom=1` + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR&priceFrom=1&source=similar` ) if (dataflashSale) { dataProductSimilar.data.response.products = [ diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx new file mode 100644 index 00000000..a287fa78 --- /dev/null +++ b/src/lib/product/components/CategorySection.jsx @@ -0,0 +1,105 @@ +import Image from "next/image"; +import Link from 'next/link'; +import { createSlug } from '@/core/utils/slug'; +import useDevice from '@/core/hooks/useDevice'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import { useQuery } from 'react-query'; +import { useRouter } from 'next/router'; +import { + ChevronDownIcon, + ChevronUpIcon, // Import ChevronUpIcon for toggling + DocumentCheckIcon, + HeartIcon, +} from '@heroicons/react/24/outline'; +import { useState } from 'react'; // Import useState +import { getIdFromSlug } from '@/core/utils/slug' + +const CategorySection = ({ categories }) => { + const { isDesktop, isMobile } = useDevice(); + const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility + + const handleToggleCategories = () => { + setIsOpenCategory(!isOpenCategory); + }; + + + const displayedCategories = isOpenCategory ? categories : categories.slice(0, 10); + + return ( + <section> + {isDesktop && ( + <div className="group/item grid grid-cols-5 gap-y-2 gap-x-2 w-full h-full col-span-2 "> + {displayedCategories.map((category) => ( + <Link href={createSlug('/shop/category/', category?.name, category?.id)} key={category?.id} passHref> + <div className="group transition-colors duration-300 "> + <div className="KartuInti h-12 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:border-red-400 rounded relative "> + <div className="flex items-center justify-start h-full px-1 flex-row "> + <Image className="h-full p-1" src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'} width={56} height={48} alt={category?.name} /> + <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">{category?.name}</h2> + </div> + </div> + </div> + </Link> + ))} + </div> + )} + {isDesktop && categories.length > 10 && ( + <div className="w-full flex justify-center mt-4"> + <button + onClick={handleToggleCategories} + className="flex justify-end mt-4 text-red-500 font-bold px-4 py-2 rounded" + > + {isOpenCategory ? 'Sembunyikan' : 'Lihat semua'} + {isOpenCategory ? ( + <ChevronUpIcon className="ml-auto w-5 font-bold" /> + ) : ( + <ChevronDownIcon className="ml-auto w-5 font-bold" /> + )} + </button> + </div> + )} + + {isMobile && ( + <div className="py-4"> + <Swiper slidesPerView={2.3} spaceBetween={10}> + {categories.map((category) => ( + <SwiperSlide key={category?.id}> + <Link href={createSlug('/shop/category/', category?.name, category?.id)} passHref> + <div className="group transition-colors duration-300"> + <div className="KartuInti min-h-16 max-h-16 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:bg-red-200 group-hover:border-red-400 rounded relative"> + <div className="flex items-center justify-center h-full px-1 flex-row"> + <Image + src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'} + width={56} + height={48} + alt={category?.name} + className="p-3" + /> + <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start"> + {category?.name} + </h2> + </div> + </div> + </div> + </Link> + </SwiperSlide> + ))} + </Swiper> + {/* {categories.length > 10 && ( + <div className="w-full flex justify-end mt-4"> + <button + onClick={handleToggleCategories} + className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded" + > + {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'} + </button> + </div> + )} */} + </div> + )} + </section> + ) +} + +export default CategorySection diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx new file mode 100644 index 00000000..5cd467e9 --- /dev/null +++ b/src/lib/product/components/LobSectionCategory.jsx @@ -0,0 +1,80 @@ +import Image from "next/image"; +import Link from 'next/link'; +import { createSlug } from '@/core/utils/slug'; +import useDevice from '@/core/hooks/useDevice'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import { useQuery } from 'react-query'; +import { useRouter } from 'next/router'; +import { + ChevronDownIcon, + ChevronUpIcon, // Import ChevronUpIcon for toggling + DocumentCheckIcon, + HeartIcon, +} from '@heroicons/react/24/outline'; +import { useState } from 'react'; // Import useState +import { getIdFromSlug } from '@/core/utils/slug' + +const LobSectionCategory = ({ categories }) => { + const { isDesktop, isMobile } = useDevice(); + const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility + + const handleToggleCategories = () => { + setIsOpenCategory(!isOpenCategory); + }; + + const displayedCategories = categories[0]?.categoryIds; + return ( + <section> + {isDesktop && ( + <div className="group/item grid grid-flow-col gap-y-2 gap-x-4 w-full h-full"> + {displayedCategories?.map((category) => ( + <Link + href={createSlug('/shop/category/', category?.name, category?.id)} + key={category?.id} + passHref + className="block hover:scale-105 transition-transform duration-300 bg-cover bg-center h-[144px]" + style={{ + backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`, + }} + > + </Link> + ))} + </div> + )} + + {isMobile && ( + <div className="py-4"> + <Swiper slidesPerView={1.2} spaceBetween={10}> + {displayedCategories?.map((category) => ( + <SwiperSlide key={category?.id}> + <Link + href={createSlug('/shop/category/', category?.name, category?.id)} + key={category?.id} + passHref + className="block bg-cover bg-center h-[144px]" + style={{ + backgroundImage: `url('${category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'}')`, + }} + > + </Link> + </SwiperSlide> + ))} + </Swiper> + {categories.length > 10 && ( + <div className="w-full flex justify-end mt-4"> + <button + onClick={handleToggleCategories} + className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded" + > + {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'} + </button> + </div> + )} + </div> + )} + </section> + ) +} + +export default LobSectionCategory diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index c5e82c82..d3b50302 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -17,12 +17,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const [discount, setDiscount] = useState(0); let voucherPastiHemat = 0; - - if (product?.voucherPastiHemat ? product?.voucherPastiHemat.length : voucherPastiHemat > 0) { - const stringVoucher = product?.voucherPastiHemat[0]; - const validJsonString = stringVoucher.replace(/'/g, '"'); - voucherPastiHemat = JSON.parse(validJsonString); - } + voucherPastiHemat = product?.newVoucherPastiHemat[0]; const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, @@ -48,18 +43,18 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const hitungDiscountVoucher = () => { let countDiscount = 0; - if (voucherPastiHemat.discount_type === 'percentage') { + if (voucherPastiHemat.discountType === 'percentage') { countDiscount = product?.lowestPrice.priceDiscount * - (voucherPastiHemat.discount_amount / 100); + (voucherPastiHemat.discountAmount / 100); if ( - voucherPastiHemat.max_discount > 0 && - countDiscount > voucherPastiHemat.max_discount + voucherPastiHemat.maxDiscount > 0 && + countDiscount > voucherPastiHemat.maxDiscount ) { - countDiscount = voucherPastiHemat.max_discount; + countDiscount = voucherPastiHemat.maxDiscount; } } else { - countDiscount = voucherPastiHemat.discount_amount; + countDiscount = voucherPastiHemat.discountAmount; } setDiscount(countDiscount); @@ -128,7 +123,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { width={13} height={5} /> - <span className='text-white text-[9px] md:text-[10px] text-nowrap font-semibold'> + <span className='text-white text-[9px] md:text-[10px] font-semibold'> {product?.flashSale?.tag != 'false' || product?.flashSale?.tag ? product?.flashSale?.tag @@ -146,13 +141,26 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )} </Link> <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'> - {product?.manufacture?.name ? ( - <Link href={URL.manufacture} className='mb-1'> - {product.manufacture.name} - </Link> - ) : ( - <div>-</div> - )} + <div className='flex justify-between '> + {product?.manufacture?.name ? ( + <Link href={URL.manufacture} className='mb-1 mt-1'> + {product.manufacture.name} + </Link> + ) : ( + <div>-</div> + )} + {product?.isInBu && ( + <Link href='/panduan-pick-up-service' className='group'> + <Image + src='/images/PICKUP-NOW.png' + className='group-hover:scale-105 transition-transform duration-200' + alt='pickup now' + width={90} + height={12} + /> + </Link> + )} + </div> <Link href={URL.product} className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`} @@ -218,11 +226,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { <div className='flex w-full items-center gap-x-1 '> {product?.stockTotal > 0 && ( - <div className='badge-solid-red text-nowrap'>Ready Stock</div> + <div className='badge-solid-red'>Ready Stock</div> )} {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */} {product?.qtySold > 0 && ( - <div className='text-gray_r-9 text-[11px] text-nowrap truncate'> + <div className='text-gray_r-9 text-[11px]'> {sellingProductFormat(product?.qtySold) + ' Terjual'} </div> )} @@ -292,9 +300,18 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </div> )} {product?.manufacture?.name ? ( - <Link href={URL.manufacture} className='mb-1'> - {product.manufacture.name} - </Link> + <div className='flex justify-between'> + <Link href={URL.manufacture} className='mb-1'> + {product.manufacture.name} + </Link> + {/* {product?.is_in_bu && ( + <div className='bg-red-500 rounded'> + <span className='p-[6px] text-xs text-white'> + Click & Pickup + </span> + </div> + )} */} + </div> ) : ( <div>-</div> )} diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx index dd9ec8f4..947550b7 100644 --- a/src/lib/product/components/ProductFilter.jsx +++ b/src/lib/product/components/ProductFilter.jsx @@ -1,64 +1,71 @@ -import BottomPopup from '@/core/components/elements/Popup/BottomPopup' -import { useRouter } from 'next/router' -import { useState } from 'react' -import _ from 'lodash' -import { toQuery } from 'lodash-contrib' -import { Checkbox } from '@chakra-ui/react' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import { useRouter } from 'next/router'; +import { useState } from 'react'; +import _ from 'lodash'; +import { toQuery } from 'lodash-contrib'; +import { Checkbox } from '@chakra-ui/react'; const orderOptions = [ { value: 'price-asc', label: 'Harga Terendah' }, { value: 'price-desc', label: 'Harga Tertinggi' }, { value: 'popular', label: 'Populer' }, - { value: 'stock', label: 'Ready Stock' } -] + { value: 'stock', label: 'Ready Stock' }, +]; -const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBrand = null }) => { - const router = useRouter() - const { query } = router - const [order, setOrder] = useState(query?.orderBy || 'popular') - const [brand, setBrand] = useState(query?.brand) - const [category, setCategory] = useState(query?.category) - const [priceFrom, setPriceFrom] = useState(query?.priceFrom) - const [priceTo, setPriceTo] = useState(query?.priceTo) +const ProductFilter = ({ + active, + close, + brands, + categories, + prefixUrl, + defaultBrand = null, +}) => { + const router = useRouter(); + const { query } = router; + const [order, setOrder] = useState(query?.orderBy || 'popular'); + const [brand, setBrand] = useState(query?.brand); + const [category, setCategory] = useState(query?.category); + const [priceFrom, setPriceFrom] = useState(query?.priceFrom); + const [priceTo, setPriceTo] = useState(query?.priceTo); - const [stock, setStock] = useState(query?.stock) + const [stock, setStock] = useState(query?.stock); - const [activeRange, setActiveRange] = useState(null) + const [activeRange, setActiveRange] = useState(null); const priceRange = [ { priceFrom: 100000, - priceTo: 200000 + priceTo: 200000, }, { priceFrom: 200000, - priceTo: 300000 + priceTo: 300000, }, { priceFrom: 300000, - priceTo: 400000 + priceTo: 400000, }, { priceFrom: 400000, - priceTo: 500000 - } - ] + priceTo: 500000, + }, + ]; const handlePriceFromChange = async (priceFromr, priceTor, index) => { - await setPriceFrom(priceFromr) - await setPriceTo(priceTor) - setActiveRange(index) - } + await setPriceFrom(priceFromr); + await setPriceTo(priceTor); + setActiveRange(index); + }; const handleReadyStockChange = (event) => { - const value = event.target.value - const isChecked = event.target.checked + const value = event.target.value; + const isChecked = event.target.checked; if (isChecked) { - setStock(value) + setStock(value); } else { - setStock(null) + setStock(null); } - } + }; const handleSubmit = () => { let params = { @@ -69,21 +76,21 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr category, priceFrom, priceTo, - stock: stock - } - params = _.pickBy(params, _.identity) - params = toQuery(params) - router.push(`${prefixUrl}?${params}`) - } + stock: stock, + }; + params = _.pickBy(params, _.identity); + params = toQuery(params); + router.push(`${prefixUrl}?${params}`); + }; const formatCurrency = (value) => { if (value >= 1000) { - const thousands = Math.floor(value / 1000) // Menghitung ribuan - return `Rp${thousands}k` + const thousands = Math.floor(value / 1000); // Menghitung ribuan + return `Rp${thousands}k`; } else { - return `Rp${value}` + return `Rp${value}`; } - } + }; return ( <BottomPopup active={active} close={close} title='Filter Produk'> @@ -102,7 +109,10 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr <option value=''>Pilih Brand...</option> {brands.map((brand, index) => ( <option value={brand.brand} key={index}> - {brand.brand} <span className='text-sm text-gray-200'>({brand.qty})</span> + {brand.brand}{' '} + <span className='text-sm text-gray-200'> + ({brand.qty}) + </span> </option> ))} </> @@ -126,7 +136,10 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr <option value=''>Pilih Kategori...</option> {categories.map((category, index) => ( <option value={category.name} key={index}> - {category.name} <span className='text-sm text-gray-200'>({category.qty})</span> + {category.name}{' '} + <span className='text-sm text-gray-200'> + ({category.qty}) + </span> </option> ))} </> @@ -142,7 +155,9 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr <button key={orderOption.value} className={`btn-light px-3 font-normal flex-shrink-0 ${ - order == orderOption.value ? 'bg-warning-500' : 'bg-transparent' + order == orderOption.value + ? 'bg-warning-500' + : 'bg-transparent' }`} onClick={() => setOrder(orderOption.value)} > @@ -174,13 +189,16 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr {priceRange.map((price, i) => ( <button key={i} - onClick={() => handlePriceFromChange(price.priceFrom, price.priceTo, i)} + onClick={() => + handlePriceFromChange(price.priceFrom, price.priceTo, i) + } className={`w-full border ${ i === activeRange ? 'border-red-600' : 'border-gray-400' } py-2 p-3 rounded-full text-sm whitespace-nowrap`} > - {formatCurrency(price.priceFrom)} - {formatCurrency(price.priceTo)} + {formatCurrency(price.priceFrom)} -{' '} + {formatCurrency(price.priceTo)} </button> ))} </div> @@ -198,12 +216,16 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr </Checkbox> </div> </div> */} - <button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}> + <button + type='button' + className='btn-solid-red w-full mt-2' + onClick={handleSubmit} + > Terapkan Filter </button> </div> </BottomPopup> - ) -} + ); +}; -export default ProductFilter +export default ProductFilter; diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index 2bdf962a..d2ecb4d9 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -1,7 +1,7 @@ -import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' -import _ from 'lodash' -import { toQuery } from 'lodash-contrib' +import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; +import _ from 'lodash'; +import { toQuery } from 'lodash-contrib'; import { Accordion, AccordionButton, @@ -15,81 +15,90 @@ import { InputGroup, InputLeftAddon, Stack, - VStack -} from '@chakra-ui/react' -import Image from '@/core/components/elements/Image/Image' -import { formatCurrency } from '@/core/utils/formatValue' + VStack, +} from '@chakra-ui/react'; +import Image from '@/core/components/elements/Image/Image'; +import { formatCurrency } from '@/core/utils/formatValue'; -const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { - - const router = useRouter() - const { query } = router - const [order, setOrder] = useState(query?.orderBy) - const [brandValues, setBrand] = useState(query?.brand?.split(',') || []) - const [categoryValues, setCategory] = useState(query?.category?.split(',') || []) - const [priceFrom, setPriceFrom] = useState(query?.priceFrom) - const [priceTo, setPriceTo] = useState(query?.priceTo) - const [stock, setStock] = useState(query?.stock) - const [activeRange, setActiveRange] = useState(null) - const [activeIndeces, setActiveIndeces] = useState([]) +const ProductFilterDesktop = ({ + brands, + categories, + prefixUrl, + defaultBrand = null, +}) => { + const router = useRouter(); + const { query } = router; + const [order, setOrder] = useState(query?.orderBy); + const [brandValues, setBrand] = useState(query?.brand?.split(',') || []); + const [categoryValues, setCategory] = useState( + query?.category?.split(',') || [] + ); + const [priceFrom, setPriceFrom] = useState(query?.priceFrom); + const [priceTo, setPriceTo] = useState(query?.priceTo); + const [stock, setStock] = useState(query?.stock); + const [activeRange, setActiveRange] = useState(null); + const [activeIndeces, setActiveIndeces] = useState([]); const priceRange = [ { priceFrom: 100000, - priceTo: 200000 + priceTo: 200000, }, { priceFrom: 200000, - priceTo: 300000 + priceTo: 300000, }, { priceFrom: 300000, - priceTo: 400000 + priceTo: 400000, }, { priceFrom: 400000, - priceTo: 500000 - } - ] + priceTo: 500000, + }, + ]; const indexRange = priceRange.findIndex((range) => { - return range.priceFrom === parseInt(priceFrom) && range.priceTo == parseInt(priceTo) - }) + return ( + range.priceFrom === parseInt(priceFrom) && + range.priceTo == parseInt(priceTo) + ); + }); const handleCategoriesChange = (event) => { - const value = event.target.value - const isChecked = event.target.checked + const value = event.target.value; + const isChecked = event.target.checked; if (isChecked) { - setCategory([...categoryValues, value]) + setCategory([...categoryValues, value]); } else { - setCategory(categoryValues.filter((val) => val !== value)) + setCategory(categoryValues.filter((val) => val !== value)); } - } + }; const handleBrandsChange = (event) => { - const value = event.target.value - const isChecked = event.target.checked + const value = event.target.value; + const isChecked = event.target.checked; if (isChecked) { - setBrand([...brandValues, value]) + setBrand([...brandValues, value]); } else { - setBrand(brandValues.filter((val) => val !== value)) + setBrand(brandValues.filter((val) => val !== value)); } - } + }; const handleReadyStockChange = (event) => { - const value = event.target.value - const isChecked = event.target.checked + const value = event.target.value; + const isChecked = event.target.checked; if (isChecked) { - setStock(value) + setStock(value); } else { - setStock(null) + setStock(null); } - } + }; const handlePriceFromChange = async (priceFromr, priceTor, index) => { - await setPriceFrom(priceFromr) - await setPriceTo(priceTor) - setActiveRange(index) - } + await setPriceFrom(priceFromr); + await setPriceTo(priceTor); + setActiveRange(index); + }; const handleSubmit = () => { let params = { @@ -100,21 +109,25 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu category: categoryValues.join(','), priceFrom, priceTo, - stock: stock - } - params = _.pickBy(params, _.identity) - params = toQuery(params) + stock: stock, + }; + params = _.pickBy(params, _.identity); + params = toQuery(params); - const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug; + const slug = Array.isArray(router.query.slug) + ? router.query.slug[0] + : router.query.slug; if (slug) { - router.push(`${prefixUrl}/${slug}?${params}`) + if (prefixUrl.includes('category') || prefixUrl.includes('lob')) { + router.push(`${prefixUrl}?${params}`); + } else { + router.push(`${prefixUrl}/${slug}?${params}`); + } } else { - router.push(`${prefixUrl}?${params}`) + router.push(`${prefixUrl}?${params}`); } - } - - + }; /*const handleIndexAccordion = async () => { if (brandValues) { @@ -132,9 +145,8 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu }*/ useEffect(() => { - setActiveRange(indexRange) - }, []) - + setActiveRange(indexRange); + }, []); return ( <> @@ -161,13 +173,17 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu > <div className='flex items-center gap-2'> <span>{brand.brand} </span> - <span className='text-sm text-gray-600'>({brand.qty})</span> + <span className='text-sm text-gray-600'> + ({brand.qty}) + </span> </div> </Checkbox> </div> )) ) : ( - <div className='flex items-center gap-2'>Brands tidak tersedia</div> + <div className='flex items-center gap-2'> + Brands tidak tersedia + </div> )} </Stack> </AccordionPanel> @@ -195,13 +211,17 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu > <div className='flex items-center gap-2'> <span>{category.name} </span> - <span className='text-sm text-gray-600'>({category.qty})</span> + <span className='text-sm text-gray-600'> + ({category.qty}) + </span> </div> </Checkbox> </div> )) ) : ( - <div className='flex items-center gap-2'>Kategori tidak tersedia</div> + <div className='flex items-center gap-2'> + Kategori tidak tersedia + </div> )} </Stack> </AccordionPanel> @@ -239,13 +259,16 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu {priceRange.map((price, i) => ( <button key={i} - onClick={() => handlePriceFromChange(price.priceFrom, price.priceTo, i)} + onClick={() => + handlePriceFromChange(price.priceFrom, price.priceTo, i) + } className={`w-full border ${ i === activeRange ? 'border-red-600' : 'border-gray-400' } py-2 p-3 rounded-full text-sm whitespace-nowrap`} > - {formatCurrency(price.priceFrom)} - {formatCurrency(price.priceTo)} + {formatCurrency(price.priceFrom)} -{' '} + {formatCurrency(price.priceTo)} </button> ))} </div> @@ -278,7 +301,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu Terapkan </Button> </> - ) -} + ); +}; -export default ProductFilterDesktop +export default ProductFilterDesktop; diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 7c1b0a40..f7b044aa 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -26,9 +26,9 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'; import SideBanner from '~/modules/side-banner'; import FooterBanner from '~/modules/footer-banner'; -// import CategorySection from './CategorySection'; -// import LobSectionCategory from './LobSectionCategory'; -import { getIdFromSlug } from '@/core/utils/slug' +import CategorySection from './CategorySection'; +import LobSectionCategory from './LobSectionCategory'; +import { getIdFromSlug } from '@/core/utils/slug'; import { data } from 'autoprefixer'; const ProductSearch = ({ @@ -41,59 +41,62 @@ const ProductSearch = ({ const { page = 1 } = query; const [q, setQ] = useState(query?.q || '*'); const [search, setSearch] = useState(query?.q || '*'); + const [limit, setLimit] = useState(router.query?.limit || 30); + const [orderBy, setOrderBy] = useState(router.query?.orderBy); const [finalQuery, setFinalQuery] = useState({}); const [queryFinal, setQueryFinal] = useState({}); - const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) - const [dataCategoriesLob, setDataCategoriesLob] = useState([]) - const categoryId = getIdFromSlug(prefixUrl) - const [data, setData] = useState([]) + const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]); + const [dataCategoriesLob, setDataCategoriesLob] = useState([]); + const categoryId = getIdFromSlug(prefixUrl); + const [data, setData] = useState([]); const [dataLob, setDataLob] = useState([]); - const [limit, setLimit] = useState(query?.limit || 30); - const [orderBy, setOrderBy] = useState(router.query?.orderBy); if (defaultBrand) query.brand = defaultBrand.toLowerCase(); - const dataIdCategories = [] - - useEffect(() => { - const checkIfPenawaran = async () => { - if (router.asPath.includes('penawaran')) { - query = { - ...query, - fq: [ - `-flashsale_id_i:${router.query.penawaran}`, - `flashsale_price_f:[1 TO *]` - ], - orderBy: 'flashsale-discount-desc' - }; - console.log('setOrder') - setOrderBy('flashsale-discount-desc') - console.log('orderBy',orderBy) - } - }; - checkIfPenawaran(); - }, [router.query, prefixUrl, q, finalQuery, queryFinal]); - + const dataIdCategories = []; useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const loadProduct = async () => { - const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`); + const getCategoriesId = await odooApi( + 'GET', + `/api/v1/category/numFound?parent_id=${categoryId}` + ); if (getCategoriesId) { setDataCategoriesProduct(getCategoriesId); } }; loadProduct(); - }else if(prefixUrl.includes('lob')){ + } else if (prefixUrl.includes('lob')) { const loadProduct = async () => { - const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`); - + const lobData = await odooApi( + 'GET', + `/api/v1/lob_homepage/${categoryId}/category_id` + ); + if (lobData) { setDataLob(lobData); } }; loadProduct(); - } }, [categoryId]); - + + useEffect(() => { + const checkIfPenawaran = async () => { + if (router.asPath.includes('penawaran')) { + query = { + ...query, + fq: [ + `-flashsale_id_i:${router.query.penawaran}`, + `flashsale_price_f:[1 TO *]`, + ], + orderBy: 'flashsale-discount-desc', + }; + setFinalQuery(query); + setOrderBy('flashsale-discount-desc'); + } + }; + checkIfPenawaran(); + }, [router.query]); + const collectIds = (category) => { const ids = []; function recurse(cat) { @@ -107,47 +110,41 @@ const ProductSearch = ({ recurse(category); return ids; }; - useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const ids = collectIds(dataCategoriesProduct); const newQuery = { fq: `category_id_ids:(${ids.join(' OR ')})`, - page : router.query.page? router.query.page : 1, - brand : router.query.brand? router.query.brand : '', - category : router.query.category? router.query.category : '', - priceFrom : router.query.priceFrom? router.query.priceFrom : '', - priceTo : router.query.priceTo? router.query.priceTo : '', - limit : router.query.limit? router.query.limit : '', - orderBy : router.query.orderBy? router.query.orderBy : '' + page: router.query.page ? router.query.page : 1, + brand: router.query.brand ? router.query.brand : '', + category: router.query.category ? router.query.category : '', + priceFrom: router.query.priceFrom ? router.query.priceFrom : '', + priceTo: router.query.priceTo ? router.query.priceTo : '', + limit: router.query.limit ? router.query.limit : '', + orderBy: router.query.orderBy ? router.query.orderBy : '', }; setFinalQuery(newQuery); - } else if (prefixUrl.includes('lob')){ - + } else if (prefixUrl.includes('lob')) { const fetchCategoryData = async () => { if (dataLob[0]?.categoryIds) { - for (const cate of dataLob[0].categoryIds) { - - dataIdCategories.push(cate.childId) + dataIdCategories.push(cate.childId); } - - + const mergedArray = dataIdCategories.flat(); - + const newQuery = { fq: `category_id_ids:(${mergedArray.join(' OR ')})`, - category : router.query.category? router.query.category : '', - page : router.query.page? router.query.page : 1, - brand : router.query.brand? router.query.brand : '', - priceFrom : router.query.priceFrom? router.query.priceFrom : '', - priceTo : router.query.priceTo? router.query.priceTo : '', - limit : router.query.limit? router.query.limit : '', - orderBy : router.query.orderBy? router.query.orderBy : '' + category: router.query.category ? router.query.category : '', + page: router.query.page ? router.query.page : 1, + brand: router.query.brand ? router.query.brand : '', + priceFrom: router.query.priceFrom ? router.query.priceFrom : '', + priceTo: router.query.priceTo ? router.query.priceTo : '', + limit: router.query.limit ? router.query.limit : '', + orderBy: router.query.orderBy ? router.query.orderBy : '', }; - + setFinalQuery(newQuery); - } }; fetchCategoryData(); @@ -158,11 +155,9 @@ const ProductSearch = ({ if (prefixUrl.includes('category') || prefixUrl.includes('lob')) { setQueryFinal({ ...finalQuery, q, limit, orderBy }); } else { - console.log("data query",orderBy) setQueryFinal({ ...query, q, limit, orderBy }); } - }, [prefixUrl,dataCategoriesProduct, query, finalQuery, orderBy]); - + }, [prefixUrl, dataCategoriesProduct, query, finalQuery]); const { productSearch } = useProductSearch({ query: queryFinal, @@ -185,7 +180,7 @@ const ProductSearch = ({ const [categoryValues, setCategory] = useState( router.query?.category?.split(',') || router.query?.category?.split(',') ); - + const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null); const [priceTo, setPriceTo] = useState(router.query?.priceTo || null); @@ -193,8 +188,8 @@ const ProductSearch = ({ const productStart = productSearch.data?.responseHeader.params.start; const productRows = limit; const productFound = productSearch.data?.response.numFound; - const [dataCategories, setDataCategories] = useState([]) - + const [dataCategories, setDataCategories] = useState([]); + useEffect(() => { if (productFound == 0 && query.q && !spellings) { searchSpellApi({ query: query.q }).then((response) => { @@ -224,7 +219,7 @@ const ProductSearch = ({ }); } }, [productFound, query, spellings]); - let id = [] + let id = []; useEffect(() => { const checkIfBrand = async () => { const brand = await axios( @@ -241,21 +236,21 @@ const ProductSearch = ({ checkIfBrand(); } }, [q]); - + useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const loadCategories = async () => { - const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) - if(getCategories){ - setDataCategories(getCategories) - } - } - loadCategories() + const getCategories = await odooApi( + 'GET', + `/api/v1/category/child?parent_id=${categoryId}` + ); + if (getCategories) { + setDataCategories(getCategories); + } + }; + loadCategories(); } - }, []) - - - + }, []); const brands = []; for ( @@ -271,7 +266,6 @@ const ProductSearch = ({ brands.push({ brand, qty }); } } - const categories = []; for ( @@ -286,7 +280,6 @@ const ProductSearch = ({ categories.push({ name, qty }); } } - const orderOptions = [ { value: '', label: 'Pilih Filter' }, @@ -406,6 +399,7 @@ const ProductSearch = ({ }; const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; + return ( <> <MobileView> @@ -466,8 +460,8 @@ const ProductSearch = ({ SpellingComponent )} </div> - {/* <LobSectionCategory categories={dataLob}/> - <CategorySection categories={dataCategories}/> */} + <LobSectionCategory categories={dataLob} /> + <CategorySection categories={dataCategories} /> {productFound > 0 && ( <div className='flex items-center gap-x-2 mb-5 justify-between'> @@ -559,8 +553,8 @@ const ProductSearch = ({ </div> <div className='w-9/12 pl-6'> - {/* <LobSectionCategory categories={dataLob}/> - <CategorySection categories={dataCategories}/> */} + <LobSectionCategory categories={dataLob} /> + <CategorySection categories={dataCategories} /> {bannerPromotionHeader && bannerPromotionHeader?.image && ( <div className='mb-3'> <Image @@ -599,7 +593,7 @@ const ProductSearch = ({ /> <div className='flex justify-between items-center mb-5'> <div className='leading-6 text-gray_r-11'> - {!spellings ? ( + {spellings?.length < 1 || !spellings ? ( <> Menampilkan {pageCount > 1 ? ( diff --git a/src/lib/promo/api/productSearchApi.js b/src/lib/promo/api/productSearchApi.js new file mode 100644 index 00000000..2f792fd4 --- /dev/null +++ b/src/lib/promo/api/productSearchApi.js @@ -0,0 +1,11 @@ +import _ from 'lodash-contrib' +import axios from 'axios' + +const productSearchApi = async ({ query, operation = 'AND' }) => { + const dataProductSearch = await axios( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/promo?${query}&operation=${operation}` + ) + return dataProductSearch.data +} + +export default productSearchApi diff --git a/src/lib/promo/hooks/usePromotionSearch.js b/src/lib/promo/hooks/usePromotionSearch.js new file mode 100644 index 00000000..1a194646 --- /dev/null +++ b/src/lib/promo/hooks/usePromotionSearch.js @@ -0,0 +1,15 @@ +import { useQuery } from 'react-query' +import productSearchApi from '../api/productSearchApi' +import _ from 'lodash-contrib' + +const usePromotionSearch = ({ query, operation }) => { + const queryString = _.toQuery(query) + const fetchProductSearch = async () => await productSearchApi({ query: queryString , operation : operation}) + const productSearch = useQuery(`promoSearch-${queryString}`, fetchProductSearch) + + return { + productSearch + } +} + +export default usePromotionSearch diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx index df234dc2..cf0ad41f 100644 --- a/src/lib/quotation/components/Quotation.jsx +++ b/src/lib/quotation/components/Quotation.jsx @@ -9,6 +9,7 @@ import _ from 'lodash'; import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'; import currencyFormat from '@/core/utils/currencyFormat'; import { toast } from 'react-hot-toast'; +import { useProductCartContext } from '@/contexts/ProductCartContext'; // import checkoutApi from '@/lib/checkout/api/checkoutApi' import { useRouter } from 'next/router'; import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'; @@ -43,6 +44,7 @@ const Quotation = () => { getProductsCheckout() ); + const { setRefreshCart } = useProductCartContext(); const SELF_PICKUP_ID = 32; const [products, setProducts] = useState(null); @@ -67,18 +69,18 @@ const Quotation = () => { const [selectedExpedisiService, setselectedExpedisiService] = useState(null); const [etd, setEtd] = useState(null); const [etdFix, setEtdFix] = useState(null); - + const [isApproval, setIsApproval] = useState(false); - + const expedisiValidation = useRef(null); - + const [selectedAddress, setSelectedAddress] = useState({ shipping: null, invoicing: null, }); - + const [addresses, setAddresses] = useState(null); - + const [note_websiteText, setselectedNote_websiteText] = useState(''); useEffect(() => { @@ -97,6 +99,9 @@ const Quotation = () => { if (!addresses) return; const matchAddress = (key) => { + if (key === 'invoicing') { + key = 'invoice'; + } const addressToMatch = getItemAddress(key); const foundAddress = addresses.filter( (address) => address.id == addressToMatch @@ -269,7 +274,7 @@ const Quotation = () => { toast.error('Maaf, Note wajib dimasukkan.'); return; } - + setIsLoading(true); const productOrder = products.map((product) => ({ product_id: product.id, @@ -284,18 +289,18 @@ const Quotation = () => { carrier_id: selectedCarrierId, estimated_arrival_days: splitDuration(etd), delivery_service_type: selectedExpedisiService, - note_website : note_websiteText, + note_website: note_websiteText, }; - + const isSuccess = await checkoutApi({ data }); - ; setIsLoading(false); if (isSuccess?.id) { for (const product of products) deleteItemCart({ productId: product.id }); router.push(`/shop/quotation/finish?id=${isSuccess.id}`); + setRefreshCart(true); return; } - + toast.error('Gagal melakukan transaksi, terjadi kesalahan internal'); }; @@ -452,25 +457,26 @@ const Quotation = () => { </Link>{' '} yang berlaku </p> - <hr className='my-4 border-gray_r-6' /> - - <div className='flex gap-x-2 justify-start mb-4'> - <div className=''>Note</div> - {isApproval && ( - <div className='text-caption-1 text-red-500 items-center flex'>*harus diisi</div> - )} - </div> - <div className='text-caption-2 text-gray_r-11'> - <textarea - rows="4" - cols="50" - className={`w-full p-1 rounded border border-gray_r-6`} - onChange={(e) => setselectedNote_websiteText(e.target.value)} - /> - </div> + <hr className='my-4 border-gray_r-6' /> + + <div className='flex gap-x-2 justify-start mb-4'> + <div className=''>Note</div> + {isApproval && ( + <div className='text-caption-1 text-red-500 items-center flex'> + *harus diisi + </div> + )} + </div> + <div className='text-caption-2 text-gray_r-11'> + <textarea + rows='4' + cols='50' + className={`w-full p-1 rounded border border-gray_r-6`} + onChange={(e) => setselectedNote_websiteText(e.target.value)} + /> + </div> </div> - - + <Divider /> <div className='flex gap-x-3 p-4'> @@ -603,27 +609,31 @@ const Quotation = () => { yang berlaku </p> - <div> - <hr className='my-4 border-gray_r-6' /> - - <div className='flex gap-x-1 flex-col mb-4'> - <div className='flex flex-row gap-x-1'> - <div className=''>Note</div> - {isApproval && ( - <div className='text-caption-1 text-red-500 items-center flex'>*harus diisi</div> - )} - </div> - <div className='text-caption-2 text-gray_r-11'> - <textarea - rows="4" - cols="50" - className={`w-full p-1 rounded border border-gray_r-6`} - onChange={(e) => setselectedNote_websiteText(e.target.value)} - /> - </div> + <div> + <hr className='my-4 border-gray_r-6' /> + + <div className='flex gap-x-1 flex-col mb-4'> + <div className='flex flex-row gap-x-1'> + <div className=''>Note</div> + {isApproval && ( + <div className='text-caption-1 text-red-500 items-center flex'> + *harus diisi + </div> + )} + </div> + <div className='text-caption-2 text-gray_r-11'> + <textarea + rows='4' + cols='50' + className={`w-full p-1 rounded border border-gray_r-6`} + onChange={(e) => + setselectedNote_websiteText(e.target.value) + } + /> </div> </div> - + </div> + <hr className='my-4 border-gray_r-6' /> <button diff --git a/src/lib/quotation/components/Quotationheader.jsx b/src/lib/quotation/components/Quotationheader.jsx new file mode 100644 index 00000000..d94a55de --- /dev/null +++ b/src/lib/quotation/components/Quotationheader.jsx @@ -0,0 +1,322 @@ +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { createSlug } from '@/core/utils/slug'; +import useAuth from '@/core/hooks/useAuth'; +import { useRouter } from 'next/router'; +import odooApi from '@/core/api/odooApi'; +import { useProductCartContext } from '@/contexts/ProductCartContext'; +import Image from '@/core/components/elements/Image/Image'; +import whatsappUrl from '@/core/utils/whatsappUrl'; +import { AnimatePresence, motion } from 'framer-motion'; +import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'; +import useTransactions from '../../transaction/hooks/useTransactions'; +import currencyFormat from '@/core/utils/currencyFormat'; +const { DocumentCheckIcon, PhotoIcon } = require('@heroicons/react/24/outline'); +const { default: Link } = require('next/link'); + +const Quotationheader = (quotationCount) => { + const auth = useAuth(); + const query = { + context: 'quotation', + site: auth?.webRole === null && auth?.site ? auth.site : null, + }; + + const router = useRouter(); + const [subTotal, setSubTotal] = useState(null); + const [buttonLoading, SetButtonTerapkan] = useState(false); + const itemLoading = [1, 2, 3]; + const [countQuotation, setCountQuotation] = useState(null); + const { + productCart, + setProductCart, + refreshCart, + setRefreshCart, + isLoading, + setIsloading, + productQuotation, + setProductQuotation, + } = useProductCartContext(); + + const [isHovered, setIsHovered] = useState(false); + const [isTop, setIsTop] = useState(true); + + const qotation = useMemo(() => { + return productQuotation || []; + }, [productQuotation]); + + const handleMouseEnter = () => { + setIsHovered(true); + getCart(); + }; + + const handleMouseLeave = () => { + setIsHovered(false); + }; + + const getCart = () => { + if (!productQuotation && auth) { + refreshCartf(); + } + }; + let { transactions } = useTransactions({ query }); + + const refreshCartf = useCallback(async () => { + setIsloading(true); + let pendingTransactions = transactions?.data?.saleOrders.filter( + (transaction) => transaction.status === 'draft' + ); + setProductQuotation(pendingTransactions); + setCountQuotation( + pendingTransactions?.length + ? pendingTransactions?.length + : pendingTransactions?.length + ); + setIsloading(false); + }, [setProductQuotation, setIsloading]); + + useEffect(() => { + if (!qotation) return; + + let calculateTotalDiscountAmount = 0; + for (const product of qotation) { + // if (qotation.quantity == '') continue + calculateTotalDiscountAmount += product.amountUntaxed; + } + let subTotal = calculateTotalDiscountAmount; + setSubTotal(subTotal); + }, [qotation]); + + useEffect(() => { + if (refreshCart) { + refreshCartf(); + } + setRefreshCart(false); + }, [refreshCartf, setRefreshCart]); + + useEffect(() => { + setCountQuotation(quotationCount.quotationCount); + setProductQuotation(quotationCount.data); + }, [quotationCount]); + + useEffect(() => { + const handleScroll = () => { + setIsTop(window.scrollY === 0); + }; + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + const handleCheckout = async () => { + SetButtonTerapkan(true); + let checkoutAll = await odooApi( + 'POST', + `/api/v1/user/${auth.id}/cart/select-all` + ); + router.push('/my/quotations'); + }; + + return ( + <div className='relative group'> + <div> + <Link + href='/my/quotations' + target='_blank' + rel='noreferrer' + className='flex items-center gap-x-2 !text-gray_r-12/80' + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > + <div className={`relative ${countQuotation > 0 && 'mr-2'}`}> + <DocumentCheckIcon className='w-7' /> + {countQuotation > 0 && ( + <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> + {countQuotation} + </span> + )} + </div> + <span> + List + <br /> + Quotation + </span> + </Link> + </div> + <AnimatePresence> + {isHovered && ( + <> + <motion.div + initial={{ opacity: 0 }} + animate={{ opacity: 1, top: isTop ? 230 : 155 }} + exit={{ opacity: 0 }} + transition={{ duration: 0.15, top: { duration: 0.3 } }} + className={`fixed left-0 w-full h-full bg-black/50 z-10`} + /> + <motion.div + initial={{ opacity: 0 }} + animate={{ opacity: 1, transition: { duration: 0.2 } }} + exit={{ opacity: 0, transition: { duration: 0.3 } }} + className='absolute z-10 left-0 w-96' + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > + <motion.div + initial={{ height: 0 }} + animate={{ height: 'auto' }} + exit={{ height: 0 }} + className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden' + > + <div className='p-2 flex justify-between items-center'> + <h5 className='text-base font-semibold leading-none'> + Daftar Quotation + </h5> + </div> + <hr className='mt-3 mb-3 border border-gray-100' /> + <div className='flow-root max-h-[250px] overflow-y-auto'> + {!auth && ( + <div className='justify-center p-4'> + <p className='text-gray-500 text-center '> + Silahkan{' '} + <Link + href='/login' + className='text-red-600 underline leading-6' + > + Login + </Link>{' '} + Untuk Melihat Daftar Quotation Anda + </p> + </div> + )} + {isLoading && + itemLoading.map((item) => ( + <div + key={item} + role='status' + className='max-w-sm animate-pulse' + > + <div className='flex items-center space-x-4 mb- 2'> + <div className='flex-shrink-0'> + <PhotoIcon className='h-16 w-16 text-gray-500' /> + </div> + <div className='flex-1 min-w-0'> + <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div> + <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div> + <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> + </div> + </div> + </div> + ))} + {auth && qotation.length === 0 && !isLoading && ( + <div className='justify-center p-4'> + <p className='text-gray-500 text-center '> + Tidak Ada Quotation + </p> + </div> + )} + {auth && qotation.length > 0 && !isLoading && ( + <> + <ul + role='list' + className='divide-y divide-gray-200 dark:divide-gray-700' + > + {qotation && + qotation?.map((product, index) => ( + <> + <li className='py-1 sm:py-2'> + <div className='flex justify-between border p-2 flex-col gap-y-2 hover:border-red-500'> + <Link + href={`/my/quotations/${product?.id}`} + className='hover:border-red-500' + > + <div className='flex justify-between mb-2'> + <div className='flex flex-row items-center'> + <p className='tanggal text-xs opacity-80 mr-[2px]'> + Sales :{' '} + </p> + <p className='tanggal text-xs text-red-500 font-semibold'> + {product.sales} + </p> + </div> + <div className='flex flex-row items-center'> + <p className='text-xs opacity-80 mr-[2px]'> + Status : + </p> + <p className='badge-red h-fit text-xs whitespace-nowrap'> + Pending Quotation + </p> + </div> + </div> + <div className='flex justify-between mb-2'> + <div className='flex flex-col items-start'> + <p className=' text-xs opacity-80 mr-[2px]'> + No. Transaksi + </p> + <p className=' text-sm text-red-500 font-semibold'> + {' '} + {product.name} + </p> + </div> + <div className='flex flex-col items-end'> + <p className='text-xs opacity-80 mr-[2px]'> + No. Purchase Order + </p> + <p className='font-semibold text-sm text-red-500'> + {' '} + {product.purchaseOrderName + ? product.purchaseOrderName + : '-'} + </p> + </div> + </div> + {/* <div className='my-0.5 h-0.5 bg-gray-200'></div> */} + <hr className='mt-3 mb-3 border border-gray-100' /> + <div className='bagian bawah flex justify-between mt-2'> + <p className='font-semibold text-sm'> + Total + </p> + <p className='font-semibold text-sm'> + {currencyFormat(product.amountUntaxed)} + </p> + </div> + </Link> + </div> + </li> + </> + ))} + </ul> + <hr /> + </> + )} + </div> + {auth && qotation.length > 0 && !isLoading && ( + <> + <div className='mt-3 ml-1'> + <span className='text-gray-400 text-caption-2'> + Subtotal Sebelum PPN :{' '} + </span> + <span className='font-semibold text-red-600'> + {currencyFormat(subTotal)} + </span> + </div> + <div className='mt-5 mb-2'> + <button + type='button' + className='btn-solid-red rounded-lg w-full' + onClick={handleCheckout} + disabled={buttonLoading} + > + {buttonLoading ? 'Loading...' : 'Lihat Semua'} + </button> + </div> + </> + )} + </motion.div> + </motion.div> + </> + )} + </AnimatePresence> + </div> + ); +}; + +export default Quotationheader; diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx index 7cad52fb..a6e697f0 100644 --- a/src/lib/review/components/CustomerReviews.jsx +++ b/src/lib/review/components/CustomerReviews.jsx @@ -1,18 +1,23 @@ -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import Image from 'next/image' -import { Swiper, SwiperSlide } from 'swiper/react' -import { Autoplay } from 'swiper' +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import Image from 'next/image'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Autoplay } from 'swiper'; -const { useQuery } = require('react-query') -const { getCustomerReviews } = require('../api/customerReviewsApi') +const { useQuery } = require('react-query'); +const { getCustomerReviews } = require('../api/customerReviewsApi'); const CustomerReviews = () => { - const { data: customerReviews } = useQuery('customerReviews', getCustomerReviews) + const { data: customerReviews } = useQuery( + 'customerReviews', + getCustomerReviews + ); return ( <div className='px-4 sm:px-0'> - <div className='font-semibold sm:text-h-lg mb-4'>Ulasan Konsumen Kami</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg mb-4'> + Ulasan Konsumen Kami + </h1> <DesktopView> <Swiper slidesPerView={3.2} spaceBetween={16} {...swiperProps}> @@ -36,17 +41,17 @@ const CustomerReviews = () => { </Swiper> </MobileView> </div> - ) -} + ); +}; const swiperProps = { autoplay: { delay: 6000, - disableOnInteraction: false + disableOnInteraction: false, }, loop: true, - modules: [Autoplay] -} + modules: [Autoplay], +}; const Card = ({ customerReview }) => ( <div className='bg-gray-200 rounded-md px-5 py-6 shadow-md shadow-gray-500/20 h-full'> @@ -67,6 +72,6 @@ const Card = ({ customerReview }) => ( dangerouslySetInnerHTML={{ __html: customerReview.ulasan }} /> </div> -) +); -export default CustomerReviews +export default CustomerReviews; diff --git a/src/lib/tracking-order/api/trackingOrder.js b/src/lib/tracking-order/api/trackingOrder.js new file mode 100644 index 00000000..cc48c40c --- /dev/null +++ b/src/lib/tracking-order/api/trackingOrder.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi"; + +export const trackingOrder = async ({query}) => { + const params = new URLSearchParams(query).toString(); + const list = await odooApi('GET', `/api/v1/tracking_order?${params}`) + + return list; +} diff --git a/src/lib/tracking-order/component/TrackingOrder.jsx b/src/lib/tracking-order/component/TrackingOrder.jsx new file mode 100644 index 00000000..8a7b2579 --- /dev/null +++ b/src/lib/tracking-order/component/TrackingOrder.jsx @@ -0,0 +1,161 @@ +import { yupResolver } from '@hookform/resolvers/yup'; +import React, { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import * as Yup from 'yup'; +import Manifest from '@/lib/treckingAwb/component/Manifest'; +import { trackingOrder } from '../api/trackingOrder'; +import { useQuery } from 'react-query'; +import { Spinner } from '@chakra-ui/react'; +import { Search } from 'lucide-react'; +import Link from 'next/link'; + +const TrackingOrder = () => { + const [idAWB, setIdAWB] = useState(null); + const [inputQuery, setInputQuery] = useState(null); + const [buttonClick, setButtonClick] = useState(false); + const [apiError, setApiError] = useState(null); // State to store API error message + + const closePopup = () => { + setIdAWB(null); + setButtonClick(false); + setInputQuery(null); + setApiError(null); // Reset error message on close + }; + + const { + register, + handleSubmit, + formState: { errors }, + control, + reset, + } = useForm({ + resolver: yupResolver(validationSchema), + defaultValues, + }); + + const query = { + email: inputQuery?.email, + so: inputQuery?.id, + }; + + const { + data: tracking, + isLoading, + isError, + error, + } = useQuery(['tracking', query], () => trackingOrder({ query: query }), { + enabled: !!query.email && !!query.so, + onSuccess: (data) => { + if (buttonClick) { + if (data?.code === 403 || data?.code === 400 || data?.code === 404) { + setApiError(data?.description); + } else if (data?.pickings?.length > 0) { + setIdAWB(data.pickings[0]?.id); + } else { + setApiError('No pickings data available'); + } + setButtonClick(false); + setInputQuery(null); + } + }, + }); + + const onSubmitHandler = async (values) => { + setInputQuery(values); + setButtonClick(true); + }; + + return ( + <div className='container mx-auto flex py-10 flex-col'> + <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'> + Tracking Order + </h1> + <div className='flex justify-start items-start'> + <p className='text-base w-full'> + {`Untuk melacak pesanan Anda, masukkan Nomor Transaksi di kotak bawah ini dan masukkan Email login anda lalu tekan tombol "Lacak". Nomor Transaksi ini dapat Anda lihat dalam menu `} + <Link href='/my/transactions' className='text-red-500'> + Daftar Transaksi + </Link> + {`. Jika mengalami kesulitan `} + <Link + href='https://wa.me/6281717181922' + target='_blank' + rel='noreferrer' + className='text-red-500' + > + hubungi kami + </Link> + {`.`} + </p> + </div> + <div> + <form + onSubmit={handleSubmit(onSubmitHandler)} + className='flex mt-4 flex-row w-full ' + > + <div className='w-[90%] grid grid-cols-2 gap-4'> + <div className='flex flex-col '> + <label className='form-label mb-2'>ID Pesanan*</label> + <input + {...register('id')} + placeholder='dapat dilihat pada email konfirmasi anda' + type='text' + className='form-input mb-2' + aria-invalid={errors.id?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.id?.message} + </div> + </div> + <div className='flex flex-col '> + <label className='form-label mb-2'>Email Penagihan*</label> + <input + {...register('email')} + placeholder='Email yang anda gunakan saat pembayaran' + type='text' + className='form-input' + aria-invalid={errors.email?.message} + /> + <div className='text-caption-2 text-danger-500 mt-1'> + {errors.email?.message} + </div> + </div> + </div> + <div + className={` ${ + errors.id?.message ? 'mt-2' : 'mt-5' + } flex items-center ml-4`} + > + <button + type='submit' + className='bg-red-600 border border-red-600 rounded-md text-sm text-white w-24 h-11 mb-1 content-center flex flex-row justify-center items-center' + > + {isLoading && <Spinner size='xs' className='mr-2' />} + {!isLoading && ( + <Search size={16} strokeWidth={1} className='mr-2' /> + )} + <p>Lacak</p> + </button> + </div> + </form> + {/* Display the API error message */} + {apiError && <div className='text-danger-500 mt-4'>{apiError}</div>} + <Manifest idAWB={idAWB} closePopup={closePopup} /> + </div> + </div> + ); +}; + +const validationSchema = Yup.object().shape({ + email: Yup.string() + .email('Format harus seperti contoh@email.com') + .required('Harus di-isi'), + id: Yup.string().required('Harus di-isi'), +}); + +const defaultValues = { + email: '', + id: '', +}; + +export default TrackingOrder; diff --git a/src/lib/transaction/api/transactionsApi.js b/src/lib/transaction/api/transactionsApi.js index f4e36e6f..5ea2b5b0 100644 --- a/src/lib/transaction/api/transactionsApi.js +++ b/src/lib/transaction/api/transactionsApi.js @@ -3,6 +3,9 @@ import { getAuth } from '@/core/utils/auth' const transactionsApi = async ({ query }) => { const auth = getAuth() + if (!auth) { + return null + } const dataTransactions = await odooApi( 'GET', `/api/v1/partner/${auth.partnerId}/sale_order?${query}` diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 9bef895a..4d401037 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -1,6 +1,6 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'; import NextImage from 'next/image'; -import rejectImage from "../../../../public/images/reject.png" +import rejectImage from '../../../../public/images/reject.png'; import useTransaction from '../hooks/useTransaction'; import TransactionStatusBadge from './TransactionStatusBadge'; import Divider from '@/core/components/elements/Divider/Divider'; @@ -40,7 +40,7 @@ import rejectProductApi from '../api/rejectProductApi'; import { useRouter } from 'next/router'; const Transaction = ({ id }) => { - const router = useRouter() + const router = useRouter(); const [isModalOpen, setIsModalOpen] = useState(false); const [selectedProduct, setSelectedProduct] = useState(null); const [reason, setReason] = useState(''); @@ -152,7 +152,10 @@ const Transaction = ({ id }) => { const memoizeVariantGroupCardReject = useMemo( () => ( <div className='p-4 pt-0 flex flex-col gap-y-3'> - <VariantGroupCard variants={transaction.data?.productsRejectLine} buyMore /> + <VariantGroupCard + variants={transaction.data?.productsRejectLine} + buyMore + /> </div> ), [transaction.data] @@ -182,26 +185,25 @@ const Transaction = ({ id }) => { }; const handleRejectProduct = async () => { - try{ + try { if (!reason.trim()) { toast.error('Masukkan alasan terlebih dahulu'); return; - }else{ - let idSo = transaction?.data.id - let idProduct = selectedProduct?.id - await rejectProductApi({ idSo, idProduct, reason}); + } else { + let idSo = transaction?.data.id; + let idProduct = selectedProduct?.id; + await rejectProductApi({ idSo, idProduct, reason }); closeModal(); - toast.success("Produk berhasil di reject") + toast.success('Produk berhasil di reject'); setTimeout(() => { window.location.reload(); - }, 1500); + }, 1500); } - }catch(error){ + } catch (error) { toast.error('Gagal reject produk. Silakan coba lagi.'); } }; - return ( transaction.data?.name && ( <> @@ -390,14 +392,20 @@ const Transaction = ({ id }) => { <p className='text-gray_r-11 leading-none'>Dokumen PO</p> <button type='button' - className='btn-light py-1.5 px-3 ml-auto' + className='inline-block text-danger-500' onClick={ transaction.data?.purchaseOrderFile ? () => downloadPurchaseOrder(transaction.data) - : openUploadPo + : transaction?.data.invoices.length < 1 + ? openUploadPo + : '' } > - {transaction.data?.purchaseOrderFile ? 'Download' : 'Upload'} + {transaction?.data?.purchaseOrderFile + ? 'Download' + : transaction?.data.invoices.length < 1 + ? 'Upload' + : '-'} </button> </div> </div> @@ -406,13 +414,13 @@ const Transaction = ({ id }) => { <Divider /> <div className='font-medium p-4'>Detail Produk</div> - {transaction?.data?.products.length > 0? ( - <div> - {memoizeVariantGroupCard} - </div> + {transaction?.data?.products.length > 0 ? ( + <div>{memoizeVariantGroupCard}</div> ) : ( - <div className='badge-red text-sm px-2 ml-4'>Semua produk telah di reject</div> - )} + <div className='badge-red text-sm px-2 ml-4'> + Semua produk telah di reject + </div> + )} {transaction?.data?.productsRejectLine.length > 0 && ( <div> @@ -594,12 +602,16 @@ const Transaction = ({ id }) => { onClick={ transaction.data?.purchaseOrderFile ? () => downloadPurchaseOrder(transaction.data) - : openUploadPo + : transaction?.data.invoices.length < 1 + ? openUploadPo + : '' } > {transaction?.data?.purchaseOrderFile ? 'Download' - : 'Upload'} + : transaction?.data.invoices.length < 1 + ? 'Upload' + : '-'} </button> </div> </> @@ -628,9 +640,11 @@ const Transaction = ({ id }) => { <div className='text-h-sm font-semibold mt-10 mb-4'> Pengiriman </div> - {transaction?.data?.pickings.length == 0 && ( - <div className='badge-red text-sm'>Belum ada pengiriman</div> - )} + {transaction?.data?.pickings.length == 0 && ( + <div className='badge-red text-sm'> + Belum ada pengiriman + </div> + )} <div className='grid grid-cols-1 gap-1 w-2/3'> {transaction?.data?.pickings?.map((airway) => ( <button @@ -646,7 +660,9 @@ const Transaction = ({ id }) => { </div> <div className='flex gap-x-2'> <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'> - {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'} + {airway?.delivered + ? 'Pesanan Tiba' + : 'Sedang Dikirim'} </div> <ChevronRightIcon className='w-5 stroke-2' /> </div> @@ -655,51 +671,53 @@ const Transaction = ({ id }) => { </div> </div> <div className='invoice w-1/2 '> - <div className='text-h-sm font-semibold mt-10 mb-4 '>Invoice</div> - {transaction.data?.invoices?.length === 0 && ( - <div className='badge-red text-sm'>Belum ada invoice</div> - )} - <div className='grid grid-cols-1 gap-1 w-2/3 '> - {transaction.data?.invoices?.map((invoice, index) => ( - <Link href={`/my/invoices/${invoice.id}`} key={index}> - <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'> - <div> - <p className='mb-1'>{invoice?.name}</p> - <div className='flex items-center gap-x-1'> - {invoice.amountResidual > 0 ? ( - <div className='badge-red'>Belum Lunas</div> - ) : ( - <div className='badge-green'>Lunas</div> - )} - <p className='text-caption-2 text-gray_r-11'> - {currencyFormat(invoice.amountTotal)} - </p> - </div> + <div className='text-h-sm font-semibold mt-10 mb-4 '> + Invoice + </div> + {transaction.data?.invoices?.length === 0 && ( + <div className='badge-red text-sm'>Belum ada invoice</div> + )} + <div className='grid grid-cols-1 gap-1 w-2/3 '> + {transaction.data?.invoices?.map((invoice, index) => ( + <Link href={`/my/invoices/${invoice.id}`} key={index}> + <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'> + <div> + <p className='mb-1'>{invoice?.name}</p> + <div className='flex items-center gap-x-1'> + {invoice.amountResidual > 0 ? ( + <div className='badge-red'>Belum Lunas</div> + ) : ( + <div className='badge-green'>Lunas</div> + )} + <p className='text-caption-2 text-gray_r-11'> + {currencyFormat(invoice.amountTotal)} + </p> </div> - <ChevronRightIcon className='w-5 stroke-2' /> </div> - </Link> - ))} - </div> + <ChevronRightIcon className='w-5 stroke-2' /> + </div> + </Link> + ))} + </div> </div> </div> <div className='text-h-sm font-semibold mt-4 mb-4'> Rincian Pembelian </div> - {transaction?.data?.products?.length > 0? ( - <table className='table-data'> - <thead> - <tr> - <th>Nama Produk</th> - {/* <th>Diskon</th> */} - <th>Jumlah</th> - <th>Harga</th> - <th>Subtotal</th> - <th></th> - </tr> - </thead> - <tbody> + {transaction?.data?.products?.length > 0 ? ( + <table className='table-data'> + <thead> + <tr> + <th>Nama Produk</th> + {/* <th>Diskon</th> */} + <th>Jumlah</th> + <th>Harga</th> + <th>Subtotal</th> + <th></th> + </tr> + </thead> + <tbody> {transaction?.data?.products?.map((product) => ( <tr key={product.id}> <td className='flex'> @@ -711,37 +729,37 @@ const Transaction = ({ id }) => { )} className='w-[20%] flex-shrink-0' > - <div className='relative'> + <div className='relative'> <Image src={product?.parent?.image} alt={product?.name} className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md' /> - <div className='absolute top-0 right-4 flex mt-3'> - <div className='gambarB '> - {product.isSni && ( - <ImageNext - src='/images/sni-logo.png' - alt='SNI Logo' - className='w-2 h-4 object-contain object-top sm:h-4' - width={50} - height={50} - /> - )} - </div> - <div className='gambarC '> - {product.isTkdn && ( - <ImageNext - src='/images/TKDN.png' - alt='TKDN' - className='w-5 h-4 object-contain object-top ml-1 sm:h-4' - width={50} - height={50} - /> - )} + <div className='absolute top-0 right-4 flex mt-3'> + <div className='gambarB '> + {product.isSni && ( + <ImageNext + src='/images/sni-logo.png' + alt='SNI Logo' + className='w-2 h-4 object-contain object-top sm:h-4' + width={50} + height={50} + /> + )} + </div> + <div className='gambarC '> + {product.isTkdn && ( + <ImageNext + src='/images/TKDN.png' + alt='TKDN' + className='w-5 h-4 object-contain object-top ml-1 sm:h-4' + width={50} + height={50} + /> + )} + </div> </div> </div> - </div> </Link> <div className='px-2 text-left'> <Link @@ -774,33 +792,42 @@ const Transaction = ({ id }) => { {currencyFormat(product.price.price)} </div> )} */} - <div>{currencyFormat(product.price.priceDiscount)}</div> + <div> + {currencyFormat(product.price.priceDiscount)} + </div> </td> <td>{currencyFormat(product.price.subtotal)}</td> {/* {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (transaction.data.isReaject == false) && ( */} - {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (router.asPath.includes("/my/quotations/")) && transaction.data?.status == 'draft' && ( - <td> - <button - className="bg-red-500 text-white py-1 px-3 rounded" - onClick={() => openModal(product)} - > - Reject - </button> - </td> - )} + {auth?.feature.soApproval && + (auth.webRole == 2 || auth.webRole == 3) && + router.asPath.includes('/my/quotations/') && + transaction.data?.status == 'draft' && ( + <td> + <button + className='bg-red-500 text-white py-1 px-3 rounded' + onClick={() => openModal(product)} + > + Reject + </button> + </td> + )} </tr> ))} </tbody> </table> ) : ( - <div className='badge-red text-sm'>Semua produk telah di reject</div> + <div className='badge-red text-sm'> + Semua produk telah di reject + </div> )} - + {isModalOpen && ( <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center'> - <div className='bg-white p-4 rounded w-96 + <div + className='bg-white p-4 rounded w-96 ease-in-out opacity-100 - transform transition-transform duration-300 scale-100'> + transform transition-transform duration-300 scale-100' + > <h2 className='text-lg mb-2'>Berikan Alasan</h2> <textarea value={reason} @@ -826,117 +853,116 @@ const Transaction = ({ id }) => { </div> )} - {transaction?.data?.products?.map((product) => ( - <div className='flex justify-end mt-4' key={product.id}> - <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'> - <div className='text-right'>Subtotal</div> - <div className='text-right font-medium'> - {currencyFormat(transaction.data?.amountUntaxed)} - </div> + {transaction?.data?.products?.length > 0 && ( + <div className='flex justify-end mt-4'> + <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'> + <div className='text-right'>Subtotal</div> + <div className='text-right font-medium'> + {currencyFormat(transaction.data?.amountUntaxed)} + </div> - <div className='text-right'>PPN 11%</div> - <div className='text-right font-medium'> - {currencyFormat(transaction.data?.amountTax)} - </div> + <div className='text-right'>PPN 11%</div> + <div className='text-right font-medium'> + {currencyFormat(transaction.data?.amountTax)} + </div> - <div className='text-right whitespace-nowrap'> - Biaya Pengiriman - </div> - <div className='text-right font-medium'> - {currencyFormat(transaction.data?.deliveryAmount)} - </div> + <div className='text-right whitespace-nowrap'> + Biaya Pengiriman + </div> + <div className='text-right font-medium'> + {currencyFormat(transaction.data?.deliveryAmount)} + </div> - <div className='text-right'>Grand Total</div> - <div className='text-right font-medium text-gray_r-12'> - {currencyFormat(transaction.data?.amountTotal)} + <div className='text-right'>Grand Total</div> + <div className='text-right font-medium text-gray_r-12'> + {currencyFormat(transaction.data?.amountTotal)} + </div> </div> </div> - </div> - ))} - - + )} {transaction?.data?.productsRejectLine.length > 0 && ( - <div className='text-h-sm font-semibold mt-10 mb-4'> - Rincian Produk Reject - </div> + <div className='text-h-sm font-semibold mt-10 mb-4'> + Rincian Produk Reject + </div> )} {transaction?.data?.productsRejectLine.length > 0 && ( - <table className='table-data'> - <thead> - <tr> - <th>Nama Produk</th> - {/* <th>Diskon</th> */} - <th>Jumlah</th> - <th>Harga</th> - <th>Subtotal</th> - </tr> - </thead> - <tbody> - {transaction?.data?.productsRejectLine?.map((product) => ( - <tr key={product.id}> - <td className='flex'> + <table className='table-data'> + <thead> + <tr> + <th>Nama Produk</th> + {/* <th>Diskon</th> */} + <th>Jumlah</th> + <th>Harga</th> + <th>Subtotal</th> + </tr> + </thead> + <tbody> + {transaction?.data?.productsRejectLine?.map((product) => ( + <tr key={product.id}> + <td className='flex'> + <Link + href={createSlug( + '/shop/product/', + product?.parent.name, + product?.parent.id + )} + className='w-[20%] flex-shrink-0' + > + <Image + src={product?.parent?.image} + alt={product?.name} + className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md' + /> + </Link> + <div className='px-2 text-left'> <Link href={createSlug( '/shop/product/', product?.parent.name, product?.parent.id )} - className='w-[20%] flex-shrink-0' + className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' > - <Image - src={product?.parent?.image} - alt={product?.name} - className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md' - /> + {product?.parent?.name} </Link> - <div className='px-2 text-left'> - <Link - href={createSlug( - '/shop/product/', - product?.parent.name, - product?.parent.id - )} - className='line-clamp-2 leading-6 !text-gray_r-12 font-normal' - > - {product?.parent?.name} - </Link> - <div className='text-gray_r-11 mt-2'> - {product?.code}{' '} - {product?.attributes.length > 0 - ? `| ${product?.attributes.join(', ')}` - : ''} - </div> + <div className='text-gray_r-11 mt-2'> + {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} </div> - </td> - {/* <td> + </div> + </td> + {/* <td> {product.price.discountPercentage > 0 ? `${product.price.discountPercentage}%` : ''} </td> */} - <td>{product.quantity}</td> - <td> - {/* {product.price.discountPercentage > 0 && ( + <td>{product.quantity}</td> + <td> + {/* {product.price.discountPercentage > 0 && ( <div className='line-through mb-1 text-caption-1 text-gray_r-12/70'> {currencyFormat(product.price.price)} </div> )} */} - <div>{currencyFormat(product.price.priceDiscount)}</div> - </td> - <td className='flex justify-center'> - <NextImage - src={rejectImage} - alt='Reject' - width={90} - height={30} - /> - </td> - </tr> - ))} - </tbody> - </table> + <div> + {currencyFormat(product.price.priceDiscount)} + </div> + </td> + <td className='flex justify-center'> + <NextImage + src={rejectImage} + alt='Reject' + width={90} + height={30} + /> + </td> + </tr> + ))} + </tbody> + </table> )} - </div> </div> </DesktopView> diff --git a/src/lib/treckingAwb/component/Manifest.jsx b/src/lib/treckingAwb/component/Manifest.jsx index cf2fa4ed..fbc95702 100644 --- a/src/lib/treckingAwb/component/Manifest.jsx +++ b/src/lib/treckingAwb/component/Manifest.jsx @@ -40,10 +40,18 @@ const Manifest = ({ idAWB, closePopup }) => { const getManifest = async () => { setIsLoading(true) const auth = getAuth() - const list = await odooApi( - 'GET', - `/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking` - ) + let list + if(auth){ + list = await odooApi( + 'GET', + `/api/v1/partner/${auth.partnerId}/stock-picking/${idAWB}/tracking` + ) + }else{ + list = await odooApi( + 'GET', + `/api/v1/stock-picking/${idAWB}/tracking` + ) + } setManifests(list) setIsLoading(false) } diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx index cd60bd89..6af6294f 100644 --- a/src/pages/_document.jsx +++ b/src/pages/_document.jsx @@ -41,13 +41,13 @@ export default function MyDocument() { content='328wmjs7hcnz74rwsqzxvq50rmbtm2' /> - <Script + {/* <Script async strategy='beforeInteractive' src='https://www.googletagmanager.com/gtag/js?id=UA-10501937-1' - /> + /> */} - <Script + {/* <Script async id='google-analytics-ua' strategy='beforeInteractive' @@ -59,7 +59,7 @@ export default function MyDocument() { gtag('config', 'UA-10501937-1'); `, }} - /> + /> */} <Script async diff --git a/src/pages/api/activation-request.js b/src/pages/api/activation-request.js index 61dbb597..2b8ccec3 100644 --- a/src/pages/api/activation-request.js +++ b/src/pages/api/activation-request.js @@ -1,27 +1,29 @@ -import odooApi from '@/core/api/odooApi' -import mailer from '@/core/utils/mailer' +import odooApi from '@/core/api/odooApi'; +import mailer from '@/core/utils/mailer'; export default async function handler(req, res) { try { - const { email } = req.body - let result = await odooApi('POST', '/api/v1/user/activation-request', { email }) + const { email } = req.body; + let result = await odooApi('POST', '/api/v1/user/activation-request', { + email, + }); if (result.activationRequest) { mailer.sendMail({ - from: 'sales@indoteknik.com', + from: 'noreply@indoteknik.com', to: result.user.email, subject: 'Permintaan Aktivasi Akun Indoteknik', html: ` <h1>Permintaan Aktivasi Akun Indoteknik</h1> <br> <p>Aktivasi akun anda melalui link berikut: <a href="${process.env.NEXT_PUBLIC_SELF_HOST}/activate?token=${result.token}">Aktivasi Akun</a></p> - ` - }) + `, + }); } - delete result.user - delete result.token - res.status(200).json(result) + delete result.user; + delete result.token; + res.status(200).json(result); } catch (error) { - console.log(error) - res.status(400).json({ error: error.message }) + console.log(error); + res.status(400).json({ error: error.message }); } } diff --git a/src/pages/api/shop/brands.js b/src/pages/api/shop/brands.js index cc64a7e7..9c2824b3 100644 --- a/src/pages/api/shop/brands.js +++ b/src/pages/api/shop/brands.js @@ -24,6 +24,8 @@ export default async function handler(req, res) { params = `name_s:${req.query.params}`.toLowerCase(); } } + if(req.query.rows) rows = req.query.rows; + const url = `${SOLR_HOST}/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`; let brands = await axios(url); let dataBrands = responseMap(brands.data.response.docs); diff --git a/src/pages/api/shop/finish-checkout.js b/src/pages/api/shop/finish-checkout.js index 9eaa36db..4dcc915c 100644 --- a/src/pages/api/shop/finish-checkout.js +++ b/src/pages/api/shop/finish-checkout.js @@ -1,60 +1,66 @@ -import odooApi from '@/core/api/odooApi' -import mailer from '@/core/utils/mailer' -import FinishCheckoutEmail from '@/lib/checkout/email/FinishCheckoutEmail' -import { render } from '@react-email/render' -import axios from 'axios' -import camelcaseObjectDeep from 'camelcase-object-deep' +import odooApi from '@/core/api/odooApi'; +import mailer from '@/core/utils/mailer'; +import FinishCheckoutEmail from '@/lib/checkout/email/FinishCheckoutEmail'; +import { render } from '@react-email/render'; +import axios from 'axios'; +import camelcaseObjectDeep from 'camelcase-object-deep'; export default async function handler(req, res) { - const { orderName = null } = req.query + const { orderName = null } = req.query; if (!orderName) { - return res.status(422).json({ error: 'parameter missing' }) + return res.status(422).json({ error: 'parameter missing' }); } - let { auth } = req.cookies + let { auth } = req.cookies; if (!auth) { - return res.status(401).json({ error: 'Unauthorized' }) + return res.status(401).json({ error: 'Unauthorized' }); } - auth = JSON.parse(auth) + auth = JSON.parse(auth); - const midtransAuthKey = btoa(process.env.MIDTRANS_SERVER_KEY + ':') + const midtransAuthKey = btoa(process.env.MIDTRANS_SERVER_KEY + ':'); const midtransHeaders = { Accept: 'application/json', 'Content-Type': 'application/json', - Authorization: `Basic ${midtransAuthKey}` - } - let midtransStatus = {} + Authorization: `Basic ${midtransAuthKey}`, + }; + let midtransStatus = {}; try { - midtransStatus = await axios.get(`${process.env.MIDTRANS_HOST}/v2/${orderName}/status`, { - headers: midtransHeaders - }) - midtransStatus = camelcaseObjectDeep(midtransStatus.data) + midtransStatus = await axios.get( + `${process.env.MIDTRANS_HOST}/v2/${orderName}/status`, + { + headers: midtransHeaders, + } + ); + midtransStatus = camelcaseObjectDeep(midtransStatus.data); } catch (error) { - console.log(error) + console.log(error); } - let statusPayment = 'manual' + let statusPayment = 'manual'; if (midtransStatus?.orderId) { - const transactionStatus = midtransStatus.transactionStatus - statusPayment = 'failed' + const transactionStatus = midtransStatus.transactionStatus; + statusPayment = 'failed'; if (['capture', 'settlement'].includes(transactionStatus)) { - statusPayment = 'success' + statusPayment = 'success'; } else if (transactionStatus == 'pending') { - statusPayment = 'pending' + statusPayment = 'pending'; } } - const query = `name=${orderName.replaceAll('-', '/')}&limit=1&context=quotation` + const query = `name=${orderName.replaceAll( + '-', + '/' + )}&limit=1&context=quotation`; const searchTransaction = await odooApi( 'GET', `/api/v1/partner/${auth.partnerId}/sale_order?${query}`, {}, { Token: auth.token } - ) + ); if (searchTransaction.saleOrderTotal == 0) { - return res.status(400).json({ error: 'Transaction Not Found' }) + return res.status(400).json({ error: 'Transaction Not Found' }); } let transaction = await odooApi( @@ -62,17 +68,17 @@ export default async function handler(req, res) { `/api/v1/partner/${auth.partnerId}/sale_order/${searchTransaction.saleOrders[0].id}`, {}, { Token: auth.token } - ) + ); if (!transaction?.id) { - return res.status(400).json({ error: 'Transaction Detail Not Found' }) + return res.status(400).json({ error: 'Transaction Detail Not Found' }); } - transaction.subtotal = 0 - transaction.discountTotal = 0 + transaction.subtotal = 0; + transaction.discountTotal = 0; for (const product of transaction.products) { - transaction.subtotal += product.price.price * product.quantity + transaction.subtotal += product.price.price * product.quantity; transaction.discountTotal -= - (product.price.price - product.price.priceDiscount) * product.quantity + (product.price.price - product.price.priceDiscount) * product.quantity; } const emailMessage = render( @@ -81,14 +87,14 @@ export default async function handler(req, res) { payment={midtransStatus} statusPayment={statusPayment} /> - ) + ); mailer.sendMail({ - from: 'sales@indoteknik.com', + from: 'noreply@indoteknik.com', to: transaction.address.customer.email, subject: 'Pembelian di Indoteknik.com', - html: emailMessage - }) + html: emailMessage, + }); - return res.status(200).json({ description: 'success' }) + return res.status(200).json({ description: 'success' }); } diff --git a/src/pages/api/shop/product-homepage.js b/src/pages/api/shop/product-homepage.js index 02c01ee0..61732c77 100644 --- a/src/pages/api/shop/product-homepage.js +++ b/src/pages/api/shop/product-homepage.js @@ -36,7 +36,8 @@ const respoonseMap = (productHomepage, products) => { name: productHomepage.name_s, image: productHomepage.image_s, url: productHomepage.url_s, - products: products + products: products, + categoryIds: productHomepage.category_id_ids, } return productMapped diff --git a/src/pages/api/shop/promo.js b/src/pages/api/shop/promo.js new file mode 100644 index 00000000..f90c8559 --- /dev/null +++ b/src/pages/api/shop/promo.js @@ -0,0 +1,204 @@ +import { productMappingSolr, promoMappingSolr } from '@/utils/solrMapping'; +import axios from 'axios'; +import camelcaseObjectDeep from 'camelcase-object-deep'; + +export default async function handler(req, res) { + const { + q = '*', + page = 1, + brand = '', + category = '', + priceFrom = 0, + priceTo = 0, + orderBy = 'if(exists(sequence_i),0,1) asc, sequence_i asc,', + operation = 'AND', + fq = '', + limit = 30, + } = req.query; + + let { stock = '' } = req.query; + + let paramOrderBy = 'if(exists(sequence_i),0,1) asc, sequence_i asc,'; + switch (orderBy) { + case 'price-asc': + paramOrderBy += 'price_tier1_v2_f ASC'; + break; + case 'price-desc': + paramOrderBy += 'price_tier1_v2_f DESC'; + break; + case 'popular': + paramOrderBy += 'product_rating_f DESC, search_rank_i DESC,'; + break; + case 'popular-weekly': + paramOrderBy += 'search_rank_weekly_i DESC'; + break; + case 'stock': + paramOrderBy += 'product_rating_f DESC, stock_total_f DESC'; + break; + case 'flashsale-price-asc': + paramOrderBy += 'flashsale_price_f ASC'; + break; + default: + paramOrderBy += ''; + break; + } + + let checkQ = q.trim().split(/[\s\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/]+/); + let newQ = checkQ.length > 1 ? escapeSolrQuery(q) + '*' : escapeSolrQuery(q); + + let offset = (page - 1) * limit; + let parameter = [ + 'facet.field=manufacture_name_s', + 'facet.field=category_name', + 'facet=true', + 'indent=true', + `facet.limit=-1`, + // `facet.query=${escapeSolrQuery(q)}`, + `q.op=${operation}`, + `q=${q}`, + // 'qf=name_s', + `start=${parseInt(offset)}`, + `rows=${limit}`, + `sort=${paramOrderBy}`, + `fq=product_ids:[* TO *]`, + `fq=active_b:true`, + ]; + + if (priceFrom > 0 || priceTo > 0) { + parameter.push( + `fq=price_tier1_v2_f:[${priceFrom == '' ? '*' : priceFrom} TO ${ + priceTo == '' ? '*' : priceTo + }]` + ); + } + + let { auth } = req.cookies; + if (auth) { + auth = JSON.parse(auth); + if (auth.feature.onlyReadyStock) stock = true; + } + + if (brand) + parameter.push( + `fq=${brand + .split(',') + .map( + (manufacturer) => + `manufacture_name_s:"${encodeURIComponent(manufacturer)}"` + ) + .join(' OR ')}` + ); + if (category) + parameter.push( + `fq=${category + .split(',') + .map((cat) => `category_name:"${encodeURIComponent(cat)}"`) + .join(' OR ')}` + ); + // if (category) parameter.push(`fq=category_name:${capitalizeFirstLetter(category.replace(/,/g, ' OR '))}`) + if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`); + + // Single fq in url params + if (typeof fq === 'string') parameter.push(`fq=${fq}`); + // Multi fq in url params + if (Array.isArray(fq)) + parameter = parameter.concat(fq.map((val) => `fq=${val}`)); + + let result = await axios( + process.env.SOLR_HOST + '/solr/promotion_program_lines/select?' + parameter.join('&') + ); + try { + result.data.response.products = promoMappingSolr( + result.data.response.docs + ); + + result.data.responseHeader.params.start = parseInt( + result.data.responseHeader.params.start + ); + result.data.responseHeader.params.rows = parseInt( + result.data.responseHeader.params.rows + ); + delete result.data.response.docs; + // result.data = camelcaseObjectDeep(result.data); + result.data = result.data; + res.status(200).json(result.data); + } catch (error) { + res.status(400).json({ error: error.message }); + } +} + +const escapeSolrQuery = (query) => { + if (query == '*') return query; + + query = query.replace(/-/g, ' '); + + const specialChars = /([\+\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g; + const words = query.split(/\s+/); + const escapedWords = words.map((word) => { + if (specialChars.test(word)) { + return word.replace(specialChars, '\\$1'); + } + return word; + }); + + return escapedWords.join(' '); +}; + + +/*const productResponseMap = (products, pricelist) => { + return products.map((product) => { + let price = product.price_tier1_v2_f || 0 + let priceDiscount = product.price_discount_f || 0 + let discountPercentage = product.discount_f || 0 + + if (pricelist) { + // const pricelistDiscount = product?.[`price_${pricelist}_f`] || false + // const pricelistDiscountPerc = product?.[`discount_${pricelist}_f`] || false + + // if (pricelistDiscount && pricelistDiscount > 0) priceDiscount = pricelistDiscount + // if (pricelistDiscountPerc && pricelistDiscountPerc > 0) + // discountPercentage = pricelistDiscountPerc + + price = product?.[`price_${pricelist}_f`] || 0 + } + + if (product?.flashsale_id_i > 0) { + price = product?.flashsale_base_price_f || 0 + priceDiscount = product?.flashsale_price_f || 0 + discountPercentage = product?.flashsale_discount_f || 0 + } + + let productMapped = { + id: product.product_id_i || '', + image: product.image_s || '', + code: product.default_code_s || '', + name: product.name_s || '', + lowestPrice: { price, priceDiscount, discountPercentage }, + variantTotal: product.variant_total_i || 0, + stockTotal: product.stock_total_f || 0, + weight: product.weight_f || 0, + manufacture: {}, + categories: [], + flashSale: { + id: product?.flashsale_id_i, + name: product?.product?.flashsale_name_s, + tag : product?.flashsale_tag_s || 'FLASH SALE' + } + } + + if (product.manufacture_id_i && product.manufacture_name_s) { + productMapped.manufacture = { + id: product.manufacture_id_i || '', + name: product.manufacture_name_s || '' + } + } + + productMapped.categories = [ + { + id: product.category_id_i || '', + name: product.category_name_s || '' + } + ] + return productMapped + }) +}*/ diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js index 87d7c580..49a5fe69 100644 --- a/src/pages/api/shop/search.js +++ b/src/pages/api/shop/search.js @@ -1,9 +1,10 @@ import { productMappingSolr } from '@/utils/solrMapping'; import axios from 'axios'; import camelcaseObjectDeep from 'camelcase-object-deep'; +import searchSuggestApi from '@/core/api/searchSuggestApi'; +import { ECDH } from 'crypto'; export default async function handler(req, res) { - const { q = '*', page = 1, @@ -15,6 +16,7 @@ export default async function handler(req, res) { operation = 'AND', fq = '', limit = 30, + source = '', } = req.query; let { stock = '' } = req.query; @@ -47,6 +49,47 @@ export default async function handler(req, res) { break; } + // let suggestWord = null; + // let keywords = q; + // let checkQ = null; + + // if (q != '*') { + // checkQ = q.trim().split(/[\s\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/]+/); + // if (checkQ.length > 1) { + // const dataSearchSuggest = await axios( + // `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/suggest?q=${checkQ[1]}` + // ); + // suggestWord = dataSearchSuggest.data.suggestions[0]; + // } + // if (suggestWord && suggestWord?.term.split(' ').length <= 1) { + // keywords = `"${escapeSolrQuery(checkQ[0] + ' ' + suggestWord?.term)}"`; + // } + // } + + // let newQ = keywords; + + let checkQ = q.trim().split(/[\s\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/]+/); + let newQ = escapeSolrQuery(q); + + const formattedQuery = `(${newQ + .split(' ') + .map((term) => `${term}*`) + .join(' ')})`; + const mm = + checkQ.length > 2 + ? checkQ.length > 5 + ? '55%' + : '85%' + : `${checkQ.length}`; + + const filterQueries = [ + '-publish_b:false', + 'product_rating_f:[8 TO *]', + 'price_tier1_v2_f:[1 TO *]', + ]; + + const fq_ = filterQueries.join('AND '); + let offset = (page - 1) * limit; let parameter = [ 'facet.field=manufacture_name_s', @@ -54,16 +97,23 @@ export default async function handler(req, res) { 'facet=true', 'indent=true', `facet.query=${escapeSolrQuery(q)}`, - `q.op=${operation}`, - `q=${escapeSolrQuery(q)}`, - 'qf=name_s', + `q.op=OR`, + `q=${ + source == 'similar' || checkQ.length < 3 + ? checkQ.length < 2 + ? newQ + : newQ + '*' + : formattedQuery + }`, + `defType=edismax`, + 'qf=name_s description_clean_t category_name manufacture_name_s variants_code_t variants_name_t category_id_ids default_code_s', `start=${parseInt(offset)}`, `rows=${limit}`, `sort=${paramOrderBy}`, - `fq=-publish_b:false, product_rating_f:[13 TO *], discount_tier1_v2_f:[1 TO *]`, + `fq=${encodeURIComponent(fq_)}`, + `mm=${encodeURIComponent(mm)}`, ]; - if (priceFrom > 0 || priceTo > 0) { parameter.push( `fq=price_tier1_v2_f:[${priceFrom == '' ? '*' : priceFrom} TO ${ @@ -82,7 +132,10 @@ export default async function handler(req, res) { parameter.push( `fq=${brand .split(',') - .map((manufacturer) => `manufacture_name:"${encodeURIComponent(manufacturer)}"`) + .map( + (manufacturer) => + `manufacture_name:"${encodeURIComponent(manufacturer)}"` + ) .join(' OR ')}` ); if (category) @@ -96,15 +149,17 @@ export default async function handler(req, res) { if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`); // Single fq in url params - if (typeof fq === 'string') parameter.push(`fq=${fq}`); + if (typeof fq === 'string') parameter.push(`fq=${encodeURIComponent(fq)}`); // Multi fq in url params if (Array.isArray(fq)) - parameter = parameter.concat(fq.map((val) => `fq=${val}`)); + parameter = parameter.concat( + fq.map((val) => `fq=${encodeURIComponent(val)}`) + ); let result = await axios( process.env.SOLR_HOST + '/solr/product/select?' + parameter.join('&') ); - + try { result.data.response.products = productMappingSolr( result.data.response.docs, @@ -127,11 +182,13 @@ export default async function handler(req, res) { const escapeSolrQuery = (query) => { if (query == '*') return query; - const specialChars = /([\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g; + query = query.replace(/-/g, ' '); + + const specialChars = /([\+\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g; const words = query.split(/\s+/); const escapedWords = words.map((word) => { if (specialChars.test(word)) { - return `"${word.replace(specialChars, '\\$1')}"`; + return word.replace(specialChars, '\\$1'); } return word; }); diff --git a/src/pages/google_merchant/products/[page].js b/src/pages/google_merchant/products/[page].js index 6e0eb703..0c2cf3c5 100644 --- a/src/pages/google_merchant/products/[page].js +++ b/src/pages/google_merchant/products/[page].js @@ -50,7 +50,7 @@ export async function getServerSideProps({ res, query }) { let categoryId = null; if (brandId && brandId in brandsData) { - categoryId = brandsData[brandId].category_ids?.[0] ?? null; + categoryId = brandsData[brandId]?.category_ids?.[0] ?? null; } else { const solrBrand = await getBrandById(brandId); brandsData[brandId] = solrBrand; @@ -58,7 +58,7 @@ export async function getServerSideProps({ res, query }) { } if (categoryId && categoryId in categoriesData) { - categoryName = categoriesData[categoryId].name_s ?? null; + categoryName = categoriesData[categoryId]?.name_s ?? null; } else { const solrCategory = await getCategoryById(categoryId); categoriesData[categoryId] = solrCategory; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 8af963fb..cc4d68db 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,21 +1,22 @@ -import dynamic from 'next/dynamic'; -import { useRef } from 'react'; - import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'; import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'; +import odooApi from '@/core/api/odooApi'; import Seo from '@/core/components/Seo'; import DelayRender from '@/core/components/elements/DelayRender/DelayRender'; import DesktopView from '@/core/components/views/DesktopView'; import MobileView from '@/core/components/views/MobileView'; import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton'; +import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton'; import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton'; -import PromotinProgram from '@/lib/promotinProgram/components/HomePage'; -import PagePopupIformation from '~/modules/popup-information'; -import useProductDetail from '~/modules/product-detail/stores/useProductDetail'; +import dynamic from 'next/dynamic'; +import { useEffect, useRef, useState } from 'react'; import { getAuth } from '~/libs/auth'; +import PagePopupIformation from '~/modules/popup-information'; // need change to dynamic and ssr : false +import CategoryPilihan from '../lib/home/components/CategoryPilihan'; +// import { getAuth } from '~/libs/auth'; const BasicLayout = dynamic(() => - import('@/core/components/layouts/BasicLayout') + import('@/core/components/layouts/BasicLayout'),{ssr: false} ); const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), { loading: () => <HeroBannerSkeleton />, @@ -45,21 +46,35 @@ const FlashSale = dynamic( ); const ProgramPromotion = dynamic(() => - import('@/lib/home/components/PromotionProgram') + import('@/lib/home/components/PromotionProgram'), +{ + loading: () => <BannerPromoSkeleton />, +} ); const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection') -); +); const CategoryHomeId = dynamic(() => - import('@/lib/home/components/CategoryHomeId') + import('@/lib/home/components/CategoryHomeId'), {ssr: false} ); -const CustomerReviews = dynamic(() => - import('@/lib/review/components/CustomerReviews') + +const CategoryDynamic = dynamic(() => + import('@/lib/home/components/CategoryDynamic') ); -const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList')); -export default function Home() { +const CategoryDynamicMobile = dynamic(() => +import('@/lib/home/components/CategoryDynamicMobile') +); + +const CustomerReviews = dynamic(() => + import('@/lib/review/components/CustomerReviews'), {ssr: false} +); // need to ssr:false +const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {ssr: false}); // need to ssr: false + + + +export default function Home({categoryId}) { const bannerRef = useRef(null); const wrapperRef = useRef(null); @@ -70,7 +85,19 @@ export default function Home() { bannerRef.current?.querySelector(':first-child')?.clientHeight + 'px'; }; + useEffect(() => { + const loadCategories = async () => { + const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId}) + if(getCategories){ + setDataCategories(getCategories) + } + } + loadCategories() + }, []) + + const [dataCategories, setDataCategories] = useState([]) return ( + <> <BasicLayout> <Seo title='Indoteknik.com: B2B Industrial Supply & Solution' @@ -78,11 +105,9 @@ export default function Home() { additionalMetaTags={[ { name: 'keywords', - content: - 'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air', + content: 'indoteknik, indoteknik.com, toko teknik, toko perkakas, jual genset, jual fogging, jual krisbow, harga krisbow, harga alat safety, harga pompa air', }, - ]} - /> + ]} /> <PagePopupIformation /> @@ -113,22 +138,30 @@ export default function Home() { </div> {!auth?.feature?.soApproval && ( <> - <ProgramPromotion /> <FlashSale /> + <DelayRender renderAfter={200}> + <ProgramPromotion /> + </DelayRender> + <DelayRender renderAfter={200}> + <FlashSale /> + </DelayRender> </> )} - <PromotinProgram /> + {/* <PromotinProgram /> */} + {dataCategories &&( + <CategoryPilihan categories={dataCategories} /> + )} + <CategoryDynamic /> <CategoryHomeId /> <BannerSection /> <CustomerReviews /> </div> </div> - </DesktopView> - - <MobileView> + </DesktopView> + <MobileView> <DelayRender renderAfter={200}> <HeroBanner /> </DelayRender> - <div className='flex flex-col gap-y-12 my-6'> + <div className='flex flex-col gap-y-4 my-6'> <DelayRender renderAfter={400}> <ServiceList /> </DelayRender> @@ -148,7 +181,13 @@ export default function Home() { </> )} <DelayRender renderAfter={600}> - <PromotinProgram /> + {/* <PromotinProgram /> */} + </DelayRender> + <DelayRender renderAfter={600}> + {dataCategories &&( + <CategoryPilihan categories={dataCategories} /> + )} + <CategoryDynamicMobile /> </DelayRender> <DelayRender renderAfter={800}> <PopularProduct /> @@ -163,5 +202,6 @@ export default function Home() { </div> </MobileView> </BasicLayout> + </> ); -} +}
\ No newline at end of file diff --git a/src/pages/login.jsx b/src/pages/login.jsx index 9a1aa85b..07d13784 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -1,3 +1,5 @@ +import { useEffect } from 'react'; +import { useRouter } from 'next/router'; import Seo from '@/core/components/Seo'; import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'; import BasicLayout from '@/core/components/layouts/BasicLayout'; @@ -5,8 +7,18 @@ import DesktopView from '@/core/components/views/DesktopView'; import MobileView from '@/core/components/views/MobileView'; import LoginComponent from '@/lib/auth/components/Login'; import AccountActivation from '~/modules/account-activation'; +import useAuth from '@/core/hooks/useAuth'; export default function Login() { + const router = useRouter(); + const auth = useAuth(); + + useEffect(() => { + if (auth) { + router.push('/'); + } + }, [auth, router]); + return ( <> <Seo title='Login - Indoteknik.com' /> diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx index bd680b90..c552659b 100644 --- a/src/pages/my/address/[id]/edit.jsx +++ b/src/pages/my/address/[id]/edit.jsx @@ -1,11 +1,11 @@ -import Seo from '@/core/components/Seo' -import AppLayout from '@/core/components/layouts/AppLayout' -import BasicLayout from '@/core/components/layouts/BasicLayout' -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import addressApi from '@/lib/address/api/addressApi' -import EditAddressComponent from '@/lib/address/components/EditAddress' -import IsAuth from '@/lib/auth/components/IsAuth' +import Seo from '@/core/components/Seo'; +import AppLayout from '@/core/components/layouts/AppLayout'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import addressApi from '@/lib/address/api/addressApi'; +import EditAddressComponent from '@/lib/address/components/EditAddress'; +import IsAuth from '@/lib/auth/components/IsAuth'; export default function EditAddress({ id, defaultValues }) { return ( @@ -24,12 +24,12 @@ export default function EditAddress({ id, defaultValues }) { </BasicLayout> </DesktopView> </IsAuth> - ) + ); } export async function getServerSideProps(context) { - const { id } = context.query - const address = await addressApi({ id }) + const { id } = context.query; + const address = await addressApi({ id }); const defaultValues = { type: address.type, name: address.name, @@ -41,7 +41,8 @@ export async function getServerSideProps(context) { oldDistrict: address.district?.id || '', district: '', oldSubDistrict: address.subDistrict?.id || '', - subDistrict: '' - } - return { props: { id, defaultValues } } + subDistrict: '', + business_name: '', + }; + return { props: { id, defaultValues } }; } diff --git a/src/pages/my/profile.jsx b/src/pages/my/profile.jsx index 25c3a608..7cf1bcbb 100644 --- a/src/pages/my/profile.jsx +++ b/src/pages/my/profile.jsx @@ -1,41 +1,44 @@ -import Divider from '@/core/components/elements/Divider/Divider' -import AppLayout from '@/core/components/layouts/AppLayout' -import BasicLayout from '@/core/components/layouts/BasicLayout' -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import useAuth from '@/core/hooks/useAuth' -import CompanyProfile from '@/lib/auth/components/CompanyProfile' -import IsAuth from '@/lib/auth/components/IsAuth' -import Menu from '@/lib/auth/components/Menu' -import PersonalProfile from '@/lib/auth/components/PersonalProfile' +import Divider from '@/core/components/elements/Divider/Divider'; +import AppLayout from '@/core/components/layouts/AppLayout'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import useAuth from '@/core/hooks/useAuth'; +import CompanyProfile from '@/lib/auth/components/CompanyProfile'; +import IsAuth from '@/lib/auth/components/IsAuth'; +import Menu from '@/lib/auth/components/Menu'; +import PersonalProfile from '@/lib/auth/components/PersonalProfile'; +import Seo from '@/core/components/Seo'; export default function Profile() { - const auth = useAuth() + const auth = useAuth(); return ( - <IsAuth> - <MobileView> - <AppLayout title='Akun Saya'> - <PersonalProfile /> - <Divider /> - {auth?.parentId && <CompanyProfile />} - </AppLayout> - </MobileView> - - <DesktopView> - <BasicLayout> - <div className='container mx-auto flex py-10'> - <div className='w-3/12 pr-4'> - <Menu /> - </div> - <div className='w-9/12 bg-white border border-gray_r-6 rounded'> + <> + <Seo title='Profile - Indoteknik.com' /> + <IsAuth> + <MobileView> + <AppLayout title='Akun Saya'> <PersonalProfile /> <Divider /> {auth?.parentId && <CompanyProfile />} + </AppLayout> + </MobileView> - </div> - </div> - </BasicLayout> - </DesktopView> - </IsAuth> - ) + <DesktopView> + <BasicLayout> + <div className='container mx-auto flex py-10'> + <div className='w-3/12 pr-4'> + <Menu /> + </div> + <div className='w-9/12 bg-white border border-gray_r-6 rounded'> + <PersonalProfile /> + <Divider /> + {auth?.parentId && <CompanyProfile />} + </div> + </div> + </BasicLayout> + </DesktopView> + </IsAuth> + </> + ); } diff --git a/src/pages/shop/brands/[slug].jsx b/src/pages/shop/brands/[slug].jsx index e786ef78..ed6724ea 100644 --- a/src/pages/shop/brands/[slug].jsx +++ b/src/pages/shop/brands/[slug].jsx @@ -18,9 +18,10 @@ export default function BrandDetail() { const brandName = getNameFromSlug(slug) const id = getIdFromSlug(slug) const {brand} = useBrand({id}) - if (!brand || !brand.data || _.isEmpty(brand.data)) { - return <PageNotFound />; - } + // if ( !brand.isLoading && _.isEmpty(brand.data)) { + // console.log('ini masuk pak') + // return <PageNotFound />; + // } return ( <BasicLayout> <Seo diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx index 1afe30bf..11840d47 100644 --- a/src/pages/shop/category/[slug].jsx +++ b/src/pages/shop/category/[slug].jsx @@ -5,6 +5,8 @@ import { useRouter } from 'next/router'; import Seo from '@/core/components/Seo'; import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'; import Breadcrumb from '@/lib/category/components/Breadcrumb'; +import { useEffect, useState } from 'react'; +import odooApi from '@/core/api/odooApi'; const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout') @@ -12,10 +14,14 @@ const BasicLayout = dynamic(() => const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch') ); +const CategorySection = dynamic(() => + import('@/lib/product/components/CategorySection') +) export default function CategoryDetail() { const router = useRouter(); const { slug = '', page = 1 } = router.query; + const [dataCategories, setDataCategories] = useState([]) const categoryName = getNameFromSlug(slug); const categoryId = getIdFromSlug(slug); @@ -43,8 +49,9 @@ export default function CategoryDetail() { <Breadcrumb categoryId={categoryId} /> + {!_.isEmpty(router.query) && ( - <ProductSearch query={query} prefixUrl={`/shop/category/${slug}`} /> + <ProductSearch query={query} categories ={categoryId} prefixUrl={`/shop/category/${slug}`} /> )} </BasicLayout> ); diff --git a/src/pages/shop/checkout/[status].jsx b/src/pages/shop/checkout/[status].jsx index 2c3bebcf..0d5cffe8 100644 --- a/src/pages/shop/checkout/[status].jsx +++ b/src/pages/shop/checkout/[status].jsx @@ -1,22 +1,22 @@ -import BasicLayout from '@/core/components/layouts/BasicLayout' -import IsAuth from '@/lib/auth/components/IsAuth' -import FinishCheckoutComponent from '@/lib/checkout/components/FinishCheckout' -import { useRouter } from 'next/router' -import axios from 'axios' -import Seo from '@/core/components/Seo' +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import IsAuth from '@/lib/auth/components/IsAuth'; +import FinishCheckoutComponent from '@/lib/checkout/components/FinishCheckout'; +import { useRouter } from 'next/router'; +import axios from 'axios'; +import Seo from '@/core/components/Seo'; export async function getServerSideProps(context) { - const { order_id } = context.query + const { order_id } = context.query; await axios.post( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${order_id}`, {}, { headers: context.req.headers } - ) - return { props: {} } + ); + return { props: {} }; } export default function Finish() { - const router = useRouter() + const router = useRouter(); return ( <> @@ -28,5 +28,5 @@ export default function Finish() { </BasicLayout> </IsAuth> </> - ) + ); } diff --git a/src/pages/shop/lob/[slug].jsx b/src/pages/shop/lob/[slug].jsx new file mode 100644 index 00000000..d939c25c --- /dev/null +++ b/src/pages/shop/lob/[slug].jsx @@ -0,0 +1,48 @@ +import _ from 'lodash'; +import dynamic from 'next/dynamic'; +import { useRouter } from 'next/router'; +import Seo from '@/core/components/Seo'; +import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'; +import Breadcrumb from '../../../lib/lob/components/Breadcrumb'; +import { useEffect, useState } from 'react'; +import odooApi from '@/core/api/odooApi'; +import { div } from 'lodash-contrib'; + +const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')); +const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch')); +const CategorySection = dynamic(() => import('@/lib/product/components/CategorySection')); + +export default function CategoryDetail() { + const router = useRouter(); + const { slug = '', page = 1 } = router.query; + const [dataLob, setDataLob] = useState([]); + const [finalQuery, setFinalQuery] = useState({}); + const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) + const [data, setData] = useState([]) + const dataIdCategories = [] + + const categoryName = getNameFromSlug(slug); + const lobId = getIdFromSlug(slug); + const q = router?.query.q || null; + + return ( + <BasicLayout> + <Seo + title={`Beli ${categoryName} di Indoteknik`} + description={`Jual ${categoryName} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`} + additionalMetaTags={[ + { + property: 'keywords', + content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`, + }, + ]} + /> + + <Breadcrumb categoryId={getIdFromSlug(slug)} /> + + {!_.isEmpty(router.query) && ( + <ProductSearch query={router.query} categories={getIdFromSlug(slug)} prefixUrl={`/shop/lob/${slug}`} /> + )} + </BasicLayout> + ); +} diff --git a/src/pages/shop/product/variant/[slug].jsx b/src/pages/shop/product/variant/[slug].jsx index cb335e0a..42f38774 100644 --- a/src/pages/shop/product/variant/[slug].jsx +++ b/src/pages/shop/product/variant/[slug].jsx @@ -69,6 +69,8 @@ export default function ProductDetail({ product }) { <Seo title={product?.name || '' + ' - Indoteknik.com' || ''} description='Temukan pilihan produk B2B Industri & Alat Teknik untuk Perusahaan, UMKM & Pemerintah dengan lengkap, mudah dan transparan.' + noindex={true} + nofollow={true} openGraph={{ url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath, images: [ diff --git a/src/pages/shop/promo/[slug].jsx b/src/pages/shop/promo/[slug].jsx new file mode 100644 index 00000000..cfb2c841 --- /dev/null +++ b/src/pages/shop/promo/[slug].jsx @@ -0,0 +1,394 @@ +import dynamic from 'next/dynamic' +import NextImage from 'next/image'; +import { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import Seo from '../../../core/components/Seo.jsx' +import Promocrumb from '../../../lib/promo/components/Promocrumb.jsx' +import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx' +import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card.tsx' +import React from 'react' +import DesktopView from '../../../core/components/views/DesktopView.jsx'; +import MobileView from '../../../core/components/views/MobileView.jsx'; +import 'swiper/swiper-bundle.css'; +import useDevice from '../../../core/hooks/useDevice.js' +import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion.jsx'; +import ProductFilter from '../../../lib/product/components/ProductFilter.jsx'; +import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'; +import { formatCurrency } from '../../../core/utils/formatValue.js'; +import Pagination from '../../../core/components/elements/Pagination/Pagination.js'; +import whatsappUrl from '../../../core/utils/whatsappUrl.js'; +import _ from 'lodash'; +import useActive from '../../../core/hooks/useActive.js'; +import useProductSearch from '../../../lib/promo/hooks/usePromotionSearch.js'; + +const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout.jsx')) + +export default function PromoDetail() { + const router = useRouter() + const { slug = '', brand ='', category='', page = '1' } = router.query + const [currentPage, setCurrentPage] = useState(parseInt(10) || 1); + const [orderBy, setOrderBy] = useState(router.query?.orderBy); + const popup = useActive(); + const prefixUrl = `/shop/promo/${slug}` + const [queryFinal, setQueryFinal] = useState({}); + const [limit, setLimit] = useState(30); + const [q, setQ] = useState('*'); + const [finalQuery, setFinalQuery] = useState({}); + const [products, setProducts] = useState(null); + const [brandValues, setBrand] = useState( + !router.pathname.includes('brands') + ? router.query.brand + ? router.query.brand.split(',') + : [] + : [] + ); + + const [categoryValues, setCategory] = useState( + router.query?.category?.split(',') || router.query?.category?.split(',') + ); + + const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null); + const [priceTo, setPriceTo] = useState(router.query?.priceTo || null); + + + useEffect(() => { + const newQuery = { + fq: `type_value_s:${slug}`, + page : router.query.page? router.query.page : 1, + brand : router.query.brand? router.query.brand : '', + category : router.query.category? router.query.category : '', + priceFrom : router.query.priceFrom? router.query.priceFrom : '', + priceTo : router.query.priceTo? router.query.priceTo : '', + limit : router.query.limit? router.query.limit : '', + orderBy : router.query.orderBy? router.query.orderBy : '' + }; + setFinalQuery(newQuery); +}, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage]); + useEffect(() => { + setQueryFinal({ ...finalQuery, q, limit, orderBy }); + }, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage, finalQuery]); + + const { productSearch } = useProductSearch({ + query: queryFinal, + operation: 'OR', + }); + + + const pageCount = Math.ceil(productSearch.data?.response.numFound / limit); + const productStart = productSearch.data?.responseHeader.params.start; + const productRows = limit; + const productFound = productSearch.data?.response.numFound; + + useEffect(() => { + setProducts(productSearch.data?.response?.products); + }, [productSearch]); + + const brands = []; + for ( + let i = 0; + i < productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s.length; + i += 2 + ) { + const brand = + productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s[i]; + const qty = + productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s[i + 1]; + if (qty > 0) { + brands.push({ brand, qty }); + } + } + + const categories = []; + for ( + let i = 0; + i < productSearch.data?.facet_counts?.facet_fields?.category_name.length; + i += 2 + ) { + const name = productSearch.data?.facet_counts?.facet_fields?.category_name[i]; + const qty = + productSearch.data?.facet_counts?.facet_fields?.category_name[i + 1]; + if (qty > 0) { + categories.push({ name, qty }); + } + } + + function capitalizeFirstLetter(string) { + string = string.replace(/_/g, ' '); + return string.replace(/(^\w|\s\w)/g, function(match) { + return match.toUpperCase(); + }); + } + + const handleDeleteFilter = async (source, value) => { + let params = { + q: router.query.q, + orderBy: '', + brand: brandValues.join(','), + category: categoryValues?.join(','), + priceFrom: priceFrom || '', + priceTo: priceTo || '', + }; + + let brands = brandValues; + let catagories = categoryValues; + switch (source) { + case 'brands': + brands = brandValues.filter((item) => item !== value); + params.brand = brands.join(','); + await setBrandValues(brands); + break; + case 'category': + catagories = categoryValues.filter((item) => item !== value); + params.category = catagories.join(','); + await setCategoryValues(catagories); + break; + case 'price': + params.priceFrom = ''; + params.priceTo = ''; + break; + case 'delete': + params = { + q: router.query.q, + orderBy: '', + brand: '', + category: '', + priceFrom: '', + priceTo: '', + }; + break; + } + + handleSubmitFilter(params); + }; + const handleSubmitFilter = (params) => { + params = _.pickBy(params, _.identity); + params = toQuery(params); + router.push(`${slug}?${params}`); + }; + + + const toQuery = (obj) => { + const str = Object.keys(obj) + .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`) + .join('&') + return str + } + + const whatPromo = capitalizeFirstLetter(slug) + const queryWithoutSlug = _.omit(router.query, ['slug']) + + return ( + <BasicLayout> + <Seo + title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`} + description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif' + /> + <Promocrumb brandName={whatPromo} /> + <MobileView> + <div className='p-4 pt-0'> + <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1> + + <FilterChoicesComponent + brandValues={brandValues} + categoryValues={categoryValues} + priceFrom={priceFrom} + priceTo={priceTo} + handleDeleteFilter={handleDeleteFilter} + /> + {products?.length >= 1 && ( + <div className='flex items-center gap-x-2 mb-5 justify-between'> + <div> + <button + className='btn-light py-2 px-5 h-[40px]' + onClick={popup.activate} + > + Filter + </button> + </div> + </div> + )} + {productSearch.isLoading && <div className='container flex justify-center my-4'> + <LogoSpinner width={48} height={48} /> + </div>} + {products && ( + <> + <div className='grid grid-cols-1 gap-x-1 gap-y-1'> + {products?.map((promotion) => ( + <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 "> + <ProductPromoCard promotion={promotion}/> + </div> + ))} + </div> + </> + ) } + + <Pagination + pageCount={pageCount} + currentPage={parseInt(page)} + url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`} + className='mt-6 mb-2' + /> + <ProductFilter + active={popup.active} + close={popup.deactivate} + brands={brands || []} + categories={categories || []} + prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`} + defaultBrand={null} + /> + </div> + + </MobileView> + <DesktopView> + <div className='container mx-auto flex mb-3 flex-col'> + <div className='w-full pl-6'> + <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1> + <div className=' w-full h-full flex flex-row items-center '> + + <div className='detail-filter w-1/2 flex justify-start items-center mt-4'> + + <FilterChoicesComponent + brandValues={brandValues} + categoryValues={categoryValues} + priceFrom={priceFrom} + priceTo={priceTo} + handleDeleteFilter={handleDeleteFilter} + /> + </div> + <div className='Filter w-1/2 flex flex-col'> + + <ProductFilterDesktop + brands={brands || []} + categories={categories || []} + prefixUrl={'/shop/promo'} + // defaultBrand={null} + /> + </div> + </div> + {productSearch.isLoading ? ( + <div className='container flex justify-center my-4'> + <LogoSpinner width={48} height={48} /> + </div> + ) : products && products.length >= 1 ? ( + <> + <div className='grid grid-cols-1 gap-x-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'> + {products?.map((promotion) => ( + <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] "> + <ProductPromoCard promotion={promotion}/> + </div> + ))} + </div> + </> + ) : ( + <div className="text-center my-8"> + <p>Belum ada promo pada kategori ini</p> + </div> + )} + <div className='flex justify-between items-center mt-6 mb-2'> + <div className='pt-2 pb-6 flex items-center gap-x-3'> + <NextImage + src='/images/logo-question.png' + alt='Logo Question Indoteknik' + width={60} + height={60} + /> + <div className='text-gray_r-12/90'> + <span> + Barang yang anda cari tidak ada?{' '} + <a + href={ + router.query?.q + ? whatsappUrl('productSearch', { + name: router.query.q, + }) + : whatsappUrl() + } + className='text-danger-500' + > + Hubungi Kami + </a> + </span> + </div> + </div> + + + + <Pagination + pageCount={pageCount} + currentPage={parseInt(page)} + url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`} + className='mt-6 mb-2' + /> + </div> + + </div> + </div> + </DesktopView> + </BasicLayout> + ) + } + +const FilterChoicesComponent = ({ + brandValues, + categoryValues, + priceFrom, + priceTo, + handleDeleteFilter, + }) => ( + <div className='flex items-center mb-4'> + <HStack spacing={2} className='flex-wrap'> + {brandValues?.map((value, index) => ( + <Tag + size='lg' + key={index} + borderRadius='lg' + variant='outline' + colorScheme='gray' + > + <TagLabel>{value}</TagLabel> + <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} /> + </Tag> + ))} + + {categoryValues?.map((value, index) => ( + <Tag + size='lg' + key={index} + borderRadius='lg' + variant='outline' + colorScheme='gray' + > + <TagLabel>{value}</TagLabel> + <TagCloseButton + onClick={() => handleDeleteFilter('category', value)} + /> + </Tag> + ))} + {priceFrom && priceTo && ( + <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'> + <TagLabel> + {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)} + </TagLabel> + <TagCloseButton + onClick={() => handleDeleteFilter('price', priceFrom)} + /> + </Tag> + )} + {brandValues?.length > 0 || + categoryValues?.length > 0 || + priceFrom || + priceTo ? ( + <span> + <button + className='btn-transparent py-2 px-5 h-[40px] text-red-700' + onClick={() => handleDeleteFilter('delete')} + > + Hapus Semua + </button> + </span> + ) : ( + '' + )} + </HStack> + </div> +); diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx deleted file mode 100644 index aaee1249..00000000 --- a/src/pages/shop/promo/[slug].tsx +++ /dev/null @@ -1,523 +0,0 @@ -import dynamic from 'next/dynamic' -import NextImage from 'next/image'; -import { useEffect, useState } from 'react' -import { useRouter } from 'next/router' -import Seo from '../../../core/components/Seo' -import Promocrumb from '../../../lib/promo/components/Promocrumb' -import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi' -import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx' -import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card' -import { IPromotion } from '../../../../src-migrate/types/promotion' -import React from 'react' -import { SolrResponse } from "../../../../src-migrate/types/solr.ts"; -import DesktopView from '../../../core/components/views/DesktopView'; -import MobileView from '../../../core/components/views/MobileView'; -import 'swiper/swiper-bundle.css'; -import useDevice from '../../../core/hooks/useDevice' -import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion'; -import ProductFilter from '../../../lib/product/components/ProductFilter'; -import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'; -import { formatCurrency } from '../../../core/utils/formatValue'; -import Pagination from '../../../core/components/elements/Pagination/Pagination'; -import SideBanner from '../../../../src-migrate/modules/side-banner'; -import whatsappUrl from '../../../core/utils/whatsappUrl'; -import { cons, toQuery } from 'lodash-contrib'; -import _ from 'lodash'; -import useActive from '../../../core/hooks/useActive'; - -const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout')) - -export default function PromoDetail() { - const router = useRouter() - const { slug = '', brand ='', category='', priceFrom = '', priceTo = '', page = '1' } = router.query - const [promoItems, setPromoItems] = useState<any[]>([]) - const [promoData, setPromoData] = useState<IPromotion[] | null>(null) - const [currentPage, setCurrentPage] = useState(parseInt(page as string, 10) || 1); - const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman - const [loading, setLoading] = useState(true); - const { isMobile, isDesktop } = useDevice() - const [brands, setBrands] = useState<Brand[]>([]); - const [categories, setCategories] = useState<Category[]>([]); - const [brandValues, setBrandValues] = useState<string[]>([]); - const [categoryValues, setCategoryValues] = useState<string[]>([]); - const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular'); - const popup = useActive(); - const prefixUrl = `/shop/promo/${slug}` - - useEffect(() => { - if (router.query.brand) { - let brandsArray: string[] = []; - if (Array.isArray(router.query.brand)) { - brandsArray = router.query.brand; - } else if (typeof router.query.brand === 'string') { - brandsArray = router.query.brand.split(',').map((brand) => brand.trim()); - } - setBrandValues(brandsArray); - } else { - setBrandValues([]); - } - - if (router.query.category) { - let categoriesArray: string[] = []; - - if (Array.isArray(router.query.category)) { - categoriesArray = router.query.category; - } else if (typeof router.query.category === 'string') { - categoriesArray = router.query.category.split(',').map((category) => category.trim()); - } - setCategoryValues(categoriesArray); - } else { - setCategoryValues([]); - } - }, [router.query.brand, router.query.category]); - - interface Brand { - brand: string; - qty: number; - } - - interface Category { - name: string; - qty: number; - } - - useEffect(() => { - const loadPromo = async () => { - setLoading(true); - const brandsData: Brand[] = []; - const categoriesData: Category[] = []; - - const pageNumber = Array.isArray(page) ? parseInt(page[0], 10) : parseInt(page, 10); - setCurrentPage(pageNumber) - - try { - const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`,0,100); - setPromoItems(items); - - if (items.length === 0) { - setPromoData([]) - setLoading(false); - return; - } - - const brandArray = Array.isArray(brand) ? brand : brand.split(','); - const categoryArray = Array.isArray(category) ? category : category.split(','); - - const promoDataPromises = items.map(async (item) => { - - try { - let brandQuery = ''; - if (brand) { - brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR '); - brandQuery = `(${brandQuery})`; - } - - let categoryQuery = ''; - if (category) { - categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR '); - categoryQuery = `(${categoryQuery})`; - } - - let priceQuery = ''; - if (priceFrom && priceTo) { - priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`; - } else if (priceFrom) { - priceQuery = `price_f:[${priceFrom} TO *]`; - } else if (priceTo) { - priceQuery = `price_f:[* TO ${priceTo}]`; - } - - let combinedQuery = ''; - let combinedQueryPrice = `${priceQuery}`; - if (brand && category && priceFrom || priceTo) { - combinedQuery = `${brandQuery} AND ${categoryQuery} `; - } else if (brand && category) { - combinedQuery = `${brandQuery} AND ${categoryQuery}`; - } else if (brand && priceFrom || priceTo) { - combinedQuery = `${brandQuery}`; - } else if (category && priceFrom || priceTo) { - combinedQuery = `${categoryQuery}`; - } else if (brand) { - combinedQuery = brandQuery; - } else if (category) { - combinedQuery = categoryQuery; - } - - if (combinedQuery && priceFrom || priceTo) { - const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`); - const product = response.response.docs[0]; - const product_id = product.id; - const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`,0,100); - return response2; - }else if(combinedQuery){ - const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`); - const product = response.response.docs[0]; - const product_id = product.id; - const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `,0,100); - return response2; - } else { - const response = await fetchPromoItemsSolr(`id:${item.id}`,0,100); - return response; - } - } catch (fetchError) { - return []; - } - }); - - const promoDataArray = await Promise.all(promoDataPromises); - const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); - setPromoData(mergedPromoData); - - const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => { - if (promoData) { - const dataBrandCategory = promoData.map(async (item) => { - let response; - if(category){ - const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR '); - response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`); - }else{ - response = await fetchVariantSolr(`id:${item.products[0].product_id}`) - } - - - if (response.response?.docs?.length > 0) { - const product = response.response.docs[0]; - const manufactureNameS = product.manufacture_name; - if (Array.isArray(manufactureNameS)) { - for (let i = 0; i < manufactureNameS.length; i += 2) { - const brand = manufactureNameS[i]; - const qty = 1; - const existingBrandIndex = brandsData.findIndex(b => b.brand === brand); - if (existingBrandIndex !== -1) { - brandsData[existingBrandIndex].qty += qty; - } else { - brandsData.push({ brand, qty }); - } - } - } - - const categoryNameS = product.category_name; - if (Array.isArray(categoryNameS)) { - for (let i = 0; i < categoryNameS.length; i += 2) { - const name = categoryNameS[i]; - const qty = 1; - const existingCategoryIndex = categoriesData.findIndex(c => c.name === name); - if (existingCategoryIndex !== -1) { - categoriesData[existingCategoryIndex].qty += qty; - } else { - categoriesData.push({ name, qty }); - } - } - } - } - }); - - return Promise.all(dataBrandCategory); - } - }); - - await Promise.all(dataBrandCategoryPromises); - setBrands(brandsData); - setCategories(categoriesData); - setLoading(false); - - } catch (loadError) { - // console.error("Error loading promo items:", loadError) - setLoading(false); - } - } - - if (slug) { - loadPromo() - } - },[slug, brand, category, priceFrom, priceTo, currentPage]); - - - function capitalizeFirstLetter(string) { - string = string.replace(/_/g, ' '); - return string.replace(/(^\w|\s\w)/g, function(match) { - return match.toUpperCase(); - }); - } - - const handleDeleteFilter = async (source, value) => { - let params = { - q: router.query.q, - orderBy: '', - brand: brandValues.join(','), - category: categoryValues.join(','), - priceFrom: priceFrom || '', - priceTo: priceTo || '', - }; - - let brands = brandValues; - let catagories = categoryValues; - switch (source) { - case 'brands': - brands = brandValues.filter((item) => item !== value); - params.brand = brands.join(','); - await setBrandValues(brands); - break; - case 'category': - catagories = categoryValues.filter((item) => item !== value); - params.category = catagories.join(','); - await setCategoryValues(catagories); - break; - case 'price': - params.priceFrom = ''; - params.priceTo = ''; - break; - case 'delete': - params = { - q: router.query.q, - orderBy: '', - brand: '', - category: '', - priceFrom: '', - priceTo: '', - }; - break; - } - - handleSubmitFilter(params); - }; - const handleSubmitFilter = (params) => { - params = _.pickBy(params, _.identity); - params = toQuery(params); - router.push(`${slug}?${params}`); - }; - - const visiblePromotions = promoData?.slice( (currentPage-1) * itemsPerPage, currentPage * 12) - - const toQuery = (obj) => { - const str = Object.keys(obj) - .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`) - .join('&') - return str - } - - const whatPromo = capitalizeFirstLetter(slug) - const queryWithoutSlug = _.omit(router.query, ['slug']) - const queryString = toQuery(queryWithoutSlug) - - return ( - <BasicLayout> - <Seo - title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`} - description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif' - /> - <Promocrumb brandName={whatPromo} /> - <MobileView> - <div className='p-4 pt-0'> - <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1> - - <FilterChoicesComponent - brandValues={brandValues} - categoryValues={categoryValues} - priceFrom={priceFrom} - priceTo={priceTo} - handleDeleteFilter={handleDeleteFilter} - /> - {promoItems.length >= 1 && ( - <div className='flex items-center gap-x-2 mb-5 justify-between'> - <div> - <button - className='btn-light py-2 px-5 h-[40px]' - onClick={popup.activate} - > - Filter - </button> - </div> - </div> - )} - - {loading ? ( - <div className='container flex justify-center my-4'> - <LogoSpinner width={48} height={48} /> - </div> - ) : promoData && promoItems.length >= 1 ? ( - <> - <div className='grid grid-cols-1 gap-x-1 gap-y-1'> - {visiblePromotions?.map((promotion) => ( - <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 "> - <ProductPromoCard promotion={promotion}/> - </div> - ))} - </div> - </> - ) : ( - <div className="text-center my-8"> - <p>Belum ada promo pada kategori ini</p> - </div> - )} - - <Pagination - pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)} - currentPage={currentPage} - url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`} - className='mt-6 mb-2' - /> - <ProductFilter - active={popup.active} - close={popup.deactivate} - brands={brands || []} - categories={categories || []} - prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`} - defaultBrand={null} - /> - </div> - - </MobileView> - <DesktopView> - <div className='container mx-auto flex mb-3 flex-col'> - <div className='w-full pl-6'> - <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1> - <div className=' w-full h-full flex flex-row items-center '> - - <div className='detail-filter w-1/2 flex justify-start items-center mt-4'> - - <FilterChoicesComponent - brandValues={brandValues} - categoryValues={categoryValues} - priceFrom={priceFrom} - priceTo={priceTo} - handleDeleteFilter={handleDeleteFilter} - /> - </div> - <div className='Filter w-1/2 flex flex-col'> - - <ProductFilterDesktop - brands={brands || []} - categories={categories || []} - prefixUrl={'/shop/promo'} - // defaultBrand={null} - /> - </div> - </div> - {loading ? ( - <div className='container flex justify-center my-4'> - <LogoSpinner width={48} height={48} /> - </div> - ) : promoData && promoItems.length >= 1 ? ( - <> - <div className='grid grid-cols-1 gap-x-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'> - {visiblePromotions?.map((promotion) => ( - <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] "> - <ProductPromoCard promotion={promotion}/> - </div> - ))} - </div> - </> - ) : ( - <div className="text-center my-8"> - <p>Belum ada promo pada kategori ini</p> - </div> - )} - <div className='flex justify-between items-center mt-6 mb-2'> - <div className='pt-2 pb-6 flex items-center gap-x-3'> - <NextImage - src='/images/logo-question.png' - alt='Logo Question Indoteknik' - width={60} - height={60} - /> - <div className='text-gray_r-12/90'> - <span> - Barang yang anda cari tidak ada?{' '} - <a - href={ - router.query?.q - ? whatsappUrl('productSearch', { - name: router.query.q, - }) - : whatsappUrl() - } - className='text-danger-500' - > - Hubungi Kami - </a> - </span> - </div> - </div> - - - - <Pagination - pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)} - currentPage={currentPage} - url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`} - className='mt-6 mb-2' - /> - </div> - - </div> - </div> - </DesktopView> - </BasicLayout> - ) - } - -const FilterChoicesComponent = ({ - brandValues, - categoryValues, - priceFrom, - priceTo, - handleDeleteFilter, - }) => ( - <div className='flex items-center mb-4'> - <HStack spacing={2} className='flex-wrap'> - {brandValues?.map((value, index) => ( - <Tag - size='lg' - key={index} - borderRadius='lg' - variant='outline' - colorScheme='gray' - > - <TagLabel>{value}</TagLabel> - <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} /> - </Tag> - ))} - - {categoryValues?.map((value, index) => ( - <Tag - size='lg' - key={index} - borderRadius='lg' - variant='outline' - colorScheme='gray' - > - <TagLabel>{value}</TagLabel> - <TagCloseButton - onClick={() => handleDeleteFilter('category', value)} - /> - </Tag> - ))} - {priceFrom && priceTo && ( - <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'> - <TagLabel> - {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)} - </TagLabel> - <TagCloseButton - onClick={() => handleDeleteFilter('price', priceFrom)} - /> - </Tag> - )} - {brandValues?.length > 0 || - categoryValues?.length > 0 || - priceFrom || - priceTo ? ( - <span> - <button - className='btn-transparent py-2 px-5 h-[40px] text-red-700' - onClick={() => handleDeleteFilter('delete')} - > - Hapus Semua - </button> - </span> - ) : ( - '' - )} - </HStack> - </div> -); diff --git a/src/pages/sitemap/brands.xml.js b/src/pages/sitemap/brands.xml.js index c85c40e9..65a84e97 100644 --- a/src/pages/sitemap/brands.xml.js +++ b/src/pages/sitemap/brands.xml.js @@ -15,8 +15,8 @@ export async function getServerSideProps({ res }) { const url = sitemap.ele('url') url.ele('loc', createSlug(baseUrl, brand.name, brand.id)) url.ele('lastmod', date.toISOString().slice(0, 10)) - url.ele('changefreq', 'weekly') - url.ele('priority', '0.6') + url.ele('changefreq', 'daily') + url.ele('priority', '1.0') }) res.setHeader('Content-Type', 'text/xml') diff --git a/src/pages/sitemap/products/[page].js b/src/pages/sitemap/products/[page].js index 2f9c3198..e39755d6 100644 --- a/src/pages/sitemap/products/[page].js +++ b/src/pages/sitemap/products/[page].js @@ -19,7 +19,7 @@ export async function getServerSideProps({ query, res }) { const url = sitemap.ele('url') url.ele('loc', createSlug(baseUrl, product.name, product.id)) url.ele('lastmod', date.toISOString().slice(0, 10)) - url.ele('changefreq', 'weekly') + url.ele('changefreq', 'daily') url.ele('priority', '0.8') }) diff --git a/src/pages/tracking-order.jsx b/src/pages/tracking-order.jsx new file mode 100644 index 00000000..002acd42 --- /dev/null +++ b/src/pages/tracking-order.jsx @@ -0,0 +1,27 @@ +import Seo from '@/core/components/Seo' +import dynamic from 'next/dynamic' +import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'; +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +const PageTrackingOrder = dynamic(() => import('@/lib/tracking-order/component/TrackingOrder')) + +export default function TrackingOrder() { + return ( + <> + <Seo title='Tracking Order - Indoteknik.com' /> + + <DesktopView> + <BasicLayout> + <PageTrackingOrder/> + </BasicLayout> + </DesktopView> + + <MobileView> + <BasicLayout> + <PageTrackingOrder/> + </BasicLayout> + </MobileView> + </> + ); +} diff --git a/src/styles/globals.css b/src/styles/globals.css index f6561b00..6447284e 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -98,7 +98,7 @@ button { border text-gray_r-12 border-gray_r-7 - !bg-white + bg-white bg-transparent w-full leading-none @@ -117,7 +117,7 @@ button { } .form-msg-danger { - @apply text-danger-600 mt-2 block; + @apply text-danger-600 mt-2 block text-sm; } .btn-yellow, @@ -563,7 +563,8 @@ button { } .category-mega-box > div:hover .category-mega-box__parent { - @apply bg-gray_r-5; + @apply bg-gray_r-5 + w-full; } .category-mega-box > div:hover .category-mega-box__child-wrapper { @@ -583,12 +584,11 @@ button { @apply absolute left-[100%] top-12 - w-[40vw] bg-gray_r-1/90 backdrop-blur-md border border-gray_r-6 - p-6 + p-6 opacity-0 h-full transition-all @@ -604,6 +604,7 @@ button { transition-colors ease-linear duration-100 + w-fit font-semibold; } @@ -613,6 +614,7 @@ button { transition-colors ease-linear duration-100 + w-full font-normal; } diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index d4694eb2..f73e966a 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -1,3 +1,28 @@ +export const promoMappingSolr = (promotions) => { + return promotions.map((promotion) => { + let productMapped = { + id: promotion.id, + program_id: promotion.program_id_i, + name: promotion.name_s, + type: { + value: promotion.type_value_s, + label: promotion.type_label_s, + }, + limit: promotion.package_limit_i, + limit_user: promotion.package_limit_user_i, + limit_trx: promotion.package_limit_trx_i, + price: promotion.price_f, + sequence: promotion.sequence_i, + total_qty: promotion.total_qty_i, + products: JSON.parse(promotion.products_s) || '', + product_id: promotion.product_ids[0], + qty_sold_f: promotion.total_qty_sold_f, + free_products: JSON.parse(promotion.free_products_s), + }; + return productMapped; + }); +}; + export const productMappingSolr = (products, pricelist) => { return products.map((product) => { let price = product.price_tier1_v2_f || 0; @@ -36,9 +61,11 @@ export const productMappingSolr = (products, pricelist) => { tag: product?.flashsale_tag_s || 'FLASH SALE', }, qtySold: product?.qty_sold_f || 0, - isTkdn:product?.tkdn_b || false, - isSni:product?.sni_b || false, - voucherPastiHemat:product?.voucher_pastihemat || [] + isTkdn: product?.tkdn_b || false, + isSni: product?.sni_b || false, + newVoucherPastiHemat: [], + is_in_bu: product?.is_in_bu_b || false, + voucherPastiHemat: product?.voucher_pastihemat || [], }; if (product.manufacture_id_i && product.manufacture_name_s) { @@ -56,6 +83,14 @@ export const productMappingSolr = (products, pricelist) => { name: product.category_name_s || '', }, ]; + productMapped.newVoucherPastiHemat = [ + { + min_purchase: product.voucher_min_purchase_f || 0, + discount_type: product.voucher_discount_type_s || '', + discount_amount: product.voucher_discount_amount_f || 0, + max_discount: product.voucher_max_discount_f || 0, + }, + ]; return productMapped; }); }; diff --git a/tailwind.config.js b/tailwind.config.js index f1c740d5..799fdb02 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -116,7 +116,19 @@ module.exports = { 800: '#760A26', 900: '#610625' } - } + }, + keyframes: { + wobble: { + '0%': { transform: 'translateY(0)' }, + '25%': { transform: 'translateY(-10px)' }, + '50%': { transform: 'translateY(0)' }, + '75%': { transform: 'translateY(10px)' }, + '100%': { transform: 'translateY(0)' }, + }, + }, + animation: { + wobble: 'wobble 0.5s ease forwards', + }, } }, plugins: [require('@tailwindcss/line-clamp'), require('@tailwindcss/typography')] diff --git a/tsconfig.json b/tsconfig.json index 8613c022..96670169 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "ES5", - "lib": [ - "DOM", - "DOM.Iterable", - "ESNext" - ], + "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -33,10 +29,10 @@ "**/*.ts", "**/*.tsx", "**/*.jsx", - ".next/types/**/*.ts" -, "src/pages/shop/promo/index.tsx", "src/pages/shop/promo/[slug].jsx" ], - "exclude": [ - "node_modules", - "src" - ] + ".next/types/**/*.ts", + "src-migrate/**/*", + "src/pages/shop/promo/index.tsx", + "src/pages/shop/promo/[slug].jsx" + ], + "exclude": ["node_modules", "src"] } |
