bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 06:13:38 +00:00
Code Issues 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
3 changed files with 21 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,6 @@
import { Injectable } from "@angular/core"; import { Injectable } from "@angular/core";
import { BankAccount } from "@bitwarden/common/billing/models/domain"; 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 { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { BillingServicesModule } from "./billing-services.module"; import { BillingServicesModule } from "./billing-services.module";
@@ -19,10 +17,7 @@ export class StripeService {
cardCvc: string; cardCvc: string;
}; };
constructor( constructor(private logService: LogService) {}
private logService: LogService,
private configService: ConfigService,
) {}
/** /**
* Loads [Stripe JS]{@link https://docs.stripe.com/js} in the <head> element of the current page and mounts * 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; const window$ = window as any;
this.stripe = window$.Stripe(process.env.STRIPE_KEY); this.stripe = window$.Stripe(process.env.STRIPE_KEY);
this.elements = this.stripe.elements(); this.elements = this.stripe.elements();
const isExtensionRefresh = await this.configService.getFeatureFlag(
FeatureFlag.ExtensionRefresh,
);
setTimeout(() => { setTimeout(() => {
this.elements.create( this.elements.create("cardNumber", this.getElementOptions("cardNumber"));
"cardNumber", this.elements.create("cardExpiry", this.getElementOptions("cardExpiry"));
this.getElementOptions("cardNumber", isExtensionRefresh), this.elements.create("cardCvc", this.getElementOptions("cardCvc"));
);
this.elements.create(
"cardExpiry",
this.getElementOptions("cardExpiry", isExtensionRefresh),
);
this.elements.create("cardCvc", this.getElementOptions("cardCvc", isExtensionRefresh));
if (autoMount) { if (autoMount) {
this.mountElements(); this.mountElements();
} }
@@ -150,10 +136,7 @@ export class StripeService {
}, 500); }, 500);
} }
private getElementOptions( private getElementOptions(element: "cardNumber" | "cardExpiry" | "cardCvc"): any {
element: "cardNumber" | "cardExpiry" | "cardCvc",
isExtensionRefresh: boolean,
): any {
const options: any = { const options: any = {
style: { style: {
base: { base: {
@@ -178,8 +161,6 @@ 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.style.base.fontWeight = "500";
options.classes.base = "v2"; options.classes.base = "v2";
@@ -187,7 +168,6 @@ export class StripeService {
if (["cardNumber", "cardCvc"].includes(element)) { if (["cardNumber", "cardCvc"].includes(element)) {
options.placeholder = ""; options.placeholder = "";
} }
}
const style = getComputedStyle(document.documentElement); const style = getComputedStyle(document.documentElement);
options.style.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`; options.style.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`;

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

@@ -2,7 +2,6 @@
<ng-content></ng-content> <ng-content></ng-content>
</ng-template> </ng-template>
<ng-container *ngIf="extensionRefreshFlag; else defaultLabel">
<div class="tw-relative tw-mt-2"> <div class="tw-relative tw-mt-2">
<bit-label <bit-label
[attr.for]="for" [attr.for]="for"
@@ -12,11 +11,3 @@
<span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span> <span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
</bit-label> </bit-label>
</div> </div>
</ng-container>
<ng-template #defaultLabel>
<label [attr.for]="for">
<ng-container *ngTemplateOutlet="defaultContent"></ng-container>
<span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
</label>
</ng-template>

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