Fix Block

apps/admin/src/components/page-builder/BannerForm.tsx

@@ -6,6 +6,7 @@ interface BannerFormProps {
   editingLang: string;
   getLocalizedValue: (payload: any, field: string) => string;
   updateLocalizedValue: (field: string, value: string) => void;
+  updatePayloadValue: (field: string, value: string | number) => void;
   setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
   setIsMediaModalOpen: (open: boolean) => void;
 }
@@ -14,6 +15,7 @@ export default function BannerForm({
   editingSection,
   getLocalizedValue,
   updateLocalizedValue,
+  updatePayloadValue,
   setUploadTarget,
   setIsMediaModalOpen,
 }: BannerFormProps) {
@@ -69,8 +71,8 @@ export default function BannerForm({
         <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Link URL</label>
         <input
           type="text"
-          value={getLocalizedValue(editingSection.payload, 'linkUrl')}
+          value={editingSection.payload?.linkUrl || ''}
-          onChange={(e) => updateLocalizedValue('linkUrl', e.target.value)}
+          onChange={(e) => updatePayloadValue('linkUrl', e.target.value)}
           className="admin-input w-full"
         />
       </div>

apps/admin/src/components/page-builder/EditorialCarouselForm.tsx

@@ -10,6 +10,7 @@ interface EditorialCarouselFormProps {
   updateLocalizedValue: (field: string, value: string) => void;
   getLocalizedSlideValue: (slide: any, field: string) => string;
   updateLocalizedSlideValue: (idx: number, field: string, value: string) => void;
+  updateSlidePayloadValue: (idx: number, field: string, value: string | number) => void;
   setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
   setIsMediaModalOpen: (open: boolean) => void;
 }
@@ -21,6 +22,7 @@ export default function EditorialCarouselForm({
   updateLocalizedValue,
   getLocalizedSlideValue,
   updateLocalizedSlideValue,
+  updateSlidePayloadValue,
   setUploadTarget,
   setIsMediaModalOpen,
 }: EditorialCarouselFormProps) {
@@ -155,8 +157,8 @@ export default function EditorialCarouselForm({
                       <label className="text-[10px] uppercase font-bold tracking-widest text-slate-500">Button Link</label>
                       <input
                         type="text"
-                        value={getLocalizedSlideValue(slide, 'buttonLink')}
+                        value={slide.buttonLink || ''}
-                        onChange={(e) => updateLocalizedSlideValue(idx, 'buttonLink', e.target.value)}
+                        onChange={(e) => updateSlidePayloadValue(idx, 'buttonLink', e.target.value)}
                         className="admin-input w-full text-xs"
                       />
                     </div>

apps/admin/src/components/page-builder/EditorialTileForm.tsx

@@ -8,6 +8,7 @@ interface EditorialTileFormProps {
   editingLang: string;
   getLocalizedValue: (payload: any, field: string) => string;
   updateLocalizedValue: (field: string, value: string) => void;
+  updatePayloadValue: (field: string, value: string | number) => void;
   setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
   setIsMediaModalOpen: (open: boolean) => void;
 }
@@ -17,6 +18,7 @@ export default function EditorialTileForm({
   setEditingSection,
   getLocalizedValue,
   updateLocalizedValue,
+  updatePayloadValue,
   setUploadTarget,
   setIsMediaModalOpen,
 }: EditorialTileFormProps) {
@@ -117,8 +119,8 @@ export default function EditorialTileForm({
           <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Button Link</label>
           <input
             type="text"
-            value={getLocalizedValue(editingSection.payload, 'buttonLink')}
+            value={editingSection.payload?.buttonLink || ''}
-            onChange={(e) => updateLocalizedValue('buttonLink', e.target.value)}
+            onChange={(e) => updatePayloadValue('buttonLink', e.target.value)}
             className="admin-input w-full"
           />
         </div>

apps/admin/src/components/page-builder/HeroArticleForm.tsx

@@ -8,6 +8,7 @@ interface HeroArticleFormProps {
   editingLang: string;
   getLocalizedValue: (payload: any, field: string) => string;
   updateLocalizedValue: (field: string, value: string) => void;
+  updatePayloadValue: (field: string, value: string | number) => void;
   setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
   setIsMediaModalOpen: (open: boolean) => void;
 }
@@ -17,6 +18,7 @@ export default function HeroArticleForm({
   setEditingSection,
   getLocalizedValue,
   updateLocalizedValue,
+  updatePayloadValue,
   setUploadTarget,
   setIsMediaModalOpen,
 }: HeroArticleFormProps) {
@@ -74,8 +76,8 @@ export default function HeroArticleForm({
         <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Author</label>
         <input
           type="text"
-          value={getLocalizedValue(editingSection.payload, 'author')}
+          value={editingSection.payload?.author || ''}
-          onChange={(e) => updateLocalizedValue('author', e.target.value)}
+          onChange={(e) => updatePayloadValue('author', e.target.value)}
           className="admin-input w-full"
           placeholder="Author name"
         />
@@ -85,8 +87,8 @@ export default function HeroArticleForm({
         <label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Category / Tag</label>
         <input
           type="text"
-          value={getLocalizedValue(editingSection.payload, 'category')}
+          value={editingSection.payload?.category || ''}
-          onChange={(e) => updateLocalizedValue('category', e.target.value)}
+          onChange={(e) => updatePayloadValue('category', e.target.value)}
           className="admin-input w-full"
           placeholder="Story"
         />

apps/admin/src/components/page-builder/HeroForm.tsx

@@ -6,6 +6,7 @@ interface HeroFormProps {
   editingLang: string;
   getLocalizedValue: (payload: any, field: string) => string;
   updateLocalizedValue: (field: string, value: string) => void;
+  updatePayloadValue: (field: string, value: string | number) => void;
   setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
   setIsMediaModalOpen: (open: boolean) => void;
 }
@@ -14,6 +15,7 @@ export default function HeroForm({
   editingSection,
   getLocalizedValue,
   updateLocalizedValue,
+  updatePayloadValue,
   setUploadTarget,
   setIsMediaModalOpen,
 }: HeroFormProps) {
@@ -95,8 +97,8 @@ export default function HeroForm({
         <input
           type="text"
           required
-          value={getLocalizedValue(editingSection.payload, 'buttonLink')}
+          value={editingSection.payload?.buttonLink || ''}
-          onChange={(e) => updateLocalizedValue('buttonLink', e.target.value)}
+          onChange={(e) => updatePayloadValue('buttonLink', e.target.value)}
           className="admin-input w-full"
         />
       </div>

apps/admin/src/pages/PageBuilderPage.tsx

@@ -118,6 +118,19 @@ export default function PageBuilderPage() {
     });
   };
 
+  const updatePayloadValue = (field: string, value: string | number) => {
+    setEditingSection(prev => {
+      if (!prev) return null;
+      return {
+        ...prev,
+        payload: {
+          ...(prev.payload || {}),
+          [field]: value
+        }
+      };
+    });
+  };
+
   const getLocalizedSlideValue = (slide: any, field: string) => {
     if (!slide || slide[field] === undefined) return '';
     const val = slide[field];
@@ -150,6 +163,19 @@ export default function PageBuilderPage() {
     });
   };
 
+  const updateSlidePayloadValue = (idx: number, field: string, value: string | number) => {
+    setEditingSection(prev => {
+      if (!prev) return null;
+      const currentSlides = [...(prev.payload?.slides || [])];
+      const slide = currentSlides[idx] || {};
+      currentSlides[idx] = { ...slide, [field]: value };
+      return {
+        ...prev,
+        payload: { ...(prev.payload || {}), slides: currentSlides }
+      };
+    });
+  };
+
   const getLocalizedAnnouncementSlide = (slide: any) => {
     if (typeof slide === 'string') {
       return editingLang === 'th' ? slide : '';
@@ -1047,6 +1073,7 @@ export default function PageBuilderPage() {
                   editingLang={editingLang}
                   getLocalizedValue={getLocalizedValue}
                   updateLocalizedValue={updateLocalizedValue}
+                  updatePayloadValue={updatePayloadValue}
                   setUploadTarget={setUploadTarget}
                   setIsMediaModalOpen={setIsMediaModalOpen}
                 />
@@ -1079,6 +1106,7 @@ export default function PageBuilderPage() {
                   editingLang={editingLang}
                   getLocalizedValue={getLocalizedValue}
                   updateLocalizedValue={updateLocalizedValue}
+                  updatePayloadValue={updatePayloadValue}
                   setUploadTarget={setUploadTarget}
                   setIsMediaModalOpen={setIsMediaModalOpen}
                 />
@@ -1093,6 +1121,7 @@ export default function PageBuilderPage() {
                   updateLocalizedValue={updateLocalizedValue}
                   getLocalizedSlideValue={getLocalizedSlideValue}
                   updateLocalizedSlideValue={updateLocalizedSlideValue}
+                  updateSlidePayloadValue={updateSlidePayloadValue}
                   setUploadTarget={setUploadTarget}
                   setIsMediaModalOpen={setIsMediaModalOpen}
                 />
@@ -1126,6 +1155,7 @@ export default function PageBuilderPage() {
                   editingLang={editingLang}
                   getLocalizedValue={getLocalizedValue}
                   updateLocalizedValue={updateLocalizedValue}
+                  updatePayloadValue={updatePayloadValue}
                   setUploadTarget={setUploadTarget}
                   setIsMediaModalOpen={setIsMediaModalOpen}
                 />
@@ -1148,6 +1178,7 @@ export default function PageBuilderPage() {
                   editingLang={editingLang}
                   getLocalizedValue={getLocalizedValue}
                   updateLocalizedValue={updateLocalizedValue}
+                  updatePayloadValue={updatePayloadValue}
                   setUploadTarget={setUploadTarget}
                   setIsMediaModalOpen={setIsMediaModalOpen}
                 />