JSFiddle - React, Tailwind, and code Playground

by joplomacedo

JavaScript

const plans = [
    {
        id: 'premium',
        name: 'Premium',
        price: 7.99,
        features: {
            totalTags: Infinity,
            autoTags: true,
            themes: ['light', 'dark'] 
        }
    },

    {
        id: 'free',
        name: 'Free',
        price: 0,
        features: {
            totalTags: 50,
            autoTags: false,
            themes: ['light']
        }
    }
];

const features = {
    totalTags: {
        type: 'limit',
    },
    autoTags: {
        type: 'boolean'
    },
    themes: {
        type: 'options',
    }
}



function testFeature( {featureId, userPlanId, testVal }) {
    const featureType = features[featureId].type;
    
    const userPlan = plans.find( ({id}) => id === userPlanId);
    const userPlanFeatureDesc = userPlan.features[featureId];

    if ( featureType === 'limit') {
        return testVal <= userPlanFeatureDesc;
    }

    if ( featureType === 'boolean' ) {
        return userPlanFeatureDesc;
    }

    if ( featureType === 'options' ) {
        return userPlanFeatureDesc.includes(testVal);
    }
}


let userPlanId = 'free'
let totalTags = 45;


let canAddTag = testFeature({
    featureId: 'totalTags',
    userPlanId,
    testVal: totalTags + 1
});

console.log('canAddTag:', canAddTag)

let canActivateDarkTheme = testFeature({
    featureId: 'themes',
    userPlanId,
    testVal: 'dark'
});

console.log('canActivateDarkTheme:', canActivateDarkTheme)

let showAutoTags = testFeature({
    featureId: 'autoTags',
    userPlanId
});

console.log('showAutoTags:', showAutoTags)