Merge branch 'online-shopping' of https://github.com/map-of-pi/map-of-pi-frontend-react into online-shopping

Author: adisa39

src/components/shared/Seller/ShopItem.tsx

@@ -71,7 +71,7 @@ export default function OnlineShopping({ dbSeller }: { dbSeller: ISeller }) {
       }
     };
 
-    if (dbSeller){
+    if (dbSeller) {
       getSellerItems(dbSeller.seller_id);
     }
   }, [dbSeller, reload]); 
@@ -432,26 +432,33 @@ export const ShopItem: React.FC<{
               onClick={handleSave}
             />
           </div>
-          {formData?.expired_by && (
-            <label className="text-[14px] text-[#333333]">
-              <span className="fw-bold text-lg">
-                {new Date(formData.expired_by) > new Date() ? 
-                  t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.SELLING_STATUS_OPTIONS.ACTIVE') : 
-                  t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.SELLING_STATUS_OPTIONS.EXPIRED')
-                } :  
-              </span>
-              {t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.SELLING_EXPIRATION_DATE', {
-                expired_by_date: new Intl.DateTimeFormat(locale || 'en-US', {
-                  day: '2-digit',
-                  month: 'long',
-                  year: 'numeric',
-                  hour: 'numeric',
-                  minute: 'numeric',
-                  hour12: true,
-                }).format(new Date(formData.expired_by)),
-              })}
-            </label>
-          )}
+          <div className="mt-3">
+            {formData?.expired_by && (() => {
+              const expiredDate = new Date(formData.expired_by);
+              const isActive = expiredDate > new Date();
+              const sellingStatus = isActive 
+                ? t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.SELLING_STATUS_OPTIONS.ACTIVE') 
+                : t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.SELLING_STATUS_OPTIONS.EXPIRED');
+
+              const formattedDate = new Intl.DateTimeFormat(locale || 'en-US', {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                hour12: true,
+              }).format(expiredDate);
+
+              return (
+                <label className="text-[14px] text-[#333333]">
+                  <span className="fw-bold text-lg">{sellingStatus}: </span>
+                  {t('SCREEN.SELLER_REGISTRATION.SELLER_ITEMS_FEATURE.SELLING_EXPIRATION_DATE', {
+                    expired_by_date: formattedDate,
+                  })}
+                </label>
+              );
+            })()}
+          </div>
         </div>
       </div>
     </>

src/constants/types.ts

@@ -18,11 +18,6 @@ export interface IUserSettings {
   };
 }
 
-export enum FulfillmentType {
-  CollectionByBuyer = 'Collection by Buyer',
-  DeliveredToBuyer = 'Delivered to Buyer'
-}
-
 export interface ISeller {
   seller_id: string;
   name: string;
@@ -40,7 +35,7 @@ export interface ISeller {
   coordinates: [number, number];
   order_online_enabled_pref: boolean;
   fulfillment_method?: string;
-  fulfillment_description?: string
+  fulfillment_description?: string;
 }
 
 export interface IReviewFeedback {
@@ -74,6 +69,11 @@ export enum DeviceLocationType {
   SearchCenter = 'searchCenter'
 }
 
+export enum FulfillmentType {
+  CollectionByBuyer = 'Collection by buyer',
+  DeliveredToBuyer = 'Delivered to buyer'
+}
+
 export enum StockLevelType {
   available_1 = '1 available', 
   available_2 = '2 available',