Old JSON

Previous JSON layout style had a limited and inefficient structure. This would require plans_ which would create a big waste in code. New and Better system was implemented as initially it was meant to be a quick test, proof of concept, additionally new system allows to have plans seperated by section headers for a cleaner look. The goal was for bundle creator to make only one of plans in "plans_1" to be selectable, and if needed, be bundled together with one of plans from "plans_2", "plans_3" etc...

// Use computed property to filter plans based on the active category
const activeCategoryPlans = computed(() => {
  if (activeCategory.value) {
    const mergedPlans = [];

    // Merge the plans from each group with an additional 'group' property
    if (activeCategory.value.plans_1) {
      mergedPlans.push(...activeCategory.value.plans_1.map(plan => ({ ...plan, group: 'plans_1' })));
    }
    if (activeCategory.value.plans_2) {
      mergedPlans.push(...activeCategory.value.plans_2.map(plan => ({ ...plan, group: 'plans_2' })));
    }
    if (activeCategory.value.plans_3) {
      mergedPlans.push(...activeCategory.value.plans_3.map(plan => ({ ...plan, group: 'plans_3' })));
    }

    return mergedPlans;
  } else {
    // Return an empty array if no active category
    return [];
  }
});

SAMPLE JSON:

{   "status":"200",
    "data": [
    {
        "title":"Susikurk",
        "plans_1": [
            {
                "id": 8,
                "price": 10.00
            }
        ],
        "plans_2": [
            {
                "id": 3,
                "price": 4.12
            }
        ],
    }
    ]
}