Zuora Simple Component: implement events API

A new component for Zuora was introduced with !84342 (merged). The idea is to harmonise all the usages (i.e. replace all implementations with this new component).

In order to make the transition easier, we should first address how the component API will act on error cases (e.g. which events to emit, under which conditions, etc). This is especially important because most implementations are using an external button that needs to be disabled when certain (error) states occur. Additionally, some of the requests will need to go up and therefore rely on event communication.

While here, we can cover also some non-error states.

Implementation (proposal)

These events should be emitted when the described state obtains.

Error states
Zuora Simple error state Event to emit
iFrame did not load/render loaded-error
Validation error: client client-validation-error
Validation error: server server-validation-error
Payment submit error payment-submit-error
Success states
Zuora Simple state Event to emit
iFrame did load/render loaded
Payment submit success success

Additional:

  1. an enum-like structure (already here) for the values of the event can be created. It makes dispatching/listening more consistent
  2. make sure to test the events are correctly emitted

How to get ZuoraSimple

This requires both gdk and CustomersDot running.

  • Setup the HPM in Zuora Api Sandbox, you have two ways:
    1. create an HPM similar to this: https://apisandbox.zuora.com/apps/HostedPageLite.do?method=preview&id=8ad099157fd495bf017fdadbab7e6959:
      • set the as name GL.com Credit Card Validation_<your-name> (e.g. GL.com Credit Card Validation_agulina)
      • for URL/host, use your gdk host
    2. just use mine 😇 (but please, do not change the configurations, it assumes you run gdk on http://localhost:3000)
  • copy the id of the page (mine is 8ad099157fd495bf017fdadbab7e6959)
  • go to secrets.yml in CustomersDot and use it for zuora_payment_method_validation_page_id in development settings (if not there, add it manually)
  • (restart CustomersDot)
  • in your terminal, export GITLAB_SIMULATE_SAAS=true (if gdk is already running, do a gdk restart)
  • go to the gdk rails console and type Feature.enable(:ci_require_credit_card_on_free_plan)

Next, steps to see the feature:

  • Create a new User on your gdk. You can add it by visiting /admin/users/ and logging in with your root. The user should not be ad admin
  • Log in with the new user
  • Create a group and a project
  • In the repository of the project, create a .gitlab-ci.yml file (you can select whatever template)
  • Visit /-/pipelines/new under your project
  • Click on Run pipeline
  • An alert should appear, click on Validate account
  • To use the form under ZuoraSimple, go to the gdk rails console and type Feature.enable(:use_api_for_payment_validation)
  • (refresh the page)
Edited by Angelo Gulina