@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/account/components/account-info/index.tsx

@@ -0,0 +1,145 @@
+import { Disclosure } from "@headlessui/react"
+import { Badge, Button, clx } from "@medusajs/ui"
+import { useEffect } from "react"
+
+import useToggleState from "@core/hooks/use-toggle-state"
+import { useFormStatus } from "react-dom"
+
+type AccountInfoProps = {
+  label: string
+  currentInfo: string | React.ReactNode
+  isSuccess?: boolean
+  isError?: boolean
+  errorMessage?: string
+  clearState: () => void
+  children?: React.ReactNode
+  'data-testid'?: string
+}
+
+const AccountInfo = ({
+  label,
+  currentInfo,
+  isSuccess,
+  isError,
+  clearState,
+  errorMessage = "An error occurred, please try again",
+  children,
+  'data-testid': dataTestid
+}: AccountInfoProps) => {
+  const { state, close, toggle } = useToggleState()
+
+  const { pending } = useFormStatus()
+
+  const handleToggle = () => {
+    clearState()
+    setTimeout(() => toggle(), 100)
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      close()
+    }
+  }, [isSuccess, close])
+
+  return (
+    <div className="text-small-regular" data-testid={dataTestid}>
+      <div className="flex items-start justify-between">
+        <div className="flex flex-col gap-y-1">
+          <span className="text-sm font-bold text-heading uppercase tracking-wider">{label}</span>
+          {!state && (
+            <div className="flex flex-1">
+              {typeof currentInfo === "string" ? (
+                <span className="text-sm text-gray-600 font-medium" data-testid="current-info">
+                  {currentInfo}
+                </span>
+              ) : (
+                currentInfo
+              )}
+            </div>
+          )}
+        </div>
+        <div>
+          <Button
+            variant="secondary"
+            className="w-auto h-7 px-4 rounded-full text-[11px] font-bold uppercase tracking-wider"
+            onClick={handleToggle}
+            type={state ? "reset" : "button"}
+            data-testid="edit-button"
+            data-active={state}
+          >
+            {state ? "Cancel" : "Edit"}
+          </Button>
+        </div>
+      </div>
+
+      {/* Success state */}
+      <Disclosure>
+        <Disclosure.Panel
+          static
+          className={clx(
+            "transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden",
+            {
+              "max-h-[1000px] opacity-100": isSuccess,
+              "max-h-0 opacity-0": !isSuccess,
+            }
+          )}
+          data-testid="success-message"
+        >
+          <div className="my-2">
+            <Badge className="px-3 py-1 rounded-full bg-green-50 text-green-700 border-green-100 text-[10px] font-bold uppercase tracking-wider">
+              {label} updated succesfully
+            </Badge>
+          </div>
+        </Disclosure.Panel>
+      </Disclosure>
+
+      {/* Error state  */}
+      <Disclosure>
+        <Disclosure.Panel
+          static
+          className={clx(
+            "transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden",
+            {
+              "max-h-[1000px] opacity-100": isError,
+              "max-h-0 opacity-0": !isError,
+            }
+          )}
+          data-testid="error-message"
+        >
+          <Badge className="p-2 my-4" color="red">
+            <span>{errorMessage}</span>
+          </Badge>
+        </Disclosure.Panel>
+      </Disclosure>
+
+      <Disclosure>
+        <Disclosure.Panel
+          static
+          className={clx(
+            "transition-[max-height,opacity] duration-300 ease-in-out overflow-visible",
+            {
+              "max-h-[1000px] opacity-100": state,
+              "max-h-0 opacity-0": !state,
+            }
+          )}
+        >
+          <div className="flex flex-col gap-y-1 py-2">
+            <div>{children}</div>
+            <div className="flex items-center justify-end mt-2">
+              <Button
+                isLoading={pending}
+                className="w-fit px-8 h-11 rounded-[30px] text-sm bg-brand-accent hover:bg-brand-accent-hover text-inverse border-none shadow-lg shadow-brand-sm"
+                type="submit"
+                data-testid="save-button"
+              >
+                Save changes
+              </Button>
+            </div>
+          </div>
+        </Disclosure.Panel>
+      </Disclosure>
+    </div>
+  )
+}
+
+export default AccountInfo

package/templates/storefront/src/modules/account/components/account-nav/icons.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import React from "react"
+
+export const AccountDetailsIcon = ({ color = "currentColor", ...props }: React.SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clipPath="url(#clip0_account_details)">
+            <path d="M33.164 33.2736C35.3952 31.0742 36.6237 28.1357 36.6237 25C36.6237 18.5897 31.409 13.375 24.9987 13.375C18.5885 13.375 13.376 18.5897 13.376 25C13.376 28.1335 14.6041 31.0716 16.8339 33.2717C18.9403 35.3604 21.7689 36.5596 24.7347 36.6212C24.8236 36.6231 24.9102 36.625 24.9991 36.625C28.0563 36.6283 30.9907 35.4238 33.164 33.2736ZM24.9987 14.1017C31.0081 14.1017 35.897 18.9906 35.897 25C35.897 27.7266 34.9044 30.2935 33.0916 32.2967C32.5719 30.7829 31.4225 30.3895 29.1579 30.1195C28.4217 30.0317 27.8922 29.7655 27.5836 29.3286C27.2112 28.8006 27.236 28.135 27.2716 27.8342C28.3025 27.247 28.7109 25.6052 28.8462 24.8631C28.9704 24.8432 29.0712 24.7941 29.1474 24.7439C29.5745 24.4604 29.8047 23.7085 29.8527 22.4459C29.8588 22.2774 29.8303 22.1095 29.7691 21.9524C29.7079 21.7953 29.6153 21.6524 29.4969 21.5324C29.373 21.4077 29.2241 21.3107 29.06 21.2477C29.3296 20.2022 29.1927 19.111 28.6662 18.1514C28.3882 17.6401 28.0086 17.1911 27.5506 16.832C27.0927 16.4728 26.5662 16.2111 26.0034 16.063C24.8165 15.7457 24.7636 15.7364 24.7344 15.7311C23.9049 15.5961 23.2947 15.721 22.9224 16.1016C22.7097 16.3187 22.6141 16.5869 22.5804 16.8227H22.1551C22.1016 16.8227 22.0487 16.8346 22.0003 16.8574C21.9518 16.8802 21.909 16.9135 21.875 16.9547C20.1496 19.045 20.4751 20.5667 20.8295 21.2954C20.7084 21.3554 20.597 21.4352 20.5006 21.5324C20.3821 21.6523 20.2895 21.7952 20.2283 21.9523C20.1671 22.1094 20.1386 22.2774 20.1447 22.4459C20.1924 23.7089 20.423 24.4604 20.8501 24.7439C20.9262 24.7941 21.0271 24.8429 21.1512 24.8631C21.2862 25.6052 21.6946 27.2466 22.7259 27.8342C22.7619 28.1357 22.7862 28.8006 22.4139 29.3286C22.1052 29.7659 21.5757 30.0321 20.84 30.1195C18.5754 30.3895 17.426 30.7825 16.9062 32.2945C15.0946 30.2909 14.1027 27.7247 14.1027 25C14.1024 18.9906 18.9905 14.1017 24.9987 14.1017ZM32.3859 33.0089C30.3912 34.8546 27.7164 35.9286 24.9826 35.8874C22.2204 35.9237 19.4765 34.7984 17.4875 32.89C17.8107 31.51 18.4824 31.1327 20.9259 30.8414C21.878 30.7277 22.58 30.3576 23.0116 29.7415C23.6922 28.7702 23.4196 27.5601 23.4076 27.5091C23.3945 27.4528 23.3681 27.4005 23.3307 27.3565C23.2932 27.3124 23.2458 27.278 23.1924 27.256C22.3119 26.8937 21.9016 25.0911 21.8176 24.4274C21.8107 24.3729 21.7915 24.3207 21.7616 24.2747C21.7316 24.2287 21.6916 24.1901 21.6446 24.1617C21.5976 24.1334 21.5448 24.116 21.4901 24.111C21.4355 24.1059 21.3804 24.1133 21.329 24.1326C21.2739 24.1536 21.2607 24.1446 21.2517 24.139C21.1314 24.0591 20.9157 23.6069 20.8707 22.4189C20.8651 22.2779 20.9172 22.1451 21.017 22.0442C21.0658 21.9935 21.1249 21.9538 21.1902 21.9276C21.2556 21.9014 21.3258 21.8894 21.3961 21.8924C21.5412 21.9017 21.6736 21.8129 21.7347 21.6816C21.7644 21.617 21.7747 21.5452 21.7642 21.4749C21.7538 21.4045 21.7231 21.3388 21.6759 21.2856C21.6252 21.2286 20.4804 19.8891 22.3287 17.5499H22.9407C23.0472 17.5499 23.1481 17.5011 23.2171 17.4201C23.2512 17.3796 23.2761 17.3321 23.2902 17.2811C23.3043 17.23 23.3073 17.1765 23.2989 17.1242C23.2985 17.1209 23.2494 16.8025 23.4451 16.6067C23.6412 16.4102 24.0474 16.3555 24.6042 16.4459C24.6481 16.4556 24.992 16.5449 25.8159 16.7654C26.2837 16.8884 26.7215 17.1059 27.1021 17.4044C27.4828 17.703 27.7984 18.0762 28.0295 18.5012C28.2718 18.9381 28.4175 19.4219 28.4567 19.92C28.4958 20.418 28.4275 20.9187 28.2564 21.388C28.2084 21.502 28.2215 21.6325 28.2912 21.7345C28.361 21.8365 28.4772 21.9021 28.6014 21.8924C28.7435 21.8864 28.88 21.9422 28.9805 22.0442C29.0802 22.1451 29.132 22.2779 29.1267 22.4189C29.0821 23.6069 28.8665 24.0591 28.7457 24.139C28.7371 24.1446 28.724 24.1536 28.6685 24.1326C28.6171 24.1135 28.562 24.1062 28.5074 24.1113C28.4528 24.1164 28.4 24.1338 28.3531 24.1621C28.3061 24.1904 28.2661 24.229 28.2361 24.2749C28.2061 24.3209 28.1869 24.373 28.1799 24.4274C28.0959 25.0911 27.6856 26.8934 26.8051 27.256C26.7517 27.278 26.7043 27.3125 26.6669 27.3565C26.6294 27.4005 26.603 27.4529 26.5899 27.5091C26.5779 27.5601 26.3052 28.7702 26.9859 29.7415C27.4175 30.3576 28.1195 30.7277 29.072 30.8414C31.6452 31.1477 32.2119 31.5906 32.5107 32.8915C32.4695 32.9309 32.4279 32.9702 32.3859 33.0089Z" fill={color} stroke={color} strokeWidth="0.2" />
+        </g>
+        <defs>
+            <clipPath id="clip0_account_details">
+                <rect width="24" height="24" fill="white" transform="translate(13 13)" />
+            </clipPath>
+        </defs>
+    </svg>
+)
+
+export const AddressesIcon = ({ color = "currentColor", ...props }: React.SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g clipPath="url(#clip0_addresses)">
+            <path d="M25.2466 14.0921C25.1775 14.0326 25.0899 14 24.9995 14C24.9091 14 24.8216 14.0326 24.7525 14.0921L20.1978 18.0122V16.0965C20.1978 15.9928 20.1574 15.8933 20.0855 15.82C20.0136 15.7466 19.9161 15.7054 19.8145 15.7054H16.7747C16.673 15.7054 16.5755 15.7466 16.5036 15.82C16.4317 15.8933 16.3913 15.9928 16.3913 16.0965V21.2886L13.636 23.6603C13.5585 23.7273 13.5101 23.8228 13.5014 23.9261C13.4927 24.0293 13.5244 24.1319 13.5896 24.2114L15.2843 26.2608C15.3167 26.3001 15.3565 26.3325 15.4012 26.3561C15.4459 26.3797 15.4947 26.3941 15.5449 26.3984C15.5951 26.4027 15.6456 26.3969 15.6935 26.3813C15.7415 26.3657 15.786 26.3406 15.8244 26.3074L16.3898 25.8208V35.6089C16.3898 35.7126 16.4302 35.8121 16.5021 35.8854C16.574 35.9588 16.6715 36 16.7731 36H33.2255C33.3272 36 33.4247 35.9588 33.4966 35.8854C33.5685 35.8121 33.6089 35.7126 33.6089 35.6089V25.8208L34.1743 26.3074C34.2521 26.3741 34.3526 26.4067 34.4539 26.3979C34.5552 26.3892 34.649 26.3399 34.7148 26.2608L36.4095 24.2114C36.442 24.1722 36.4667 24.1268 36.482 24.0778C36.4973 24.0288 36.5029 23.9772 36.4986 23.926C36.4943 23.8748 36.4801 23.825 36.4568 23.7794C36.4336 23.7338 36.4017 23.6933 36.3631 23.6603L25.2466 14.0921ZM17.158 16.488H19.4311V18.6724L17.158 20.6288V16.488ZM32.8422 35.2182H25.7944C26.9719 33.6748 29.8024 29.7457 29.8024 27.6411C29.8024 24.9389 27.6477 22.7404 24.9993 22.7404C22.3509 22.7404 20.1962 24.9389 20.1962 27.6411C20.1962 29.7457 23.0267 33.6748 24.2043 35.2182H17.1565V25.1614L24.9993 18.4108L32.8422 25.1614V35.2182ZM24.9993 34.9866C23.6462 33.2458 20.9629 29.4261 20.9629 27.6415C20.9629 25.3703 22.7737 23.523 24.9993 23.523C27.2249 23.523 29.0358 25.3707 29.0358 27.6415C29.0358 29.4261 26.3525 33.2462 24.9993 34.9866ZM34.3755 25.4579L25.2466 17.6004C25.1775 17.5407 25.0899 17.5079 24.9993 17.5079C24.9088 17.5079 24.8212 17.5407 24.7521 17.6004L15.6232 25.4579L14.423 24.0064L24.9993 14.9028L35.5757 24.0064L34.3755 25.4579Z" fill={color} stroke={color} strokeWidth="0.2" />
+            <path d="M24.9996 25.158C23.6575 25.158 22.5654 26.2722 22.5654 27.6415C22.5654 29.0108 23.6575 30.1251 24.9996 30.1251C26.3416 30.1251 27.4337 29.0108 27.4337 27.6415C27.4337 26.2722 26.3416 25.158 24.9996 25.158ZM24.9996 29.3425C24.0803 29.3425 23.3321 28.5794 23.3321 27.6411C23.3321 26.7029 24.08 25.9398 24.9996 25.9398C25.9192 25.9398 26.667 26.7029 26.667 27.6411C26.667 28.5794 25.9192 29.3425 24.9996 29.3425Z" fill={color} stroke={color} strokeWidth="0.2" />
+        </g>
+        <defs>
+            <clipPath id="clip0_addresses">
+                <rect width="24" height="24" fill="white" transform="translate(13 13)" />
+            </clipPath>
+        </defs>
+    </svg>
+)
+
+export const OrdersIcon = ({ color = "currentColor", ...props }: React.SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M34.414 20.0717L34.3978 20.0435C34.3755 19.9969 34.3498 19.9521 34.3208 19.9093L31.2856 14.6179C31.0669 14.2368 30.6599 14 30.2232 14H19.7773C19.3399 14 18.9325 14.2373 18.714 14.6195L15.6292 20.0158C15.6023 20.0633 15.5815 20.1141 15.5673 20.167C15.5227 20.2884 15.4999 20.4168 15.5 20.5462V34.4838C15.5 35.3198 16.1745 36 17.0036 36H32.9963C33.8254 36 34.4999 35.3198 34.4999 34.4838V20.4951C34.4999 20.4764 34.4994 20.4579 34.4984 20.4394C34.5075 20.3111 34.478 20.1829 34.414 20.0717ZM25.6613 15.2895H30.1935L32.5812 19.4521H25.6613V15.2895ZM19.807 15.2895H24.3824V19.4521H17.4275L19.807 15.2895ZM33.2211 34.4839C33.221 34.544 33.1973 34.6016 33.1552 34.6441C33.113 34.6865 33.0559 34.7104 32.9963 34.7105H17.0036C16.944 34.7104 16.8869 34.6865 16.8448 34.6441C16.8026 34.6016 16.7789 34.544 16.7789 34.4839V20.7416H33.2211V34.4839Z" fill={color} />
+        <path d="M27.903 25.6026C27.6533 25.3509 27.2484 25.3509 26.9987 25.6026L24.1435 28.4816L23.0457 27.3746C22.796 27.1228 22.3911 27.1228 22.1414 27.3746C21.8917 27.6263 21.8917 28.0346 22.1414 28.2864L23.6915 29.8494C23.7508 29.9093 23.8212 29.9569 23.8988 29.9893C23.9764 30.0217 24.0596 30.0384 24.1436 30.0383C24.3072 30.0383 24.4709 29.9753 24.5957 29.8494L27.903 26.5145C28.1527 26.2627 28.1527 25.8544 27.903 25.6026Z" fill={color} />
+    </svg>
+)
+export const LogoutIcon = ({ color = "#E70000", ...props }: React.SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M81.3188 65.5335H51.4738C51.0498 65.5335 50.6431 65.3649 50.3433 65.0647C50.0434 64.7645 49.875 64.3574 49.875 63.9329C49.875 63.5084 50.0434 63.1013 50.3433 62.8011C50.6431 62.5009 51.0498 62.3323 51.4738 62.3323H81.3188C81.7428 62.3323 82.1495 62.5009 82.4493 62.8011C82.7492 63.1013 82.9176 63.5084 82.9176 63.9329C82.9176 64.3574 82.7492 64.7645 82.4493 65.0647C82.1495 65.3649 81.7428 65.5335 81.3188 65.5335Z" fill={color} />
+        <path d="M72.7913 74.0701C72.4751 74.0703 72.166 73.9765 71.903 73.8008C71.64 73.6251 71.435 73.3752 71.3138 73.0828C71.1926 72.7905 71.1608 72.4687 71.2223 72.1582C71.2838 71.8477 71.4359 71.5624 71.6594 71.3384L79.0375 63.9329L71.6594 56.5274C71.3685 56.2252 71.2079 55.8206 71.2121 55.4009C71.2164 54.9812 71.3851 54.58 71.6819 54.2836C71.9788 53.9873 72.3801 53.8195 72.7993 53.8165C73.2185 53.8134 73.6222 53.9754 73.9233 54.2674L82.4291 62.804C82.728 63.1044 82.8958 63.5111 82.8958 63.9351C82.8958 64.3591 82.728 64.7658 82.4291 65.0662L73.9233 73.6027C73.7747 73.7515 73.5982 73.8693 73.4039 73.9495C73.2097 74.0298 73.0015 74.0707 72.7913 74.0701ZM62.1324 86.875H42.9464C41.3919 86.8739 39.9015 86.2552 38.8023 85.1548C37.7031 84.0544 37.0851 82.5623 37.084 81.0061V48.9939C37.0851 47.4377 37.7031 45.9456 38.8023 44.8452C39.9015 43.7448 41.3919 43.1261 42.9464 43.125H62.1324C63.6869 43.1261 65.1774 43.7448 66.2765 44.8452C67.3757 45.9456 67.9937 47.4377 67.9948 48.9939V53.2622C67.9948 53.6867 67.8264 54.0938 67.5265 54.394C67.2267 54.6942 66.82 54.8628 66.396 54.8628C65.972 54.8628 65.5653 54.6942 65.2654 54.394C64.9656 54.0938 64.7972 53.6867 64.7972 53.2622V48.9939C64.796 48.2867 64.5149 47.6089 64.0154 47.1088C63.5159 46.6088 62.8388 46.3273 62.1324 46.3262H42.9464C42.24 46.3273 41.5629 46.6088 41.0634 47.1088C40.5639 47.6089 40.2828 48.2867 40.2817 48.9939V81.0061C40.2828 81.7133 40.5639 82.3911 41.0634 82.8912C41.5629 83.3912 42.24 83.6727 42.9464 83.6738H62.1324C62.8388 83.6727 63.5159 83.3912 64.0154 82.8912C64.5149 82.3911 64.796 81.7133 64.7972 81.0061V74.6037C64.7972 74.1792 64.9656 73.772 65.2654 73.4719C65.5653 73.1717 65.972 73.003 66.396 73.003C66.82 73.003 67.2267 73.1717 67.5265 73.4719C67.8264 73.772 67.9948 74.1792 67.9948 74.6037V81.0061C67.9937 82.5623 67.3757 84.0544 66.2765 85.1548C65.1774 86.2552 63.6869 86.8739 62.1324 86.875Z" fill={color} />
+    </svg>
+)

package/templates/storefront/src/modules/account/components/account-nav/index.tsx

@@ -0,0 +1,318 @@
+"use client"
+
+import { clx } from "@medusajs/ui"
+import { ArrowRightOnRectangle } from "@medusajs/icons"
+import { useParams, usePathname } from "next/navigation"
+
+import ChevronDown from "@modules/common/icons/chevron-down"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import { signout } from "@core/data/customer"
+import { AccountDetailsIcon, AddressesIcon, OrdersIcon, LogoutIcon } from "./icons"
+import { PaymentMethodsIcon } from "./payment-methods-icon"
+import LogoutModal from "./logout-modal"
+import { useState, useEffect } from "react"
+
+// Helper function to get profile image URL from metadata
+const getProfileImageUrl = (
+  customer: HttpTypes.StoreCustomer | null,
+  accentHex = "8B5AB1"
+): string => {
+  if (!customer) {
+    return `https://ui-avatars.com/api/?name=J+W&background=${accentHex}&color=fff&size=256&bold=true`
+  }
+  const metadata = customer.metadata as Record<string, any> | undefined
+  if (metadata?.profile_image_url) {
+    return metadata.profile_image_url
+  }
+  return `https://ui-avatars.com/api/?name=${customer.first_name || "J"}+${customer.last_name || "W"}&background=${accentHex}&color=fff&size=256&bold=true`
+}
+
+const useBrandAccentHex = () => {
+  const [accentHex, setAccentHex] = useState("8B5AB1")
+
+  useEffect(() => {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue("--color-brand-accent")
+      .trim()
+    if (raw) {
+      setAccentHex(raw.replace("#", ""))
+    }
+  }, [])
+
+  return accentHex
+}
+
+const AccountNav = ({
+  customer,
+}: {
+  customer: HttpTypes.StoreCustomer | null
+}) => {
+  const route = usePathname()
+  const { countryCode } = useParams() as { countryCode: string }
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false)
+  const [isLoggingOut, setIsLoggingOut] = useState(false)
+  const accentHex = useBrandAccentHex()
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true)
+    await signout(countryCode)
+    setIsLoggingOut(false)
+    setIsLogoutModalOpen(false)
+  }
+
+  return (
+    <div>
+      <div className="small:hidden" data-testid="mobile-account-nav">
+        {route !== `/${countryCode}/account` ? (
+          <div className="flex flex-col gap-y-4 px-4 py-4 bg-page-bg rounded-2xl border border-gray-100 shadow-sm mb-6">
+            <LocalizedClientLink
+              href="/account"
+              className="flex items-center gap-x-2 text-base font-bold text-heading"
+              data-testid="account-main-link"
+            >
+              <ChevronDown className="transform rotate-90 w-5 h-5 text-brand-accent" />
+              <span>Back to Account</span>
+            </LocalizedClientLink>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-y-6">
+            <div className="bg-page-bg rounded-3xl shadow-sm p-6 border border-gray-100 flex flex-row items-center gap-x-4">
+              <div className="w-16 h-16 rounded-full overflow-hidden border border-gray-100 shadow-sm flex-shrink-0">
+                <img
+                  src={getProfileImageUrl(customer, accentHex)}
+                  alt="Profile"
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div className="flex flex-col overflow-hidden">
+                <h3 className="text-base font-bold text-heading truncate">
+                  {customer?.first_name ? `${customer.first_name} ${customer.last_name}` : "Jimmy Willson"}
+                </h3>
+                <p className="text-xs text-gray-500 truncate">{customer?.email}</p>
+                <p className="text-xs text-gray-500 mt-0.5">{customer?.phone}</p>
+              </div>
+            </div>
+
+            {/* Menu List - Mobile */}
+            <div className="bg-page-bg rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
+              <ul className="flex flex-col">
+                <li className="border-b border-gray-100 last:border-0">
+                  <LocalizedClientLink
+                    href="/account/profile"
+                    className="flex items-center justify-between py-5 px-6 group active:bg-gray-50 transition-colors"
+                    data-testid="profile-link"
+                  >
+                    <div className="flex items-center gap-x-4">
+                      <div className="w-[50px] h-[50px] rounded-full bg-brand-accent-muted flex items-center justify-center text-brand-accent">
+                        <AccountDetailsIcon width="50" height="50"  />
+                      </div>
+                      <span className="font-bold text-gray-700">Account Details</span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90 text-gray-400" />
+                  </LocalizedClientLink>
+                </li>
+                <li className="border-b border-gray-100 last:border-0">
+                  <LocalizedClientLink
+                    href="/account/addresses"
+                    className="flex items-center justify-between py-5 px-6 group active:bg-gray-50 transition-colors"
+                    data-testid="addresses-link"
+                  >
+                    <div className="flex items-center gap-x-4">
+                      <div className="w-[50px] h-[50px] rounded-full bg-brand-accent-muted flex items-center justify-center text-brand-accent">
+                        <AddressesIcon width="50" height="50"  />
+                      </div>
+                      <span className="font-bold text-gray-700">Addresses</span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90 text-gray-400" />
+                  </LocalizedClientLink>
+                </li>
+                <li className="border-b border-gray-100 last:border-0">
+                  <LocalizedClientLink
+                    href="/account/orders"
+                    className="flex items-center justify-between py-5 px-6 group active:bg-gray-50 transition-colors"
+                    data-testid="orders-link"
+                  >
+                    <div className="flex items-center gap-x-4">
+                      <div className="w-[50px] h-[50px] rounded-full bg-brand-accent-muted flex items-center justify-center text-brand-accent">
+                        <OrdersIcon width="50" height="50"  />
+                      </div>
+                      <span className="font-bold text-gray-700">Orders</span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90 text-gray-400" />
+                  </LocalizedClientLink>
+                </li>
+                <li className="border-b border-gray-100 last:border-0">
+                  <LocalizedClientLink
+                    href="/account/payment-methods"
+                    className="flex items-center justify-between py-5 px-6 group active:bg-gray-50 transition-colors"
+                    data-testid="payment-methods-link"
+                  >
+                    <div className="flex items-center gap-x-4">
+                      <div className="w-[50px] h-[50px] rounded-full bg-brand-accent-muted flex items-center justify-center text-brand-accent">
+                        <PaymentMethodsIcon width="50" height="50"  />
+                      </div>
+                      <span className="font-bold text-gray-700">Payment Methods</span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90 text-gray-400" />
+                  </LocalizedClientLink>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    className="flex items-center justify-between py-5 px-6 w-full text-left group active:bg-red-50 transition-colors"
+                    onClick={() => setIsLogoutModalOpen(true)}
+                    data-testid="logout-button"
+                  >
+                    <div className="flex items-center gap-x-4">
+                      <div className="w-[50px] h-[50px] rounded-full bg-red-50 flex items-center justify-center text-red-500">
+                        <LogoutIcon width="50" height="50" color="#E70000" />
+                      </div>
+                      <span className="font-bold text-red-500">Log out</span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90 text-gray-400" />
+                  </button>
+                </li>
+
+              </ul>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="hidden small:block" data-testid="account-nav">
+        <div className="bg-page-bg rounded-3xl shadow-sm border border-gray-100 min-w-[300px] min-h-[500px] flex flex-col justify-between overflow-hidden">
+          <div className="px-6 pt-6">
+            {/* User Profile Section */}
+            <div className="flex flex-row items-center gap-x-4 mb-6">
+              <div className="w-16 h-16 rounded-full overflow-hidden border border-gray-100 shadow-sm flex-shrink-0">
+                <img
+                  src={getProfileImageUrl(customer, accentHex)}
+                  alt="Profile"
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div className="flex flex-col overflow-hidden">
+                <h3 className="text-base font-bold text-heading truncate">
+                  {customer?.first_name ? `${customer.first_name} ${customer.last_name}` : "Jimmy Willson"}
+                </h3>
+                <p className="text-xs text-gray-500 truncate max-w-[180px]">{customer?.email}</p>
+                <p className="text-xs text-gray-500 mt-0.5">{customer?.phone}</p>
+              </div>
+            </div>
+
+            <div className="border-t border-gray-200 my-4"></div>
+
+            <div className="text-base-regular">
+              <ul className="flex mb-0 justify-start items-start flex-col gap-y-3">
+
+                <li className="w-full">
+                  <AccountNavLink
+                    href="/account/profile"
+                    route={route!}
+                    data-testid="profile-link"
+                    icon={(active) => <AccountDetailsIcon width="50" height="50"  />}
+                  >
+                    Account Details
+                  </AccountNavLink>
+                </li>
+                <li className="w-full">
+                  <AccountNavLink
+                    href="/account/addresses"
+                    route={route!}
+                    data-testid="addresses-link"
+                    icon={(active) => <AddressesIcon width="50" height="50"  />}
+                  >
+                    Addresses
+                  </AccountNavLink>
+                </li>
+                <li className="w-full">
+                  <AccountNavLink
+                    href="/account/orders"
+                    route={route!}
+                    data-testid="orders-link"
+                    icon={(active) => <OrdersIcon width="50" height="50"  />}
+                  >
+                    Orders
+                  </AccountNavLink>
+                </li>
+                <li className="w-full">
+                  <AccountNavLink
+                    href="/account/payment-methods"
+                    route={route!}
+                    data-testid="payment-methods-link"
+                    icon={(active) => <PaymentMethodsIcon width="50" height="50"  />}
+                  >
+                    Payment Methods
+                  </AccountNavLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="px-6 pt-4 mt-2 border-t border-gray-200 pb-6">
+            <button
+              type="button"
+              onClick={() => setIsLogoutModalOpen(true)}
+              data-testid="logout-button"
+              className="flex items-center gap-x-3 w-full px-4 py-3 rounded-xl hover:bg-red-50 transition-all font-medium group"
+            >
+              <div className="w-[50px] h-[50px] rounded-full bg-red-50 flex items-center justify-center text-red-500 group-hover:bg-red-100 transition-colors">
+                <LogoutIcon width="50" height="50" color="#E70000" />
+              </div>
+              <span className="text-red-500">Log Out</span>
+            </button>
+          </div>
+
+
+
+        </div>
+      </div>
+      <LogoutModal
+        isOpen={isLogoutModalOpen}
+        close={() => setIsLogoutModalOpen(false)}
+        onConfirm={handleLogout}
+        isLoggingOut={isLoggingOut}
+      />
+    </div>
+  )
+}
+
+type AccountNavLinkProps = {
+  href: string
+  route: string
+  children: React.ReactNode
+  "data-testid"?: string
+  icon?: (active: boolean) => React.ReactNode
+}
+
+const AccountNavLink = ({
+  href,
+  route,
+  children,
+  "data-testid": dataTestId,
+  icon,
+}: AccountNavLinkProps) => {
+  const { countryCode }: { countryCode: string } = useParams()
+
+  const active = route.split(countryCode)[1] === href
+  return (
+    <LocalizedClientLink
+      href={href}
+      className={clx("flex items-center gap-x-3 w-full px-4 py-3 rounded-xl transition-all font-medium", {
+        "text-inverse bg-brand-accent shadow-md": active,
+        "text-body hover:bg-surface-muted": !active,
+      })}
+      data-testid={dataTestId}
+    >
+      <div className={clx("w-[50px] h-[50px] rounded-full flex items-center justify-center transition-colors", {
+        "text-brand-accent bg-page-bg": active,
+        "text-brand-accent bg-brand-accent-muted": !active
+      })}>
+        {icon && icon(active)}
+      </div>
+      <span>{children}</span>
+    </LocalizedClientLink>
+  )
+}
+
+export default AccountNav

package/templates/storefront/src/modules/account/components/account-nav/logout-modal.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { Dialog, Transition } from "@headlessui/react"
+import { ArrowRightOnRectangle } from "@medusajs/icons"
+import { Button, clx } from "@medusajs/ui"
+import React, { Fragment } from "react"
+import { LogoutIcon } from "./icons"
+
+type LogoutModalProps = {
+    isOpen: boolean
+    close: () => void
+    onConfirm: () => void
+    isLoggingOut: boolean
+}
+
+const LogoutModal = ({
+    isOpen,
+    close,
+    onConfirm,
+    isLoggingOut,
+}: LogoutModalProps) => {
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-[100]" onClose={close}>
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4 text-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="w-full max-w-[340px] transform overflow-hidden rounded-[40px] bg-white p-6 text-center align-middle shadow-xl transition-all">
+                                <div className="flex flex-col items-center">
+                                    {/* Icon Section */}
+                                    <div className="w-[110px] h-[110px] rounded-full bg-[#E700001A] grid place-items-center mb-4">
+                                        <LogoutIcon width="60" height="60" color="#E70000" />
+                                    </div>
+
+                                    {/* Text Section */}
+                                    <Dialog.Title
+                                        as="h3"
+                                        className="text-2xl font-bold text-[#04122C] mb-1"
+                                    >
+                                        Log Out
+                                    </Dialog.Title>
+                                    <p className="text-gray-400 text-sm font-medium mb-6">
+                                        Are you sure want to log out?
+                                    </p>
+
+                                    {/* Buttons Section */}
+                                    <div className="flex gap-x-3 w-full">
+                                        <button
+                                            onClick={close}
+                                            className="flex-1 px-4 py-3 rounded-full border border-gray-200 font-bold text-gray-700 hover:bg-gray-50 transition-all text-base"
+                                        >
+                                            Cancel
+                                        </button>
+                                        <button
+                                            onClick={onConfirm}
+                                            disabled={isLoggingOut}
+                                            className="flex-1 px-4 py-3 rounded-full bg-brand-accent font-bold text-inverse hover:bg-brand-accent-hover transition-all text-base disabled:opacity-50"
+                                        >
+                                            {isLoggingOut ? "..." : "Log Out"}
+                                        </button>
+                                    </div>
+                                </div>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    )
+}
+
+export default LogoutModal

package/templates/storefront/src/modules/account/components/account-nav/payment-methods-icon.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import React from "react"
+
+export const PaymentMethodsIcon = ({ color = "currentColor", ...props }: React.SVGProps<SVGSVGElement>) => (
+    <svg width="24" height="24" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M42 16C42 13.7909 40.2091 12 38 12H12C9.79086 12 8 13.7909 8 16V34C8 36.2091 9.79086 38 12 38H38C40.2091 38 42 36.2091 42 34V16ZM12 14H38C39.1046 14 40 14.8954 40 16V19H10V16C10 14.8954 10.8954 14 12 14ZM10 34V23H40V34C40 35.1046 39.1046 36 38 36H12C10.8954 36 10 35.1046 10 34ZM15 30H21V32H15V30Z" fill={color} />
+    </svg>
+)