una/neo/packages/app/components/elements/pricing.js

import { ScrollView, View } from 'app/design/view'
import Tabs from 'app/ui/molecules/tabs/tabs'
import { Modal } from 'app/design/controls';
import Stripe from 'app/ui/molecules/integrations/stripe';
import { useState, useRef } from 'react';
import { components } from 'app/components/registry';
import { appStatic } from 'app/lib/app-static'
import { useTranslation } from 'react-i18next'
import { fetcher } from 'app/lib/fetcher';
import Redirect from 'app/ui/atoms/redirect';
import { BlockWrapper } from 'app/components/block-wrapper'

export default function ElementPricing({ data, blockWrapperProps }) {
    const { t } = useTranslation()
    const preparedTabs = [];

    const periodMap = new Map();
    data.data.forEach(item => {
        const periodValue = item?.period?.value;
        if (periodValue) {
            const key = `${periodValue.unit}`;
            periodMap.set(key, periodValue);
        }
    });
    const periodSet = [...periodMap.values()];

    const order = ["year", "month"];

    const sorted = periodSet.sort((a, b) => {
        return order.indexOf(a.unit) - order.indexOf(b.unit);
    });


    if (sorted.length == 1)
        return <BlockWrapper {...blockWrapperProps}><ElementPricingPeriod data={data.data} period={sorted[0]} unit={data.settings.unit} settings={data.settings} /></BlockWrapper>

    sorted.forEach(item => {
        preparedTabs.push({
            key: `tab_${item.unit}`,
            title: item.unit ? t('price-period-' + item.unit) : t('price-period-lifetime'),

            content: <ElementPricingPeriod data={data.data} period={item} unit={data.settings.unit} settings={data.settings} />
        });
    });


    return (
        <BlockWrapper {...blockWrapperProps}>
            {appStatic('components_pricing_header_' + data.settings.object, data.settings)}
            <Tabs tabs={preparedTabs} activeTab={preparedTabs[0].key} />
            {appStatic('components_pricing_footer_' + data.settings.object, data.settings)}
        </BlockWrapper>
    )
}

function ElementPricingPeriod({ data, period, unit, settings }) {
    const redirectRef = useRef();
    const filtered = data.filter(item => item?.period?.value.unit === period.unit);
    const [showModal, setShowModal] = useState(false);

    const fetchData = async (action, ids) => {
        let sUrl = '/api.php?r=system/perfom_action_api/TemplServiceGrid/&params[]=&o=' + settings.object + '&a=' + action + '&ids[]=' + ids;
        if (settings?.query_append)
            Object.keys(settings.query_append).forEach((sKey) => {
                sUrl += '&' + sKey + '=' + settings.query_append[sKey];
            });

        return await fetcher(sUrl);
    };


    const getAction = async (data) => {
        if (data.object_name == "stripe_v3") {
            setShowModal(data)
        }

        if (data.type == "callback") {
            // `choose` (free level) posts the grid row id; `buy` posts its cart item.
            const ids = data.items?.length ? data.items.join('') : data.attr?.bx_grid_action_data;
            await fetchData(data.name || 'buy', ids);
            if (data.redirect_url) redirectRef.current.redirect(data.redirect_url);
        }
    }

    return (
        <View className={`${unit !== 'productlist' ? 'flex-row py-3 ' : ''} flex-wrap `}>
            <Redirect ref={redirectRef} />
            {filtered.map((item, index) => {
                const Price = components['unit']['price'];
                const cls = filtered.length > 1 ? 'w-full lg:w-1/' + Math.min(filtered.length, 3) : 'w-full'
                return (
                    <View key={item.id || item.name || item.title || `price-${index}`} className={`${cls} p-2`}><Price data={item} unit={unit} onBuy={getAction} /></View>
                )
            })}
            {showModal && <Modal onVisible={!!showModal} onClose={() => { setShowModal(false) }} transparent={false}>
                <ScrollView className="h-[400px]">
                    <Stripe payment_type={showModal.payment_type} seller_id={showModal.seller_id} items={showModal.items} />
                </ScrollView>
            </Modal>}
        </View>
    );
}