Skip to content

Commit

Permalink
Asub 8384/subs profile (#2107)
Browse files Browse the repository at this point in the history 
* Bump @babel/preset-react from 7.23.3 to 7.24.1 (#2050)

Bumps [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) from 7.23.3 to 7.24.1.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-preset-react)

---
updated-dependencies:
- dependency-name: "@babel/preset-react"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Added esc event listener to useEffect (#2044)

* Added esc event listener to useEffect

---------

Co-authored-by: Malavika Koppula <[email protected]>

* Added overflow to section-title links (#2027)

* Added flex to section-title links

---------

Co-authored-by: Malavika Koppula <[email protected]>

* Bump algoliasearch from 4.23.1 to 4.23.2 (#2057)

Bumps [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) from 4.23.1 to 4.23.2.
- [Release notes](https://github.com/algolia/algoliasearch-client-javascript/releases)
- [Changelog](https://github.com/algolia/algoliasearch-client-javascript/blob/master/CHANGELOG.md)
- [Commits](algolia/algoliasearch-client-javascript@4.23.1...4.23.2)

---
updated-dependencies:
- dependency-name: algoliasearch
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump eslint-plugin-react from 7.33.2 to 7.34.1 (#2062)

Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.33.2 to 7.34.1.
- [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases)
- [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.34.1/CHANGELOG.md)
- [Commits](jsx-eslint/eslint-plugin-react@v7.33.2...v7.34.1)

---
updated-dependencies:
- dependency-name: eslint-plugin-react
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump glob from 10.3.10 to 10.3.12 (#2063)

Bumps [glob](https://github.com/isaacs/node-glob) from 10.3.10 to 10.3.12.
- [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md)
- [Commits](isaacs/node-glob@v10.3.10...v10.3.12)

---
updated-dependencies:
- dependency-name: glob
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Manual promo blocks now respect focal point (#1996)

* add focal point code and tests

* fix eslint errors

* fix formatting

* fix formatting p2

* shorten PR template based on eng sync discussions (#2065)

* ASUB-8201 Sign In with Apple (#2067)

* Sign In with Apple

* fixing linting and tests

* fixing test & linting

* fixing linting errors

* removing update from  package.json

* fixing linting errors

* disable eslint warnings

* fixing warnings

* fixing sintax

* removing keys

* removing only

* fixing linting errors

* added dd-service-catalog.yml (#2089)

* added dd-service-catalog.yml

* updated infrastructure

* ASUB-8195 Sign up with reCaptcha (#2068)

* sign up with reCaptcha

* fixing linting and tests

* fixing linting errors

* fixing linting errors

* Lokalize-translation 2.3.0 (#2092)

* lokalize-translation 2.3.0

* attending feedback

* THEMES-1066: Update Storybook to v8 (#2090)

* THEMES-1066: updated versions of storybook and chromatic to the latest.

* THEMES-1066: fixed linting errors

* THEMES-1066 adjusted configs so that storybook could build without errors.

* THEMES-1066 remove addon-knobs

* THEMES-1066: removing more deprecated packages.

* THEMES-1066: added .babelrc

* THEMES-1066: moved babel config to main.js

* version bump

* added alias overrides

* Fixed intro page

* THEMES-1066: fixed webpack/babel config

* THEMES-1066: restore babel.config.js

* THEMES-1066: restore babel.config.js

* THEMES-1066: added styling storybook addon

* THEMES-1066: updated preview to just use news.scss

* THEMES-1066: fixed breaking stories and updated news.scss.

* THEMES-1066: version bump for storybook

* THEMES-1066: corrected whitespace

* THEMES-1066: Updating option for chromatic action.

* THEMES-1066: updated stylelint to hopefully fix the UI Tests check

* THEMES-1066: removed jsx from stylelint action input.

* THEMES-1066: added env vars to chromatic action

* THEMES-1066: removing test vars from workflow file.

* add subscription profile management feature and cancel/resub flows

* address lint errors

* fix some lint issues

* update some tests

* auto fix styles lint

* fix some styles

* fix lint errors

* update tests

* add more test

* use icons from components repo

* add tests

* fix inactive sub card

* address feedback

* remove eslint disable next line

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: malavikakoppula <[email protected]>
Co-authored-by: Malavika Koppula <[email protected]>
Co-authored-by: Anna Sherman <[email protected]>
Co-authored-by: LauraPinilla <[email protected]>
Co-authored-by: blakeganderson <[email protected]>
Co-authored-by: Vito Galatro <[email protected]>
  • Loading branch information
@edwardcho1231 @dependabot
@malavikakoppula @annasherman @LauraPinilla @blakeganderson @vgalatro
8 people authored May 7, 2024
1 parent a73a3ef commit 27458c9
Show file tree
Hide file tree
Showing 21 changed files with 2,306 additions and 2 deletions.
135 changes: 135 additions & 0 deletions blocks/subscriptions-block/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,141 @@
}
}

.b-subscriptions {
&__subscription-list {
&-detail {
&-cancel-badge {
@include scss.block-components("subscriptions-subscription-list-detail-cancel-badge");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-badge");
}

&-div {
@include scss.block-components("subscriptions-subscription-list-detail-div");
@include scss.block-properties("subscriptions-subscription-list-detail-div");
}

&-title-div {
@include scss.block-components("subscriptions-subscription-list-detail-title-div");
@include scss.block-properties("subscriptions-subscription-list-detail-title-div");
}

&-title-sub-info {
@include scss.block-components("subscriptions-subscription-list-detail-title-sub-info");
@include scss.block-properties("subscriptions-subscription-list-detail-title-sub-info");
}

&-title {
@include scss.block-components("subscriptions-subscription-list-detail-title");
@include scss.block-properties("subscriptions-subscription-list-detail-title");
}

&-cancel {
@include scss.block-components("subscriptions-subscription-list-detail-cancel");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel");
}

&-subID {
@include scss.block-components("subscriptions-subscription-list-detail-subID");
@include scss.block-properties("subscriptions-subscription-list-detail-subID");
}

&-startDate {
@include scss.block-components("subscriptions-subscription-list-detail-startDate");
@include scss.block-properties("subscriptions-subscription-list-detail-startDate");
}

&-cancel-info {
&-button {
&:hover {
@include scss.block-components("subscriptions-subscription-list-detail-cancel-info-button-hover");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-info-button-hover");
}
@include scss.block-components("subscriptions-subscription-list-detail-cancel-info-button");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-info-button");
}
@include scss.block-components("subscriptions-subscription-list-detail-cancel-info");
@include scss.block-properties("subscriptions-subscription-list-detail-cancel-info");
}

&-payment-container {
@include scss.block-components("subscriptions-subscription-list-detail-payment-container");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-container");
}

&-payment-title {
@include scss.block-components("subscriptions-subscription-list-detail-payment-title");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-title");
}

&-payment-title-span {
@include scss.block-components("subscriptions-subscription-list-detail-payment-title-span");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-title-span");
}

&-payment-title-payment-info {
@include scss.block-components("subscriptions-subscription-list-detail-payment-title-payment-info");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-title-payment-info");
}

&-payment-next-bill {
@include scss.block-components("subscriptions-subscription-list-detail-payment-next-bill");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-next-bill");
}

&-payment-billing-frequency {
@include scss.block-components("subscriptions-subscription-list-detail-payment-billing-frequency");
@include scss.block-properties("subscriptions-subscription-list-detail-payment-billing-frequency");
}

&-billing {
&-subtitle {
@include scss.block-components("subscriptions-subscription-list-detail-billing-subtitle");
@include scss.block-properties("subscriptions-subscription-list-detail-billing-subtitle");
}
@include scss.block-components("subscriptions-subscription-list-detail-billing");
@include scss.block-properties("subscriptions-subscription-list-detail-billing");
}

&-inactive-sub {
&-paragraph {
@include scss.block-components("subscriptions-subscription-list-detail-inactive-sub-paragraph");
@include scss.block-properties("subscriptions-subscription-list-detail-inactive-sub-paragraph");
}
@include scss.block-components("subscriptions-subscription-list-detail-inactive-sub");
@include scss.block-properties("subscriptions-subscription-list-detail-inactive-sub");
}
}

&-card {
@include scss.block-components("subscriptions-subscription-list-card");
@include scss.block-properties("subscriptions-subscription-list-card");
}

&__overlay {
&-content {
@include scss.block-components("subscriptions-subscription-list-overlay-content");
@include scss.block-properties("subscriptions-subscription-list-overlay-content");
}
@include scss.block-components("subscriptions-subscription-list-overlay");
@include scss.block-properties("subscriptions-subscription-list-overlay");
}

&-modal {
&-title {
@include scss.block-components("subscriptions-subscription-list-modal-title");
@include scss.block-properties("subscriptions-subscription-list-modal-title");
}

&-button-div {
@include scss.block-components("subscriptions-subscription-list-modal-button-div");
@include scss.block-properties("subscriptions-subscription-list-modal-button-div");
}
@include scss.block-components("subscriptions-subscription-list-modal");
@include scss.block-properties("subscriptions-subscription-list-modal");
}
}
}

@media (min-width: 320px) and (max-width: 480px) {
.b-paywall__overlay {
inset-block-start: initial;
Expand Down
217 changes: 217 additions & 0 deletions blocks/subscriptions-block/components/PriceRates/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
import React from "react";
import { usePhrases } from "@wpmedia/arc-themes-components";

import currency from "../../utils/currency";

// billing frequency: Day, Week, Month, Year
// duration: Day, Week, Month, Year, UntilCancelled

const DAY = "Day";
const WEEK = "Week";
const MONTH = "Month";
const YEAR = "Year";
const UNTIL_CANCELLED = "UntilCancelled";

export const ratesOneTime = (billingFrequency) => {
let message;
switch (billingFrequency) {
case DAY:
message = "checkout-block.rates-oneTime-day";
break;
case WEEK:
message = "checkout-block.rates-oneTime-week";
break;
case MONTH:
message = "checkout-block.rates-oneTime-month";
break;
case YEAR:
message = "checkout-block.rates-oneTime-year";
break;
default:
message = "";
break;
}
return message;
};

export const ratesSingleUntilCancelled = (billingFrequency) => {
let message;
switch (billingFrequency) {
case DAY:
message = "checkout-block.rates-single-untilCancelled-day";
break;
case WEEK:
message = "checkout-block.rates-single-untilCancelled-week";
break;
case MONTH:
message = "checkout-block.rates-single-untilCancelled-month";
break;
case YEAR:
message = "checkout-block.rates-single-untilCancelled-year";
break;
default:
message = "";
break;
}
return message;
};

export const ratesUntilCancelled = (billingFrequency) => {
let message;
switch (billingFrequency) {
case DAY:
message = "checkout-block.rates-untilCancelled-day";
break;
case WEEK:
message = "checkout-block.rates-untilCancelled-week";
break;
case MONTH:
message = "checkout-block.rates-untilCancelled-month";
break;
case YEAR:
message = "checkout-block.rates-untilCancelled-year";
break;
default:
message = "";
break;
}
return message;
};

export const ratesDefaultMessage = (billingFrequency, duration) => {

const cases = {
[DAY]: {
[DAY]: "checkout-block.rates-default-day-day",
[WEEK]: "checkout-block.rates-default-day-week",
[MONTH]: "checkout-block.rates-default-day-month",
[YEAR]: "checkout-block.rates-default-day-year",
},
[WEEK]: {
[DAY]: "checkout-block.rates-default-week-day",
[WEEK]: "checkout-block.rates-default-week-week",
[MONTH]: "checkout-block.rates-default-week-month",
[YEAR]: "checkout-block.rates-default-week-year",
},
[MONTH]: {
[DAY]: "checkout-block.rates-default-month-day",
[WEEK]: "checkout-block.rates-default-month-week",
[MONTH]: "checkout-block.rates-default-month-month",
[YEAR]: "checkout-block.rates-default-month-year",
},
[YEAR]: {
[DAY]: "checkout-block.rates-default-year-day",
[WEEK]: "checkout-block.rates-default-year-week",
[MONTH]: "checkout-block.rates-default-year-month",
[YEAR]: "checkout-block.rates-default-year-year",
},
};

if (billingFrequency in cases) {
if (duration in cases[billingFrequency]) {
return cases[billingFrequency][duration];
}
}

return undefined;
};

const getAmount = (amount, priceCurrency) => `${currency(priceCurrency)}${amount}`;

export const PriceRate = (rate, rateCurrency) => {
const phrases = usePhrases();

const {billingCount, durationCount, billingFrequency, duration} = rate;

const amount = getAmount(rate?.amount, rateCurrency);

let rateString = "";
let fullRateString = "";

if(duration === UNTIL_CANCELLED){
if (billingCount <= 1) {
rateString = ratesSingleUntilCancelled(billingFrequency);
fullRateString = `${amount} ${rateString ? phrases.t(rateString) : ''}`;
} else {
rateString = ratesUntilCancelled(billingFrequency);
fullRateString = `${amount} ${rateString ? phrases.t(rateString, { billingCount }) : ''}`;
}
}

if (billingCount === durationCount && billingFrequency === duration) {
rateString = ratesOneTime(billingFrequency);
fullRateString = `${amount} ${rateString ? phrases.t(rateString, { billingCount }) : ''}`;
} else {
rateString = ratesDefaultMessage(
billingFrequency,
duration,
);
fullRateString = `${amount} ${rateString ? phrases.t(rateString, {billingCount, durationCount}): ''}`;
}
return fullRateString;
};

export const NextRate = ({nextRate}) => {

const phrases = usePhrases();
const {billingCount, durationCount, billingFrequency, duration} = nextRate;

let rateString = "";
let rate = "";

const getFinalString = (r) => phrases.t("subscriptions-block.subscription-profile-management-payment-method-details-billing-frequency", {rate: r})

if(duration === UNTIL_CANCELLED){
if (billingCount <= 1) {
rateString = ratesSingleUntilCancelled(billingFrequency) ?? '';
rate = `${rateString ? phrases.t(rateString) : ''}`;
return getFinalString(rate);
}
rateString = ratesUntilCancelled(billingFrequency);
rate = `${rateString ? phrases.t(rateString, { billingCount }) : ''}`;
return getFinalString(rate);
}

if (billingCount === durationCount && billingFrequency === duration) {
rateString = ratesOneTime(billingFrequency);
rate = `${rateString ? phrases.t(rateString, { billingCount }) : ''}`;
return getFinalString(rate);
}

rateString = ratesDefaultMessage(
billingFrequency,
duration,
);
rate = `${rateString ? phrases.t(rateString, {billingCount, durationCount}): ''}`;
return getFinalString(rate);

};

export const getCurrentBillingFrequency = (rate) => {
if (rate?.billingCount === rate?.durationCount && rate?.billingFrequency === rate?.duration) {
return `${ratesOneTime(rate?.billingFrequency)}`;
} if (rate?.duration === UNTIL_CANCELLED) {
if (rate?.billingCount <= 1) {
return `${ratesSingleUntilCancelled(rate?.billingFrequency)}`;
}
return `${ratesUntilCancelled(rate?.billingFrequency)}`;

}
return `${ratesDefaultMessage(
rate?.billingFrequency,
rate?.duration,
)}`;
};

const PriceRates = ({ priceRates, orderCurrency }) => {

if (priceRates && priceRates.length && currency) {
let priceRateStrings = priceRates.map((rate) => PriceRate(rate, orderCurrency));
priceRateStrings = priceRateStrings.join(", ");
return <span>{priceRateStrings}</span>;
}

return null;
};

export default PriceRates;
Loading

0 comments on commit 27458c9

Please sign in to comment.