Skip to content

Commit

Permalink
feat(ever-merchant): init payment mutation popup
Browse files Browse the repository at this point in the history
  • Loading branch information
AlishMekliov931 committed Jul 30, 2019
1 parent e4de4bc commit a9e6383
Show file tree
Hide file tree
Showing 9 changed files with 126 additions and 15 deletions.
11 changes: 2 additions & 9 deletions merchant/tablet-ionic/src/components/components.module.ts
Expand Up @@ -12,7 +12,6 @@ import { OrderImageComponent } from './common/order-image/order-image';
import { CommonComponent } from './settings-page-components/common/common';
import { AccountComponent } from './settings-page-components/account/account';
import { LocationComponent } from './settings-page-components/location/location';
import { SettingsComponent } from './settings-page-components/settings/settings';
import { GoogleMapModule } from '../@shared/google-map/google-map.module';
import { OrderTitleComponent } from './common/order-title/order-title';
import { CustomerInfoComponent } from './common/customer-info/customer-info';
Expand All @@ -28,8 +27,6 @@ import { CustomerEmailPopupPageModule } from 'pages/+customers/customer-email-po
import { CustomerDeliveriesPopupPageModule } from 'pages/+customers/customer-deliveries-popup/customer-deliveries-popup.module';
import { CustomerAddrPopupPageModule } from 'pages/+customers/customer-addr-popup/customer-addr-popup.module';
import { FileUploaderModule } from './file-uploader/file-uploader.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { SettingsPaymentsComponent } from './settings-page-components/settings/payments/payments';

@NgModule({
declarations: [
Expand All @@ -46,13 +43,11 @@ import { SettingsPaymentsComponent } from './settings-page-components/settings/p
CommonComponent,
AccountComponent,
LocationComponent,
SettingsComponent,
OrderTitleComponent,
CustomerInfoComponent,
CarrierInfoComponent,
PhoneComponent,
UserPhoneComponent,
SettingsPaymentsComponent
UserPhoneComponent
],
imports: [
CommonModule,
Expand All @@ -66,8 +61,7 @@ import { SettingsPaymentsComponent } from './settings-page-components/settings/p
CustomerEmailPopupPageModule,
CustomerDeliveriesPopupPageModule,
CustomerAddrPopupPageModule,
FileUploaderModule,
NgSelectModule
FileUploaderModule
],
exports: [
LoadingComponent,
Expand All @@ -83,7 +77,6 @@ import { SettingsPaymentsComponent } from './settings-page-components/settings/p
CommonComponent,
AccountComponent,
LocationComponent,
SettingsComponent,
PhoneComponent
]
})
Expand Down
@@ -0,0 +1,20 @@
<div class="payments-mutation-popup">
<h4 class="custom-title-popup">
{{ titleText }}
</h4>
<button class="close" (click)="cancelModal()">
<i class="fa fa-close"></i>
</button>

<div class="body"></div>

<div class="button-bar padding-top">
<button class="button button-assertive" (click)="cancelModal()">
Cancel
</button>

<button class="button button-brand">
{{ configureObject ? 'Update' : 'Add' }}
</button>
</div>
</div>
@@ -0,0 +1,11 @@
.payments-mutation-popup {
background-color: #fff;
display: flex !important;
flex-direction: column;
position: relative;
height: 100%;

.body {
height: 80%;
}
}
@@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import PaymentGateways, {
paymentGatewaysToString
} from '@modules/server.common/enums/PaymentGateways';

@Component({
selector: 'merchant-payments-mutation',
templateUrl: 'mutation.html',
styleUrls: ['mutation.scss']
})
export class PaymentMutationComponent {
configureObject: any;
paymentGateway: PaymentGateways;

constructor(public modalController: ModalController) {}

cancelModal() {
this.modalController.dismiss();
}

get titleText() {
return `${
this.configureObject ? 'Update' : 'Add'
} ${paymentGatewaysToString(this.paymentGateway)} gateway`;
}
}
Expand Up @@ -21,7 +21,7 @@
[clearable]="false"
[searchable]="false"
placeholder="My payments gateways"
(change)="selectedMyPaymentsGateways = null"
(change)="showMutation($event)"
[(ngModel)]="selectedMyPaymentsGateways"
class="payments-gateways-select"
>
Expand All @@ -40,8 +40,8 @@
<p class="card-title">
<img
*ngIf="getPaymentLogo(item)"
height="40"
width="40"
height="35"
width="35"
class="mr-1"
[src]="getPaymentLogo(item)"
/>
Expand All @@ -60,7 +60,7 @@
[searchable]="false"
placeholder="Payments gateways"
class="payments-gateways-select"
(change)="selectedPaymentsGateways = null"
(change)="showMutation($event)"
[(ngModel)]="selectedPaymentsGateways"
>
<ng-template ng-label-tmp let-item="item">
Expand All @@ -78,8 +78,8 @@
<p class="card-title">
<img
*ngIf="getPaymentLogo(item)"
height="40"
width="40"
height="35"
width="35"
class="mr-1"
[src]="getPaymentLogo(item)"
/>
Expand Down
Expand Up @@ -4,6 +4,8 @@ import PaymentGateways, {
paymentGatewaysToString,
paymentGatewaysLogo
} from '@modules/server.common/enums/PaymentGateways';
import { ModalController } from '@ionic/angular';
import { PaymentMutationComponent } from './mutation/mutation';

@Component({
selector: 'merchant-payments-settings',
Expand All @@ -20,6 +22,8 @@ export class SettingsPaymentsComponent implements OnInit {
selectedMyPaymentsGateways: PaymentGateways[];
selectedPaymentsGateways: PaymentGateways[];

constructor(public modalCtrl: ModalController) {}

ngOnInit(): void {
const merchantPaymentsGateways = this.currWarehouse.paymentGateways.map(
(mpg) => mpg.paymentGateway
Expand Down Expand Up @@ -48,4 +52,24 @@ export class SettingsPaymentsComponent implements OnInit {
getPaymentLogo(p: PaymentGateways) {
return paymentGatewaysLogo(p);
}

async showMutation(e) {
const modal = await this.modalCtrl.create({
component: PaymentMutationComponent,
componentProps: {
configureObject: this.currWarehouse.paymentGateways.find(
(pg) => pg.paymentGateway === e
),
paymentGateway: e
},
cssClass: 'payments-mutation-wrapper'
});

await modal.present();

await modal.onDidDismiss();

this.selectedMyPaymentsGateways = [];
this.selectedPaymentsGateways = [];
}
}
@@ -0,0 +1,27 @@
import { NgModule } from '@angular/core';
import { SettingsComponent } from './settings';
import { SettingsPaymentsComponent } from './payments/payments';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { PaymentMutationComponent } from './payments/mutation/mutation';

@NgModule({
declarations: [
SettingsComponent,
SettingsPaymentsComponent,
PaymentMutationComponent
],
entryComponents: [PaymentMutationComponent],
imports: [
CommonModule,
TranslateModule.forChild(),
IonicModule,
FormsModule,
NgSelectModule
],
exports: [SettingsComponent]
})
export class MerchantSettingsComponentModule {}
7 changes: 7 additions & 0 deletions merchant/tablet-ionic/src/global.scss
Expand Up @@ -961,6 +961,13 @@ ion-modal.customer-email {
}
}

.payments-mutation-wrapper {
display: flex !important;
.modal-wrapper {
height: 450px;
}
}

.carrier-deliveries {
display: flex !important;
.modal-wrapper {
Expand Down
2 changes: 2 additions & 0 deletions merchant/tablet-ionic/src/pages/+settings/settings.module.ts
Expand Up @@ -10,6 +10,7 @@ import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MerchantSettingsComponentModule } from 'components/settings-page-components/settings/settings.module';

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
Expand Down Expand Up @@ -38,6 +39,7 @@ const routes: Routes = [
IonicModule,
CommonModule,
FormsModule,
MerchantSettingsComponentModule,
RouterModule.forChild(routes)
]
})
Expand Down

0 comments on commit a9e6383

Please sign in to comment.