feat: Local Payments

dashboard/src2/components/AddExchangeRate.vue

@@ -0,0 +1,157 @@
+<template>
+
+    <Dialog :class="showDialog" :options="{title:'Add Currency Exchange', size:'lg'}">
+        <template #body-content>
+            <div class="grid grid-cols-2 gap-4">
+                <FormControl
+                label="From Currency"
+                v-model="fromCurrency"
+                type="autocomplete"
+                variant="subtle"
+                :disabled="false"
+                :options="currencySymbols"
+                name="from_currency"
+                class="mb-5"
+                required
+                />
+
+
+                <FormControl
+                label="To Currency"
+                v-model="toCurrency"
+                name="to_currency"
+                type="autocomplete"
+                variant="subtle"
+                :disabled="false"
+                :options="currencySymbols"
+                class="mb-5"
+                required
+                />
+
+                <FormControl
+                label="Exchange Rate"
+                v-model="exchangeRate"
+                name="exchange_rate"
+                autocomplete="off"
+                class="mb-5"
+                type="number"
+                required
+                />
+
+                <DatePicker
+                v-model="date"
+                variant="subtle"
+                name="date"
+                placeholder="Placeholder"
+                :disabled="false"
+                label="Date"
+            />
+
+
+            </div>
+
+            <div class="mt-4 flex w-full items-center justify-center">
+                <Button @click="saveExchangeRate" class="justify-center w-full font-bold" variant="solid" type="primary">Add Currency Exchange</Button>
+
+            </div>
+        </template>
+        <ErrorMessage class="mt-2" :message="ErrorMessage" />
+    </Dialog>
+</template>
+
+<script>
+import {toast} from 'vue-sonner';
+import {frappeRequest} from 'frappe-ui';
+import {DashboardError} from '../utils/error';
+import FormControl from 'frappe-ui/src/components/FormControl.vue';
+import DatePicker from 'frappe-ui/src/components/DatePicker.vue';
+import ErrorMessage from 'frappe-ui/src/components/ErrorMessage.vue';
+
+
+
+export default {
+    name:'AddExchangeRate',
+    components:{DatePicker},
+    props:{
+        showDialog:{
+            type: Boolean,
+            required: true
+        }
+    },
+    data(){
+        return{
+            fromCurrency:'',
+            toCurrency:'',
+            date:'',
+            exchangeRate:'',
+            currencySymbols:[],
+        }
+    },
+
+    resources:{
+        addCurrencyExchange(){
+            return{
+                url: 'press.api.local_payments.mpesa.utils.create_exchange_rate',
+                params:{
+                    from_currency: this.fromCurrency,
+                    to_currency: this.toCurrency,
+                    exchange_rate: this.exchangeRate,
+                    date: this.date
+                },
+                validate(){
+                    if(!this.fromCurrency || !this.toCurrency || !this.exchangeRate || !this.date){
+                        toast.error('All fields are required');
+                        return false;
+                    }
+                },
+                async onSuccess(){
+                    if(data){
+                        toast.success('Currency Exchange Added Successfully');
+                        this.$emit('close');
+                    }else{
+                        toast.error('Failed to add currency exchange');
+                    }
+                }
+            }
+        }
+    },
+
+    methods: {
+        async saveExchangeRate(){
+            try{
+                    const response= await this.$resources.addCurrencyExchange.submit();
+                    if (response){
+                        this.$toast.success('Currency Exchange Added Successfully');
+                        this.fromCurrency = '';  
+                        this.toCurrency = '';    
+                        this.exchangeRate = '';  
+                        this.date = '';      
+                    }
+                    this.$emit('closeDialog');
+            }catch(error){
+                console.log(error);
+                 this.$toast.error(`Error adding currency exchange: ${error.message}`);
+            }
+        },
+
+        async fetchCurrencySymbols(){
+            try{
+                    const response = await frappeRequest({
+                        url:'/api/method/press.api.local_payments.mpesa.utils.fetch_currencies',
+                        method:'GET',
+                    });
+                    if(Array.isArray(response)){
+                        this.currencySymbols=response;
+                    }else{
+                        this.ErrorMessage='No currency symbols found';
+                    }
+            }catch(error){
+                this.ErrorMessage=`Error fetching currency symbols: ${error.message}`;
+            }
+        }
+    },
+    mounted(){
+        this.fetchCurrencySymbols();
+    }
+}
+</script>

dashboard/src2/components/AddMpesaCredentials.vue

@@ -0,0 +1,180 @@
+<template>
+    <Dialog :class="showDialog" :options="{ title: 'Add M-Pesa Credentials', size: 'lg' }">
+      <template #body-content>
+        <div class="grid grid-cols-2 gap-4">
+            <FormControl
+            label="Payment Gatway Name"
+            v-model="paymentGatewayName"
+            name="consumer_key"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Mpesa setting Name"
+            required
+          />
+
+          <FormControl
+            label="Consumer Key"
+            v-model="consumerKey"
+            name="consumer_key"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Consumer Key"
+            required
+          />
+
+          <FormControl
+            label="Consumer Secret"
+            v-model="consumerSecret"
+            name="consumer_secret"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Consumer Secret"
+            required
+          />
+
+          <FormControl
+            label="Pass Key"
+            v-model="passKey"
+            name="pass_key"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Pass Key"
+            required
+          />
+
+          <FormControl
+            label="Short Code"
+            v-model="shortCode"
+            name="short_code"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Short Code"
+            required
+          />
+
+          <FormControl
+            label="Initiator Name"
+            v-model="initiatorName"
+            name="initiator_name"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Initiator Name"
+            required
+          />
+
+          <FormControl
+            label="Security Credential"
+            v-model="securityCredential"
+            name="security_credential"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Security Credential"
+            required
+          />
+
+          <FormControl
+            label="Till Number"
+            v-model="tillNumber"
+            name="till_number"
+            autocomplete="off"
+            class="mb-5"
+            type="text"
+            placeholder="Enter Till Number"
+            required
+          />
+
+          <div class="flex items-center">
+            <input v-model="sandBox" type="checkbox" class="mr-2" />
+            <label class="text-sm font-medium text-gray-700">Sandbox Mode</label>
+          </div>
+        </div>
+
+        <div class="mt-4 flex w-full bg-red-300 items-center justify-center">
+  <Button @click="saveMpesaCredentials" variant="solid" class="justify-center w-full font-bold">Save</Button>
+</div>
+
+      </template>
+    </Dialog>
+  </template>
+
+  <script>
+import { toast } from 'vue-sonner';
+  import { DashboardError } from '../utils/error';
+  import { ErrorMessage} from 'frappe-ui';
+  export default {
+    name: 'AddMpesaCredentials',
+    props: {
+      showDialog: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    data() {
+      return {
+
+          consumerKey: '',
+          paymentGatewayName: '',
+          consumerSecret: '',
+          passKey: '',
+          shortCode: '',
+          initiatorName: '',
+          securityCredential: '',
+          tillNumber: '',
+          sandBox: false,
+
+      };
+    },
+
+    resources: {
+        createMpesaSettings(){
+            return{
+                url: 'press.api.local_payments.mpesa.mpesa_settings.create_mpesa_settings',
+                params:{
+                    payment_gateway_name: this.paymentGatewayName,
+                    consumer_key: this.consumerKey,
+                    consumer_secret: this.consumerSecret,
+                    pass_key: this.passKey,
+                    short_code: this.shortCode,
+                    initiator_name: this.initiatorName,
+                    security_credential: this.securityCredential,
+                    till_number: this.tillNumber,
+                    sandbox: this.sandBox
+                },
+
+                validate(){
+                    if(!this.paymentGatewayName || !this.consumerKey || !this.consumerSecret || !this.passKey || !this.shortCode || !this.initiatorName || !this.securityCredential){
+                        return 'All fields are required';
+                    }
+                },
+
+                async onSuccess(data){
+                    if(data){
+                        toast.success('M-Pesa credentials savedd', data);
+                    }else{
+                        toast.error('Error saving M-Pesa credentials');
+                    }
+                }
+
+            }
+        }
+    },
+
+    methods: {
+    async saveMpesaCredentials() {
+      try {
+        const response = await this.$resources.createMpesaSettings.submit();
+        this.$emit('closeDialog');
+      } catch (error) {
+        this.$toast.error(`Error saving M-Pesa credentials: ${error.message}`);
+      }
+    },
+  },
+};
+</script>