image:https://img.shields.io/npm/v/@axa-ch/pod-opc-onlineofferte.svg?style=flat-square[title="NPM version", link="https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte"] image:https://img.shields.io/npm/v/@axa-ch/pod-opc-onlineofferte/lateststyle=flat-square[title="NPM Latest", link="https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte"] image:https://img.shields.io/npm/dm/@axa-ch/pod-opc-onlineofferte.svg?style=flat-square[title="NPM monthly downloads", link="https://www.npmjs.com/package/@axa-ch/pod-opc-onlineofferte"] image:https://img.shields.io/npm/dt/@axa-ch/pod-opc-onlineofferte.svg?style=flat-square[title="NPM total downloads", link="https://npmjs.org/package/@axa-ch/pod-opc-onlineofferte.svg"]

====== 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.png[Landingpage Interaction-Diagram] //// [plantuml, interaction-diagramm, png] .... @startuml actor customer

frame "AXA.CH [intranet]" {

actor customerAdvisor

package "OSPC" { [brokerportal] [opc-service] [stargate] database "database" { frame "OPC" { [ANTRG_LNDG_PAGE] [ANTRG_LNDG_PAGE_AVB] } } } cloud "AXA GO" { [PartnerInfo] [Amore DeepLink] }

}

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

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

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

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]