BACG-341 (#69)

* backend, common: implement UpdateCustomerInfo

* customer_dashboard: implement UpdateCustomerInfo(draft)

* customer_dashboard: enhance logo upload functionality

- Implement drag-and-drop support for logo uploads.
- Add validation for image dimensions (128x128 px) and file size (under 1 MB).
- Update error handling for unsupported file types (SVG not allowed).
- Introduce a flag to mark logos for deletion.
- Update API request to handle logo deletion and modifications accordingly.

* customer_dashboard: update logo upload validation and enhance API handling

- Refine file upload validation to restrict accepted formats to PNG, JPG, and WebP, excluding SVG and GIF.
- Implement file size limit of 1MB and ensure only one file can be uploaded.
- Enhance error handling for file upload issues, including specific messages for file type and size errors.
- Update API to handle logo deletion and ensure logo images are processed to meet specified dimensions (128x128 px) before upload.
- Add support for deleting logos via a new request parameter.

* oko_sdk_cosmos: remove unnecessary options parameter

* customer_dashboard: update logo styling in account info components

- Resize logos to 40x40 pixels with rounded corners for better presentation.
- Ensure consistent logo styling across account info and account info with submenu components.
- Apply object-fit cover to maintain aspect ratio of logos.

* customer_dashboard: refactor logo upload and validation in createCustomer

- Update logo upload requirements to accept only PNG, JPG, JPEG, and WebP formats, excluding SVG and GIF.
- Implement a file size limit of 1MB and ensure uploaded images are exactly 128x128 pixels.
- Improve error handling for invalid file types and dimensions during logo upload.
- Add validation for customer label to ensure it meets specified criteria before processing.

* customer_dashboard: enhance drag-and-drop functionality for logo uploads

- Add drag-and-drop support to the logo upload input, improving user experience.
- Implement visual feedback during drag events with updated styles for the upload area.
- Introduce state management for drag events to handle file uploads seamlessly.

* customer_dashboard: add express-rate-limit middleware for customer update route

- Introduce rate limiting to the customer update endpoint to prevent abuse.
- Set a limit of 20 requests per 10 minutes with a custom error message for rate limit exceedance.
- Update package.json and yarn.lock to include express-rate-limit dependency.

* customer_dashboard: refactor authentication, file upload, and rate limiting middleware

- Introduce customer JWT authentication middleware to validate Bearer tokens for secure access.
- Implement Multer middleware for handling logo uploads with file size and type restrictions.
- Add rate limiting middleware to control request frequency and prevent abuse on customer routes.
- Update customer routes to utilize the new middleware for improved security and functionality.
---------

Co-authored-by: devmosis <[email protected]>

Author: chemonoworld

.gitignore

@@ -398,6 +398,8 @@ $RECYCLE.BIN/
 
 # Claude
 .claude/
+.plans/
+.tasks/
 
 # vscode
 .vscode/

apps/customer_dashboard/src/app/edit-info/page.module.scss

@@ -0,0 +1,24 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.body {
+  width: 411px;
+  margin: 80px auto auto auto;
+}
+
+.description {
+  margin-bottom: 40px;
+}
+
+.backButton {
+  margin-left: -8px;
+  margin-bottom: 24px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+}

apps/customer_dashboard/src/app/edit-info/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { Typography } from "@oko-wallet/oko-common-ui/typography";
+import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
+import { ChevronLeftIcon } from "@oko-wallet/oko-common-ui/icons/chevron_left";
+
+import { DashboardHeader } from "@oko-wallet-ct-dashboard/components/dashboard_header/dashboard_header";
+import { Authorized } from "@oko-wallet-ct-dashboard/components/authorized/authorized";
+import { EditInfoForm } from "@oko-wallet-ct-dashboard/components/edit_info_form/edit_info_form";
+import styles from "./page.module.scss";
+
+export default function EditInfoPage() {
+  const router = useRouter();
+
+  return (
+    <Authorized>
+      <div className={styles.wrapper}>
+        <DashboardHeader />
+        <div className={styles.body}>
+          <button className={styles.backButton} onClick={() => router.back()}>
+            <ChevronLeftIcon size={24} color="var(--fg-tertiary)" />
+          </button>
+
+          <Typography
+            tagType="h1"
+            size="display-sm"
+            weight="semibold"
+            color="primary"
+          >
+            Edit App Information
+          </Typography>
+          <Spacing height={8} />
+
+          <Typography
+            size="md"
+            weight="regular"
+            color="secondary"
+            className={styles.description}
+          >
+            Update your app name and logo
+          </Typography>
+
+          <EditInfoForm />
+        </div>
+      </div>
+    </Authorized>
+  );
+}

apps/customer_dashboard/src/components/account_info/account_info.module.scss

@@ -8,6 +8,14 @@
 .customerInfo {
   display: flex;
   align-items: center;
+
+  // Resize logo to 40x40
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
 }
 
 .fallbackImageText {
@@ -19,7 +27,7 @@
   justify-content: center;
   align-items: center;
 
-  border-radius: 999px;
+  border-radius: 8px;
   border: 1px solid var(--gray-200);
   background: var(--bg-tertiary);
 
@@ -42,4 +50,4 @@
 .externalLinkIcon {
   width: 16px;
   height: 16px;
-}
+}

apps/customer_dashboard/src/components/account_info_with_sub_menu/account_info_with_sub_menu.module.scss

@@ -8,6 +8,20 @@
   top: -1px;
   left: -1px;
   cursor: default;
+
+  img {
+    width: 40px !important;
+    height: 40px !important;
+    object-fit: cover;
+  }
+}
+
+.sidebarTrigger {
+  img {
+    width: 40px !important;
+    height: 40px !important;
+    object-fit: cover;
+  }
 }
 
 .iconWrapper {
@@ -22,4 +36,4 @@
   &:hover {
     background-color: var(--bg-primary-hover);
   }
-}
+}

apps/customer_dashboard/src/components/account_info_with_sub_menu/account_info_with_sub_menu.tsx

@@ -27,6 +27,7 @@ export const AccountInfoWithSubMenu = () => {
           email={user?.email ?? ""}
           label={customer.data?.label ?? ""}
           logoImageUrl={customer.data?.logo_url ?? ""}
+          className={styles.sidebarTrigger}
           TopRightIcon={
             <span className={styles.iconWrapper}>
               <ThreeDotsVerticalIcon color="var(--fg-quaternary)" size={16} />
@@ -43,6 +44,14 @@ export const AccountInfoWithSubMenu = () => {
         />
       }
       menuItems={[
+        {
+          id: "edit-info",
+          label: "Edit Info",
+          icon: <EditIcon size={16} />,
+          onClick: () => {
+            router.push(paths.edit_info);
+          },
+        },
         {
           id: "change-password",
           label: "Change Password",

apps/customer_dashboard/src/components/edit_info_form/edit_info_form.module.scss

@@ -0,0 +1,126 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  width: 100%;
+}
+
+.input {
+  width: 100%;
+}
+
+.plusIcon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.appLogoUploadWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+
+.appLogoUploadDescription {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.appLogoUploadLabel {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.appLogoUploadLabelText {
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.appLogoUploadInput {
+  display: flex;
+  width: 85px;
+  height: 85px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  border: 1px solid #eaecf0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    border-color: #d0d5dd;
+  }
+
+  &.dragging {
+    border-color: #7f56d9;
+    border-width: 2px;
+    background-color: rgba(127, 86, 217, 0.05);
+  }
+}
+
+.logoPreview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logoPreviewImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.removeButton {
+  position: absolute;
+  padding: 4px;
+  top: 0px;
+  right: 0px;
+  border-radius: 0px 12px 0px 0px;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+.xCloseIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.error {
+  color: var(--text-error, #d92d20);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.submitButton {
+  width: 100%;
+  margin-top: 8px;
+}