Add CTA Scripts feature #17991

FollowTheFlo · 2023-10-19T13:48:42Z

CXSPA-4532
tests coverage is 100% on all files
display CTA scripts on 3 pages: pdp, confirmationPage, orderDetails

added 1 new endpoint getCtaScripts
CtaScripts cpnt, CtaScripts service, CtaElement, CtaElement styling
modify opf resource loader service by adding reject callback

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts

FollowTheFlo · 2023-10-20T16:35:55Z

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.component.spec.ts

+    opfCtaScriptsService.getCtaHtmlslList = createSpy().and.returnValue(
+      throwError('error')
+    );
+    createComponentInstance();


to have opfCtaScriptsService.getCtaHtmlslList new value generated (line 55), I had to force creation of new component. I couldn't find other solutions.
It works if we mock getCtaHtmlslList with a rxJs Subject but it then causes issue with removing subscriptions, needs to pipe with take(1) and side effect if both 'it' would run in parallel...

FollowTheFlo · 2023-10-20T16:36:45Z

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.component.spec.ts

+    opfCtaScriptsService.getCtaHtmlslList = createSpy().and.returnValue(
+      of(undefined)
+    );
+    createComponentInstance();


same situation as line 58 commented above

FollowTheFlo · 2023-10-20T16:43:24Z

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts

+        return loadedList;
+      }, []),
+      map((list) => {
+        return this.removeScriptTags(list);


remove all script tags so they are not displayed in DOM (we don't sanitize html snippet). the script tags are already executed in prior step 'loadAndRunScript' so not needed anymore.

FollowTheFlo · 2023-10-20T16:46:39Z

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts

+            }
+          })
+          .catch(() => {
+            resolve(undefined);


All resolve(undefined) are use for the logic : if a resource file (either css or js) fails to load, don't display the html snippet in UI.

FollowTheFlo · 2023-10-20T16:58:07Z

integration-libs/opf/base/styles/components/_opf-cta-element.scss

@@ -0,0 +1,4 @@
+%cx-opf-cta-element {


adding basic styling so CTA elements are separated vertically with 1rem (0.5+0.5).

FollowTheFlo · 2023-10-20T17:14:59Z

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts

+  protected removeScriptTags(htmls: string[]) {
+    return htmls.map((html) => {
+      const element = new DOMParser().parseFromString(html, 'text/html');
+      Array.from(element.getElementsByTagName('script')).forEach((script) => {


I spent a bit of time to look for removeChild solution, nothing was working, so I used the string manipulation solution with 'replace', it is even shorter.

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.ts

cypress · 2023-10-20T18:05:30Z

4 flaky tests on run #41756 ↗︎

0	119	2	0	4

Details:

Merge `1f0e5b0` into `955ad0f`...
Project: spartacus	Commit: `a24c4412bc ℹ️`
Status: Passed	Duration: 06:56 💡
Started: Oct 26, 2023 8:19 PM	Ended: Oct 26, 2023 8:26 PM

regression/variants/apparel-checkout-as-guest.core-e2e.cy.ts • 1 flaky test • B2C

View Output Video

Test		Artifacts
Apparel - checkout as guest > Desktop > should perform checkout as guest, create an account and verify guest data		`Test Replay` `Output` `Screenshots` `Video`

ssr/pages.core-e2e.cy.ts • 3 flaky tests • SSR

View Output Video

Test		Artifacts
SSR > should render homepage		`Test Replay` `Output` `Screenshots` `Video`
SSR > should render PLP		`Test Replay` `Output` `Screenshots` `Video`
SSR > should render PDP		`Test Replay` `Output` `Screenshots` `Video`

Review all test suite changes for PR #17991 ↗︎

FollowTheFlo · 2023-10-20T18:33:25Z

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts

+      switchMap((ctaScriptsRequest) => this.fetchCtaScripts(ctaScriptsRequest)),
+      switchMap((scriptslist) => this.runCtaScripts(scriptslist)),
+      finalize(() => {
+        this.clearResources();


avoid to clearResources in component ngOnDestroy fct.
cleaner solution.

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.spec.ts

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.ts

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts

integration-libs/opf/base/core/facade/opf-payment.service.spec.ts

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.spec.ts

FollowTheFlo added 8 commits October 11, 2023 12:11

add cta-scripts cms cpnt

ddfaf96

Merge branch 'epic/opf' into feature/CXSPA-4532

aed0c6c

add service

3c93b44

implement script list + button + css

7983ac9

modif terminology - unit tests

787f93e

add cta script for pdp - remove logs - error handling

99e4f45

add unit tests

ad897cd

add unit tests - improve rxjs piping

0d6d509

FollowTheFlo requested a review from a team as a code owner October 19, 2023 13:48

github-actions bot marked this pull request as draft October 19, 2023 13:48

github-actions bot and others added 9 commits October 19, 2023 13:49

Add license header

ef918e3

improve logic and naming

0589a1d

simplify removeScriptTags fct

d8a190d

fix sonar probs

dba6fda

improve unit tests - simplify cpnt logic

1783342

add changeDetection

03c6766

remove css of cta wrapper as redundant

cf74564

rename cta-button to cta-element

9fd5e10

re-organize folders

ec9d4f9

FollowTheFlo commented Oct 20, 2023

View reviewed changes

integration-libs/opf/base/components/opf-cta/opf-cta-scripts/opf-cta-scripts.service.ts Outdated Show resolved Hide resolved

FollowTheFlo added 2 commits October 20, 2023 11:33

simplify rxjs piping

8ee7d50

refactor unit test to avoid redunduncy

40c490f

FollowTheFlo commented Oct 20, 2023

View reviewed changes

remove comments

376174a

FollowTheFlo commented Oct 20, 2023

View reviewed changes

integration-libs/opf/base/components/opf-cta/opf-cta-element/opf-cta-element.component.ts Outdated Show resolved Hide resolved

fix sonar warning

03df28c

FollowTheFlo marked this pull request as ready for review October 20, 2023 17:41

FollowTheFlo commented Oct 20, 2023

View reviewed changes

adjust naming and modules

ad53c0d

github-actions bot marked this pull request as draft October 20, 2023 20:40

FollowTheFlo marked this pull request as ready for review October 20, 2023 21:23

github-actions bot marked this pull request as draft October 20, 2023 21:46

FollowTheFlo added 6 commits October 20, 2023 18:06

reject when empty resources

7fd6890

add unit test for resource-loader service

fd0bb5d

Merge branch 'epic/opf' into feature/CXSPA-4532

9c0a7ba

rename interface with more generic name

56142cc

remove rejects to only support happy scenario

733cd11

fix unit test

f8dcc10

FollowTheFlo marked this pull request as ready for review October 23, 2023 19:23

rmch91 requested changes Oct 25, 2023

View reviewed changes

Merge branch 'epic/opf' into feature/CXSPA-4532

9336252

github-actions bot marked this pull request as draft October 25, 2023 15:43

FollowTheFlo added 6 commits October 25, 2023 13:44

Merge branch 'epic/opf' into feature/CXSPA-4532

9513819

add cxSafeHtml pipe

9a6bace

replace if/switch-case by mapping

1f33ef8

remove console logs from unit tests

49dffc1

fix sonar

7c89c2f

Merge branch 'epic/opf' into feature/CXSPA-4532

1f0e5b0

FollowTheFlo requested a review from rmch91 October 26, 2023 20:03

FollowTheFlo marked this pull request as ready for review October 26, 2023 20:03

rmch91 approved these changes Oct 27, 2023

View reviewed changes

FollowTheFlo merged commit 44c1008 into epic/opf Oct 27, 2023
21 checks passed

FollowTheFlo deleted the feature/CXSPA-4532 branch October 27, 2023 15:27

cypress bot mentioned this pull request Oct 27, 2023

feat: add OPF integration library #17250

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add CTA Scripts feature #17991

Add CTA Scripts feature #17991

FollowTheFlo commented Oct 19, 2023 •

edited

Loading

FollowTheFlo Oct 20, 2023 •

edited

Loading

FollowTheFlo Oct 20, 2023

FollowTheFlo Oct 20, 2023

FollowTheFlo Oct 20, 2023

FollowTheFlo Oct 20, 2023

FollowTheFlo Oct 20, 2023

cypress bot commented Oct 20, 2023 •

edited

Loading

FollowTheFlo Oct 20, 2023 •

edited

Loading

Add CTA Scripts feature #17991

Add CTA Scripts feature #17991

Conversation

FollowTheFlo commented Oct 19, 2023 • edited Loading

FollowTheFlo Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

FollowTheFlo Oct 20, 2023

Choose a reason for hiding this comment

FollowTheFlo Oct 20, 2023

Choose a reason for hiding this comment

FollowTheFlo Oct 20, 2023

Choose a reason for hiding this comment

FollowTheFlo Oct 20, 2023

Choose a reason for hiding this comment

FollowTheFlo Oct 20, 2023

Choose a reason for hiding this comment

cypress bot commented Oct 20, 2023 • edited Loading

4 flaky tests on run #41756 ↗︎

Review all test suite changes for PR #17991 ↗︎

FollowTheFlo Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

FollowTheFlo commented Oct 19, 2023 •

edited

Loading

FollowTheFlo Oct 20, 2023 •

edited

Loading

cypress bot commented Oct 20, 2023 •

edited

Loading

FollowTheFlo Oct 20, 2023 •

edited

Loading