File: //home/slfopp7cb1df/www/inventorypacket.com/resources/src/views/app/pages/sales/index_sale.vue
<template>
<div class="main-content">
<breadcumb :page="$t('ListSales')" :folder="$t('Sales')"/>
<div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div>
<div v-else>
<vue-good-table
mode="remote"
:columns="columns"
:totalRows="totalRows"
:rows="sales"
@on-page-change="onPageChange"
@on-per-page-change="onPerPageChange"
@on-sort-change="onSortChange"
@on-search="onSearch"
:search-options="{
placeholder: $t('Search_this_table'),
enabled: true,
}"
:select-options="{
enabled: true ,
clearSelectionText: '',
}"
@on-selected-rows-change="selectionChanged"
:pagination-options="{
enabled: true,
mode: 'records',
nextLabel: 'next',
prevLabel: 'prev',
}"
:styleClass="showDropdown?'tableOne table-hover vgt-table full-height':'tableOne table-hover vgt-table non-height'"
>
<div slot="selected-row-actions">
<button class="btn btn-danger btn-sm" @click="delete_by_selected()">{{$t('Del')}}</button>
</div>
<div slot="table-actions" class="mt-2 mb-3">
<b-button variant="outline-info ripple m-1" size="sm" v-b-toggle.sidebar-right>
<i class="i-Filter-2"></i>
{{ $t("Filter") }}
</b-button>
<b-button @click="Sales_PDF()" size="sm" variant="outline-success ripple m-1">
<i class="i-File-Copy"></i> PDF
</b-button>
<vue-excel-xlsx
class="btn btn-sm btn-outline-danger ripple m-1"
:data="sales"
:columns="columns"
:file-name="'sales'"
:file-type="'xlsx'"
:sheet-name="'sales'"
>
<i class="i-File-Excel"></i> EXCEL
</vue-excel-xlsx>
<router-link
class="btn-sm btn btn-primary ripple btn-icon m-1"
v-if="currentUserPermissions && currentUserPermissions.includes('Sales_add')"
to="/app/sales/store"
>
<span class="ul-btn__icon">
<i class="i-Add"></i>
</span>
<span class="ul-btn__text ml-1">{{$t('Add')}}</span>
</router-link>
</div>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'actions'">
<div>
<b-dropdown
id="dropdown-right"
variant="link"
text="right align"
toggle-class="text-decoration-none"
size="lg"
right
no-caret
>
<template v-slot:button-content class="_r_btn border-0">
<span class="_dot _r_block-dot bg-dark"></span>
<span class="_dot _r_block-dot bg-dark"></span>
<span class="_dot _r_block-dot bg-dark"></span>
</template>
<b-navbar-nav>
<b-dropdown-item title="Show" :to="'/app/sales/detail/'+props.row.id">
<i class="nav-icon i-Eye font-weight-bold mr-2"></i>
{{$t('SaleDetail')}}
</b-dropdown-item>
</b-navbar-nav>
<b-dropdown-item
title="Edit"
v-if="currentUserPermissions.includes('Sales_edit') && props.row.sale_has_return == 'no'"
:to="'/app/sales/edit/'+props.row.id"
>
<i class="nav-icon i-Pen-2 font-weight-bold mr-2"></i>
{{$t('EditSale')}}
</b-dropdown-item>
<b-dropdown-item
title="Sell Return"
v-if="currentUserPermissions.includes('Sale_Returns_add') && props.row.sale_has_return == 'no' && props.row.statut == 'completed'"
:to="'/app/sales/sale_return/'+props.row.id"
>
<i class="nav-icon i-Back font-weight-bold mr-2"></i>
{{$t('Sell_Return')}}
</b-dropdown-item>
<b-dropdown-item
title="Sell Return"
v-if="currentUserPermissions.includes('Sale_Returns_add') && props.row.sale_has_return == 'yes'"
:to="'/app/sale_return/edit/'+props.row.salereturn_id+'/'+props.row.id"
>
<i class="nav-icon i-Back font-weight-bold mr-2"></i>
{{$t('Sell_Return')}}
</b-dropdown-item>
<b-dropdown-item
v-if="currentUserPermissions.includes('payment_sales_view')"
@click="Show_Payments(props.row.id , props.row)"
>
<i class="nav-icon i-Money-Bag font-weight-bold mr-2"></i>
{{$t('ShowPayment')}}
</b-dropdown-item>
<b-dropdown-item
v-if="currentUserPermissions.includes('payment_sales_add') && props.row.statut =='completed'"
@click="New_Payment(props.row)"
>
<i class="nav-icon i-Add font-weight-bold mr-2"></i>
{{$t('AddPayment')}}
</b-dropdown-item>
<b-dropdown-item
v-if="currentUserPermissions.includes('shipment')"
@click="Edit_Shipment(props.row.id)"
>
<i class="nav-icon i-Pen-2 font-weight-bold mr-2"></i>
{{$t('Edit_Shipping')}}
</b-dropdown-item>
<b-dropdown-item title="Invoice" @click="Invoice_POS(props.row.id)">
<i class="nav-icon i-File-TXT font-weight-bold mr-2"></i>
{{$t('Invoice_POS')}}
</b-dropdown-item>
<b-dropdown-item title="PDF" @click="Invoice_PDF(props.row , props.row.id)">
<i class="nav-icon i-File-TXT font-weight-bold mr-2"></i>
{{$t('DownloadPdf')}}
</b-dropdown-item>
<b-dropdown-item title=" WhatsApp Notification" @click="Send_WhatsApp(props.row.id)">
<i class="nav-icon i-Envelope-2 font-weight-bold mr-2"></i>
WhatsApp Notification
</b-dropdown-item>
<b-dropdown-item title="Email" @click="Send_Email(props.row.id)">
<i class="nav-icon i-Envelope-2 font-weight-bold mr-2"></i>
{{$t('email_notification')}}
</b-dropdown-item>
<b-dropdown-item title="SMS" @click="Sale_SMS(props.row.id)">
<i class="nav-icon i-Speach-Bubble font-weight-bold mr-2"></i>
{{$t('sms_notification')}}
</b-dropdown-item>
<b-dropdown-item
title="Delete"
v-if="currentUserPermissions.includes('Sales_delete')"
@click="Remove_Sale(props.row.id , props.row.sale_has_return)"
>
<i class="nav-icon i-Close-Window font-weight-bold mr-2"></i>
{{$t('DeleteSale')}}
</b-dropdown-item>
</b-dropdown>
</div>
</span>
<div v-else-if="props.column.field == 'statut'">
<span
v-if="props.row.statut == 'completed'"
class="badge badge-outline-success"
>{{$t('complete')}}</span>
<span
v-else-if="props.row.statut == 'pending'"
class="badge badge-outline-info"
>{{$t('Pending')}}</span>
<span v-else class="badge badge-outline-warning">{{$t('Ordered')}}</span>
</div>
<div v-else-if="props.column.field == 'payment_status'">
<span
v-if="props.row.payment_status == 'paid'"
class="badge badge-outline-success"
>{{$t('Paid')}}</span>
<span
v-else-if="props.row.payment_status == 'partial'"
class="badge badge-outline-primary"
>{{$t('partial')}}</span>
<span v-else class="badge badge-outline-warning">{{$t('Unpaid')}}</span>
</div>
<div v-else-if="props.column.field == 'shipping_status'">
<span
v-if="props.row.shipping_status == 'ordered'"
class="badge badge-outline-warning"
>{{$t('Ordered')}}</span>
<span
v-else-if="props.row.shipping_status == 'packed'"
class="badge badge-outline-info"
>{{$t('Packed')}}</span>
<span
v-else-if="props.row.shipping_status == 'shipped'"
class="badge badge-outline-secondary"
>{{$t('Shipped')}}</span>
<span
v-else-if="props.row.shipping_status == 'delivered'"
class="badge badge-outline-success"
>{{$t('Delivered')}}</span>
<span v-else-if="props.row.shipping_status == 'cancelled'" class="badge badge-outline-danger">{{$t('Cancelled')}}</span>
</div>
<div v-else-if="props.column.field == 'Ref'">
<router-link
:to="'/app/sales/detail/'+props.row.id"
>
<span class="ul-btn__text ml-1">{{props.row.Ref}}</span>
</router-link> <br>
<small v-if="props.row.sale_has_return == 'yes'"><i class="text-15 text-danger i-Back"></i></small>
</div>
</template>
</vue-good-table>
</div>
<!-- Sidebar Filter -->
<b-sidebar id="sidebar-right" :title="$t('Filter')" bg-variant="white" right shadow>
<div class="px-3 py-2">
<b-row>
<!-- date -->
<b-col md="12">
<b-form-group :label="$t('date')">
<b-form-input type="date" v-model="Filter_date"></b-form-input>
</b-form-group>
</b-col>
<!-- Reference -->
<b-col md="12">
<b-form-group :label="$t('Reference')">
<b-form-input label="Reference" :placeholder="$t('Reference')" v-model="Filter_Ref"></b-form-input>
</b-form-group>
</b-col>
<!-- Customer -->
<b-col md="12">
<b-form-group :label="$t('Customer')">
<v-select
:reduce="label => label.value"
:placeholder="$t('Choose_Customer')"
v-model="Filter_Client"
:options="customers.map(customers => ({label: customers.name, value: customers.id}))"
/>
</b-form-group>
</b-col>
<!-- warehouse -->
<b-col md="12">
<b-form-group :label="$t('warehouse')">
<v-select
v-model="Filter_warehouse"
:reduce="label => label.value"
:placeholder="$t('Choose_Warehouse')"
:options="warehouses.map(warehouses => ({label: warehouses.name, value: warehouses.id}))"
/>
</b-form-group>
</b-col>
<!-- Status -->
<b-col md="12">
<b-form-group :label="$t('Status')">
<v-select
v-model="Filter_status"
:reduce="label => label.value"
:placeholder="$t('Choose_Status')"
:options="
[
{label: 'completed', value: 'completed'},
{label: 'Pending', value: 'pending'},
{label: 'Ordered', value: 'ordered'},
]"
></v-select>
</b-form-group>
</b-col>
<!-- Payment Status -->
<b-col md="12">
<b-form-group :label="$t('PaymentStatus')">
<v-select
v-model="Filter_Payment"
:reduce="label => label.value"
:placeholder="$t('Choose_Status')"
:options="
[
{label: 'Paid', value: 'paid'},
{label: 'partial', value: 'partial'},
{label: 'UnPaid', value: 'unpaid'},
]"
></v-select>
</b-form-group>
</b-col>
<!-- Shipping Status -->
<b-col md="12">
<b-form-group :label="$t('Shipping_status')">
<v-select
v-model="Filter_shipping"
:reduce="label => label.value"
:placeholder="$t('Choose_Status')"
:options="
[
{label: 'Ordered', value: 'ordered'},
{label: 'Packed', value: 'packed'},
{label: 'Shipped', value: 'shipped'},
{label: 'Delivered', value: 'delivered'},
{label: 'Cancelled', value: 'cancelled'},
]"
></v-select>
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-button
@click="Get_Sales(serverParams.page)"
variant="primary btn-block ripple m-1"
size="sm"
>
<i class="i-Filter-2"></i>
{{ $t("Filter") }}
</b-button>
</b-col>
<b-col md="6" sm="12">
<b-button @click="Reset_Filter()" variant="danger ripple btn-block m-1" size="sm">
<i class="i-Power-2"></i>
{{ $t("Reset") }}
</b-button>
</b-col>
</b-row>
</div>
</b-sidebar>
<!-- Modal Show Payments-->
<b-modal hide-footer size="lg" id="Show_payment" :title="$t('ShowPayment')">
<b-row>
<b-col lg="12" md="12" sm="12" class="mt-3">
<div class="table-responsive">
<table class="table table-hover table-bordered table-md">
<thead>
<tr>
<th scope="col">{{$t('date')}}</th>
<th scope="col">{{$t('Reference')}}</th>
<th scope="col">{{$t('Amount')}}</th>
<th scope="col">{{$t('PayeBy')}}</th>
<th scope="col">{{$t('Action')}}</th>
</tr>
</thead>
<tbody>
<tr v-if="payments.length <= 0">
<td colspan="5">{{$t('NodataAvailable')}}</td>
</tr>
<tr v-for="payment in payments">
<td>{{payment.date}}</td>
<td>{{payment.Ref}}</td>
<td>{{currentUser.currency}} {{formatNumber(payment.montant,2)}}</td>
<td>{{payment.Reglement}}</td>
<td>
<div role="group" aria-label="Basic example" class="btn-group">
<span
title="Print"
class="btn btn-icon btn-info btn-sm"
@click="Payment_Sale_PDF(payment,payment.id)"
>
<i class="i-Billing"></i>
</span>
<span
v-if="currentUserPermissions.includes('payment_sales_edit')"
title="Edit"
class="btn btn-icon btn-success btn-sm"
@click="Edit_Payment(payment)"
>
<i class="i-Pen-2"></i>
</span>
<span
title="Email"
class="btn btn-icon btn-primary btn-sm"
@click="Send_Email_Payment(payment.id)"
>
<i class="i-Envelope"></i>
</span>
<span
title="SMS"
class="btn btn-icon btn-secondary btn-sm"
@click="Payment_Sale_SMS(payment.id)"
>
<i class="i-Speach-Bubble"></i>
</span>
<span
v-if="currentUserPermissions.includes('payment_sales_delete')"
title="Delete"
class="btn btn-icon btn-danger btn-sm"
@click="Remove_Payment(payment.id)"
>
<i class="i-Close"></i>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</b-col>
</b-row>
</b-modal>
<!-- Modal Add Payment-->
<validation-observer ref="Add_payment">
<b-modal
hide-footer
size="lg"
id="Add_Payment"
:title="EditPaiementMode?$t('EditPayment'):$t('AddPayment')"
>
<b-form @submit.prevent="Submit_Payment">
<h1 class="text-center mt-3 mb-3">{{client_name}}</h1>
<b-row>
<!-- date -->
<b-col lg="4" md="12" sm="12">
<validation-provider
name="date"
:rules="{ required: true}"
v-slot="validationContext"
>
<b-form-group :label="$t('date')">
<b-form-input
label="date"
:state="getValidationState(validationContext)"
aria-describedby="date-feedback"
v-model="payment.date"
type="date"
></b-form-input>
<b-form-invalid-feedback id="date-feedback">{{ validationContext.errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<!-- Reference -->
<b-col lg="4" md="12" sm="12">
<b-form-group :label="$t('Reference')">
<b-form-input
disabled="disabled"
label="Reference"
:placeholder="$t('Reference')"
v-model="payment.Ref"
></b-form-input>
</b-form-group>
</b-col>
<!-- Payment choice -->
<b-col lg="4" md="12" sm="12">
<validation-provider name="Payment choice" :rules="{ required: true}">
<b-form-group slot-scope="{ valid, errors }" :label="$t('Paymentchoice')">
<v-select
:class="{'is-invalid': !!errors.length}"
:state="errors[0] ? false : (valid ? true : null)"
v-model="payment.Reglement"
@input="Selected_PaymentMethod"
:disabled="EditPaiementMode"
:reduce="label => label.value"
:placeholder="$t('PleaseSelect')"
:options="
[
{label: 'Cash', value: 'Cash'},
{label: 'credit card', value: 'credit card'},
{label: 'TPE', value: 'tpe'},
{label: 'cheque', value: 'cheque'},
{label: 'Western Union', value: 'Western Union'},
{label: 'bank transfer', value: 'bank transfer'},
{label: 'other', value: 'other'},
]"
></v-select>
<b-form-invalid-feedback>{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<!-- Received Amount -->
<b-col lg="4" md="12" sm="12">
<validation-provider
name="Received Amount"
:rules="{ required: true , regex: /^\d*\.?\d*$/}"
v-slot="validationContext"
>
<b-form-group :label="$t('Received_Amount')">
<b-form-input
@keyup="Verified_Received_Amount(payment.received_amount)"
label="Received_Amount"
:placeholder="$t('Received_Amount')"
v-model.number="payment.received_amount"
:state="getValidationState(validationContext)"
aria-describedby="Received_Amount-feedback"
:disabled="EditPaiementMode && payment.Reglement == 'credit card'"
></b-form-input>
<b-form-invalid-feedback
id="Received_Amount-feedback"
>{{ validationContext.errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<!-- Paying Amount -->
<b-col lg="4" md="12" sm="12">
<validation-provider
name="Amount"
:rules="{ required: true , regex: /^\d*\.?\d*$/}"
v-slot="validationContext"
>
<b-form-group :label="$t('Paying_Amount')">
<b-form-input
@keyup="Verified_paidAmount(payment.montant)"
label="Amount"
:placeholder="$t('Paying_Amount')"
v-model.number="payment.montant"
:state="getValidationState(validationContext)"
aria-describedby="Amount-feedback"
:disabled="EditPaiementMode && payment.Reglement == 'credit card'"
></b-form-input>
<b-form-invalid-feedback id="Amount-feedback">{{ validationContext.errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<!-- change Amount -->
<b-col lg="4" md="12" sm="12">
<label>{{$t('Change')}} :</label>
<p
class="change_amount"
>{{parseFloat(payment.received_amount - payment.montant).toFixed(2)}}</p>
</b-col>
<b-col lg="12" md="12" sm="12">
<b-card v-show="payment.Reglement == 'credit card' && !EditPaiementMode">
<div v-once class="typo__p" v-if="submit_showing_credit_card">
<div class="spinner sm spinner-primary mt-3"></div>
</div>
<div v-if="displaySavedPaymentMethods && !submit_showing_credit_card">
<div class="mt-3"><span class="mr-3">Saved Credit Card Info For This Client </span>
<b-button variant="outline-info" @click="show_new_credit_card()">
<span>
<i class="i-Two-Windows"></i>
New Credit Card
</span>
</b-button>
</div>
<table class="table table-hover mt-3">
<thead>
<tr>
<th>Last 4 digits</th>
<th>Type</th>
<th>Exp</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="card in savedPaymentMethods" :class="{ 'bg-selected-card': isSelectedCard(card) }">
<td>**** {{card.last4}}</td>
<td>{{card.type}}</td>
<td>{{card.exp}}</td>
<td>
<b-button variant="outline-primary" @click="selectCard(card)" v-if="!isSelectedCard(card) && card_id != card.card_id">
<span>
<i class="i-Drag-Up"></i>
Use This
</span>
</b-button>
<i v-if="isSelectedCard(card) || card_id == card.card_id" class="i-Yes" style=" font-size: 20px; "></i>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="displayFormNewCard && !submit_showing_credit_card">
<form id="payment-form">
<label for="card-element" class="leading-7 text-sm text-gray-600">
{{$t('Credit_Card_Info')}}
<b-button variant="outline-info" @click="show_saved_credit_card()" v-if="savedPaymentMethods.length > 0">
<span>
<i class="i-Two-Windows"></i>
Use Saved Credit Card
</span>
</b-button>
</label>
<div id="card-element">
</div>
<div id="card-errors" class="is-invalid" role="alert"></div>
</form>
</div>
</b-card>
</b-col>
<!-- Account -->
<b-col lg="6" md="6" sm="12">
<validation-provider name="Account">
<b-form-group slot-scope="{ valid, errors }" :label="$t('Account')">
<v-select
:class="{'is-invalid': !!errors.length}"
:state="errors[0] ? false : (valid ? true : null)"
v-model="payment.account_id"
:reduce="label => label.value"
:placeholder="$t('Choose_Account')"
:options="accounts.map(accounts => ({label: accounts.account_name, value: accounts.id}))"
/>
<b-form-invalid-feedback>{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<!-- Note -->
<b-col lg="6" md="6" sm="12">
<b-form-group :label="$t('Note')">
<b-form-textarea id="textarea" v-model="payment.notes" rows="3" max-rows="6"></b-form-textarea>
</b-form-group>
</b-col>
<b-col md="12" class="mt-3">
<b-button
variant="primary"
type="submit"
:disabled="paymentProcessing"
><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
<div v-once class="typo__p" v-if="paymentProcessing">
<div class="spinner sm spinner-primary mt-3"></div>
</div>
</b-col>
</b-row>
</b-form>
</b-modal>
</validation-observer>
<!-- Modal Edit Shipment -->
<validation-observer ref="shipment_ref">
<b-modal hide-footer size="md" id="modal_shipment" :title="$t('Edit')">
<b-form @submit.prevent="Submit_Shipment">
<b-row>
<!-- Status -->
<b-col md="12">
<validation-provider name="Status" :rules="{ required: true}">
<b-form-group slot-scope="{ valid, errors }" :label="$t('Status') + ' ' + '*'">
<v-select
:class="{'is-invalid': !!errors.length}"
:state="errors[0] ? false : (valid ? true : null)"
v-model="shipment.status"
:reduce="label => label.value"
:placeholder="$t('Choose_Status')"
:options="
[
{label: 'Ordered', value: 'ordered'},
{label: 'Packed', value: 'packed'},
{label: 'Shipped', value: 'shipped'},
{label: 'Delivered', value: 'delivered'},
{label: 'Cancelled', value: 'cancelled'},
]"
></v-select>
<b-form-invalid-feedback>{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</b-col>
<b-col md="12">
<b-form-group :label="$t('delivered_to')">
<b-form-input
label="delivered_to"
v-model="shipment.delivered_to"
:placeholder="$t('delivered_to')"
></b-form-input>
</b-form-group>
</b-col>
<b-col md="12">
<b-form-group :label="$t('Adress')">
<textarea
v-model="shipment.shipping_address"
rows="4"
class="form-control"
:placeholder="$t('Enter_Address')"
></textarea>
</b-form-group>
</b-col>
<b-col md="12">
<b-form-group :label="$t('Please_provide_any_details')">
<textarea
v-model="shipment.shipping_details"
rows="4"
class="form-control"
:placeholder="$t('Please_provide_any_details')"
></textarea>
</b-form-group>
</b-col>
<b-col md="12" class="mt-3">
<b-button
variant="primary"
type="submit"
:disabled="Submit_Processing_shipment"
><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button>
<div v-once class="typo__p" v-if="Submit_Processing_shipment">
<div class="spinner sm spinner-primary mt-3"></div>
</div>
</b-col>
</b-row>
</b-form>
</b-modal>
</validation-observer>
<!-- Modal Show Invoice POS-->
<b-modal hide-footer size="sm" scrollable id="Show_invoice" :title="$t('Invoice_POS')">
<div id="invoice-POS">
<div style="max-width:400px;margin:0px auto">
<div class="info" >
<div class="invoice_logo text-center mb-2">
<img :src="'/images/'+invoice_pos.setting.logo" alt width="60" height="60">
</div>
<p>
<span>{{$t('date')}} : {{invoice_pos.sale.date}} <br></span>
<span v-show="pos_settings.show_address">{{$t('Adress')}} : {{invoice_pos.setting.CompanyAdress}} <br></span>
<span v-show="pos_settings.show_email">{{$t('Email')}} : {{invoice_pos.setting.email}} <br></span>
<span v-show="pos_settings.show_phone">{{$t('Phone')}} : {{invoice_pos.setting.CompanyPhone}} <br></span>
<span v-show="pos_settings.show_customer">{{$t('Customer')}} : {{invoice_pos.sale.client_name}} <br></span>
<span v-show="pos_settings.show_Warehouse">{{$t('warehouse')}} : {{invoice_pos.sale.warehouse_name}} <br></span>
</p>
</div>
<table>
<tbody>
<tr v-for="detail_invoice in invoice_pos.details">
<td colspan="3">
{{detail_invoice.name}}
<br v-show="detail_invoice.is_imei && detail_invoice.imei_number !==null">
<span v-show="detail_invoice.is_imei && detail_invoice.imei_number !==null ">{{$t('IMEI_SN')}} : {{detail_invoice.imei_number}}</span>
<br>
<span>{{formatNumber(detail_invoice.quantity,2)}} {{detail_invoice.unit_sale}} x {{formatNumber(detail_invoice.total/detail_invoice.quantity,2)}}</span>
</td>
<td style="text-align:right;vertical-align:bottom">{{formatNumber(detail_invoice.total,2)}}</td>
</tr>
<tr style="margin-top:10px" v-show="pos_settings.show_discount">
<td colspan="3" class="total">{{$t('OrderTax')}}</td>
<td style="text-align:right;" class="total">{{invoice_pos.symbol}} {{formatNumber(invoice_pos.sale.taxe ,2)}} ({{formatNumber(invoice_pos.sale.tax_rate,2)}} %)</td>
</tr>
<tr style="margin-top:10px" v-show="pos_settings.show_discount">
<td colspan="3" class="total">{{$t('Discount')}}</td>
<td style="text-align:right;" class="total">{{invoice_pos.symbol}} {{formatNumber(invoice_pos.sale.discount ,2)}}</td>
</tr>
<tr style="margin-top:10px" v-show="pos_settings.show_discount">
<td colspan="3" class="total">{{$t('Shipping')}}</td>
<td style="text-align:right;" class="total">{{invoice_pos.symbol}} {{formatNumber(invoice_pos.sale.shipping ,2)}}</td>
</tr>
<tr style="margin-top:10px">
<td colspan="3" class="total">{{$t('Total')}}</td>
<td style="text-align:right;" class="total">{{invoice_pos.symbol}} {{formatNumber(invoice_pos.sale.GrandTotal ,2)}}</td>
</tr>
<tr v-show="invoice_pos.sale.paid_amount < invoice_pos.sale.GrandTotal">
<td colspan="3" class="total">{{$t('Paid')}}</td>
<td
style="text-align:right;"
class="total"
>{{invoice_pos.symbol}} {{formatNumber(invoice_pos.sale.paid_amount ,2)}}</td>
</tr>
<tr v-show="invoice_pos.sale.paid_amount < invoice_pos.sale.GrandTotal">
<td colspan="3" class="total">{{$t('Due')}}</td>
<td
style="text-align:right;"
class="total"
>{{invoice_pos.symbol}} {{parseFloat(invoice_pos.sale.GrandTotal - invoice_pos.sale.paid_amount).toFixed(2)}}</td>
</tr>
</tbody>
</table>
<table
class="change mt-3"
style=" font-size: 10px;"
v-show="invoice_pos.sale.paid_amount > 0"
>
<thead>
<tr style="background: #eee; ">
<th style="text-align: left;" colspan="1">{{$t('PayeBy')}}:</th>
<th style="text-align: center;" colspan="2">{{$t('Amount')}}:</th>
<th style="text-align: right;" colspan="1">{{$t('Change')}}:</th>
</tr>
</thead>
<tbody>
<tr v-for="payment_pos in payments">
<td style="text-align: left;" colspan="1">{{payment_pos.Reglement}}</td>
<td
style="text-align: center;"
colspan="2"
>{{formatNumber(payment_pos.montant ,2)}}</td>
<td
style="text-align: right;"
colspan="1"
>{{formatNumber(payment_pos.change ,2)}}</td>
</tr>
</tbody>
</table>
<div id="legalcopy" class="ml-2">
<p class="legal" v-show="pos_settings.show_note">
<strong>{{pos_settings.note_customer}}</strong>
</p>
<div id="bar" v-show="pos_settings.show_barcode">
<barcode
class="barcode"
:format="barcodeFormat"
:value="invoice_pos.sale.Ref"
textmargin="0"
fontoptions="bold"
fontSize= "15"
height= "25"
width= "1"
></barcode>
</div>
</div>
</div>
</div>
<button @click="print_it()" class="btn btn-outline-primary">
<i class="i-Billing"></i>
{{$t('print')}}
</button>
</b-modal>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import NProgress from "nprogress";
import jsPDF from "jspdf";
import "jspdf-autotable";
import vueEasyPrint from "vue-easy-print";
import VueBarcode from "vue-barcode";
import { loadStripe } from "@stripe/stripe-js";
export default {
components: {
vueEasyPrint,
barcode: VueBarcode
},
metaInfo: {
title: "Sales"
},
data() {
return {
stripe_key:'',
stripe: {},
cardElement: {},
pos_settings:{},
paymentProcessing: false,
Submit_Processing_shipment:false,
savedPaymentMethods: [],
hasSavedPaymentMethod: false,
useSavedPaymentMethod: false,
selectedCard:null,
card_id:'',
is_new_credit_card: false,
submit_showing_credit_card: false,
isLoading: true,
serverParams: {
sort: {
field: "id",
type: "desc"
},
page: 1,
perPage: 10
},
selectedIds: [],
search: "",
totalRows: "",
barcodeFormat: "CODE128",
showDropdown: false,
EditPaiementMode: false,
Filter_Client: "",
Filter_Ref: "",
Filter_date: "",
Filter_status: "",
Filter_Payment: "",
Filter_warehouse: "",
Filter_shipping:"",
customers: [],
warehouses: [],
shipment: {},
sales: [],
sale_due:'',
due:0,
client_name:'',
invoice_pos: {
sale: {
Ref: "",
client_name: "",
warehouse_name: "",
discount: "",
taxe: "",
tax_rate: "",
shipping: "",
GrandTotal: "",
paid_amount:'',
},
details: [],
setting: {
logo: "",
CompanyName: "",
CompanyAdress: "",
email: "",
CompanyPhone: ""
}
},
accounts: [],
payments: [],
payment: {},
Sale_id: "",
limit: "10",
sale: {},
email: {
to: "",
subject: "",
message: "",
client_name: "",
Sale_Ref: ""
},
emailPayment: {
id: "",
to: "",
subject: "",
message: "",
client_name: "",
Ref: ""
}
};
},
mounted() {
this.$root.$on("bv::dropdown::show", bvEvent => {
this.showDropdown = true;
});
this.$root.$on("bv::dropdown::hide", bvEvent => {
this.showDropdown = false;
});
},
computed: {
...mapGetters(["currentUserPermissions", "currentUser"]),
displaySavedPaymentMethods() {
if(this.hasSavedPaymentMethod){
return true;
}else{
return false;
}
},
displayFormNewCard() {
if(this.useSavedPaymentMethod){
return false;
}else{
return true;
}
},
isSelectedCard() {
return card => this.selectedCard === card;
},
columns() {
return [
{
label: this.$t("date"),
field: "date",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Reference"),
field: "Ref",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Created_by"),
field: "created_by",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Customer"),
field: "client_name",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("warehouse"),
field: "warehouse_name",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Status"),
field: "statut",
html: true,
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Total"),
field: "GrandTotal",
tdClass: "text-left",
thClass: "text-left",
sortable: false
},
{
label: this.$t("Paid"),
field: "paid_amount",
tdClass: "text-left",
thClass: "text-left",
sortable: false
},
{
label: this.$t("Due"),
field: "due",
tdClass: "text-left",
thClass: "text-left",
sortable: false
},
{
label: this.$t("PaymentStatus"),
field: "payment_status",
html: true,
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Shipping_status"),
field: "shipping_status",
html: true,
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Action"),
field: "actions",
html: true,
tdClass: "text-right",
thClass: "text-right",
sortable: false
}
];
}
},
methods: {
async Selected_PaymentMethod(value) {
if (value === 'credit card') {
this.savedPaymentMethods = [];
this.submit_showing_credit_card = true;
this.selectedCard = null
this.card_id = '';
// Check if the customer has saved payment methods
await axios.get(`/retrieve-customer?customerId=${this.sale.client_id}`)
.then(response => {
// If the customer has saved payment methods, display them
this.savedPaymentMethods = response.data.data;
this.card_id = response.data.customer_default_source;
this.hasSavedPaymentMethod = true;
this.useSavedPaymentMethod = true;
this.is_new_credit_card = false;
this.submit_showing_credit_card = false;
})
.catch(error => {
// If the customer does not have saved payment methods, show the card element for them to enter their payment information
this.hasSavedPaymentMethod = false;
this.useSavedPaymentMethod = false;
this.is_new_credit_card = true;
this.card_id = '';
setTimeout(() => {
this.loadStripe_payment();
}, 1000);
this.submit_showing_credit_card = false;
});
}else{
this.hasSavedPaymentMethod = false;
this.useSavedPaymentMethod = false;
this.is_new_credit_card = false;
}
},
show_saved_credit_card() {
this.hasSavedPaymentMethod = true;
this.useSavedPaymentMethod = true;
this.is_new_credit_card = false;
this.Selected_PaymentMethod('credit card');
},
show_new_credit_card() {
this.selectedCard = null;
this.card_id = '';
this.useSavedPaymentMethod = false;
this.hasSavedPaymentMethod = false;
this.is_new_credit_card = true;
setTimeout(() => {
this.loadStripe_payment();
}, 500);
},
selectCard(card) {
this.selectedCard = card;
this.card_id = card.card_id;
},
async loadStripe_payment() {
this.stripe = await loadStripe(`${this.stripe_key}`);
const elements = this.stripe.elements();
this.cardElement = elements.create("card", {
classes: {
base:
"bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 p-3 leading-8 transition-colors duration-200 ease-in-out"
}
});
this.cardElement.mount("#card-element");
},
//------------------------------ Print -------------------------\\
print_it() {
var divContents = document.getElementById("invoice-POS").innerHTML;
var a = window.open("", "", "height=500, width=500");
a.document.write(
'<link rel="stylesheet" href="/css/pos_print.css"><html>'
);
a.document.write("<body >");
a.document.write(divContents);
a.document.write("</body></html>");
a.document.close();
setTimeout(() => {
a.print();
}, 1000);
},
//---- update Params Table
updateParams(newProps) {
this.serverParams = Object.assign({}, this.serverParams, newProps);
},
//---- Event Page Change
onPageChange({ currentPage }) {
if (this.serverParams.page !== currentPage) {
this.updateParams({ page: currentPage });
this.Get_Sales(currentPage);
}
},
//---- Event Per Page Change
onPerPageChange({ currentPerPage }) {
if (this.limit !== currentPerPage) {
this.limit = currentPerPage;
this.updateParams({ page: 1, perPage: currentPerPage });
this.Get_Sales(1);
}
},
//---- Event Select Rows
selectionChanged({ selectedRows }) {
this.selectedIds = [];
selectedRows.forEach((row, index) => {
this.selectedIds.push(row.id);
});
},
//---- Event Sort change
onSortChange(params) {
let field = "";
if (params[0].field == "client_name") {
field = "client_id";
} else if (params[0].field == "warehouse_name") {
field = "warehouse_id";
}else if (params[0].field == "created_by") {
field = "user_id";
} else {
field = params[0].field;
}
this.updateParams({
sort: {
type: params[0].type,
field: field
}
});
this.Get_Sales(this.serverParams.page);
},
onSearch(value) {
this.search = value.searchTerm;
this.Get_Sales(this.serverParams.page);
},
//---------- keyup paid Amount
Verified_paidAmount() {
if (isNaN(this.payment.montant)) {
this.payment.montant = 0;
} else if (this.payment.montant > this.payment.received_amount) {
this.makeToast(
"warning",
this.$t("Paying_amount_is_greater_than_Received_amount"),
this.$t("Warning")
);
this.payment.montant = 0;
}
else if (this.payment.montant > this.due) {
this.makeToast(
"warning",
this.$t("Paying_amount_is_greater_than_Grand_Total"),
this.$t("Warning")
);
this.payment.montant = 0;
}
},
//---------- keyup Received Amount
Verified_Received_Amount() {
if (isNaN(this.payment.received_amount)) {
this.payment.received_amount = 0;
}
},
//------ Validate Form Submit_Payment
Submit_Payment() {
this.$refs.Add_payment.validate().then(success => {
if (!success) {
this.makeToast(
"danger",
this.$t("Please_fill_the_form_correctly"),
this.$t("Failed")
);
} else if (this.payment.montant > this.payment.received_amount) {
this.makeToast(
"warning",
this.$t("Paying_amount_is_greater_than_Received_amount"),
this.$t("Warning")
);
this.payment.received_amount = 0;
}
else if (this.payment.montant > this.due) {
this.makeToast(
"warning",
this.$t("Paying_amount_is_greater_than_Grand_Total"),
this.$t("Warning")
);
this.payment.montant = 0;
}else if (!this.EditPaiementMode) {
this.Create_Payment();
} else {
this.Update_Payment();
}
});
},
//---Validate State Fields
getValidationState({ dirty, validated, valid = null }) {
return dirty || validated ? valid : null;
},
//------ Toast
makeToast(variant, msg, title) {
this.$root.$bvToast.toast(msg, {
title: title,
variant: variant,
solid: true
});
},
//------ Reset Filter
Reset_Filter() {
this.search = "";
this.Filter_Client = "";
this.Filter_status = "";
this.Filter_Payment = "";
this.Filter_shipping = "";
this.Filter_Ref = "";
this.Filter_date = "";
this.Filter_warehouse = "";
this.Get_Sales(this.serverParams.page);
},
//------------------------------Formetted Numbers -------------------------\\
formatNumber(number, dec) {
const value = (typeof number === "string"
? number
: number.toString()
).split(".");
if (dec <= 0) return value[0];
let formated = value[1] || "";
if (formated.length > dec)
return `${value[0]}.${formated.substr(0, dec)}`;
while (formated.length < dec) formated += "0";
return `${value[0]}.${formated}`;
},
//----------------------------------- Sales PDF ------------------------------\\
Sales_PDF() {
var self = this;
let pdf = new jsPDF("p", "pt");
let columns = [
{ title: "Ref", dataKey: "Ref" },
{ title: "Client", dataKey: "client_name" },
{ title: "Warehouse", dataKey: "warehouse_name" },
{ title: "Status", dataKey: "statut" },
{ title: "Total", dataKey: "GrandTotal" },
{ title: "Paid", dataKey: "paid_amount" },
{ title: "Due", dataKey: "due" },
{ title: "Status Payment", dataKey: "payment_status" },
];
// Calculate totals
let totalGrandTotal = self.sales.reduce((sum, sale) => sum + parseFloat(sale.GrandTotal || 0), 0);
let totalPaidAmount = self.sales.reduce((sum, sale) => sum + parseFloat(sale.paid_amount || 0), 0);
let totalDue = self.sales.reduce((sum, sale) => sum + parseFloat(sale.due || 0), 0);
let footer = [{
Ref: 'Total',
client_name: '',
warehouse_name: '',
statut: '',
GrandTotal: `${totalGrandTotal.toFixed(2)}`,
paid_amount: `${totalPaidAmount.toFixed(2)}`,
due: `${totalDue.toFixed(2)}`,
payment_status: '',
}];
pdf.autoTable({
columns: columns,
body: self.sales,
foot: footer,
startY: 70,
didDrawPage: (data) => {
pdf.text("Sales List", 40, 25);
}
});
pdf.save("Sales_List.pdf");
},
//-------------------------------- Invoice POS ------------------------------\\
Invoice_POS(id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.get("sales_print_invoice/" + id)
.then(response => {
this.invoice_pos = response.data;
this.payments = response.data.payments;
this.pos_settings = response.data.pos_settings;
setTimeout(() => {
// Complete the animation of the progress bar.
NProgress.done();
this.$bvModal.show("Show_invoice");
}, 500);
if(response.data.pos_settings.is_printable){
setTimeout(() => this.print_it(), 1000);
}
})
.catch(() => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
});
},
//----------------------------- Invoice PDF ------------------------------\\
Invoice_PDF(sale, id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.get("sale_pdf/" + id, {
responseType: "blob", // important
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "Sale-" + sale.Ref + ".pdf");
document.body.appendChild(link);
link.click();
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
})
.catch(() => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
});
},
Send_WhatsApp(id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.post("sales_send_whatsapp", {
id: id,
})
.then(response => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
var phone = response.data.phone;
var message = response.data.message;
// Encode phone number and message
var encodedPhone = encodeURIComponent(phone);
var encodedMessage = encodeURIComponent(message);
// Create WhatsApp URL
var whatsappUrl = `https://web.whatsapp.com/send/?phone=${encodedPhone}&text=${encodedMessage}`;
// Open the WhatsApp URL in a new window
window.open(whatsappUrl, '_blank');
})
.catch(error => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast("danger", "Failed to send the Message", this.$t("Failed"));
});
},
//------------------------ Payments Sale PDF ------------------------------\\
Payment_Sale_PDF(payment, id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.get("payment_sale_pdf/" + id, {
responseType: "blob", // important
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "Payment-" + payment.Ref + ".pdf");
document.body.appendChild(link);
link.click();
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
})
.catch(() => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
});
},
//---------------------------------------- Set To Strings-------------------------\\
setToStrings() {
// Simply replaces null values with strings=''
if (this.Filter_Client === null) {
this.Filter_Client = "";
} else if (this.Filter_warehouse === null) {
this.Filter_warehouse = "";
} else if (this.Filter_status === null) {
this.Filter_status = "";
} else if (this.Filter_Payment === null) {
this.Filter_Payment = "";
}else if (this.Filter_shipping === null) {
this.Filter_shipping = "";
}
},
//----------------------------------------- Get all Sales ------------------------------\\
Get_Sales(page) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
this.setToStrings();
axios
.get(
"sales?page=" +
page +
"&Ref=" +
this.Filter_Ref +
"&date=" +
this.Filter_date +
"&client_id=" +
this.Filter_Client +
"&statut=" +
this.Filter_status +
"&warehouse_id=" +
this.Filter_warehouse +
"&payment_statut=" +
this.Filter_Payment +
"&shipping_status=" +
this.Filter_shipping +
"&SortField=" +
this.serverParams.sort.field +
"&SortType=" +
this.serverParams.sort.type +
"&search=" +
this.search +
"&limit=" +
this.limit
)
.then(response => {
this.sales = response.data.sales;
this.customers = response.data.customers;
this.accounts = response.data.accounts;
this.warehouses = response.data.warehouses;
this.totalRows = response.data.totalRows;
this.stripe_key = response.data.stripe_key;
// Complete the animation of theprogress bar.
NProgress.done();
this.isLoading = false;
})
.catch(response => {
// Complete the animation of theprogress bar.
NProgress.done();
setTimeout(() => {
this.isLoading = false;
}, 500);
});
},
//---------SMS notification
Payment_Sale_SMS(id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.post("payment_sale_send_sms", {
id: id,
})
.then(response => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast(
"success",
this.$t("Send_SMS"),
this.$t("Success")
);
})
.catch(error => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast("danger", this.$t("sms_config_invalid"), this.$t("Failed"));
});
},
Send_Email_Payment(id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.post("payment_sale_send_email", {
id: id,
})
.then(response => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast(
"success",
this.$t("Send.TitleEmail"),
this.$t("Success")
);
})
.catch(error => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast("danger", this.$t("SMTPIncorrect"), this.$t("Failed"));
});
},
Send_Email(id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.post("sales_send_email", {
id: id,
})
.then(response => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast(
"success",
this.$t("Send.TitleEmail"),
this.$t("Success")
);
})
.catch(error => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast("danger", this.$t("SMTPIncorrect"), this.$t("Failed"));
});
},
//---------SMS notification
Sale_SMS(id) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.post("sales_send_sms", {
id: id,
})
.then(response => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast(
"success",
this.$t("Send_SMS"),
this.$t("Success")
);
})
.catch(error => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.makeToast("danger", this.$t("sms_config_invalid"), this.$t("Failed"));
});
},
Number_Order_Payment() {
axios
.get("payment_sale_get_number")
.then(({ data }) => (this.payment.Ref = data));
},
//----------------------------------- New Payment Sale ------------------------------\\
New_Payment(sale) {
if (sale.payment_status == "paid") {
this.$swal({
icon: "error",
title: "Oops...",
text: this.$t("PaymentComplete")
});
} else {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
this.reset_form_payment();
this.EditPaiementMode = false;
this.sale = sale;
this.payment.date = new Date().toISOString().slice(0, 10);
this.Number_Order_Payment();
this.payment.montant = sale.due;
this.payment.Reglement = 'Cash';
this.payment.received_amount = sale.due;
this.due = parseFloat(sale.due);
this.client_name = sale.client_name;
setTimeout(() => {
// Complete the animation of the progress bar.
NProgress.done();
this.$bvModal.show("Add_Payment");
}, 500);
}
},
//------------------------------------Edit Payment ------------------------------\\
Edit_Payment(payment) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
this.reset_form_payment();
this.EditPaiementMode = true;
this.payment.id = payment.id;
this.payment.Ref = payment.Ref;
this.payment.Reglement = payment.Reglement;
this.payment.account_id = payment.account_id;
this.payment.date = payment.date;
this.payment.change = payment.change;
this.payment.montant = payment.montant;
this.payment.received_amount = parseFloat(payment.montant + payment.change).toFixed(2);
this.payment.notes = payment.notes;
this.due = parseFloat(this.sale_due) + payment.montant;
setTimeout(() => {
// Complete the animation of the progress bar.
NProgress.done();
this.$bvModal.show("Add_Payment");
}, 1000);
},
//-------------------------------Show All Payment with Sale ---------------------\\
Show_Payments(id, sale) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
this.reset_form_payment();
this.Sale_id = id;
this.sale = sale;
this.client_name = sale.client_name;
this.Get_Payments(id);
},
//----------------------------------Process Payment (Mode Create) ------------------------------\\
async processPayment_Create() {
const { token, error } = await this.stripe.createToken(
this.cardElement
);
if (error) {
this.paymentProcessing = false;
NProgress.done();
this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
} else {
axios
.post("payment_sale", {
sale_id: this.sale.id,
client_email: this.sale.client_email,
client_id: this.sale.client_id,
date: this.payment.date,
montant: parseFloat(this.payment.montant).toFixed(2),
received_amount: parseFloat(this.payment.received_amount).toFixed(2),
change: parseFloat(this.payment.received_amount - this.payment.montant).toFixed(2),
Reglement: this.payment.Reglement,
account_id: this.payment.account_id,
notes: this.payment.notes,
token: token.id,
is_new_credit_card: this.is_new_credit_card,
selectedCard: this.selectedCard,
card_id: this.card_id,
})
.then(response => {
this.paymentProcessing = false;
Fire.$emit("Create_Facture_sale");
this.makeToast(
"success",
this.$t("Create.TitlePayment"),
this.$t("Success")
);
})
.catch(error => {
this.paymentProcessing = false;
// Complete the animation of the progress bar.
NProgress.done();
this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
});
}
},
//----------------------------------Create Payment sale ------------------------------\\
Create_Payment() {
this.paymentProcessing = true;
NProgress.start();
NProgress.set(0.1);
if (this.payment.Reglement == "credit card" && this.is_new_credit_card) {
if(this.stripe_key != ''){
this.processPayment_Create();
}else{
this.makeToast("danger", this.$t("credit_card_account_not_available"), this.$t("Failed"));
NProgress.done();
this.paymentProcessing = false;
}
}else{
axios
.post("payment_sale", {
sale_id: this.sale.id,
date: this.payment.date,
montant: parseFloat(this.payment.montant).toFixed(2),
received_amount: parseFloat(this.payment.received_amount).toFixed(2),
change: parseFloat(this.payment.received_amount - this.payment.montant).toFixed(2),
Reglement: this.payment.Reglement,
account_id: this.payment.account_id,
notes: this.payment.notes,
is_new_credit_card: this.is_new_credit_card,
selectedCard: this.selectedCard,
card_id: this.card_id,
})
.then(response => {
this.paymentProcessing = false;
Fire.$emit("Create_Facture_sale");
this.makeToast(
"success",
this.$t("Create.TitlePayment"),
this.$t("Success")
);
})
.catch(error => {
this.paymentProcessing = false;
NProgress.done();
});
}
},
//---------------------------------------- Update Payment ------------------------------\\
Update_Payment() {
this.paymentProcessing = true;
NProgress.start();
NProgress.set(0.1);
axios
.put("payment_sale/" + this.payment.id, {
sale_id: this.sale.id,
date: this.payment.date,
montant: parseFloat(this.payment.montant).toFixed(2),
received_amount: parseFloat(this.payment.received_amount).toFixed(2),
change: parseFloat(this.payment.received_amount - this.payment.montant).toFixed(2),
Reglement: this.payment.Reglement,
account_id: this.payment.account_id,
notes: this.payment.notes
})
.then(response => {
this.paymentProcessing = false;
Fire.$emit("Update_Facture_sale");
this.makeToast(
"success",
this.$t("Update.TitlePayment"),
this.$t("Success")
);
})
.catch(error => {
this.paymentProcessing = false;
NProgress.done();
});
},
//----------------------------------------- Remove Payment ------------------------------\\
Remove_Payment(id) {
this.$swal({
title: this.$t("Delete.Title"),
text: this.$t("Delete.Text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
cancelButtonText: this.$t("Delete.cancelButtonText"),
confirmButtonText: this.$t("Delete.confirmButtonText")
}).then(result => {
if (result.value) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.delete("payment_sale/" + id)
.then(() => {
this.$swal(
this.$t("Delete.Deleted"),
this.$t("Delete.PaymentDeleted"),
"success"
);
Fire.$emit("Delete_Facture_sale");
})
.catch(() => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.$swal(
this.$t("Delete.Failed"),
this.$t("Delete.Therewassomethingwronge"),
"warning"
);
});
}
});
},
//----------------------------------------- Get Payments -------------------------------\\
Get_Payments(id) {
axios
.get("get_payments_by_sale/" + id)
.then(response => {
this.payments = response.data.payments;
this.sale_due = response.data.due;
setTimeout(() => {
// Complete the animation of the progress bar.
NProgress.done();
this.$bvModal.show("Show_payment");
}, 500);
})
.catch(() => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
});
},
//------------------------------------------ Reset Form Payment ------------------------------\\
reset_form_payment() {
this.due = 0;
this.payment = {
id: "",
Sale_id: "",
date: "",
Ref: "",
montant: "",
received_amount: "",
Reglement: "",
account_id: "",
notes: ""
};
},
//---------------------- Get_Data_Create ------------------------------\\
Get_shipment_by_sale(sale_id) {
axios
.get("/shipments/" + sale_id)
.then(response => {
this.shipment = response.data.shipment;
setTimeout(() => {
NProgress.done();
this.$bvModal.show("modal_shipment");
}, 1000);
})
.catch(error => {
NProgress.done();
});
},
//------------- Submit Validation Edit shipment
Submit_Shipment() {
this.$refs.shipment_ref.validate().then(success => {
if (!success) {
this.makeToast(
"danger",
this.$t("Please_fill_the_form_correctly"),
this.$t("Failed")
);
} else {
this.Update_Shipment();
}
});
},
//----------------------- Update_Shipment ---------------------------\\
Update_Shipment() {
var self = this;
self.Submit_Processing_shipment = true;
axios
.post("shipments", {
Ref: self.shipment.Ref,
sale_id: self.shipment.sale_id,
shipping_address: self.shipment.shipping_address,
delivered_to: self.shipment.delivered_to,
shipping_details: self.shipment.shipping_details,
status: self.shipment.status
})
.then(response => {
this.makeToast(
"success",
this.$t("Updated_in_successfully"),
this.$t("Success")
);
Fire.$emit("event_update_shipment");
self.Submit_Processing_shipment = false;
})
.catch(error => {
this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed"));
self.Submit_Processing_shipment = false;
});
},
//------------------------------ Show Modal (Edit shipment) -------------------------------\\
Edit_Shipment(sale_id) {
NProgress.start();
NProgress.set(0.1);
this.reset_Form_shipment();
this.Get_shipment_by_sale(sale_id);
},
//-------------------------------- Reset Form -------------------------------\\
reset_Form_shipment() {
this.shipment = {
id: "",
date: "",
Ref: "",
sale_id: "",
attachment: "",
delivered_to: "",
shipping_address: "",
status: "",
shipping_details: ""
};
},
//------------------------------------------ Remove Sale ------------------------------\\
Remove_Sale(id , sale_has_return) {
if(sale_has_return == 'yes'){
this.makeToast("danger", this.$t("Return_exist_for_the_Transaction"), this.$t("Failed"));
}else{
this.$swal({
title: this.$t("Delete.Title"),
text: this.$t("Delete.Text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
cancelButtonText: this.$t("Delete.cancelButtonText"),
confirmButtonText: this.$t("Delete.confirmButtonText")
}).then(result => {
if (result.value) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.delete("sales/" + id)
.then(() => {
this.$swal(
this.$t("Delete.Deleted"),
this.$t("Delete.SaleDeleted"),
"success"
);
Fire.$emit("Delete_sale");
})
.catch(() => {
// Complete the animation of the progress bar.
setTimeout(() => NProgress.done(), 500);
this.$swal(
this.$t("Delete.Failed"),
this.$t("Delete.Therewassomethingwronge"),
"warning"
);
});
}
});
}
},
//---- Delete sales by selection
delete_by_selected() {
this.$swal({
title: this.$t("Delete.Title"),
text: this.$t("Delete.Text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
cancelButtonText: this.$t("Delete.cancelButtonText"),
confirmButtonText: this.$t("Delete.confirmButtonText")
}).then(result => {
if (result.value) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.post("sales_delete_by_selection", {
selectedIds: this.selectedIds
})
.then(() => {
this.$swal(
this.$t("Delete.Deleted"),
this.$t("Delete.SaleDeleted"),
"success"
);
Fire.$emit("Delete_sale");
})
.catch(() => {
// Complete the animation of theprogress bar.
setTimeout(() => NProgress.done(), 500);
this.$swal(
this.$t("Delete.Failed"),
this.$t("Delete.Therewassomethingwronge"),
"warning"
);
});
}
});
}
},
//----------------------------- Created function-------------------\\
created() {
this.Get_Sales(1);
Fire.$on("Create_Facture_sale", () => {
setTimeout(() => {
this.Get_Sales(this.serverParams.page);
NProgress.done();
this.$bvModal.hide("Add_Payment");
}, 800);
});
Fire.$on("Update_Facture_sale", () => {
setTimeout(() => {
NProgress.done();
this.$bvModal.hide("Add_Payment");
this.$bvModal.hide("Show_payment");
this.Get_Sales(this.serverParams.page);
}, 800);
});
Fire.$on("Delete_Facture_sale", () => {
setTimeout(() => {
NProgress.done();
this.$bvModal.hide("Show_payment");
this.Get_Sales(this.serverParams.page);
}, 800);
});
Fire.$on("Delete_sale", () => {
setTimeout(() => {
this.Get_Sales(this.serverParams.page);
// Complete the animation of the progress bar.
NProgress.done();
}, 800);
});
Fire.$on("event_update_shipment", () => {
setTimeout(() => {
this.Get_Sales(this.serverParams.page);
this.$bvModal.hide("modal_shipment");
}, 800);
});
}
};
</script>
<style>
.total{
font-weight: bold;
font-size: 14px;
/* text-transform: uppercase;
height: 50px; */
}
</style>