@axa-ch/pod-opc-onlineofferte

The high level sequence diagram of the Landingpage can be found under: xref:doc/SEQUENCE[Sequence Diagram of the Landingpage]

Confluence Documentation:

• https://confluence.axa.com/confluence/display/SGPC/Stargate-SGPC+-+Stargate+API+Gateway+SGPC[SGPC Confluence Stargate+API Gateway+SGPC]
• https://confluence.axa.com/confluence/display/SGPC/Landingpage[SGPC Confluence Landingpage]

Further 3th party Confluence Setup Documentation:

• https://confluence.axa.com/confluence/display/OPENPAAS/Use+Artifactory+NPM+Registries#UseArtifactoryNPMRegistries-Configurenpmonyourlocaldevelopmentworkstation[Use Artifactory NPM Registries]
• https://confluence.axa.com/confluence/display/CHIAM/Deeplink[DeepLink Doc]
• https://confluence.axa.com/confluence/display/CHIAM/Deeplink+Service+bestellen[Deeplink order a service]
• https://amur.axa-ch-dev-int.blue.medc.openpaas.axa-cloud.com/swagger-ui/index.html?configUrl=/v3/api-docs/swagger-config#/deep-link-v-2-controller[Deeplink Swagger AmurDeeplinkApi_1]

=== Check Deployment State

The deployment state is viewable under following link [AEM DEV, ACC, PROD]: https://aem-test.dev.axa-ch.intraxa/content/webhub/pod_dashboard.html#?q=onlineofferte

=== Development Setup

The development setup is documented separately, see file://doc/DEV_SETUP.md[DEV_SETUP]

=== Getting started

This project follows the usual React workflow:

. Install : [source,shell] npm install

. Start Landingpage: [source,shell] npm start

. Start Stargate: see stargate run-config . Open Url with <STARGATE_TEST_UUD>: http://localhost:8082/#uuid=5D0B3D39-74C5-4149-A7A1-2AC4556D9DA3

WARNING: In Google Chrome by AXA is may configured to redirect the url from http://<url> to https://<url> and you don't see it in the url-bar. Use another browser or see the following workaround: https://superuser.com/questions/565409/how-to-stop-an-automatic-redirect-from-http-to-https-in-chrome[how-to-stop-an-automatic-redirect-from-http-to-https-in-chrome]

==== Run Unit-Tests

[source,shell] npm run test-branch

=== Storybooks Storybooks is a framework to visually test UI components. For a component to add to storybooks, one defines a so called story in the stories folder under ./src/stories. A story file is a javascript file with the following naming conventions: <NAME OF COMPONENT TO TEST>.storie.js. A tutorial on how to write stories can be found https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/[here].

Once a story is created, one can execute the following command to start storybooks: npm run storybook. This will start the storybook server at http://localhost:9009, where the stories can be browsed and manipulated.

=== AEM (AXA.CH) CMS Property

The podproperties.json in the source directory is required for AEM, the CMS system where the this Landingpage-POD is running. There we could set some properties, or let it empty if not needed, but it must exist.

=== Layout

Right now there are no layout helpers exported by the https://github.com/axa-ch/patterns-library/tree/develop-v2[patterns-library] framework. It is also likely that there will be no Container, Row and Col components as there were in v1 of the framework. Instead, it is recommended to use either https://css-tricks.com/snippets/css/a-guide-to-flexbox/[Flexbox] or https://css-tricks.com/snippets/css/complete-guide-grid/[CSS Grid].

Soon the v2 framework will however export our responsive breakpoints in the form of a SCSS file, similar to [here][https://github.com/axa-ch/patterns-library/blob/develop-v2/src/components/00-materials/30-layout.scss].

Until such point, the following is recommended:

• Copy and paste the whole https://github.com/axa-ch/patterns-library/blob/develop-v2/src/components/00-materials/30-layout.scss[30-layout.scss] file into the project.
• Install the https://www.npmjs.com/package/breakpoint-sass[breakpoint-sass] dependency
• Create the layouts, per page, with the media query helper from above and using https://css-tricks.com/snippets/css/a-guide-to-flexbox/[Flexbox].

Note, in the 30-layout.scss file, it was necessary to change @import "breakpoint"; to @import "breakpoint-sass/stylesheets/_breakpoint.scss"; to avoid a loading error.

A small SCSS example could look like this:

[source,scss]

// 100% on small screens, 50% on medium and up .my-grid-layout-1 { display: flex; flex-direction: column;

@include breakpoint($mediaquery-md-up) { flex-direction: row; }

&__col { flex: 1; } }

[source,html]

=== Version

The installed POD on AEM System can be verified on the https://aem-test.dev.axa-ch.intraxa/content/webhub/pod_dashboard.html#?q=pod-opc-onlineoffert[POD-Dashboard Site].

=== Release

During the deployment of the artefact it will be deployed and published to the https://registry.npmjs.org/.With the Github.COM account and credential you can also login into the npm-registry, no further account needed.For the deployment the user which executes the command need to be in the @axa-ch organisation.Is the organisation missing in you profile you have to request it, see xref:order-access-for-axa-ch-project:doc/DEV_SETUP.md[order access for axa-ch project]

. Run the following job: https://jenkins-sgpc.axa-ch-dev-int.pink.eu-central-1.aws.openpaas.axa-cloud.com/job/pod-opc-onlineofferte/job/publish-to-npm/[publish-to-npm Pipeline] , see documentation image:doc/jenkins__publish.png[RELEASE_JOB] + [options="header"] .Table jenkins release build parameter |=== | paramater name | description | BRANCH |The branch to build and publish | PUBLISH_TO_NPM |Switch to enable/disable publishing to NPM | NPN_AUTH_TOKEN | The personal authentication token from NPM |===

.. Authentication token + In order to be able to publish the artifact to NPM, one must provide a valid access token (most probably the personal one). To do so, go to NPM, click on the arrow next to your profile avatar and select Access Tokens. + image:doc/npm-profile.png[NPM] + On the next screen select Generate New Token. image:doc/npm-token.png[NPM-TOKEN] + As token type select Publish and click on Generate Token. image:doc/npm-token-type.png[NPM-TOKEN-TYPE]

After token generation, copy the token and save it somewhere where you can find it.Unless you delete the token again, you can use it whenever you are running the publish-pipeline.

=== Deploy

To be able to run the jobs according to the description, the following requirements must be met:

.Deployment Steps . Do deployment to the https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte[NPM repository], see <<_release>> . Build on Jenkins .. Go to https://webhub-jenkins.axa-ch-dev-int.pink.eu-central-1.aws.openpaas.axa-cloud.com/view/AEM%20DX/ .. Click on the build job: https://webhub-jenkins.axa-ch-dev-int.pink.eu-central-1.aws.openpaas.axa-cloud.com/view/AEM%20DX/job/webhub-dx_module-build/ and select "Bauen mit Parametern" in the top left .. Fill in the following exactly, however, change the version to the one desired. The latest should be visible at https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte + image:doc/jenkins__build.png[POD Build] +

[options="header"] .Table jenkins build paramater |=== | parameter name | description | webhubModuleName |The name of our artifact (typically identical to the name of the git repos, without .git extension) | webhubModuleVersion |The version of the artifact as it is stored in the repo of npmjs | releaseVersion |Same as webhubModuleVersion | branchToBuild |Refers to the AEM industry. Is with us always develop! (not to be confused with our own branches) |=== +

NOTE: The job currently does not allow versions in a format other than x.x.x to use → no -beta flag

ATTENTION: The job is also green if NPM ends with an error code → currently you have to check the console output of the job to see if the build was really successful (sad) (addressed to AEM)

. Deploy on Jenkins .. Go to https://webhub-jenkins.axa-ch-dev-int.pink.eu-central-1.aws.openpaas.axa-cloud.com/view/AEM%20DX/, the job is responsible for the actual deployment. The artifact from the build job is now deployed in Midgard .. [DEV] Click on the build job: https://webhub-jenkins.axa-ch-dev-int.pink.eu-central-1.aws.openpaas.axa-cloud.com/view/AEM%20DX/job/webhub-dx_module-deploy/[webhub-dx_module-deploy] and select "Bauen mit Parametern" in the top left .. [DEV] Fill in the following exactly, however, change the version to the one desired. The latest should be visible at https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte .. [ACC] Click on the build job: https://webhub-jenkins.axa-ch-dev-int.pink.eu-central-1.aws.openpaas.axa-cloud.com/view/AEM%20DX/job/webhub-dx_module-deploy/[webhub-dx_module-deploy] and select "Bauen mit Parametern" in the top left .. [ACC] Fill in the following exactly, however, change the version to the one desired. The latest should be visible at https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte + image:doc/jenkins_deploy_acc.png[POD Deploy] + [options="header"] .Table jenkins deploy parameter |=== | parameter names | description | branchToBuild |c | crxPackageVersion |see above | targetState | DEV, ACC and PROD | pingOnly |The name of our artifact (typically identical to the name of the git repos, without .git extension) | deployOnNodeAUTH,
deployOnNodePUB1,
deployOnNodePUB2 | Refers to the AEM environments in which the artifact is to be deployed.
For DEV: DO NOT(!) select PUB2!
For ACC always select all! |===

=== Trouble Shooting

==== Login Failure by git or npm

. Make sure Fiddler is running on your development machine, since the AXA want as to crack its own security with it. . check your development settings, see file://doc/DEV_SETUP.md[DEV_SETUP]