feat: d2c using new payments (#73)

* feat: d2c generate command is now using the new ep payments ep-payments command for gateway setup

* feat: remove heading when no notes are present

* chore: changeset

.changeset/rude-jars-remain.md

@@ -0,0 +1,6 @@
+---
+"composable-cli": patch
+"@elasticpath/d2c-schematics": patch
+---
+
+d2c generate command is now using the new ep payments ep-payments command for gateway setup

packages/composable-cli/src/commands/generate/d2c/d2c-command.tsx

@@ -48,6 +48,7 @@ import { detect } from "../../../lib/detect-package-manager"
 import { createAlgoliaIntegrationCommandHandler } from "../../integration/algolia/algolia-integration-command"
 import boxen from "boxen"
 import { getCredentials } from "../../../lib/authentication/get-token"
+import { createEPPaymentsCommandHandler } from "../../payments/ep-payments/ep-payments-command"
 
 export function createD2CCommand(
   ctx: CommandContext,
@@ -337,6 +338,9 @@ export function createD2CCommandHandler(
       plpType?: "Algolia" | "None"
       algoliaApplicationId?: string
       algoliaAdminApiKey?: string
+      paymentGatewayType?: PaymentTypeOptions["paymentGatewayType"]
+      epPaymentsStripeAccountId?: string
+      epPaymentsStripePublishableKey?: string
     } = {
       name,
     }
@@ -437,6 +441,7 @@ export function createD2CCommandHandler(
       gatheredOptions = {
         ...gatheredOptions,
         ...additionalOptions.plp,
+        ...additionalOptions.paymentGateway,
       }
     }
 
@@ -476,6 +481,8 @@ export function createD2CCommandHandler(
           }. No files written to disk.`,
         )
       } else {
+        let notes: { title: string; description: string }[] = []
+
         if (gatheredOptions.plpType === "Algolia") {
           logger.info(
             boxen(
@@ -505,18 +512,54 @@ export function createD2CCommandHandler(
             })
 
             if (result.success) {
-              logger.info(
-                boxen(
-                  `Don't forget to add your Algolia index name to .env.local ${colors.bold.green(
-                    `NEXT_PUBLIC_ALGOLIA_INDEX_NAME=${result.data.indexName}` ??
-                      "",
-                  )}`,
-                  {
-                    padding: 1,
-                    margin: 1,
-                  },
-                ),
-              )
+              notes.push({
+                title: "Algolia setup",
+                description: `Don't forget to add your Algolia index name to .env.local ${colors.bold.green(
+                  `NEXT_PUBLIC_ALGOLIA_INDEX_NAME=${result.data.indexName}` ??
+                    "",
+                )}`,
+              })
+            }
+          }
+        }
+
+        if (gatheredOptions.paymentGatewayType === "EP Payments") {
+          logger.info(
+            boxen(
+              `${colors.bold.green(
+                "EP payments needs to be configured",
+              )}\nTo get your checkout working you need to configure EP Payments.`,
+              {
+                padding: 1,
+                margin: 1,
+              },
+            ),
+          )
+
+          const { configureEpPayments } = await inquirer.prompt([
+            {
+              type: "confirm",
+              name: "configureEpPayments",
+              message: "Do you want to configure EP Payments?",
+            },
+          ])
+
+          if (configureEpPayments) {
+            const result = await createEPPaymentsCommandHandler(ctx)({
+              accountId: gatheredOptions.epPaymentsStripeAccountId,
+              publishableKey: gatheredOptions.epPaymentsStripePublishableKey,
+              ...args,
+            })
+
+            if (result.success) {
+              notes.push({
+                title: "EP Payments setup",
+                description: `Don't forget to add your EP Payment variables to .env.local ${colors.bold.green(
+                  `\nNEXT_PUBLIC_STRIPE_ACCOUNT_ID=${gatheredOptions.epPaymentsStripeAccountId}`,
+                )}${colors.bold.green(
+                  `\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=${gatheredOptions.epPaymentsStripePublishableKey}`,
+                )}`,
+              })
             }
           }
         }
@@ -525,6 +568,7 @@ export function createD2CCommandHandler(
           React.createElement(D2CGenerated, {
             name: (gatheredOptions as any).name,
             nodePkgManager: pkgManager,
+            notes,
           }),
         )
       }
@@ -556,6 +600,14 @@ export function createD2CCommandHandler(
   }
 }
 
+type PaymentTypeOptions =
+  | {
+      paymentGatewayType: "EP Payments"
+      epPaymentsStripeAccountId: string
+      epPaymentsStripePublishableKey: string
+    }
+  | { paymentGatewayType: "None" }
+
 type PlpTypeOptions =
   | {
       plpType: "Algolia"
@@ -567,6 +619,7 @@ type PlpTypeOptions =
 
 async function schematicOptionPrompts(): Promise<{
   plp: PlpTypeOptions
+  paymentGateway: PaymentTypeOptions
 }> {
   const { plpType } = await inquirer.prompt([
     {
@@ -591,8 +644,56 @@ async function schematicOptionPrompts(): Promise<{
       ? await algoliaSchematicPrompts()
       : { plpType: "None" as const }
 
+  const { paymentGatewayType } = await inquirer.prompt([
+    {
+      type: "list",
+      name: "paymentGatewayType",
+      message: "What type of payment gateway do you want to use?",
+      choices: [
+        {
+          name: "EP Payments",
+          value: "EP Payments",
+        },
+        {
+          name: "None",
+          value: "None",
+        },
+      ],
+    },
+  ])
+
+  const paymentGateway =
+    paymentGatewayType === "EP Payments"
+      ? await epPaymentsSchematicPrompts()
+      : { paymentGatewayType: "None" as const }
+
   return {
     plp,
+    paymentGateway,
+  }
+}
+
+async function epPaymentsSchematicPrompts(): Promise<PaymentTypeOptions> {
+  const { epPaymentsStripeAccountId } = await inquirer.prompt([
+    {
+      type: "string",
+      name: "epPaymentsStripeAccountId",
+      message: "What is your Elastic Path Payments Account ID?",
+    },
+  ])
+
+  const { epPaymentsStripePublishableKey } = await inquirer.prompt([
+    {
+      type: "string",
+      name: "epPaymentsStripePublishableKey",
+      message: "What is your Elastic Path Payments Publishable Key?",
+    },
+  ])
+
+  return {
+    paymentGatewayType: "EP Payments",
+    epPaymentsStripeAccountId,
+    epPaymentsStripePublishableKey,
   }
 }
 

packages/composable-cli/src/commands/payments/ep-payments/ep-payments-integration.types.ts

@@ -1,8 +1,6 @@
 import { PaymentsCommandArguments } from "../payments.types"
 
-export type EPPaymentsCommandData = {
-  indexName?: string
-}
+export type EPPaymentsCommandData = {}
 
 export type EPPaymentsCommandError = {
   code: string

packages/composable-cli/src/commands/ui/generate/d2c-generated.tsx

@@ -1,12 +1,14 @@
 import React from "react"
-import { Box, Text } from "ink"
+import { Box, Newline, Text } from "ink"
 
 export function D2CGenerated({
   name,
   nodePkgManager,
+  notes,
 }: {
   name: string
   nodePkgManager: "yarn" | "npm" | "pnpm" | "bun"
+  notes: { title: string; description: string }[]
 }) {
   return (
     <Box
@@ -15,26 +17,57 @@ export function D2CGenerated({
       borderColor="#2BCC7E"
       padding={1}
     >
-      <Text color="green">Next steps:</Text>
-      {constructSteps({ name, nodePkgManager }).map((step, index) => (
-        <Text key={index}>
-          - Step {index + 1}: {step}
-        </Text>
-      ))}
+      <Text color="green" bold>
+        Next steps:
+      </Text>
+      <Newline />
+      {constructSteps({ name, nodePkgManager, hasNotes: notes.length > 0 }).map(
+        (step, index) => (
+          <Text key={index}>
+            - Step {index + 1}: {step}
+          </Text>
+        ),
+      )}
+      <Newline />
+      {notes.length > 0 && (
+        <>
+          <Text bold color="green">
+            Additional Setup
+          </Text>
+          <Newline />
+          {notes.map((note) => {
+            return (
+              <Box
+                key={note.title}
+                flexDirection="column"
+                padding={1}
+                borderStyle="single"
+              >
+                <Text bold>{note.title}</Text>
+                <Newline />
+                <Text>{note.description}</Text>
+              </Box>
+            )
+          })}
+        </>
+      )}
     </Box>
   )
 }
 
 function constructSteps({
   name,
   nodePkgManager,
+  hasNotes,
 }: {
   name: string
   nodePkgManager: "yarn" | "npm" | "pnpm" | "bun"
+  hasNotes: boolean
 }) {
   return [
     `Navigate to your project directory using 'cd ${name}'`,
     `Run install using '${resolveInstallCommand(nodePkgManager)}'`,
+    ...(hasNotes ? ["Follow the additional setup steps below"] : []),
     `Start the development server using '${resolveStartCommand(
       nodePkgManager,
     )}'`,

packages/d2c-schematics/ep-payments-payment-gateway/index.ts

@@ -11,13 +11,11 @@ import {
   url,
   noop,
   filter,
-  SchematicContext,
 } from "@angular-devkit/schematics"
 import { Schema as EPPaymentsPaymentGatewayOptions } from "./schema"
 import { addDependency } from "../utility"
 import { latestVersions } from "../utility/latest-versions"
 import { addEnvVariables } from "../utility/add-env-variable"
-import { RunSchematicTask } from "@angular-devkit/schematics/tasks"
 
 export const EP_PAYMENTS_DEPENDENCIES = [
   "@stripe/react-stripe-js",
@@ -49,7 +47,7 @@ export default function (options: EPPaymentsPaymentGatewayOptions): Rule {
               [EP_PAYMENT_STRIPE_PUBLISHABLE_KEY]:
                 epPaymentsStripePublishableKey,
             },
-            "/.env.test"
+            "/.env.test",
           ),
       ...EP_PAYMENTS_DEPENDENCIES.map((name) =>
         addDependency(name, latestVersions[name], {
@@ -59,7 +57,7 @@ export default function (options: EPPaymentsPaymentGatewayOptions): Rule {
             : "/package.json",
           existing: "skip",
           install: "none",
-        })
+        }),
       ),
       mergeWith(
         apply(url("./files"), [
@@ -72,31 +70,8 @@ export default function (options: EPPaymentsPaymentGatewayOptions): Rule {
           }),
           move(options.path || ""),
         ]),
-        MergeStrategy.Overwrite
+        MergeStrategy.Overwrite,
       ),
-      (host: Tree, context: SchematicContext) => {
-        const {
-          epccEndpointUrl,
-          epccClientId,
-          epccClientSecret,
-          epPaymentsStripeAccountId,
-          epPaymentsStripePublishableKey,
-        } = options
-        if (!options.skipConfig) {
-          context.addTask(
-            new RunSchematicTask("setup-payment-gateway", {
-              gatewayName: "ep-payments",
-              epccConfig: {
-                host: epccEndpointUrl,
-                clientId: epccClientId,
-                clientSecret: epccClientSecret,
-              },
-              epPaymentsStripeAccountId,
-              epPaymentsStripePublishableKey,
-            })
-          )
-        }
-      },
     ])
   }
 }

packages/d2c-schematics/setup-payment-gateway/index.ts

@@ -1,19 +1,16 @@
 import { noop, Rule, SchematicContext, Tree } from "@angular-devkit/schematics"
 import { Schema as SetupPaymentGatewayOptions } from "./schema"
 import { createFallbackLogger } from "../utility/fallback-logger"
-import { setupEPPaymentGateway } from "../utility/payment-gateway/setup-payment-gateway"
 
 export default function (options: SetupPaymentGatewayOptions): Rule {
   return async (host: Tree, context: SchematicContext): Promise<Rule> => {
     const logger = context.logger ?? createFallbackLogger()
 
     try {
       switch (options.gatewayName) {
-        case "ep-payments":
-          return setupEPPaymentGateway(options, host, logger)
         default:
           logger.error(
-            `Failed to setup payment gateway, unsupported payment gateway name: ${options.gatewayName}`
+            `Failed to setup payment gateway, unsupported payment gateway name: ${options.gatewayName}`,
           )
           return noop()
       }
@@ -23,7 +20,7 @@ export default function (options: SetupPaymentGatewayOptions): Rule {
           err instanceof Error
             ? `${err.name} - ${err.message}`
             : "Couldn't process error message"
-        }`
+        }`,
       )
       return noop()
     }