Migrate from Vue 2 (deprecated) to Vue 3

.github/workflows/change-review.yml

@@ -1,7 +1,7 @@
 name: Review package
 on:
   push:
-    branches: ['dev']
+    branches: ["dev"]
   pull_request:
     types:
       - opened
@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/checkout@v2
 
-      - name: 'Cache node_modules'
+      - name: "Cache node_modules"
         uses: actions/cache@v2
         with:
           path: ~/.npm

.gitignore

@@ -1,24 +1,24 @@
-.DS_Store
-node_modules/
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
-.history/
-.nyc_output/
-coverage/
-coverage.lcov
+*.sw?

.nycrc

@@ -4,7 +4,5 @@
   "functions": 50,
   "lines": 50,
   "report-dir": "./coverage",
-  "reporter": [
-    "lcov"
-  ]
+  "reporter": ["lcov"]
 }

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+dist

.prettierrc

@@ -0,0 +1 @@
+{}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

CONTRIBUTION.md

@@ -4,8 +4,6 @@ Thank you for taking the time to contribute to our library🙌🏾.
 
 In this section, we detail everything you need to know about contributing to this library.
 
-
-
 **[Code of Conduct](https://github.com/probot/template/blob/master/CODE_OF_CONDUCT.md)**
 
 ## **I don't want to contribute, I have a question**
@@ -24,18 +22,16 @@ Have you spotted a bug? Fantastic! Before raising an issue, here are some things
 When you report an issue, it is important to:
 
 1. Explain the problem
-    - Use a clear and descriptive title to help us to identify the problem.
-    - Describe steps we can use to replicate the bug and be as precise as possible.
-    - Include screenshots of the error messages.
+   - Use a clear and descriptive title to help us to identify the problem.
+   - Describe steps we can use to replicate the bug and be as precise as possible.
+   - Include screenshots of the error messages.
 2. Include details about your configuration and setup
-    - What version of the library are you using?
-    - Did you experience the bug on test mode or live?
-    - Do you have the recommended versions of the library dependencies?
-
+   - What version of the library are you using?
+   - Did you experience the bug on test mode or live?
+   - Do you have the recommended versions of the library dependencies?
 
 > 💡 Please make use of the issue template when reporting bugs.
 
-
 ### Requesting a feature
 
 If you need an additional feature added to the library, kindly send us an email at [email protected]. Be sure to include the following in your request:
@@ -63,15 +59,15 @@ Follow these steps when making a pull request to the library:
 3. If you are making a functionality change, update the docs to show how to use the new feature.
 4. Ensure all your tests pass.
 5. Make sure your code lints.
-6. Write clear log messages for your commits. one-liners are fine for small changes, but bigger changes should have a more descriptive commit message (see sample below). 
+6. Write clear log messages for your commits. one-liners are fine for small changes, but bigger changes should have a more descriptive commit message (see sample below).
 7. Use present tense for commit messages, "Add feature" not "Added feature”.
 8. Ensure that you fill out all sections of the PR template.
 9. Raise the PR against the `dev` branch.
 10. After you submit the PR, verify that all [status checks](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/collaborating-on-repositories-with-code-quality-features/about-status-checks) are passing
 
 ```markdown
 $ git commit -m "A brief summary of the commit
-> 
+
 > A paragraph describing what changed and its impact."
 ```
 

README.md

@@ -2,124 +2,101 @@
     <img title="Flutterwave" height="200" src="https://flutterwave.com/images/logo/full.svg" width="50%"/>
 </p>
 
-# Flutterwave Vue.JS (Vue2) Library
+# Flutterwave Vue.JS (Vue 3) Library
+
 ![Publish Vue.js Package](https://github.com/Flutterwave/Flutterwave-Vue-v3/workflows/Publish%20Vue.js%20Package/badge.svg)
 ![npm](https://img.shields.io/npm/v/flutterwave-vue-v3)
 ![npm](https://img.shields.io/npm/dt/flutterwave-vue-v3)
 ![NPM](https://img.shields.io/npm/l/flutterwave-vue-v3)
 
-The Vue SDK helps you create seamless payment experiences in your Vue(2.X) mobile/web app. By connecting to our modal, you can start collecting payment in no time.
+The all-new Vue SDK helps you create seamless payment experiences in your Vue 3 mobile/web app. By connecting to our modal, you can start collecting payment in no time.
 
 Available features include:
 
 - Collections: Card, Account, Mobile money, Bank Transfers, USSD, Barter, NQR.
 - Recurring payments: Tokenization and Subscriptions.
 - Split payments
 
-
 ## Table of Contents
-1. [Requirements](#requirements)
-2. [Installation](#installation)
-3. [Initialization](#initialization)
-4. [Usage](#usage)
-5. [Payment option parameters and descriptions](#payment-option-parameters-and-descriptions)
-6. [Debugging errors](#debugging-errors)
-7. [Support](#support)
-8. [Contribution](#contribution)
-9. [License](#license)
 
+- [Flutterwave Vue.JS (Vue 3) Library](#flutterwave-vuejs-vue-3-library)
+  - [Table of Contents](#table-of-contents)
+  - [Requirements](#requirements)
+  - [Installation](#installation)
+  - [Initialization](#initialization)
+  - [Usage](#usage)
+  - [Debugging Errors](#debugging-errors)
+  - [Support](#support)
+  - [Contribution](#contribution)
+  - [License](#license)
+  - [Notice](#notice)
 
 ## Requirements
-1. Flutterwave for business V3 [API keys](https://developer.flutterwave.com/docs/integration-guides/authentication)
-2. Vue version = 2.x.x
 
+1. Flutterwave for business V3 [API keys](https://developer.flutterwave.com/docs/integration-guides/authentication)
+2. Vue version >= 3.0
 
 ## Installation
-Install the SDK 
-
-```bash
-$ npm install flutterwave-vue-v3
-
-# OR
-
-$ yarn  add  flutterwave-vue-v3
-```
 
+This new project is not yet on npm (will need the permission of the Flutterwave team).
 
 ## Initialization
-1. Import the Flutterwave Library in the  'main.js' file.  
+
+1. Import the Flutterwave Library in the 'main.js' file.
 
 2. Add the Flutterwave plugin to your app passing in your Flutterwave Public Key (optional)
 
 > Note 💡: For a Typescript project sample, please see the project in the example directory of the project repository.
 
-If Public key is not added you will have to pass in the public_key parameter to the provided payment component button  and payment function
+If Public key is not added you will have to pass in the public_key parameter to the provided payment component button and payment function
 
 ```javascript
 //main.js
-import Vue from 'vue'
-import App from './App.vue'
-import Flutterwave from  'flutterwave-vue-v3'
+import { createApp } from "vue";
+import Flutterwave from "flutterwave-vue-v3";
 
+const app = createApp(App);
 
-Vue.use(Flutterwave, { publicKey: 'FLWPUBK_TESTXXXXXXXXXX' } )
+app.use(Flutterwave, {
+  publicKey: "<your public key here>",
+});
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+app.mount("#app");
 
 ```
 
-
 ## Usage
-1. [Collections](https://github.com/Flutterwave/Vue-v3/wiki/Collections)
-2. [Recurring Payments](https://github.com/Flutterwave/Vue-v3/wiki/Recurring-Payments)
-3. [Split payments](https://github.com/Flutterwave/Vue-v3/wiki/Split-Payments)
-
-## Payment option parameters and descriptions
-| Parameter  | Always Required ? | Description |
-| ------------- | ------------- | ------------- |
-| public_key  | True  | Your API public key |
-| tx_ref  | True  | Your transaction reference. This MUST be unique for every transaction |
-| amount  | True  | Amount to charge the customer. |
-| currency  | False  | currency to charge in. Defaults to NGN|
-| payment_options  | True  | This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on.  |
-| payment_plan  | False  | This is the payment plan ID used for Recurring billing|
-| redirect_url  | False  | URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them.  |
-| customer  | True  | This is an object that can contain your customer details: e.g - 'customer': {'email': '[email protected]','phonenumber': '08012345678','name': 'Takeshi Kovacs' } |
-| subaccounts  | False  | This is an array of objects containing the subaccount IDs to split the payment into. Check our Split Payment page for more info |
-| meta  | False  | This is an object that helps you include additional payment information to your request e.g {'consumer_id': 23,'consumer_mac': '92a3-912ba-1192a' } |
-|  customizations | True  | This is an object that contains title, logo, and description you want to display on the modal e.g{'title': 'Pied Piper Payments','description': 'Middleout isn't free. Pay the price','logo': 'https://assets.piedpiper.com/logo.png'  } |
-| callback (function)  | False  | This is the function that runs after payment is completed  |
-| onclose (function)  | False  | This is the function that runs after payment modal is closed  |
-
-
-Methods provided by Flutterwave plugin and descriptions:
-
-| Method Name  | Parameters  | Returns |Description |
-| ------------- | ------------- | ------------- | ------------- |
-| payWithFlutterwave()  |  InlinePaymentOptions : Object  | Null | This method allows you to setup and open the payment modal via code |
-| asyncPayWithFlutterwave()  |  AsyncPaymentOptions : Object  | Promise | This method allows you to setup and open the payment modal via code and returns a promise containing the payment response |
-| closePaymentModal()  |  waitDuration : number (Optional, default = 0)  | Null | This method allows you to close the payment modal via code. You can setup the wait time before the modal closes |
 
+Majority of the api here works similar to that of the older version. 
+One major difference is the removal of global function imports  (such as `this.payWithFlutterWave`) in favour of **composables** such as `useFlutterWave()`. All functions needed are contained in the composable, and can be accessed.
+
+```typescript
+const fw = useFlutterWave();
+```
+
+See the example at `src/` for more information
 
 ## Debugging Errors
+
 We understand that you may run into some errors while integrating our library. You can read more about our error messages here.
 
 For authorization and validation error responses, double-check your API keys and request. If you get a server error, kindly engage the team for support.
 
-
 ## Support
+
 For additional assistance using this library, please create an issue on the Github repo or contact the developer experience (DX) team via [email](mailto:[email protected]) or on [Slack](https://bit.ly/34Vkzcg).
 
 You can also follow us [@FlutterwaveEng](https://twitter.com/FlutterwaveEng) and let us know what you think 😊.
 
-
 ## Contribution
-We welcome contributions from the community. Please see the [community guide](/CONTRIBUTION.md) for contributions guidelines.
 
+We welcome contributions from the community. Please see the [community guide](/CONTRIBUTION.md) for contributions guidelines.
 
 ## License
+
 By contributing to this library, you agree that your contributions will be licensed under its MIT license.
 
 Copyright (c) Flutterwave Inc.
+
+## Notice
+This new version was made from the old version at [the current repo](https://github.com/Flutterwave/Vue-v3) by [Nikechukwu Okoronkwo](https://github.com/nikeokoronkwo)

babel.config.js

@@ -1,7 +1,7 @@
-const devPresets = ['@vue/babel-preset-app'];
+const devPresets = ["@vue/babel-preset-app"];
 const buildPresets = [
   [
-    '@babel/preset-env',
+    "@babel/preset-env",
     // Config for @babel/preset-env
     {
       // Example: Always transpile optional chaining/nullish coalescing
@@ -10,8 +10,8 @@ const buildPresets = [
       // ],
     },
   ],
-  '@babel/preset-typescript',
+  "@babel/preset-typescript",
 ];
 module.exports = {
-  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+  presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
 };