feat(PAYMENTS-17872): add default styles

package.json

@@ -12,7 +12,9 @@
     "dev": "webpack --mode=development --watch",
     "test": "karma start --single-run",
     "test:dev": "karma start --auto-watch",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint": "npm run eslint:lint && npm run stylelint:lint",
+    "eslint:lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "stylelint:lint": "stylelint \"src/**/*.scss\"",
     "prepare": "husky install",
     "lib-publish": "npm run build && npm test && npm run lint && npm publish --access public",
     "prettier": "prettier --write ./src"
@@ -47,6 +49,7 @@
     "lint-staged": "^14.0.1",
     "mini-css-extract-plugin": "^2.7.6",
     "prettier": "3.0.2",
+    "raw-loader": "^4.0.2",
     "reflect-metadata": "^0.1.13",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.66.1",

src/assets/fonts/index.ts

@@ -0,0 +1,12 @@
+import './graphik/Graphik-Bold-Web.eot';
+import './graphik/Graphik-Bold-Web.ttf';
+import './graphik/Graphik-Bold-Web.woff';
+import './graphik/Graphik-Bold-Web.woff2';
+
+import './graphik/Graphik-Medium-Web.ttf';
+import './graphik/Graphik-Medium-Web.woff';
+import './graphik/Graphik-Medium-Web.woff2';
+
+import './graphik/Graphik-Regular-Web.ttf';
+import './graphik/Graphik-Regular-Web.woff';
+import './graphik/Graphik-Regular-Web.woff2';

src/core/customization/themes-loader.ts

@@ -0,0 +1,11 @@
+import 'reflect-metadata';
+import { injectable } from 'tsyringe';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { default as styles } from '../../styles/themes/default/secure-styles/style.string-style.scss';
+@injectable()
+export class ThemesLoader {
+  public getTheme(): string {
+    return styles as string;
+  }
+}

src/core/customization/themes.map.ts

@@ -0,0 +1,3 @@
+export const themes = {
+  default: 'default',
+};

src/features/headless-checkout/environment.ts

@@ -1,4 +1,3 @@
-// export const headlessCheckoutAppUrl =
-//   'https://secure.xsolla.com/headless-checkout';
-export const headlessCheckoutAppUrl = 'https://localhost:4200';
+export const headlessCheckoutAppUrl =
+  'https://secure.xsolla.com/headless-checkout';
 export const cdnUrl = 'https://cdn3.xsolla.com';

src/features/headless-checkout/headless-checkout.spec.ts

@@ -9,6 +9,7 @@ import { getFinanceDetailsHandler } from './post-messages-handlers/get-finance-d
 import { FormStatus } from '../../core/status/form-status.enum';
 import { noopStub } from '../../tests/stubs/noop.stub';
 import { headlessCheckoutAppUrl } from './environment';
+import { ThemesLoader } from '../../core/customization/themes-loader';
 
 const mockMessage: Message = {
   name: EventName.initPayment,
@@ -40,6 +41,7 @@ describe('HeadlessCheckout', () => {
   let headlessCheckout: HeadlessCheckout;
   let postMessagesClient: PostMessagesClient;
   let localizeService: LocalizeService;
+  let themesLoader: ThemesLoader;
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const stub = (): void => {};
@@ -52,7 +54,7 @@ describe('HeadlessCheckout', () => {
           origin: headlessCheckoutAppUrl,
           data: JSON.stringify({ name: EventName.isReady }),
         } as MessageEvent);
-      }
+      },
     );
     postMessagesClient = {
       init: stub,
@@ -64,6 +66,10 @@ describe('HeadlessCheckout', () => {
       initDictionaries: async () => Promise.resolve(),
     } as unknown as LocalizeService;
 
+    themesLoader = {
+      getTheme: () => 'body { margin: 0;}',
+    } as unknown as ThemesLoader;
+
     container.clearInstances();
 
     headlessCheckout = container
@@ -75,6 +81,9 @@ describe('HeadlessCheckout', () => {
       .register<LocalizeService>(LocalizeService, {
         useValue: localizeService,
       })
+      .register<ThemesLoader>(ThemesLoader, {
+        useValue: themesLoader,
+      })
       .registerSingleton(HeadlessCheckout)
       .resolve(HeadlessCheckout);
   });
@@ -83,7 +92,7 @@ describe('HeadlessCheckout', () => {
     const spy = spyOn(postMessagesClient, 'init');
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
     await headlessCheckout.init({ isWebview: false });
     expect(spy).toHaveBeenCalled();
@@ -92,7 +101,7 @@ describe('HeadlessCheckout', () => {
   it('Should init localization', () => {
     const localizeSpy = spyOn(
       localizeService,
-      'initDictionaries'
+      'initDictionaries',
     ).and.resolveTo();
 
     void headlessCheckout.init({ isWebview: false });
@@ -111,7 +120,7 @@ describe('HeadlessCheckout', () => {
     headlessCheckout.events.onCoreEvent(
       EventName.initPayment,
       mockHandler,
-      stub
+      stub,
     );
     expect(spy).toHaveBeenCalled();
   });
@@ -120,7 +129,7 @@ describe('HeadlessCheckout', () => {
     const spy = spyOn(postMessagesClient, 'listen');
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
 
     await headlessCheckout.init({ isWebview: false });
@@ -152,7 +161,7 @@ describe('HeadlessCheckout', () => {
     await headlessCheckout.getFinanceDetails();
     expect(spy).toHaveBeenCalledWith(
       { name: EventName.financeDetails },
-      getFinanceDetailsHandler
+      getFinanceDetailsHandler,
     );
   });
 
@@ -173,7 +182,7 @@ describe('HeadlessCheckout', () => {
     spyOn(windowService.customElements, 'get').and.returnValue(undefined);
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
 
     await headlessCheckout.init({ isWebview: false });
@@ -182,11 +191,11 @@ describe('HeadlessCheckout', () => {
 
   it('Should web components not be redefined', async () => {
     spyOn(windowService.customElements, 'get').and.returnValue(
-      CustomElementMock
+      CustomElementMock,
     );
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
 
     const spy = spyOn(window.customElements, 'define');