richie 2.29.2__py2.py3-none-any.whl → 2.30.0__py2.py3-none-any.whl

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.stories.tsx

@@ -57,16 +57,7 @@ type Story = StoryObj<typeof CourseProductItem>;
 
 export const Default: Story = {};
 
-export const WithPendingOrder: Story = {
-  args: {
-    productId: 'AAA',
-    course: PacedCourseFactory({ code: 'BBB' }).one(),
-  },
-  render: (args) =>
-    render(args, { order: CredentialOrderFactory({ state: OrderState.PENDING }).one() }),
-};
-
-export const WithValidatedOrder: Story = {
+export const WithCompletedOrder: Story = {
   args: {
     productId: 'AAA',
     course: PacedCourseFactory({ code: 'BBB' }).one(),
@@ -75,7 +66,7 @@ export const WithValidatedOrder: Story = {
     const courseRunWithEnrollment = CourseRunFactory().one();
     return render(args, {
       order: CredentialOrderFactory({
-        state: OrderState.VALIDATED,
+        state: OrderState.COMPLETED,
         target_enrollments: EnrollmentFactory({
           is_active: true,
           course_run: courseRunWithEnrollment,
@@ -91,11 +82,19 @@ export const WithValidatedOrder: Story = {
   },
 };
 
-export const WithSubmittedOrder: Story = {
+export const WithPendingOrder: Story = {
   args: {
     productId: 'AAA',
     course: PacedCourseFactory({ code: 'BBB' }).one(),
   },
   render: (args) =>
-    render(args, { order: CredentialOrderFactory({ state: OrderState.SUBMITTED }).one() }),
+    render(args, { order: CredentialOrderFactory({ state: OrderState.PENDING }).one() }),
+};
+
+export const WithNoOrder: Story = {
+  args: {
+    productId: 'AAA',
+    course: PacedCourseFactory({ code: 'BBB' }).one(),
+  },
+  render: (args) => render(args),
 };

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -1,7 +1,7 @@
 import { Children, useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import c from 'classnames';
-import { ProductType, OrderState, Product, CredentialOrder } from 'types/Joanie';
+import { ProductType, Product, CredentialOrder } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -11,7 +11,6 @@ import { ProductHelper } from 'utils/ProductHelper';
 import useProductOrder from 'hooks/useProductOrder';
 import { OrderHelper } from 'utils/OrderHelper';
 import { handle } from 'utils/errors/handle';
-import { ProductSignatureHeader } from 'widgets/SyllabusCourseRunsList/components/CourseProductItem/components/ProductSignatureHeader';
 import { PacedCourse } from 'types';
 import CertificateItem from './components/CourseProductCertificateItem';
 import CourseRunItem from './components/CourseRunItem';
@@ -23,12 +22,6 @@ const messages = defineMessages({
     description: 'Message displayed when authenticated user owned the product',
     id: 'components.CourseProductItem.purchased',
   },
-  pending: {
-    defaultMessage: 'Pending',
-    description:
-      'Message displayed when authenticated user has purchased the product but order is still pending',
-    id: 'components.CourseProductItem.pending',
-  },
   loading: {
     defaultMessage: 'Loading product information...',
     description:
@@ -64,10 +57,10 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
   const intl = useIntl();
   const formatDate = useDateFormat();
 
-  // compact mode is available for product until they got a VALIDATED order.
+  // compact mode is available for product until they got an active order.
   const canShowMetadata = useMemo(() => {
-    return compact && (!order || [OrderState.SUBMITTED, OrderState.PENDING].includes(order!.state));
-  }, [compact, hasPurchased]);
+    return compact && (!order || canPurchase);
+  }, [compact, hasPurchased, canPurchase]);
 
   const [minDate, maxDate] = useMemo(() => {
     if (!canShowMetadata) return [undefined, undefined];
@@ -84,8 +77,7 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
       <div className="product-widget__header-main">
         <h3 className="product-widget__title">{product.title}</h3>
         <strong className="product-widget__price h6">
-          {order?.state === OrderState.VALIDATED && <FormattedMessage {...messages.purchased} />}
-          {order?.state === OrderState.SUBMITTED && <FormattedMessage {...messages.pending} />}
+          {hasPurchased && <FormattedMessage {...messages.purchased} />}
           {canPurchase && (
             <FormattedNumber
               currency={product.price_currency}
@@ -123,9 +115,6 @@ const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderPr
   );
 };
 const Content = ({ product, order }: { product: Product; order?: CredentialOrder }) => {
-  const needsSignature = order
-    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
-    : false;
   const targetCourses = useMemo(() => {
     if (order) {
       return order.target_courses;
@@ -140,10 +129,9 @@ const Content = ({ product, order }: { product: Product; order?: CredentialOrder
 
   return (
     <ol className="product-widget__content">
-      {needsSignature && <ProductSignatureHeader order={order} />}
       {Children.toArray(
         targetCourses.map((target_course) => (
-          <CourseRunItem targetCourse={target_course} order={order} product={product} />
+          <CourseRunItem targetCourse={target_course} order={order} />
         )),
       )}
       {product.certificate_definition && (
@@ -168,12 +156,13 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
   });
 
   const order = productOrder as CredentialOrder;
-  const canPurchase = !order || order.state === OrderState.PENDING;
-  const hasPurchased = (order && order.state === OrderState.VALIDATED) ?? false;
+  const canPurchase = OrderHelper.isPurchasable(order);
+  const hasPurchased = OrderHelper.isActive(order);
+  const canEnroll = OrderHelper.allowEnrollment(order);
 
   const hasError = Boolean(productQueryStates.error);
   const isFetching = productQueryStates.fetching || orderQueryStates.fetching;
-  const canShowContent = !compact || hasPurchased;
+  const canShowContent = !compact || canEnroll;
 
   useEffect(() => {
     if (product && product.type !== ProductType.CREDENTIAL) {

frontend/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx

@@ -2,12 +2,12 @@ import { act, fireEvent, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 
 import { faker } from '@faker-js/faker';
-import { Deferred } from 'utils/test/deferred';
-import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
+import { Deferred } from 'utils/test/deferred';
+import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { Priority } from 'types';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';

frontend/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.product.spec.tsx

@@ -1,5 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -11,12 +12,12 @@ import { render } from 'utils/test/render';
 import {
   CourseLightFactory,
   CredentialOrderFactory,
-  EnrollmentFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { ACTIVE_ORDER_STATES, PURCHASABLE_ORDER_STATES } from 'types/Joanie';
 import CourseRunItemWithEnrollment from '.';
 
 jest.mock('utils/context', () => ({
@@ -61,10 +62,9 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
 
-  it('should not render enrollment information when user is not enrolled to the course run', async () => {
+  it('should not render enrollment information when user has no order for the product', async () => {
     const course = CourseLightFactory().one();
     const product = ProductFactory().one();
-    const order = CredentialOrderFactory().one();
     const user = UserFactory().one();
     const courseRun = CourseRunFactory({
       title: 'run',
@@ -73,6 +73,39 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
       resource_link: `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}`,
     }).one();
 
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}`,
+      mockPaginatedResponse([], 0, false),
+    );
+
+    render(<CourseRunItemWithEnrollment item={courseRun} />, {
+      wrapper: BaseJoanieAppWrapper,
+      queryOptions: { client: createTestQueryClient({ user }) },
+    });
+    await expectNoSpinner();
+
+    // Only dates should be displayed.
+    screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
+    expect(fetchMock.called()).toBe(true);
+    const link = screen.queryByTitle('Go to course') as HTMLAnchorElement;
+    expect(link).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('You are enrolled in this course run')).not.toBeInTheDocument();
+  });
+
+  it('should not render enrollment information when user has no active order for the product', async () => {
+    const course = CourseLightFactory().one();
+    const product = ProductFactory().one();
+    const user = UserFactory().one();
+    const order = CredentialOrderFactory({
+      state: faker.helpers.arrayElement(PURCHASABLE_ORDER_STATES),
+    }).one();
+    const courseRun = CourseRunFactory({
+      title: 'run',
+      start: new Date('2023-01-01').toISOString(),
+      end: new Date('2023-12-31').toISOString(),
+      resource_link: `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}`,
+    }).one();
+
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}`,
       mockPaginatedResponse([order], 1, false),
@@ -84,20 +117,19 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
     });
     await expectNoSpinner();
 
-    // Only dates should have been displayed.
+    // Only dates should be displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
     expect(fetchMock.called()).toBe(true);
     const link = screen.queryByTitle('Go to course') as HTMLAnchorElement;
-    expect(link).toBeInTheDocument();
-    expect(link.href).toBe(`https://localhost/en/dashboard/courses/orders/${order.id}`);
+    expect(link).not.toBeInTheDocument();
     expect(screen.queryByLabelText('You are enrolled in this course run')).not.toBeInTheDocument();
   });
 
-  it('should render enrollment information when user is enrolled to the course run', async () => {
+  it('should render enrollment information when user has an active order for the product', async () => {
     const course = CourseLightFactory().one();
     const product = ProductFactory().one();
     const order = CredentialOrderFactory({
-      target_enrollments: EnrollmentFactory({ is_active: true }).many(1),
+      state: faker.helpers.arrayElement(ACTIVE_ORDER_STATES),
     }).one();
     const user = UserFactory().one();
     const courseRun = CourseRunFactory({
@@ -121,7 +153,6 @@ describe("CourseRunItemWithEnrollment for joanie's product's course run", () =>
       expect(screen.queryByText('loading...')).not.toBeInTheDocument();
     });
 
-    // Only dates should have been displayed.
     screen.getByText('Run, from Jan 01, 2023 to Dec 31, 2023');
     expect(fetchMock.called()).toBe(true);
 

frontend/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.tsx

@@ -8,6 +8,8 @@ import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
 import useCourseRunOrder from 'hooks/useCourseRunOrder';
 import { Spinner } from 'components/Spinner';
+import { OrderHelper } from 'utils/OrderHelper';
+import { extractResourceMetadata } from 'api/lms/joanie';
 
 const messages = defineMessages({
   goToCourse: {
@@ -33,6 +35,8 @@ type Props = {
 
 const CourseRunItemWithEnrollment = ({ item }: Props) => {
   const intl = useIntl();
+  const resourceLinkResources = extractResourceMetadata(item.resource_link);
+  const isProduct = !!(resourceLinkResources?.course && resourceLinkResources?.product);
   const {
     item: order,
     states: { isFetched },
@@ -43,14 +47,12 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
 
   const { enrollmentIsActive: courseRunEnrollmentIsActive } = useCourseEnrollment(
     item.resource_link,
-    isFetched && !order,
+    !isProduct,
   );
 
-  // user is enroll to a product if any of the product's target course have a active enrollment
-  const productEnrollmentIsActive = order?.target_enrollments.some((enrollment) => {
-    return enrollment.is_active;
-  });
-  const enrollmentIsActive = !!(courseRunEnrollmentIsActive || productEnrollmentIsActive);
+  // user is enrolled to a product if there is an active order for the product
+  const orderIsActive = OrderHelper.isActive(order);
+  const enrollmentIsActive = !!(courseRunEnrollmentIsActive || orderIsActive);
 
   if (!isFetched) {
     return <Spinner />;
@@ -58,7 +60,7 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
 
   return (
     <>
-      {enrollmentIsActive || !!order ? (
+      {enrollmentIsActive ? (
         // eslint-disable-next-line jsx-a11y/control-has-associated-label
         <a href={courseUrl} title={intl.formatMessage(messages.goToCourse)}>
           <CourseRunItem item={item} />

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.29.2",
+  "version": "2.30.0",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,75 +38,76 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.25.2",
+    "@babel/core": "7.25.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.24.8",
-    "@babel/preset-env": "7.25.3",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@faker-js/faker": "8.4.1",
-    "@formatjs/cli": "6.2.12",
-    "@formatjs/intl-relativetimeformat": "11.2.14",
+    "@babel/plugin-transform-modules-commonjs": "7.25.7",
+    "@babel/preset-env": "7.25.7",
+    "@babel/preset-react": "7.25.7",
+    "@babel/preset-typescript": "7.25.7",
+    "@faker-js/faker": "9.0.3",
+    "@formatjs/cli": "6.2.14",
+    "@formatjs/intl-relativetimeformat": "11.2.15",
     "@hookform/resolvers": "3.9.0",
     "@lyracom/embedded-form-glue": "1.4.2",
-    "@openfun/cunningham-react": "2.9.3",
+    "@openfun/cunningham-react": "2.9.4",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.26.0",
-    "@sentry/types": "8.26.0",
-    "@storybook/addon-actions": "8.2.9",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/react": "8.2.9",
-    "@storybook/react-webpack5": "8.2.9",
-    "@storybook/test": "8.2.9",
-    "@tanstack/query-core": "5.51.24",
-    "@tanstack/query-sync-storage-persister": "5.51.24",
-    "@tanstack/react-query": "5.51.24",
-    "@tanstack/react-query-persist-client": "5.51.24",
+    "@sentry/browser": "8.33.1",
+    "@sentry/types": "8.33.1",
+    "@storybook/addon-actions": "8.3.5",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-webpack5": "8.3.5",
+    "@storybook/test": "8.3.5",
+    "@tanstack/query-core": "5.59.4",
+    "@tanstack/query-sync-storage-persister": "5.59.4",
+    "@tanstack/react-query": "5.59.4",
+    "@tanstack/react-query-devtools": "5.59.4",
+    "@tanstack/react-query-persist-client": "5.59.4",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/fetch-mock": "7.3.8",
     "@types/iframe-resizer": "3.5.13",
-    "@types/jest": "29.5.12",
+    "@types/jest": "29.5.13",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.11",
     "@types/query-string": "6.3.0",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.11",
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "18.3.0",
     "@types/react-modal": "3.16.3",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.1.0",
-    "@typescript-eslint/parser": "8.1.0",
+    "@typescript-eslint/eslint-plugin": "8.8.1",
+    "@typescript-eslint/parser": "8.8.1",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.38.0",
+    "core-js": "3.38.1",
     "downshift": "9.0.8",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-import-resolver-webpack": "0.13.8",
-    "eslint-plugin-compat": "6.0.0",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-import-resolver-webpack": "0.13.9",
+    "eslint-plugin-compat": "6.0.1",
+    "eslint-plugin-formatjs": "5.0.2",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react": "7.37.1",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "0.9.0",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.0.0",
-    "i18n-iso-countries": "7.11.3",
+    "i18n-iso-countries": "7.12.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
@@ -114,25 +115,25 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.3.5",
+    "msw": "2.4.9",
     "node-fetch": ">2.6.6 <3",
-    "nodemon": "3.1.4",
+    "nodemon": "3.1.7",
     "prettier": "3.3.3",
-    "query-string": "9.1.0",
+    "query-string": "9.1.1",
     "react": "18.3.1",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.52.2",
-    "react-intl": "6.6.8",
+    "react-hook-form": "7.53.0",
+    "react-intl": "6.7.2",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.26.1",
-    "sass": "1.77.8",
+    "react-router-dom": "6.26.2",
+    "sass": "1.79.4",
     "source-map-loader": "5.0.0",
-    "storybook": "8.2.9",
+    "storybook": "8.3.5",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.5.4",
+    "typescript": "5.6.3",
     "uuid": "10.0.0",
-    "webpack": "5.93.0",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
@@ -141,7 +142,7 @@
   },
   "resolutions": {
     "@testing-library/dom": "10.4.0",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0"
   },
   "msw": {
@@ -151,7 +152,7 @@
     "node": "20.11.0"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.2.9",
+    "@storybook/addon-mdx-gfm": "8.3.5",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }

frontend/scss/colors/_theme.scss

@@ -128,6 +128,18 @@ $r-theme: (
     cta-color: r-color('firebrick6'),
     cta-border: r-color('white'),
   ),
+  compacted-banner: (
+    title-color: r-color('charcoal'),
+    title-alt-color: r-color('firebrick6'),
+    content-color: r-color('black'),
+    search-input-background: rgba(r-color('white'), 0.7),
+    search-btn-background: r-color('firebrick6'),
+    search-icon-fill: r-color('white'),
+    cta-variant-from: rgba(r-color('white'), 0.8),
+    cta-variant-to: rgba(r-color('white'), 0.8),
+    cta-color: r-color('firebrick6'),
+    cta-border: r-color('white'),
+  ),
   section-plugin: (
     title-emphased-color: r-color('firebrick6'),
   ),

frontend/scss/components/_content.scss

@@ -28,6 +28,20 @@ body {
       background-size: 100% 100%;
     }
   }
+
+  // Apply the top padding behavior with topbar over mode only on the first child which
+  // is the only variant that can be exposed to issue with topbar over
+  .compacted-banner:first-child {
+    .compacted-banner__inner {
+      @include media-breakpoint-up(lg) {
+        @if $r-topbar-height {
+          padding: $r-topbar-height 0 1rem;
+        } @else {
+          padding: 1rem 0 1rem;
+        }
+      }
+    }
+  }
 }
 
 // Container relative to some modal components

frontend/scss/components/_index.scss

@@ -1,16 +1,17 @@
 @import '../../js/components/AddressesManagement/styles';
+@import '../../js/components/CreditCardSelector/styles';
 @import '../../js/components/ContractFrame/styles';
 @import '../../js/components/Tabs/styles';
 @import '../../js/components/TeacherDashboardCourseList/styles';
 @import '../../js/components/Modal/styles';
-@import '../../js/components/PaymentButton/styles';
+@import '../../js/components/SaleTunnel/SubscriptionButton/styles';
 @import '../../js/components/PaymentScheduleGrid/styles';
 @import '../../js/components/PurchaseButton/styles';
 @import '../../js/components/SaleTunnel/styles';
 @import '../../js/components/SaleTunnel/AddressSelector/styles';
-@import '../../js/components/SaleTunnel/CreditCardSelector/styles';
 @import '../../js/components/SaleTunnel/ProductPath/styles';
 @import '../../js/components/SaleTunnel/Sponsors/SaleTunnelSponsors';
+@import '../../js/components/SaleTunnel/SaleTunnelSavePaymentMethod/styles';
 @import '../../js/components/SuccessIcon/styles';
 @import '../../js/components/WarningIcon/styles';
 @import '../../js/components/RegisteredAddress/styles';
@@ -32,6 +33,7 @@
 @import '../../js/widgets/Dashboard/components/DashboardCard/styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/Certificate/styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/Order/styles';
+@import '../../js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal/styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/Contract/_styles';
 @import '../../js/widgets/Dashboard/components/DashboardItem/styles';
 @import '../../js/widgets/Dashboard/components/DashboardLayout/styles';
@@ -59,6 +61,7 @@
 @import './templates/courses/plugins/licence_plugin';
 @import './templates/richie/section/section';
 @import './templates/richie/large_banner/large_banner';
+@import './templates/richie/large_banner/compacted_banner';
 @import './templates/richie/nesteditem/nesteditem';
 @import './templates/richie/glimpse/glimpse';