Can a Prop Defined in the app.mjs File Be Overridden For a Specific Action in the Paystack App?

Dev
1

This topic was automatically generated from Slack. You can find the original thread here.

Is it possible to override a prop that has been defined in the app.mjs file by specifying certain parameters within the file for a specific action?

I’m working on subscription actions for the Paystack app. On Paystack, subscriptions are associated with plans, which describe the amount and billing interval for the subscription (eg. you subscribe to either the Basic or Premium plan).

The issue is that the Create Subscription endpoint uses the plan code when creating subscriptions, while the List Subscriptions endpoint uses the plan id. I worked on the Create Subscription action first, so in the paystack.app.mjs file, I’ve set the async options function to return the plan code for each plan as the value. Can I override the plan prop in my List Subscriptions action such that it returns the plan id as the value instead?

2

Hi Tolu,
Apologize if my answer is not complete or doesn’t apply exactly to your code.
In summary, yes, you can override anything (including props) from the app.mjs file in your action code.

For example, assume this status prop is defined in the app file:

status: {
    type: "string",
    label: "Status",
    description: "Status of a transaction. Possible values are success, failed, and abandoned.",
    options: [
        "failed",
        "success",
        "abandoned",
    ],
}

In your action file, you can override the options like this. And the rest (type, label, description, async options) will be imported normally

status: {
    propDefinition: [
        paystack,
        "status",
    ],
    // will only override options from the app file
    options: [
        "to do",
        "in progress",
        "done",
    ],
}
3

While you can override and create a different async options function in your List Subscriptions to return the plan id, I recommend you actually create another prop called planId (and the former planCode) to fetch and return the different data. This way, future components will use the specific prop they require, as both will be available in the app file.