-
Notifications
You must be signed in to change notification settings - Fork 375
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.
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
feat/CXSPA-7301: Allow Billing Address + Guest checkout - in Digital Payments #18892
Merged
Merged
Changes from all commits
Commits
Show all changes
37 commits
Select commit
Hold shift + click to select a range
8eadf0b
code changes - part 1
anjana-bl 7ac7ae9
code changes
anjana-bl 3c9d613
code changes
anjana-bl 94eb8f4
Update feature-toggles.ts
anjana-bl b638aa2
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl 6e42279
Add license header
github-actions[bot] a1cf21b
code changes
anjana-bl 92bc601
Update occ-digital-payments.adapter.ts
anjana-bl 94c7c5a
code changes
anjana-bl 36f8d56
code changes
anjana-bl d368382
Update occ-digital-payments.adapter.ts
anjana-bl b93aacf
Update dp-checkout-payment.service.ts
anjana-bl ee2ef38
configurable occ query params
anjana-bl c6a876c
feat: introducing feature toggle for billing address
anjana-bl 28c5ae2
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl 996c402
Add license header
github-actions[bot] c88d84b
chore: restructuring code
anjana-bl 0e13f17
chore: restructuring code
anjana-bl 9c495ef
chore: sonar issue fix + linting + unit test cases
anjana-bl 0d5e585
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl 2fff4a1
chore: unit test case + sonar issue
anjana-bl 6b793ec
chore: adding back button
anjana-bl 5a9735d
chore: unit test case
anjana-bl 81dcf6c
code changes
anjana-bl b708c2c
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl 099acf0
chore: code changes
anjana-bl cf378e1
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl 98b78f8
Update digital-payments-with-billing-address.core-e2e.cy.ts
anjana-bl e579201
Merge branch 'feature/dp-guest-checkout' of https://github.com/SAP/sp…
anjana-bl 3f88d64
Update dp-confirmation-dialog.component.ts
anjana-bl 593bddd
Update digital-payments-with-billing-address.core-e2e.cy.ts
anjana-bl cea6421
chore: unit tests
anjana-bl 5db07e5
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl 7d229d4
Update occ-digital-payments.adapter.ts
anjana-bl 6256219
Merge branch 'feature/dp-guest-checkout' of https://github.com/SAP/sp…
anjana-bl a7c3510
Merge branch 'develop' into feature/dp-guest-checkout
RadhepS c8b069e
Merge branch 'develop' into feature/dp-guest-checkout
anjana-bl File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
211 changes: 211 additions & 0 deletions
211
...out/base/components/checkout-billing-address/checkout-billing-address-form.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,211 @@ | ||
<!-- BILLING --> | ||
<div class="cx-payment-form-billing"> | ||
<div class="cx-payment-form-billing-address"> | ||
{{ 'paymentForm.billingAddress' | cxTranslate }} | ||
</div> | ||
|
||
<!-- SAME AS SHIPPING CHECKBOX --> | ||
<ng-container *ngIf="showSameAsDeliveryAddressCheckbox$ | async"> | ||
<div class="form-group"> | ||
<div class="form-check"> | ||
<label> | ||
<input | ||
type="checkbox" | ||
class="form-check-input" | ||
[checked]="sameAsDeliveryAddress" | ||
(change)="toggleSameAsDeliveryAddress()" | ||
[attr.aria-label]=" | ||
'paymentForm.billingAddressSameAsShipping' | cxTranslate | ||
" | ||
/> | ||
<span class="form-check-label">{{ | ||
'paymentForm.sameAsDeliveryAddress' | cxTranslate | ||
}}</span> | ||
</label> | ||
</div> | ||
</div> | ||
</ng-container> | ||
|
||
<!-- BILLING INFO COMPONENT --> | ||
<ng-container | ||
*ngIf=" | ||
sameAsDeliveryAddress && (deliveryAddress$ | async) as deliveryAddress; | ||
else billingAddress | ||
" | ||
> | ||
<cx-card [content]="getAddressCardContent(deliveryAddress)"></cx-card> | ||
</ng-container> | ||
|
||
<!-- TODO:#future-checkout do we really want this? We can always pass more inputs to the copied address form component to make it more modular --> | ||
<ng-template #billingAddress> | ||
<div [formGroup]="billingAddressForm"> | ||
<div class="form-group" formGroupName="country"> | ||
<ng-container *ngIf="countries$ | async as countries"> | ||
<div *ngIf="countries.length !== 0"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.country' | cxTranslate | ||
}}</span> | ||
<ng-select | ||
[inputAttrs]="{ required: 'true' }" | ||
[searchable]="true" | ||
[clearable]="false" | ||
[items]="countries" | ||
bindLabel="name" | ||
bindValue="isocode" | ||
placeholder="{{ 'addressForm.selectOne' | cxTranslate }}" | ||
(change)="countrySelected($event)" | ||
formControlName="isocode" | ||
id="country-payment-select" | ||
[cxNgSelectA11y]="{ | ||
ariaLabel: 'addressForm.country' | cxTranslate | ||
}" | ||
> | ||
</ng-select> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('country.isocode')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
</ng-container> | ||
</div> | ||
<div class="form-group"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.firstName.label' | cxTranslate | ||
}}</span> | ||
<input | ||
required="true" | ||
class="form-control" | ||
type="text" | ||
placeholder="{{ | ||
'addressForm.firstName.placeholder' | cxTranslate | ||
}}" | ||
formControlName="firstName" | ||
/> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('firstName')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
<div class="form-group"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.lastName.label' | cxTranslate | ||
}}</span> | ||
<input | ||
required="true" | ||
type="text" | ||
class="form-control" | ||
placeholder="{{ 'addressForm.lastName.placeholder' | cxTranslate }}" | ||
formControlName="lastName" | ||
/> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('lastName')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
<div class="form-group"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.address1' | cxTranslate | ||
}}</span> | ||
<input | ||
required="true" | ||
type="text" | ||
class="form-control" | ||
placeholder="{{ 'addressForm.streetAddress' | cxTranslate }}" | ||
formControlName="line1" | ||
/> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('line1')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
<div class="form-group"> | ||
<label> | ||
<span class="label-content">{{ | ||
'addressForm.address2' | cxTranslate | ||
}}</span> | ||
<input | ||
type="text" | ||
class="form-control" | ||
placeholder="{{ 'addressForm.aptSuite' | cxTranslate }}" | ||
formControlName="line2" | ||
/> | ||
</label> | ||
</div> | ||
<div class="row"> | ||
<div class="form-group col-md-6"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.city.label' | cxTranslate | ||
}}</span> | ||
<input | ||
required="true" | ||
type="text" | ||
class="form-control" | ||
placeholder="{{ 'addressForm.city.placeholder' | cxTranslate }}" | ||
formControlName="town" | ||
/> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('town')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
<div class="form-group col-md-6"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.zipCode.label' | cxTranslate | ||
}}</span> | ||
<input | ||
required="true" | ||
type="text" | ||
class="form-control" | ||
placeholder="{{ | ||
'addressForm.zipCode.placeholder' | cxTranslate | ||
}}" | ||
formControlName="postalCode" | ||
/> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('postalCode')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
<ng-container | ||
*ngIf="regions$ | async as regions" | ||
formGroupName="region" | ||
> | ||
<ng-container *ngIf="regions.length !== 0"> | ||
<div class="form-group col-md-6"> | ||
<label> | ||
<span class="label-content required">{{ | ||
'addressForm.state' | cxTranslate | ||
}}</span> | ||
<ng-select | ||
[inputAttrs]="{ required: 'true' }" | ||
class="region-select" | ||
formControlName="isocodeShort" | ||
[searchable]="true" | ||
[clearable]="false" | ||
[items]="regions" | ||
bindLabel="{{ regions[0].name ? 'name' : 'isocodeShort' }}" | ||
bindValue="{{ regions[0].name ? 'isocodeShort' : 'region' }}" | ||
placeholder="{{ 'addressForm.selectOne' | cxTranslate }}" | ||
id="region-select" | ||
[cxNgSelectA11y]="{ | ||
ariaLabel: 'addressForm.state' | cxTranslate | ||
}" | ||
> | ||
</ng-select> | ||
<cx-form-errors | ||
[control]="billingAddressForm.get('region.isocodeShort')" | ||
></cx-form-errors> | ||
</label> | ||
</div> | ||
</ng-container> | ||
</ng-container> | ||
</div> | ||
</div> | ||
</ng-template> | ||
</div> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please make sure to test this feature from a customer perspective:
![image](https://private-user-images.githubusercontent.com/34665674/339105455-66d08be9-cd29-48ec-9067-8b7fdaa3076b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE5MzU5NTQsIm5iZiI6MTcyMTkzNTY1NCwicGF0aCI6Ii8zNDY2NTY3NC8zMzkxMDU0NTUtNjZkMDhiZTktY2QyOS00OGVjLTkwNjctOGI3ZmRhYTMwNzZiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI1VDE5MjczNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI2YTM1MTM0YjdlNzExNTliNjI2MThjMjU3MjZjMWEzNWZhZDViZTBlMGQ2ZDhhNmZmMmUxYTdkMjQ0ZTZiYjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.E4EsqXWEvP9oE_sm6efj2GawNCcdtBDC5mSlQ-tgg2g)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done