@axa-ch/pod-opc-onlineofferte NPM

====== AXA / Produkt Standardgeschäft P&C

== OSPC Landingpage

The https://github.com/axa-ch/pod-opc-onlineofferte[Landingpage] is an AXA.CH-POD (is not a Kubernetes-POD), running on the AXA.CH infrastructure around the AEM CMS system.

The frontend-backend service is called https://github.axa.com/sgpc/stargate-sgpc[Stargate], running in the OpenShift (pink) platform. Stargate itself has services against https://github.axa.com/sgpc/opc-services[opc-service] (to read landingpage data) and SAP CRM to read the partner information.

The https://github.com/axa-ch/pod-opc-onlineofferte[Landingpage] is protected with a DeepLink (with or without mTAN).

The https://github.com/axa-ch/pod-opc-onlineofferte[Landingpage] is embedded with the following systems:

stargate, see https://github.axa.com/sgpc/stargate-sgpc
opc-servce (OPC), see https://github.axa.com/sgpc/opc-services
brokerportal (BVP), see https://github.axa.com/sgpc/brokerportal

and with 3th-part system:

ESG, API Gateway, link:https://confluence.axa.com/confluence/pages/viewpage.action?pageId=57573410[Confluence ESG, API Gateway]
Amor (DeepLink), creating a DeepLink for mTAN verification, link:https://confluence.axa.com/confluence/display/CHIAM/Deeplink[Confluence Deeplink] link: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[Swagger AmurDeeplinkApi_1]
AEM (AXA.CH), CMS where Landingpage is integrated, link:https://confluence.axa.com/confluence/pages/viewpage.action?pageId=186307879[Confluence AEM]
PartnerInfo, CRM partner info

image:doc/interaction-diagramm.pngLandingpage Interaction-Diagram //// plantuml, interaction-diagramm, png .... @startuml actor customer

frame "AXA.CH intranet" {

actor customerAdvisor

package "OSPC" { brokerportal stargate database "database" { frame "OPC" { ANTRG_LNDG_PAGE } } } cloud "AXA GO" { PartnerInfo }

}

frame "DMZ" { cloud "Firewall" { ESG } }

frame "AEM CMS" { cloud "AXA.CH POD" { pod-opc-onlineofferte } }

customer --> pod-opc-onlineofferte --> brokerportal --> opc-service --> ANTRG_LNDG_PAGE --> ANTRG_LNDG_PAGE_AVB --> Amore DeepLink --> ESG --> stargate --> opc-service --> PartnerInfo @enduml .... Setup PlantUML: https://plantuml.com/de/graphviz-dot ////

The high level sequence diagram of the Landingpage can be found under: xref:doc/SEQUENCESequence 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:

=== 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.mdDEV_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.

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.mdorder 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.pngRELEASE_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.pngNPM + On the next screen select Generate New Token. image:doc/npm-token.pngNPM-TOKEN + As token type select Publish and click on Generate Token. image:doc/npm-token-type.pngNPM-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.pngPOD Build +

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.pngPOD 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.mdDEV_SETUP