Split SIM list into countries and regions

Refactored BuySimView to display SIM products in separate sections for countries and regions. Added state to manage filtered lists and updated UI headings and rendering logic accordingly.

EsimLao/esim-vite/src/pages/buy-sim/BuySimView.tsx

@@ -21,7 +21,8 @@ const BuySimView: React.FC<BuySimViewProps> = ({
 }) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  // load product by country/region or popularity
+  const [countries, setCountries] = React.useState<Area[]>([]);
+  const [populars, setPopulars] = React.useState<Area[]>([]);
 
   const { data: loadArea = [] } = useQuery<Area[]>({
     queryKey: [DataCacheKey.AREAS],
@@ -34,6 +35,9 @@ const BuySimView: React.FC<BuySimViewProps> = ({
         });
         // save to redux store
         console.log("Get area response data:", res);
+        let areas = res.data as Area[];
+        setCountries(areas.filter((a) => a.isCountry === 1));
+        setPopulars(areas.filter((a) => a.isPopular === 0));
         return res.data as Area[];
       } catch (error) {
         console.error(error);
@@ -87,12 +91,26 @@ const BuySimView: React.FC<BuySimViewProps> = ({
         </div>
         <section className="mb-12">
           <h2 className="text-xl md:text-[32px] font-black text-slate-900 mb-6 md:mb-8 tracking-tight">
-            SIM Popular
+            SIM Countries
           </h2>
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6">
-            {loadArea.map((p) => (
-              <ProductCard key={p.id} p={p} onClick={handleSelect} />
-            ))}
+            {loadArea
+              .filter((a) => a.isCountry === 1)
+              .map((p) => (
+                <ProductCard key={p.id} p={p} onClick={handleSelect} />
+              ))}
+          </div>
+        </section>
+        <section className="mb-12">
+          <h2 className="text-xl md:text-[32px] font-black text-slate-900 mb-6 md:mb-8 tracking-tight">
+            SIM Regions
+          </h2>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6">
+            {loadArea
+              .filter((a) => a.isCountry === 0)
+              .map((p) => (
+                <ProductCard key={p.id} p={p} onClick={handleSelect} />
+              ))}
           </div>
         </section>
       </div>