-
Notifications
You must be signed in to change notification settings - Fork 212
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
fix(libs): Add Coupon component
- Loading branch information
Showing
21 changed files
with
373 additions
and
50 deletions.
There are no files selected for viewing
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
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
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
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
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
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
34 changes: 34 additions & 0 deletions
34
libs/payments/ui/src/lib/client/components/BaseButton/index.tsx
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,34 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| export enum ButtonVariant { | ||
| Primary, | ||
| Secondary, | ||
| } | ||
|
|
||
| interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| children: React.ReactNode; | ||
| variant?: ButtonVariant; | ||
| } | ||
|
|
||
| export function BaseButton({ children, variant, ...props }: ButtonProps) { | ||
| let variantStyles = ''; | ||
| switch (variant) { | ||
| case ButtonVariant.Primary: | ||
| variantStyles = 'bg-blue-500 hover:bg-blue-700 text-white'; | ||
| break; | ||
| case ButtonVariant.Secondary: | ||
| variantStyles = 'bg-grey-100 hover:bg-grey-200 text-black'; | ||
| break; | ||
| } | ||
|
|
||
| return ( | ||
| <button | ||
| {...props} | ||
| className={`flex items-center justify-center font-semibold h-12 rounded-md p-4 z-10 aria-disabled:relative aria-disabled:after:absolute aria-disabled:after:content-[''] aria-disabled:after:top-0 aria-disabled:after:left-0 aria-disabled:after:w-full aria-disabled:after:h-full aria-disabled:after:bg-white aria-disabled:after:opacity-50 aria-disabled:after:z-30 aria-disabled:border-none ${props.className} ${variantStyles}`} | ||
| > | ||
| {children} | ||
| </button> | ||
| ); | ||
| } |
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
13 changes: 13 additions & 0 deletions
13
libs/payments/ui/src/lib/client/components/CouponForm/en.ftl
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,13 @@ | ||
| ## Component - CouponForm | ||
|
|
||
| next-coupon-enter-code = | ||
| .placeholder = Enter Code | ||
| # Title of container where a user can input a coupon code to get a discount on a subscription. | ||
| next-coupon-promo-code = Promo Code | ||
| # Title of container showing discount coupon code applied to a subscription. | ||
| next-coupon-promo-code-applied = Promo Code Applied | ||
| next-coupon-remove = Remove | ||
| next-coupon-submit = Apply |
155 changes: 155 additions & 0 deletions
155
libs/payments/ui/src/lib/client/components/CouponForm/index.tsx
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,155 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| 'use client'; | ||
|
|
||
| import { Localized } from '@fluent/react'; | ||
| import { ButtonVariant } from '../BaseButton'; | ||
| import { SubmitButton } from '../SubmitButton'; | ||
| import { updateCartAction } from '../../../actions/updateCart'; | ||
| import { getFallbackTextByFluentId } from '../../../utils/error-ftl-messages'; | ||
|
|
||
| interface WithCouponProps { | ||
| cartId: string; | ||
| cartVersion: number; | ||
| couponCode: string; | ||
| readOnly: boolean; | ||
| } | ||
| const WithCoupon = ({ | ||
| cartId, | ||
| cartVersion, | ||
| couponCode, | ||
| readOnly, | ||
| }: WithCouponProps) => { | ||
| async function removeCoupon() { | ||
| await updateCartAction(cartId, cartVersion, { couponCode: '' }); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <h2 className="m-0 mb-4 font-semibold text-grey-600"> | ||
| <Localized id="next-coupon-promo-code-applied"> | ||
| Promo Code Applied | ||
| </Localized> | ||
| </h2> | ||
|
|
||
| <form | ||
| action={removeCoupon} | ||
| className="flex gap-4 justify-between items-center" | ||
| data-testid="coupon-hascoupon" | ||
| > | ||
| <span className="break-all">{couponCode}</span> | ||
| {readOnly ? null : ( | ||
| <span> | ||
| <SubmitButton | ||
| className="w-24" | ||
| variant={ButtonVariant.Secondary} | ||
| data-testid="coupon-remove-button" | ||
| > | ||
| <Localized id="next-coupon-remove">Remove</Localized> | ||
| </SubmitButton> | ||
| </span> | ||
| )} | ||
| </form> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| interface WithoutCouponProps { | ||
| cartId: string; | ||
| cartVersion: number; | ||
| readOnly: boolean; | ||
| } | ||
|
|
||
| const WithoutCoupon = ({ | ||
| cartId, | ||
| cartVersion, | ||
| readOnly, | ||
| }: WithoutCouponProps) => { | ||
| async function applyCoupon(formData: FormData) { | ||
| const promotionCode = formData.get('coupon') as string; | ||
|
|
||
| await updateCartAction(cartId, cartVersion, { | ||
| couponCode: promotionCode, | ||
| }); | ||
| } | ||
|
|
||
| const error = null; | ||
|
|
||
| return ( | ||
| <> | ||
| <h2 className="m-0 mb-4 font-semibold text-grey-600"> | ||
| <Localized id="next-coupon-promo-code">Promo Code</Localized> | ||
| </h2> | ||
|
|
||
| <form action={applyCoupon} data-testid="coupon-form"> | ||
| <div className="flex gap-4 justify-between items-center"> | ||
| <Localized attrs={{ placeholder: true }} id="next-coupon-enter-code"> | ||
| <input | ||
| className="w-full border rounded-md border-black/30 p-3 placeholder:text-grey-500 placeholder:font-normal focus:border focus:!border-black/30 focus:!shadow-[0_0_0_3px_rgba(10,132,255,0.3)] focus-visible:outline-none data-[invalid=true]:border-alert-red data-[invalid=true]:text-alert-red data-[invalid=true]:shadow-inputError" | ||
| type="text" | ||
| name="coupon" | ||
| data-testid="coupon-input" | ||
| placeholder="Enter code" | ||
| disabled={readOnly} | ||
| /> | ||
| </Localized> | ||
| <div> | ||
| <SubmitButton | ||
| className="w-20" | ||
| variant={ButtonVariant.Primary} | ||
| type="submit" | ||
| data-testid="coupon-button" | ||
| disabled={readOnly} | ||
| > | ||
| <Localized id="next-coupon-submit">Apply</Localized> | ||
| </SubmitButton> | ||
| </div> | ||
| </div> | ||
|
|
||
| {error && ( | ||
| <div className="text-red-700 mt-4" data-testid="coupon-error"> | ||
| <Localized id={error}>{getFallbackTextByFluentId(error)}</Localized> | ||
| </div> | ||
| )} | ||
| </form> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| interface CouponFormProps { | ||
| cartId: string; | ||
| cartVersion: number; | ||
| promoCode: string | null; | ||
| readOnly: boolean; | ||
| } | ||
|
|
||
| export function CouponForm({ | ||
| cartId, | ||
| cartVersion, | ||
| promoCode, | ||
| readOnly, | ||
| }: CouponFormProps) { | ||
| const hasCouponCode = !!promoCode; | ||
| return ( | ||
| <div className="bg-white rounded-b-lg shadow-sm shadow-grey-300 mt-6 p-4 rounded-t-lg text-base tablet:my-8"> | ||
| {hasCouponCode ? ( | ||
| <WithCoupon | ||
| cartId={cartId} | ||
| cartVersion={cartVersion} | ||
| couponCode={promoCode} | ||
| readOnly={readOnly} | ||
| /> | ||
| ) : ( | ||
| <WithoutCoupon | ||
| cartId={cartId} | ||
| cartVersion={cartVersion} | ||
| readOnly={readOnly} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default CouponForm; |
18 changes: 0 additions & 18 deletions
18
libs/payments/ui/src/lib/client/components/PrimaryButton.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.