Merge pull request #314 from lyra/KJS-2280.1

chore(examples): update examples to use renderElements method
lyra · Nov 13, 2023 · 7cc7209 · 7cc7209
2 parents b9ab56b + 25bb728
commit 7cc7209
Show file tree

Hide file tree

Showing 31 changed files with 168 additions and 289 deletions.
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
@@ -9,7 +9,7 @@ import { firstValueFrom } from 'rxjs'
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements AfterViewInit {
-  title: string = 'Angular + KR.attachForm'
+  title: string = 'Angular example'
   message: string = ''
 
   constructor(private http: HttpClient, private chRef: ChangeDetectorRef) {}
@@ -41,11 +41,8 @@ export class AppComponent implements AfterViewInit {
       )
       .then(({ KR }) => KR.onSubmit(this.onSubmit))
       .then(({ KR }) =>
-        KR.attachForm('#myPaymentForm')
-      ) /* Attach a payment form  to myPaymentForm div*/
-      .then(({ KR, result }) =>
-        KR.showForm(result.formId)
-      ) /* show the payment form */
+        KR.renderElements('#myPaymentForm')
+      ) /* Render the payment form into the specified selector*/
       .catch(error => {
         this.message = error.message + ' (see console for more details)'
       })

diff --git a/examples/angular/src/index.html b/examples/angular/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>MinimalExample</title>
+    <title>Angular example</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

diff --git a/examples/ember/app/components/attach-form.js b/examples/ember/app/components/attach-form.js
diff --git a/...ples/ember/app/components/attach-form.hbs → .../ember/app/components/render-elements.hbs b/...ples/ember/app/components/attach-form.hbs → .../ember/app/components/render-elements.hbs
@@ -1,5 +1,5 @@
 <div class='container'>
-  <h1>Ember + KR.attachForm</h1>
+  <h1>Ember Example</h1>
   <div id='myPaymentForm'>
     <div class='kr-smart-form'></div>
   </div>

diff --git a/examples/ember/app/components/render-elements.js b/examples/ember/app/components/render-elements.js
@@ -0,0 +1,53 @@
+import KRGlue from '@lyracom/embedded-form-glue';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class RenderElementsComponent extends Component {
+  @tracked message = '';
+
+  constructor(...args) {
+    super(...args);
+    const endpoint = '~~CHANGE_ME_ENDPOINT~~';
+    const publicKey = '~~CHANGE_ME_PUBLIC_KEY~~';
+    let formToken = 'DEMO-TOKEN-TO-BE-REPLACED';
+
+    // Generate the form token
+    fetch('http://localhost:3000/createPayment', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        paymentConf: { amount: 10000, currency: 'USD' },
+      }),
+    })
+      .then((res) => res.text())
+      .then((resp) => {
+        formToken = resp;
+        return KRGlue.loadLibrary(endpoint, publicKey);
+      })
+      .then(({ KR }) =>
+        KR.setFormConfig({
+          /* set the minimal configuration */
+          formToken: formToken,
+          'kr-language': 'en-US' /* to update initialization parameter */,
+        })
+      )
+      .then(({ KR }) =>
+        KR.onSubmit((paymentData) => {
+          fetch('http://localhost:3000/validatePayment', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(paymentData),
+          }).then((response) => {
+            if (response.status === 200) this.message = 'Payment successful!';
+          });
+          return false; // Return false to prevent the redirection
+        })
+      ) // Custom payment callback
+      .then(({ KR }) =>
+        KR.renderElements('#myPaymentForm')
+      ) /* create a payment form */
+      .catch((error) => {
+        this.message = error + ' (see console for more details)';
+      });
+  }
+}
diff --git a/examples/ember/app/index.html b/examples/ember/app/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Emberjs</title>
+    <title>Emberjs Example</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link

diff --git a/examples/ember/app/templates/application.hbs b/examples/ember/app/templates/application.hbs
@@ -1,7 +1,7 @@
-{{page-title "Emberjs"}}
+{{page-title 'Emberjs'}}
 
-{{!-- The following component displays Ember's default welcome message. --}}
-<AttachForm />
-{{!-- Feel free to remove this! --}}
+{{! The following component displays Ember's default welcome message. }}
+<RenderElements />
+{{! Feel free to remove this! }}
 
 {{outlet}}
diff --git a/examples/ember/package-lock.json b/examples/ember/package-lock.json
diff --git a/examples/ember/package.json b/examples/ember/package.json
@@ -69,6 +69,6 @@
     "edition": "octane"
   },
   "dependencies": {
-    "@lyracom/embedded-form-glue": "1.3.1"
+    "@lyracom/embedded-form-glue": "1.3.7"
   }
 }