Merge branch 'refs/heads/main' into feature/AD-288

README.md

@@ -1,27 +1,51 @@
-# AdyenSpartacus
+# SAP Composable Storefront - Adyen Payments Library ( 0.3 Alpha)
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.6.
+This repository contains an Angular library that integrates Adyen payments into the SAP Composable Storefront, specifically designed for the Spartacus framework. Please note that this is an **unstable alpha version**, and it is still under development. Use it at your own risk and in testing environments only.
 
-## Development server
+## Requirements
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+- Angular version: `17.3.0`
+- Spartacus version: `2211.23.0-1`
 
-## Code scaffolding
+## Installation
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### Prerequisites
 
-## Build
+Before installing the Adyen Payments library, ensure that you have a local npm registry running. If not, you can start one with [Verdaccio](https://verdaccio.org/).
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Build and Publish the Library
 
-## Running unit tests
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/Adyen/adyen-spartacus/
+   cd adyen-spartacus/projects/adyen-payments
+   ```
+2. **Build the package**:
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+    ```bash
+    npm run build
+    ```
+3. **Publish the package to the local npm registry**:
 
-## Running end-to-end tests
+    ```bash
+    npm --registry http://localhost:4873 publish --access public
+    ```
+### Installation on SAP Composable Storefront
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+**Install the Adyen Payments library**:
 
-## Further help
+    ng add adyen-payments --registry http://localhost:4873
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+This will automatically configure your storefront to include Adyen Payments functionality if it is a clean installation.
+
+### Manual Configuration (Non-clean Installations):
+
+If your Spartacus storefront already has modifications, you might need to manually update the **checkout-feature.module.ts** and **order-feature.module.ts** files.
+Refer to the templates provided in the schematics directory of the Adyen Payments library for the correct configurations.
+
+## Known Issues
+This is an alpha release and may contain bugs. Please report any issues you encounter.
+The library has been tested with the specified versions of Angular and Spartacus only. Compatibility with other versions is not guaranteed.
+
+## License
+This project is licensed under the MIT License - see the LICENSE file for details.

projects/adyen-payments/ng-package.json

@@ -3,5 +3,8 @@
   "dest": "../../dist/adyen-payments",
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
-}
+  },
+  "allowedNonPeerDependencies": [
+    "@angular-devkit/schematics-cli"
+  ]
+}

projects/adyen-payments/package.json

@@ -1,17 +1,19 @@
 {
   "name": "adyen-payments",
-  "version": "0.2.14",
+  "version": "0.3",
   "scripts": {
-    "build": "tsc -p tsconfig.schematics.json",
-    "postbuild": "copyfiles schematics/*/schema.json schematics/*/files/** schematics/collection.json ../../dist/adyen-payments/"
+    "prebuild": "npm version patch -m \"Upgrade to %s for build\"",
+    "build": "ng build && tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/*/files/** schematics/collection.json ../../dist/adyen-payments/"
   },
   "schematics": "./schematics/collection.json",
   "peerDependencies": {
+    "@adyen/adyen-web": "5.57.0",
     "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@adyen/adyen-web": "5.57.0"
+    "@angular/core": "^17.3.0"
   },
   "dependencies": {
+    "@angular-devkit/schematics-cli": "^18.1.3",
     "tslib": "^2.3.0"
   },
   "ng-add": {

projects/adyen-payments/schematics/adyen-payment-step/files/checkout-feature.module.ts

@@ -0,0 +1,107 @@
+import {NgModule} from '@angular/core';
+import {checkoutTranslationChunksConfig, checkoutTranslations} from "@spartacus/checkout/base/assets";
+import {CHECKOUT_CORE_FEATURE, CHECKOUT_FEATURE, CheckoutStepType} from "@spartacus/checkout/base/root";
+import {CmsConfig, I18nConfig, provideConfig,provideDefaultConfigFactory} from "@spartacus/core";
+import {AdyenPaymentsModule} from "adyen-payments";
+import {CART_BASE_FEATURE} from '@spartacus/cart/base/root';
+
+
+export const CHECKOUT_BASE_CMS_COMPONENTS: string[] = [
+  'CheckoutOrchestrator',
+  'CheckoutOrderSummary',
+  'CheckoutProgress',
+  'CheckoutProgressMobileBottom',
+  'CheckoutProgressMobileTop',
+  'CheckoutDeliveryMode',
+  'CheckoutAdyenPaymentDetails',
+  'CheckoutPlaceOrder',
+  'CheckoutReviewOrder',
+  'CheckoutReviewPayment',
+  'CheckoutReviewShipping',
+  'CheckoutReviewOverview',
+  'CheckoutDeliveryAddress',
+  'GuestCheckoutLoginComponent',
+];
+
+export function adyenCheckoutComponentsConfig() {
+  const config: CmsConfig = {
+    featureModules: {
+      [CHECKOUT_FEATURE]: {
+        cmsComponents: CHECKOUT_BASE_CMS_COMPONENTS,
+        dependencies: [CART_BASE_FEATURE],
+      },
+      // by default core is bundled together with components
+      [CHECKOUT_CORE_FEATURE]: CHECKOUT_FEATURE,
+    },
+  };
+  return config;
+}
+
+export const translationOverwrites = {
+  en: { // lang
+    checkout: { // chunk
+      checkoutProgress: { // keys (nested)
+        deliveryModePaymentDetails: 'Delivery Mode Payment Details',
+      },
+    },
+  },
+};
+
+@NgModule({
+  declarations: [],
+  imports: [
+    AdyenPaymentsModule
+  ],
+  providers: [
+    provideDefaultConfigFactory(adyenCheckoutComponentsConfig),
+    provideConfig(<CmsConfig>{
+      featureModules: {
+        [CHECKOUT_FEATURE]: {
+          module: () =>
+            import('@spartacus/checkout/base').then((m) => m.CheckoutModule),
+        },
+      }
+    }),
+    provideConfig({
+      i18n: {resources: translationOverwrites},
+    }),
+    provideConfig(<I18nConfig>{
+      i18n: {
+        resources: checkoutTranslations,
+        chunks: checkoutTranslationChunksConfig,
+      },
+      routing: {
+        routes: {
+          // Add a new route for the combined step
+          checkoutAdyenPaymentDetails: {
+            paths: ['checkout/adyen-payment-details'],
+          },
+        },
+      },
+      checkout: {
+        steps: [
+          {
+            id: 'deliveryAddress',
+            name: 'checkoutProgress.deliveryAddress',
+            routeName: 'checkoutDeliveryAddress',
+            type: [CheckoutStepType.DELIVERY_ADDRESS],
+          },
+          {
+            id: 'deliveryMode',
+            name: 'checkoutProgress.deliveryMode',
+            routeName: 'checkoutDeliveryMode',
+            type: [CheckoutStepType.DELIVERY_MODE],
+          },
+          {
+            id: 'adyenPaymentDetails',
+            name: 'checkoutProgress.paymentDetails',
+            routeName: 'checkoutAdyenPaymentDetails',
+            type: [CheckoutStepType.PAYMENT_DETAILS],
+          },
+        ],
+      },
+    })
+  ]
+})
+export class CheckoutFeatureModule {
+}

projects/adyen-payments/schematics/adyen-payment-step/files/order-feature.module.ts

@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {CmsConfig, I18nConfig, provideConfig} from "@spartacus/core";
+import {orderTranslationChunksConfig, orderTranslations} from "@spartacus/order/assets";
+import {ORDER_FEATURE, OrderFacade, OrderRootModule} from "@spartacus/order/root";
+import {AdyenOrderService, OrderConfirmationPaymentStatusModule} from "adyen-payments";
+
+@NgModule({
+  declarations: [],
+  imports: [
+    OrderRootModule,
+    OrderConfirmationPaymentStatusModule
+  ],
+  providers: [provideConfig(<CmsConfig>{
+    featureModules: {
+      [ORDER_FEATURE]: {
+        module: () =>
+          import('@spartacus/order').then((m) => m.OrderModule),
+      },
+    }
+  }),
+    provideConfig(<I18nConfig>{
+      i18n: {
+        resources: orderTranslations,
+        chunks: orderTranslationChunksConfig,
+      },
+    }),
+    {
+      provide: OrderFacade,
+      useExisting: AdyenOrderService,
+    }
+  ]
+})
+export class OrderFeatureModule { }

projects/adyen-payments/schematics/adyen-payment-step/index.ts

@@ -0,0 +1,30 @@
+import { Rule, SchematicContext, url, apply, template, mergeWith, chain, MergeStrategy, move } from '@angular-devkit/schematics';
+import { strings } from '@angular-devkit/core';
+
+function applyTemplateAndMerge(sourcePath: string, destinationPath: string, _options: any): Rule {
+  const sourceTemplates = url(sourcePath);
+  const sourceParameterizedTemplate = apply(sourceTemplates, [
+    template({
+      ..._options,
+      ...strings,
+    }),
+    move(destinationPath),
+  ]);
+
+  return mergeWith(sourceParameterizedTemplate, MergeStrategy.Overwrite);
+}
+
+export function adyenPaymentStep(_options: any): Rule {
+  return (_: any, _context: SchematicContext) => {
+    const checkoutDestinationPath = 'src/app/spartacus/features/checkout/checkout-feature.module.ts';
+    const checkoutSourcePath = './files/checkout-feature.module.ts';
+
+    const orderDestinationPath = 'src/app/spartacus/features/order/order-feature.module.ts';
+    const orderSourcePath = './files/order-feature.module.ts';
+
+    return chain([
+      applyTemplateAndMerge(checkoutSourcePath, checkoutDestinationPath, _options),
+      applyTemplateAndMerge(orderSourcePath, orderDestinationPath, _options)
+    ]);
+  };
+}

projects/adyen-payments/schematics/collection.json

@@ -3,13 +3,11 @@
     "schematics": {
       "ng-add": {
         "description": "Add Adyen Payments to the Spartacus checkout.",
-        "factory": "./ng-add/index#ngAdd",
-        "schema": "./ng-add/schema.json"
+        "factory": "./ng-add/index#ngAdd"
       },
-      "payemnt-step": {
-        "description": "Generate a service in the project.",
-        "factory": "./payment-step/index#myService",
-        "schema": "./payment-step/schema.json"
+      "adyen-payment-step": {
+        "description": "Modify the payment step to use Adyen.",
+        "factory": "./adyen-payment-step/index#adyenPaymentStep"
       }
     }
-  }
+  }

projects/adyen-payments/schematics/ng-add/index.ts

@@ -1,10 +1,9 @@
-import { Rule } from '@angular-devkit/schematics';
-import { addRootImport } from '@schematics/angular/utility';
-import {Schema} from "../payment-step/schema";
+import { chain, Rule, schematic, SchematicContext, Tree } from '@angular-devkit/schematics';
 
 
-export function ngAdd(options: Schema): Rule {
-  // Add an import `AdyenPayments` from `adyen-payments` to the root of the user's project.
-  return addRootImport(options.project, ({code, external}) =>
-    code`${external('AdyenPayments', 'adyen-payments')}`);
+
+export function ngAdd(options: any): Rule {
+  return (tree: Tree, _context: SchematicContext) => {
+    return chain([schematic('adyen-payment-step', options)])(tree, _context);
+  };
 }