Staging

prisma/schema.prisma

@@ -738,6 +738,8 @@ enum Regions {
   FRANCE
   CANADA
   SINGAPORE
+  POLAND
+  KOREA
 
   UKRAINE
   ARGENTINA

src/components/modals/EntityNameModal.tsx

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import Link from 'next/link';
 import { useState } from 'react';
 
@@ -7,6 +6,7 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { PDTG } from '@/constants/Telegram';
 import { TERMS_OF_USE } from '@/constants/TERMS_OF_USE';
+import { api } from '@/lib/api';
 import { useUser } from '@/store/user';
 
 export const EntityNameModal = ({
@@ -27,7 +27,7 @@ export const EntityNameModal = ({
     setLoading(true);
     try {
       if (user.currentSponsor) {
-        await axios.post('/api/sponsors/update-entity-name', {
+        await api.post('/api/sponsors/update-entity-name', {
           entityName,
         });
         await refetchUser();

src/components/shared/ImagePicker.tsx

@@ -1,4 +1,4 @@
-import { X } from 'lucide-react';
+import { ImagePlus, X } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { RxUpload } from 'react-icons/rx';
 import { toast } from 'sonner';
@@ -13,12 +13,16 @@ interface ImagePickerProps {
   defaultValue?: {
     url: string;
   };
+  variant?: 'default' | 'short';
+  className?: string;
 }
 
 export const ImagePicker = ({
   onChange,
   onReset,
   defaultValue,
+  variant = 'default',
+  className,
 }: ImagePickerProps) => {
   const [preview, setPreview] = useState<string | null>(
     defaultValue?.url || null,
@@ -90,61 +94,121 @@ export const ImagePicker = ({
     }
   };
 
-  return (
-    <div
-      className={cn(
-        'relative mt-2 rounded-md border border-dashed p-4',
-        isDragging ? 'border-brand-primary' : 'border-slate-300',
-      )}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-    >
-      <div className="flex">
-        {preview ? (
-          <img
-            className="h-20 w-20 rounded-xl object-cover"
-            src={preview}
-            alt="Preview"
-          />
-        ) : (
-          <div className="flex h-20 w-20 items-center justify-center rounded-xl bg-slate-100">
-            <RxUpload className="size-6 text-slate-500" />
-          </div>
+  if (variant === 'short') {
+    return (
+      <div
+        className={cn(
+          'relative h-14 w-14 rounded-full border bg-slate-100 text-primary',
+          !preview && 'border-[1.5px] border-dashed border-primary',
+          isDragging && 'bg-primary-200',
+          className,
         )}
-        {preview && (
-          <X
-            className="absolute right-3 top-3 z-10 h-5 w-5 cursor-pointer bg-transparent text-slate-400"
-            onClick={handleReset}
-          />
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        <div className="flex h-full w-full overflow-hidden rounded-full">
+          {preview ? (
+            <img
+              className="h-full w-full object-cover"
+              src={preview}
+              alt="Preview"
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              {isDragging ? (
+                <ImagePlus className="size-6" />
+              ) : (
+                <RxUpload className="size-6" />
+              )}
+            </div>
+          )}
+          {preview && (
+            <X
+              className="absolute bottom-0 right-0 z-10 h-5 w-5 cursor-pointer rounded-full border bg-white stroke-[3] p-1 text-slate-400"
+              onClick={handleReset}
+            />
+          )}
+        </div>
+        <Input
+          ref={fileInputRef}
+          className="hidden"
+          accept="image/jpeg, image/png, image/webp"
+          onChange={(e) => {
+            const file = e.target.files ? e.target.files[0] : null;
+            handleFileChange(file);
+            e.target.value = '';
+          }}
+          type="file"
+        />
+        <div
+          className="absolute bottom-0 left-0 right-0 top-0 cursor-pointer"
+          onClick={(e) => {
+            e.stopPropagation();
+            fileInputRef.current?.click();
+          }}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div
+        className={cn(
+          'relative mt-2 rounded-md border border-dashed p-4',
+          isDragging ? 'border-brand-primary' : 'border-slate-300',
+          className,
         )}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        <div className="flex">
+          {preview ? (
+            <img
+              className="h-20 w-20 rounded-xl object-cover"
+              src={preview}
+              alt="Preview"
+            />
+          ) : (
+            <div className="flex h-20 w-20 items-center justify-center rounded-xl bg-slate-100">
+              <RxUpload className="size-6 text-slate-500" />
+            </div>
+          )}
+          {preview && (
+            <X
+              className="absolute right-3 top-3 z-10 h-5 w-5 cursor-pointer bg-transparent text-slate-400"
+              onClick={handleReset}
+            />
+          )}
 
-        <div className="flex flex-col justify-center px-5">
-          <p className="mb-1 font-semibold text-slate-500">
-            Choose or drag and drop media
-          </p>
-          <p className="text-sm text-slate-400">Maximum size 5 MB</p>
+          <div className="flex flex-col justify-center px-5">
+            <p className="mb-1 font-semibold text-slate-500">
+              Choose or drag and drop media
+            </p>
+            <p className="text-sm text-slate-400">Maximum size 5 MB</p>
+          </div>
         </div>
+        <Input
+          ref={fileInputRef}
+          className="hidden"
+          accept="image/jpeg, image/png, image/webp"
+          onChange={(e) => {
+            const file = e.target.files ? e.target.files[0] : null;
+            handleFileChange(file);
+            e.target.value = '';
+          }}
+          type="file"
+        />
+        <div
+          className="absolute bottom-0 left-0 right-0 top-0 cursor-pointer"
+          onClick={(e) => {
+            e.stopPropagation();
+            fileInputRef.current?.click();
+          }}
+        />
       </div>
-      <Input
-        ref={fileInputRef}
-        className="hidden"
-        accept="image/jpeg, image/png, image/webp"
-        onChange={(e) => {
-          const file = e.target.files ? e.target.files[0] : null;
-          handleFileChange(file);
-          e.target.value = '';
-        }}
-        type="file"
-      />
-      <div
-        className="absolute bottom-0 left-0 right-0 top-0 cursor-pointer"
-        onClick={(e) => {
-          e.stopPropagation();
-          fileInputRef.current?.click();
-        }}
-      />
-    </div>
-  );
+    );
+  }
 };