feat: Create user payment information form

[uds5501]

Fixes #3214

Short description of what this resolves:

Creates an organizer billing information form as the front end follow up for fossasia/open-event-server#6103

Changes proposed in this pull request:

• Make payment-info the default route for the account/billing-info tab
• Update User model
• Create a payment information form for the organizer

Checklist

• I have read the Contribution & Best practices Guide.
• My branch is up-to-date with the Upstream development branch.
• The acceptance, integration, unit tests and linter pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

A sample :

(updated)

[uds5501]

@mariobehling I will be providing the related tests in a follow-up PR because this one's already pertaining to >150 lines changed.

[mrsaicharan1]

store, session, authManager are injected into each and every template. Therefore, you can use it in any template. No need of returning it from any model :)

[uds5501]

@mrsaicharan1 @niranjan94 I have updated it according to the requirements. Please take a look.
Also please review and merge fossasia/open-event-server#6103 before merging this one

[niranjan94]

Use it directly ... No computed property needed

[uds5501]

@niranjan94 I am now calling it directly using user : this.authManager.currentUser but it threw the following error

payment-info.js:8 Uncaught (in promise) TypeError: Cannot read property 'authManager' of undefined
    at Module.callback (payment-info.js:8)
    at Module.exports (loader.js:106)
    at requireModule (loader.js:27)
    at Class._extractDefaultExport (index.js:394)
    at Class.resolveOther (index.js:114)
    at Class.superWrapper [as resolveOther] (utils.js:366)
    at Class.resolveController (globals-resolver.js:293)
    at Class.resolve (globals-resolver.js:140)
    at _resolve (container.js:1210)
    at Registry.resolve (container.js:749)

That's why I used a computed property 😅 .

[niranjan94]

@uds5501 where exactly did you call it from ? Could you push the related code ?

[uds5501]

@niranjan94 I was calling this initially in app/controllers/account/billing-info/payment-info.js and then in the app/components/forms/user-payment-info-form.js . But now I am using intermediate element (made by a computed property) so I don't think this will be relevant

[niranjan94]

• create the intermediate object at the time of component creation. (not as a computed property)
• let all edits in the component edit the intermediate object.
• at the time of save, update the actual user object with values from the intermediate object and save.
• if the save fails for some reason, revert all changes in the main user object. (but keep in intermediate)

--

Also, two minor things.

• Just use a plain js object. an ember object is not needed for this.
• Call it userBillingInfo or something more related to it.

[mariobehling]

1. Please change /account/billing-info/payment-info to /account/billing/payment-info
2. Actually we also need form fields for

• Country*
• State

[uds5501]

@niranjan94 @CosmicCoder96 Please check

[niranjan94]

Show a loading UI..

• Either Add a loading icon to the button and disable the button during submit
• Or show the loading UI over the entire form

See others forms and stick to something that is similar to the others

[uds5501]

Okay, I used the existing loading UI being used in the other forms.

[mrsaicharan1]

LGTM.

[mrsaicharan1]

Just the rebase the commits & this is GTG.