Skip to content

P0071 | First time user flow #435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chandan-walker merged 4 commits into from
Feb 27, 2026
Merged

P0071 | First time user flow #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ab89e0
Merge branch 'main' of https://github.com/Walkover-Web-Solution/proxy…
Chandan-walker Feb 26, 2026
9a2c7e8
fixed issues create new block
Chandan-walker Feb 27, 2026
3c48176
resolved conflicts
Chandan-walker Feb 27, 2026
2506466
Merge branch 'development' of https://github.com/Walkover-Web-Solutio…
Chandan-walker Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 92 additions & 54 deletions apps/proxy/src/app/features/create-feature/create-feature.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,28 +124,7 @@ <h4 class="my-0 text-secondary mat-body-1 fw-bold">Add New Blocks</h4>
<mat-step
*ngIf="featureForm.get('primaryDetails.feature_id')?.value === 1"
[editable]="!(createUpdateObject$ | async)"
>
<ng-template matStepLabel>Branding</ng-template>
<div class="d-flex flex-column h-100">
<ng-container *ngTemplateOutlet="brandingStepContent"></ng-container>
<div class="d-flex align-items-center justify-content-between">
<button type="button" mat-flat-button class="flat-default" matStepperPrevious>
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
>Back
</button>
<button type="button" mat-flat-button color="primary" matStepperNext>
Next<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix"
>navigate_next</mat-icon
>
</button>
</div>
</div>
</mat-step>

<mat-step
*ngIf="featureForm.get('primaryDetails.feature_id')?.value === 1"
[completed]="featureForm.get('authorizationDetails')?.valid"
[editable]="!(createUpdateObject$ | async)"
[completed]="createUpdateObject$ | async"
>
<ng-template matStepLabel>Authorization Setup</ng-template>
<div #authorizationStepContent class="d-flex flex-column h-100">
Expand Down Expand Up @@ -173,6 +152,27 @@ <h4 class="my-0 text-secondary mat-body-1 fw-bold">Add New Blocks</h4>
</div>
</mat-step>

<mat-step *ngIf="featureForm.get('primaryDetails.feature_id')?.value === 1">
<ng-template matStepLabel>Branding</ng-template>
<div class="d-flex flex-column h-100">
<ng-container *ngTemplateOutlet="brandingStepContent"></ng-container>
<div class="d-flex align-items-center justify-content-between">
<!-- <button type="button" mat-flat-button class="flat-default" matStepperPrevious>
<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
>
</button> -->
<button type="button" mat-flat-button color="primary" (click)="updateFeature('branding')">
Update
</button>
<button type="button" mat-flat-button color="primary" matStepperNext>
Next<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix"
>navigate_next</mat-icon
>
</button>
</div>
</div>
</mat-step>

<!-- Conditional steps that only show when selected feature_id is not equal to 1 -->
<ng-container *ngIf="featureForm.get('primaryDetails.feature_id')?.value !== 1">
<mat-step [editable]="!(createUpdateObject$ | async)">
Expand Down Expand Up @@ -478,7 +478,7 @@ <h4 class="my-0 text-secondary mat-body-1 fw-bold">Add New Blocks</h4>
*ngTemplateOutlet="
inputField;
context: {
fieldControl: featureForm.get('authorizationDetails.redirect_url'),
fieldControl: featureForm.get('primaryDetails.redirect_url'),
fieldConfig: {
label: 'Redirect URL',
is_required: true,
Expand Down Expand Up @@ -779,9 +779,7 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
class="auth-credentials px-3 width-md-350 w-md-50 border rounded-8 ml-3"
[class.bg-dark]="featureForm.get('brandingDetails.theme')?.value === 'dark'"
style="max-height: 650px"
[style.--branding-primary-color]="
featureForm.get('brandingDetails.primary_color')?.value || getDefaultPrimaryColor()
"
[style.--branding-primary-color]="getEffectivePrimaryColor()"
[style.--branding-button-color]="featureForm.get('brandingDetails.button_color')?.value || '#19E6CE'"
[style.--branding-button-text-color]="featureForm.get('brandingDetails.button_text_color')?.value || '#000000'"
[style.--branding-button-hover-color]="
Expand All @@ -793,17 +791,15 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
<ng-container *ngIf="featureForm.get('brandingDetails.version')?.value === 'v2'">
<div class="d-flex flex-column align-items-center gap-2">
<img
*ngIf="featureForm.get('brandingDetails.logo_url')?.value"
[src]="featureForm.get('brandingDetails.logo_url').value"
*ngIf="
(logoInputMode === 'file' && logoUrl) ||
(logoInputMode === 'url' && featureForm.get('brandingDetails.logo_url')?.value)
"
[src]="logoInputMode === 'file' ? logoUrl : featureForm.get('brandingDetails.logo_url')?.value"
alt="Logo"
class="branding-preview-logo mb-2"
/>
<h2
class="mat-h2 fw-bolder text-light-gray mb-0"
[style.color]="
featureForm.get('brandingDetails.primary_color')?.value || getDefaultPrimaryColor()
"
>
<h2 class="mat-h2 fw-bolder text-light-gray mb-0" [style.color]="getEffectivePrimaryColor()">
{{ featureForm.get('brandingDetails.title')?.value }}
</h2>
</div>
Expand Down Expand Up @@ -845,7 +841,7 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
<p
*ngIf="featureForm.get('brandingDetails.create_account_link').value"
class="mat-body-2 text-center"
[style.color]="featureForm.get('brandingDetails.primary_color')?.value || getDefaultPrimaryColor()"
[style.color]="getEffectivePrimaryColor()"
>
Are you a new user?
<a class="text-link" href="#">{{ featureForm.get('brandingDetails.sign_up_button_text')?.value }}</a>
Expand Down Expand Up @@ -906,10 +902,7 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
[class.text-secondary]="featureForm.get('brandingDetails.theme')?.value === 'dark'"
style="white-space: nowrap"
[class.bg-dark]="featureForm.get('brandingDetails.theme')?.value === 'dark'"
[style.color]="
(featureForm.get('brandingDetails.primary_color')?.value || getDefaultPrimaryColor()) +
' !important'
"
[style.color]="getEffectivePrimaryColor() + ' !important'"
>Or continue with</span
>
<hr style="flex: 1; border: none; border-top: 1px solid var(--color-common-border); margin: 0" />
Expand Down Expand Up @@ -1999,13 +1992,21 @@ <h3>Taxes</h3>
<div class="d-flex align-items-center gap-3 font-12 mb-20 flex-wrap">
<!-- <span class="mat-body-2 text-secondary fw-bold mb-0">Logo</span> -->
<mat-radio-group
[(ngModel)]="logoInputMode"
[ngModelOptions]="{ standalone: true }"
(change)="featureForm.get('brandingDetails.logo_url')?.setValue(null)"
[value]="logoInputMode"
(change)="logoInputMode = $event.value"
class="d-flex gap-3 branding-logo-radio radio-button-custom-style"
>
<mat-radio-button value="url">Enter URL</mat-radio-button>
<mat-radio-button value="file">Upload file</mat-radio-button>
<mat-radio-button value="file">
Upload file
<mat-icon
class="material-icons-outlined mat-icon-14 text-secondary"
style="vertical-align: middle; cursor: default"
matTooltip="Maximum file size: 2 MB"
matTooltipPosition="right"
>info</mat-icon
>
</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field *ngIf="logoInputMode === 'url'" appearance="outline" class="w-100">
Expand All @@ -2025,13 +2026,21 @@ <h3>Taxes</h3>
hidden
(change)="onBrandingLogoFileSelected($event)"
/>
<button type="button" mat-stroked-button (click)="logoFileInput.click()">
<mat-icon class="material-icons-outlined mat-icon-18">upload_file</mat-icon>
Upload logo
<button type="button" mat-stroked-button (click)="logoFileInput.click()" [disabled]="isLogoUploading">
<mat-icon class="material-icons-outlined mat-icon-18">
{{ isLogoUploading ? 'hourglass_empty' : 'upload_file' }}
</mat-icon>
{{ isLogoUploading ? 'Uploading...' : 'Upload logo' }}
</button>
<span *ngIf="featureForm.get('brandingDetails.logo_url')?.value" class="mat-body-2 text-secondary"
>Logo selected</span
>
<ng-container *ngIf="logoUrl && !isLogoUploading">
<span
class="mat-body-2 text-secondary"
>{{ logoFileInput.files?.[0]?.name || 'Logo selected' }}</span
>
<button type="button" mat-icon-button (click)="logoUrl = null; logoFileInput.value = ''">
<mat-icon class="material-icons-outlined mat-icon-18 text-danger">close</mat-icon>
</button>
</ng-container>
</div>
<!-- Title (after logo) -->
<ng-container
Expand Down Expand Up @@ -2126,13 +2135,41 @@ <h3>Taxes</h3>
>
</mat-slide-toggle>
</div>
<!-- Primary color -->
<!-- Light theme primary color -->
<div class="d-flex align-items-center gap-2">
<label class="mat-body-2 mb-0" style="min-width: 120px">Primary color</label>
<label class="mat-body-2 mb-0" style="min-width: 120px"> Primary color</label>
<input
type="color"
[value]="featureForm.get('brandingDetails.primary_color')?.value || getDefaultPrimaryColor()"
(input)="featureForm.get('brandingDetails.primary_color')?.setValue($any($event.target).value)"
[value]="featureForm.get('brandingDetails.light_theme_primary_color')?.value || '#000000'"
(input)="
featureForm
.get('brandingDetails.light_theme_primary_color')
?.setValue($any($event.target).value)
"
style="
width: 30px;
height: 30px;
cursor: pointer;
border: 1px solid var(--color-common-border);
border-radius: 4px;
"
/>
<span class="mat-body-2 text-secondary">{{
featureForm.get('brandingDetails.light_theme_primary_color')?.value || '#000000'
}}</span>
<span class="mat-body-2 text-secondary">(Light theme)</span>
</div>
<!-- Dark theme primary color -->
<div class="d-flex align-items-center gap-2">
<label class="mat-body-2 mb-0" style="min-width: 120px"> Primary color</label>
<input
type="color"
[value]="featureForm.get('brandingDetails.dark_theme_primary_color')?.value || '#ffffff'"
(input)="
featureForm
.get('brandingDetails.dark_theme_primary_color')
?.setValue($any($event.target).value)
"
style="
width: 30px;
height: 30px;
Expand All @@ -2142,8 +2179,9 @@ <h3>Taxes</h3>
"
/>
<span class="mat-body-2 text-secondary">{{
featureForm.get('brandingDetails.primary_color')?.value || getDefaultPrimaryColor()
featureForm.get('brandingDetails.dark_theme_primary_color')?.value || '#ffffff'
}}</span>
<span class="mat-body-2 text-secondary">(Dark theme)</span>
</div>
<!-- Button color -->
<div class="d-flex align-items-center gap-2">
Expand Down
Loading