Skip to content
Permalink
Browse files

feat(ever-merchant): init payments settings component

  • Loading branch information...
AlishMekliov931 committed Jul 30, 2019
1 parent 24eba9f commit 0746cb70b80b59f5464fc9205e987a73f48ba35b
@@ -1,6 +1,7 @@
import { Component, Input, ViewChild } from '@angular/core';
import PaymentGateways, {
paymentGatewaysToString
paymentGatewaysToString,
paymentGatewaysLogo
} from '@modules/server.common/enums/PaymentGateways';
import { Country } from '@modules/server.common/entities';
import { NgForm } from '@angular/forms';
@@ -16,7 +17,7 @@ export class PayPalGatewayComponent {

isPayPalEnabled: boolean;
name = paymentGatewaysToString(PaymentGateways.PayPal);
logo = 'https://avatars1.githubusercontent.com/u/476675?s=200&v=4';
logo = paymentGatewaysLogo(PaymentGateways.PayPal);

@Input()
currenciesCodes: string[] = [];
@@ -1,6 +1,7 @@
import { Component, Input, OnChanges, ViewChild } from '@angular/core';
import PaymentGateways, {
paymentGatewaysToString
paymentGatewaysToString,
paymentGatewaysLogo
} from '@modules/server.common/enums/PaymentGateways';
import { Country } from '@modules/server.common/entities';
import { NgForm } from '@angular/forms';
@@ -19,7 +20,7 @@ export class StripeGatewayComponent {

isStripeEnabled: boolean;
name = paymentGatewaysToString(PaymentGateways.Stripe);
logo = 'https://stripe.com/img/v3/home/twitter.png';
logo = paymentGatewaysLogo(PaymentGateways.Stripe);
invalidUrl: boolean;

private _ngDestroy$ = new Subject<void>();
@@ -90,6 +90,7 @@
"@ionic/angular": "^4.1.2",
"@ionic/pro": "^2.0.4",
"@ionic/storage": "^2.2.0",
"@ng-select/ng-select": "^3.0.5",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"angular2-logger": "^0.7.0",
@@ -28,6 +28,8 @@ 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: [
@@ -49,7 +51,8 @@ import { FileUploaderModule } from './file-uploader/file-uploader.module';
CustomerInfoComponent,
CarrierInfoComponent,
PhoneComponent,
UserPhoneComponent
UserPhoneComponent,
SettingsPaymentsComponent
],
imports: [
CommonModule,
@@ -63,7 +66,8 @@ import { FileUploaderModule } from './file-uploader/file-uploader.module';
CustomerEmailPopupPageModule,
CustomerDeliveriesPopupPageModule,
CustomerAddrPopupPageModule,
FileUploaderModule
FileUploaderModule,
NgSelectModule
],
exports: [
LoadingComponent,
@@ -0,0 +1,85 @@
<ion-row>
<ion-col class="col-6">
<ion-item mode="ios">
<ion-label>
{{ 'SETTINGS_VIEW.ALLOW_ONLINE_PAYMENTS' | translate }}?
</ion-label>
<ion-checkbox
slot="start"
#isPaymentEnabled="ngModel"
[(ngModel)]="currWarehouse.isPaymentEnabled"
>
</ion-checkbox>
</ion-item>
</ion-col>
<ion-col class="col-3">
<ng-select
[items]="myPaymentsGateways"
[clearable]="false"
[searchable]="false"
placeholder="My payments gateways"
(change)="selectedMyPaymentsGateways = null"
[(ngModel)]="selectedMyPaymentsGateways"
class="payments-gateways-select"
>
<ng-template ng-label-tmp let-item="item">
<img
*ngIf="getPaymentLogo(item)"
height="15"
width="15"
class="mr-2"
[src]="getPaymentLogo(item)"
/>
{{ getPaymentName(item) }}
</ng-template>

<ng-template ng-option-tmp let-item="item" let-index="index">
<p class="card-title">
<img
*ngIf="getPaymentLogo(item)"
height="40"
width="40"
class="mr-1"
[src]="getPaymentLogo(item)"
/>
{{ getPaymentName(item) }}
</p>
</ng-template>
</ng-select>
</ion-col>
<ion-col class="col-3">
<ng-select
[items]="paymentsGateways"
[clearable]="false"
[searchable]="false"
placeholder="Payments gateways"
class="payments-gateways-select"
(change)="selectedPaymentsGateways = null"
[(ngModel)]="selectedPaymentsGateways"
>
<ng-template ng-label-tmp let-item="item">
<img
*ngIf="getPaymentLogo(item)"
height="15"
width="15"
class="mr-2"
[src]="getPaymentLogo(item)"
/>
{{ getPaymentName(item) }}
</ng-template>

<ng-template ng-option-tmp let-item="item" let-index="index">
<p class="card-title">
<img
*ngIf="getPaymentLogo(item)"
height="40"
width="40"
class="mr-1"
[src]="getPaymentLogo(item)"
/>
{{ getPaymentName(item) }}
</p>
</ng-template>
</ng-select>
</ion-col>
</ion-row>
@@ -0,0 +1,50 @@
import { Component, Input, OnInit, ViewChild, ElementRef } from '@angular/core';
import Warehouse from '@modules/server.common/entities/Warehouse';
import PaymentGateways, {
paymentGatewaysToString,
paymentGatewaysLogo
} from '@modules/server.common/enums/PaymentGateways';

@Component({
selector: 'merchant-payments-settings',
templateUrl: 'payments.html'
})
export class SettingsPaymentsComponent implements OnInit {
@Input()
currWarehouse: Warehouse;

@ViewChild('isPaymentEnabled', { static: false })
isPaymentEnabled: ElementRef;

myPaymentsGateways = [];
paymentsGateways = [];
selectedMyPaymentsGateways: PaymentGateways[];
selectedPaymentsGateways: PaymentGateways[];

ngOnInit(): void {
const merchantPaymentsGateways = this.currWarehouse.paymentGateways.map(
(mpg) => mpg.paymentGateway
);
const allPaymentGateways = Object.values(PaymentGateways).filter(
(r) => !isNaN(r)
);

if (merchantPaymentsGateways) {
this.myPaymentsGateways = allPaymentGateways.filter((pg) =>
merchantPaymentsGateways.includes(pg)
);
}

this.paymentsGateways = allPaymentGateways.filter(
(pg) => !this.myPaymentsGateways.includes(pg)
);
}

getPaymentName(p: PaymentGateways) {
return paymentGatewaysToString(p);
}

getPaymentLogo(p: PaymentGateways) {
return paymentGatewaysLogo(p);
}
}
@@ -16,7 +16,8 @@ <h4 class="row-title">
slot="start"
#productsDelivery="ngModel"
[(ngModel)]="currWarehouse.productsDelivery"
></ion-checkbox>
>
</ion-checkbox>
</ion-item>
</ion-col>
<ion-col class="col-6">
@@ -30,28 +31,22 @@ <h4 class="row-title">
slot="start"
#productsTakeaway="ngModel"
[(ngModel)]="currWarehouse.productsTakeaway"
></ion-checkbox>
>
</ion-checkbox>
</ion-item>
</ion-col>
</ion-row>
<br />
<h4 class="row-title">
{{ 'SETTINGS_VIEW.SETTINGS_SECTION.PAYMENTS_SETTINGS' | translate }}
</h4>
<ion-row>
<ion-col class="col-6">
<ion-item mode="ios">
<ion-label>
{{ 'SETTINGS_VIEW.ALLOW_ONLINE_PAYMENTS' | translate }}?
</ion-label>
<ion-checkbox
slot="start"
#isPaymentEnabled="ngModel"
[(ngModel)]="currWarehouse.isPaymentEnabled"
></ion-checkbox>
</ion-item>
</ion-col>
</ion-row>

<merchant-payments-settings
[currWarehouse]="currWarehouse"
#paymentsSettings
*ngIf="showPayments"
>
</merchant-payments-settings>

<br />
<h4 class="row-title">
@@ -121,7 +116,7 @@ <h4 class="row-title">
<ion-button
[disabled]="
hasChanges(
isPaymentEnabled.dirty,
paymentsSettings?.isPaymentEnabled.dirty,
productsDelivery.dirty,
productsTakeaway.dirty,
orderBarcodeType.dirty,
@@ -132,7 +127,8 @@ <h4 class="row-title">
(click)="saveChanges()"
color="success"
>
{{ 'SETTINGS_VIEW.SAVE_CHANGES' | translate }}
{{ paymentsSettings | json }} {{
'SETTINGS_VIEW.SAVE_CHANGES' | translate }}
</ion-button>
</ion-col>
</ion-row>
@@ -17,14 +17,17 @@ export class SettingsComponent implements AfterViewInit {
@Input()
currWarehouse: Warehouse;

showPayments = false;

orderBarcodeTypes: OrderBarcodeTypes[] = [
OrderBarcodeTypes.QR,
OrderBarcodeTypes.CODE128,
OrderBarcodeTypes.CODE39,
OrderBarcodeTypes.pharmacode
];

paymentsEnabled: boolean;
// TODO
// paymentsEnabled: boolean;
selectedOrderBarcodeType: OrderBarcodeTypes;
barcodetDataUrl: string;
hasScanCode: boolean;
@@ -41,6 +44,7 @@ export class SettingsComponent implements AfterViewInit {
if (this.currWarehouse) {
this.merchantBeforeUpdate = new Warehouse(this.currWarehouse);
}

this.generateQRCode();
}

@@ -98,5 +102,7 @@ export class SettingsComponent implements AfterViewInit {
this.currWarehouse.barcodeData
);
}

this.showPayments = true;
}
}
@@ -28,6 +28,8 @@ $fa-font-path: './assets/fonts' !default;
@import './theme/smart-table.scss';
@import './app/ionic-multiple-select.scss';

@import '~@ng-select/ng-select/themes/default.theme.css';

@import './pages/+settings/settings.scss';

@import './pages/+carriers/carriers.scss';
@@ -48,6 +50,23 @@ body {
background-color: $brand-darken;
}

.payments-gateways-select {
height: 100%;
padding-top: initial;
display: flex !important;
align-items: flex-end;
border-bottom: 1px solid #cacaca;
color: #000;

.ng-select-container {
border: 0 !important;
}

.ng-placeholder {
color: black !important;
}
}

.warehouse-view .orders-container {
// padding-top: 5px;
background-color: #f3f3f3;
@@ -794,6 +794,13 @@
call-me-maybe "^1.0.1"
glob-to-regexp "^0.3.0"

"@ng-select/ng-select@^3.0.5":
version "3.0.5"
resolved "https://registry.yarnpkg.com/@ng-select/ng-select/-/ng-select-3.0.5.tgz#693af173b4d9560c82646e128196dc9330e33fa6"
integrity sha512-R8X/iIzWTMignK9U3KScN4cjvQnLRp1KseAHt/cTP8/hlQSz6Vm7jhwbZqlVzV7PVXwKUoTgHLrSS9ombt1r3Q==
dependencies:
tslib "^1.9.0"

"@ngtools/webpack@8.1.3":
version "8.1.3"
resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-8.1.3.tgz#9df049b14539109b60590a1ca64cbd80b6e49909"
@@ -21,4 +21,15 @@ export function paymentGatewaysToString(
}
}

export function paymentGatewaysLogo(paymentGateway: PaymentGateways): string {
switch (paymentGateway) {
case PaymentGateways.Stripe:
return 'https://stripe.com/img/v3/home/twitter.png';
case PaymentGateways.PayPal:
return 'https://avatars1.githubusercontent.com/u/476675?s=200&v=4';
default:
return 'BAD_PAYMENT_GATEWAY';
}
}

export default PaymentGateways;

0 comments on commit 0746cb7

Please sign in to comment.
You can’t perform that action at this time.