(Online shop) Seller Reg screen: add “Gas Saver” feature

messages/en-GB.json

@@ -78,6 +78,13 @@
           "DELIVERED_TO_BUYER": "Delivered to buyer"
         }
       },
+      "GAS_SAVER_TYPE": {
+        "GAS_SAVER_TYPE_LABEL": "Gas-saver",
+        "GAS_SAVER_TYPE_OPTIONS": {
+          "ON_GAS_SAVER": "On - one gas fee for 3 days of payments",
+          "OFF_GAS_SAVER": "Off - payments withing 24 hours, gas fee for each payment"
+        }
+      },
       "SELLER_TO_BUYER_FULFILLMENT_INSTRUCTIONS_LABEL": "Seller fulfilment instructions to buyer",
       "SELLER_TO_BUYER_FULFILLMENT_INSTRUCTIONS_PLACEHOLDER": "Collection is from the seller's address. If delivery is selected, please enter the buyer's address.",
       "BUYER_TO_SELLER_FULFILLMENT_DETAILS_LABEL": "Buyer fulfilment details",

messages/en.json

@@ -81,6 +81,13 @@
       "SELLER_TO_BUYER_FULFILLMENT_INSTRUCTIONS_LABEL": "Seller fulfillment instructions to buyer",
       "SELLER_TO_BUYER_FULFILLMENT_INSTRUCTIONS_PLACEHOLDER": "Collection is from the seller's address. If delivery is selected, please enter the buyer's address.",
       "BUYER_TO_SELLER_FULFILLMENT_DETAILS_LABEL": "Buyer fulfillment details",
+      "GAS_SAVER_TYPE": {
+        "GAS_SAVER_TYPE_LABEL": "Gas-saver",
+        "GAS_SAVER_TYPE_OPTIONS": {
+          "ON_GAS_SAVER": "On - one gas fee for 3 days of payments",
+          "OFF_GAS_SAVER": "Off - payments withing 24 hours, gas fee for each payment"
+        }
+      },
       "VALIDATION": {
         "EMAIL_VALIDATION": "Please enter a valid email address",
         "SUCCESSFUL_REGISTRATION_SUBMISSION": "Registration successful",

messages/es.json

@@ -119,6 +119,13 @@
         "VALIDATION": {
           "REDUCED_DURATION_BELOW_SPENT_WEEKS": "La duración de venta no puede reducirse por debajo de las {spent_weeks} semanas ya transcurridas"
         }
+      },
+      "GAS_SAVER_TYPE": {
+        "GAS_SAVER_TYPE_LABEL": "Gas-saver",
+        "GAS_SAVER_TYPE_OPTIONS": {
+          "ON_GAS_SAVER": "On - one gas fee for 3 days of payments",
+          "OFF_GAS_SAVER": "Off - payments withing 24 hours, gas fee for each payment"
+        }
       }
     },
     "SELLER_ORDER_FULFILLMENT": {

src/app/[locale]/seller/registration/page.tsx

@@ -20,15 +20,16 @@ import { ListOrder } from '@/components/shared/Seller/OrderList';
 import ToggleCollapse from '@/components/shared/Seller/ToggleCollapse';
 import Skeleton from '@/components/skeleton/skeleton';
 import { itemData } from '@/constants/demoAPI';
-import { IUserSettings, ISeller, FulfillmentType } from '@/constants/types';
+import { IUserSettings, ISeller, FulfillmentType, GasSaverType } from '@/constants/types';
 import { fetchSellerRegistration, registerSeller } from '@/services/sellerApi';
 import { fetchUserSettings } from '@/services/userSettingsApi';
 import { fetchToggle } from '@/services/toggleApi';
 import { checkAndAutoLoginUser } from '@/utils/auth';
 import { 
   translateSellerCategory, 
   getFulfillmentMethodOptions,
-  getSellerCategoryOptions 
+  getSellerCategoryOptions,
+  getGasSaverOptions
 } from '@/utils/translate';
 import removeUrls from '../../../../utils/sanitize';
 
@@ -55,6 +56,7 @@ const SellerRegistrationForm = () => {
     image: string;
     fulfillment_method: string;
     fulfillment_description: string;
+    gas_saver: string;
   };
 
   // Initialize state with appropriate types
@@ -68,6 +70,7 @@ const SellerRegistrationForm = () => {
     image: '',
     fulfillment_method: FulfillmentType.CollectionByBuyer,
     fulfillment_description: '',
+    gas_saver: GasSaverType.OnGasSaver
   });
 
   const [dbSeller, setDbSeller] = useState<ISeller | null>(null);
@@ -148,7 +151,8 @@ const SellerRegistrationForm = () => {
         phone_number: dbUserSettings?.phone_number || '',
         image: dbSeller.image || '',
         fulfillment_method: dbSeller.fulfillment_method || FulfillmentType.CollectionByBuyer,
-        fulfillment_description: dbSeller.fulfillment_description || ''
+        fulfillment_description: dbSeller.fulfillment_description || '',
+        gas_saver: dbSeller.gas_saver? GasSaverType.OnGasSaver: GasSaverType.OffGasSaver || GasSaverType.OnGasSaver
       });
     } else {
       setFormData({
@@ -160,7 +164,8 @@ const SellerRegistrationForm = () => {
         phone_number: dbUserSettings?.phone_number || '',
         image: '',
         fulfillment_method: FulfillmentType.CollectionByBuyer,
-        fulfillment_description: ''
+        fulfillment_description: '',
+        gas_saver: GasSaverType.OnGasSaver
       });
     }
   }, [dbSeller, dbUserSettings]);
@@ -258,7 +263,8 @@ const SellerRegistrationForm = () => {
     formDataToSend.append('email', formData.email ?? '');
     formDataToSend.append('phone_number', formData.phone_number?.toString() ?? '');
     formDataToSend.append('fulfillment_method', formData.fulfillment_method);
-    formDataToSend.append('fulfillment_description', removeUrls(formData.fulfillment_description))
+    formDataToSend.append('fulfillment_description', removeUrls(formData.fulfillment_description));
+    formDataToSend.append('gas_saver', formData.gas_saver);
     // hardcode the value until the form element is built
     formDataToSend.append('order_online_enabled_pref', 'false');
 
@@ -583,9 +589,8 @@ const SellerRegistrationForm = () => {
                   value={formData.fulfillment_method}
                   onChange={handleChange}
                 />
-                <h2 className={SUBHEADER}>
-                  {t('SCREEN.SELLER_REGISTRATION.FULFILLMENT_METHOD_TYPE.FULFILLMENT_METHOD_TYPE_LABEL')}
-                </h2>
+
+                {/* Seller instruction to buyer field */}
                 <TextArea
                   label={t(
                     'SCREEN.SELLER_REGISTRATION.SELLER_TO_BUYER_FULFILLMENT_INSTRUCTIONS_LABEL',
@@ -598,6 +603,17 @@ const SellerRegistrationForm = () => {
                   value={formData.fulfillment_description}
                   onChange={handleChange}
                 />
+
+                {/* Gas saver option field*/}
+                <Select
+                  label={t(
+                    'SCREEN.SELLER_REGISTRATION.GAS_SAVER_TYPE.GAS_SAVER_TYPE_LABEL',
+                  )}
+                  name="gas_saver"
+                  options={getGasSaverOptions(t)}
+                  value={formData.gas_saver}
+                  onChange={handleChange}
+                />
                 <div className="mb-4 mt-3 ml-auto w-min">
                   <Button
                     label={t('SHARED.SAVE')}

src/constants/types.ts

@@ -45,6 +45,7 @@ export interface ISeller {
   order_online_enabled_pref: boolean;
   fulfillment_method: FulfillmentType;
   fulfillment_description?: string;
+  gas_saver: boolean;
 }
 
 export enum SellerType {
@@ -90,6 +91,11 @@ export enum FulfillmentType {
   DeliveredToBuyer = 'Delivered to buyer'
 }
 
+export enum GasSaverType {
+  OnGasSaver = 'true',
+  OffGasSaver = 'false'
+}
+
 export enum StockLevelType {
   available_1 = '1 available', 
   available_2 = '2 available', 

src/utils/translate.ts

@@ -4,7 +4,8 @@ import {
   OrderItemStatus, 
   OrderStatusType, 
   SellerType, 
-  StockLevelType
+  StockLevelType,
+  GasSaverType
 } from "@/constants/types";
 
 export const getFindMeOptions = (t: (key: string) => string) => [
@@ -99,6 +100,17 @@ export const getFulfillmentMethodOptions = (t: (key: string) => string) => [
   },
 ];
 
+export const getGasSaverOptions = (t: (key: string) => string) => [
+  {
+    value: GasSaverType.OnGasSaver,
+    name: t('SCREEN.SELLER_REGISTRATION.GAS_SAVER_TYPE.GAS_SAVER_TYPE_OPTIONS.ON_GAS_SAVER'),
+  },
+  {
+    value: GasSaverType.OffGasSaver,
+    name: t('SCREEN.SELLER_REGISTRATION.GAS_SAVER_TYPE.GAS_SAVER_TYPE_OPTIONS.OFF_GAS_SAVER'),
+  },
+];
+
 export const translateSellerCategory = (category: string, t: (key: string) => string): string => {
   switch (category) {
     case SellerType.active_seller: