Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-16 01:21:48 +01:00
Code Issues Projects Releases Wiki Activity

Remove conditional code around extensionRefreshFlag (#13146)

Browse Source 
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Daniel James Smith 2025-02-10 14:31:41 +01:00 committed by GitHub
parent 9ddaf96020
commit 13a80ccff2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/web/src/app/billing/services/stripe.service.ts
View File

@ -3,8 +3,6 @@
import { Injectable } from "@angular/core";
import { BankAccount } from "@bitwarden/common/billing/models/domain";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { BillingServicesModule } from "./billing-services.module";
@ -19,10 +17,7 @@ export class StripeService {
cardCvc: string;
};
constructor(
private logService: LogService,
private configService: ConfigService,
) {}
constructor(private logService: LogService) {}
/**
* Loads [Stripe JS]{@link https://docs.stripe.com/js} in the <head> element of the current page and mounts
@ -43,19 +38,10 @@ export class StripeService {
const window$ = window as any;
this.stripe = window$.Stripe(process.env.STRIPE_KEY);
this.elements = this.stripe.elements();
const isExtensionRefresh = await this.configService.getFeatureFlag(
FeatureFlag.ExtensionRefresh,
);
setTimeout(() => {
this.elements.create(
"cardNumber",
this.getElementOptions("cardNumber", isExtensionRefresh),
);
this.elements.create(
"cardExpiry",
this.getElementOptions("cardExpiry", isExtensionRefresh),
);
this.elements.create("cardCvc", this.getElementOptions("cardCvc", isExtensionRefresh));
this.elements.create("cardNumber", this.getElementOptions("cardNumber"));
this.elements.create("cardExpiry", this.getElementOptions("cardExpiry"));
this.elements.create("cardCvc", this.getElementOptions("cardCvc"));
if (autoMount) {
this.mountElements();
}
@ -150,10 +136,7 @@ export class StripeService {
}, 500);
}
private getElementOptions(
element: "cardNumber" | "cardExpiry" | "cardCvc",
isExtensionRefresh: boolean,
): any {
private getElementOptions(element: "cardNumber" | "cardExpiry" | "cardCvc"): any {
const options: any = {
style: {
base: {
@ -178,15 +161,12 @@ export class StripeService {
},
};
// Unique settings that should only be applied when the extension refresh flag is active
if (isExtensionRefresh) {
options.style.base.fontWeight = "500";
options.classes.base = "v2";
options.style.base.fontWeight = "500";
options.classes.base = "v2";
// Remove the placeholder for number and CVC fields
if (["cardNumber", "cardCvc"].includes(element)) {
options.placeholder = "";
}
// Remove the placeholder for number and CVC fields
if (["cardNumber", "cardCvc"].includes(element)) {
options.placeholder = "";
}
const style = getComputedStyle(document.documentElement);

23
apps/web/src/app/billing/shared/payment/payment-label.component.html
View File

@ -2,21 +2,12 @@
<ng-content></ng-content>
</ng-template>
<ng-container *ngIf="extensionRefreshFlag; else defaultLabel">
<div class="tw-relative tw-mt-2">
<bit-label
[attr.for]="for"
class="tw-absolute tw-bg-background tw-px-1 tw-text-sm tw-text-muted -tw-top-2.5 tw-left-3 tw-mb-0 tw-max-w-full tw-pointer-events-auto"
>
<ng-container *ngTemplateOutlet="defaultContent"></ng-container>
<span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
</bit-label>
</div>
</ng-container>
<ng-template #defaultLabel>
<label [attr.for]="for">
<div class="tw-relative tw-mt-2">
<bit-label
[attr.for]="for"
class="tw-absolute tw-bg-background tw-px-1 tw-text-sm tw-text-muted -tw-top-2.5 tw-left-3 tw-mb-0 tw-max-w-full tw-pointer-events-auto"
>
<ng-container *ngTemplateOutlet="defaultContent"></ng-container>
<span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
</label>
</ng-template>
</bit-label>
</div>

19
apps/web/src/app/billing/shared/payment/payment-label.component.ts
View File

@ -1,9 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { booleanAttribute, Component, Input, OnInit } from "@angular/core";
import { booleanAttribute, Component, Input } from "@angular/core";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { FormFieldModule } from "@bitwarden/components";
import { SharedModule } from "../../../shared";
@ -11,8 +9,7 @@ import { SharedModule } from "../../../shared";
/**
* Label that should be used for elements loaded via Stripe API.
*
* Applies the same label styles from CL form-field component when
* the `ExtensionRefresh` flag is set.
* Applies the same label styles from CL form-field component
*/
@Component({
selector: "app-payment-label",
@ -20,19 +17,11 @@ import { SharedModule } from "../../../shared";
standalone: true,
imports: [FormFieldModule, SharedModule],
})
export class PaymentLabelComponent implements OnInit {
export class PaymentLabelComponent {
/** `id` of the associated input */
@Input({ required: true }) for: string;
/** Displays required text on the label */
@Input({ transform: booleanAttribute }) required = false;
protected extensionRefreshFlag = false;
constructor(private configService: ConfigService) {}
async ngOnInit(): Promise<void> {
this.extensionRefreshFlag = await this.configService.getFeatureFlag(
FeatureFlag.ExtensionRefresh,
);
}
constructor() {}
}