richie-education 2.30.1-dev14 → 2.30.1-dev18

package/js/components/CourseGlimpse/utils.ts

@@ -3,14 +3,14 @@ import { generatePath } from 'react-router-dom';
 import { Course as RichieCourse, isRichieCourse } from 'types/Course';
 import {
   CourseListItem as JoanieCourse,
-  CourseProductRelation,
+  CourseProductRelationLight,
   isCourseProductRelation,
 } from 'types/Joanie';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { CourseGlimpseCourse } from '.';
 
 const getCourseGlimpsePropsFromCourseProductRelation = (
-  courseProductRelation: CourseProductRelation,
+  courseProductRelation: CourseProductRelationLight,
   intl: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
@@ -95,7 +95,7 @@ const getCourseGlimpsePropsFromJoanieCourse = (
 };
 
 export const getCourseGlimpseProps = (
-  course: RichieCourse | (JoanieCourse | CourseProductRelation),
+  course: RichieCourse | (JoanieCourse | CourseProductRelationLight),
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {

package/js/components/CourseGlimpseList/utils.ts

@@ -1,10 +1,10 @@
 import { IntlShape } from 'react-intl';
-import { CourseProductRelation, CourseListItem as JoanieCourse } from 'types/Joanie';
+import { CourseProductRelationLight, CourseListItem as JoanieCourse } from 'types/Joanie';
 import { Course as RichieCourse } from 'types/Course';
 import { CourseGlimpseCourse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 
 export const getCourseGlimpseListProps = (
-  courses: RichieCourse[] | (JoanieCourse | CourseProductRelation)[],
+  courses: RichieCourse[] | (JoanieCourse | CourseProductRelationLight)[],
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse[] => {

package/js/components/PurchaseButton/index.spec.tsx

@@ -91,6 +91,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: '00000' }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -122,6 +123,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -164,6 +166,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -207,6 +210,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -243,6 +247,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -284,6 +289,7 @@ describe('PurchaseButton', () => {
             product={product}
             disabled={false}
             course={PacedCourseFactory({ code: courseCode }).one()}
+            isWithdrawable={true}
           />
         </Wrapper>,
       );
@@ -333,7 +339,12 @@ describe('PurchaseButton', () => {
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} enrollment={enrollment} />
+          <PurchaseButton
+            product={product}
+            disabled={false}
+            enrollment={enrollment}
+            isWithdrawable={true}
+          />
         </Wrapper>,
       );
 
@@ -390,7 +401,12 @@ describe('PurchaseButton', () => {
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} enrollment={enrollment} />
+          <PurchaseButton
+            product={product}
+            disabled={false}
+            enrollment={enrollment}
+            isWithdrawable={true}
+          />
         </Wrapper>,
       );
 
@@ -428,6 +444,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -462,6 +479,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={true}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );

package/js/components/PurchaseButton/index.tsx

@@ -43,6 +43,7 @@ const messages = defineMessages({
 interface PurchaseButtonPropsBase {
   product: Joanie.CredentialProduct | Joanie.CertificateProduct;
   orderGroup?: Joanie.OrderGroup;
+  isWithdrawable: boolean;
   disabled?: boolean;
   className?: string;
   buttonProps?: ButtonProps;
@@ -67,6 +68,7 @@ const PurchaseButton = ({
   course,
   enrollment,
   orderGroup,
+  isWithdrawable,
   organizations,
   disabled = false,
   className,
@@ -141,6 +143,7 @@ const PurchaseButton = ({
         enrollment={enrollment}
         orderGroup={orderGroup}
         course={course}
+        isWithdrawable={isWithdrawable}
         onFinish={onFinish}
       />
     </>

package/js/components/SaleTunnel/SubscriptionButton/index.tsx

@@ -116,7 +116,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
-    if (!product.is_withdrawable && !hasWaivedWithdrawalRight) {
+    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight) {
       handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
       return;
     }

package/js/components/SaleTunnel/WithdrawRightCheckbox/index.tsx

@@ -19,7 +19,7 @@ const messages = defineMessages({
 
 const WithdrawRightCheckbox = () => {
   const {
-    product,
+    props: { isWithdrawable },
     registerSubmitCallback,
     unregisterSubmitCallback,
     hasWaivedWithdrawalRight,
@@ -27,8 +27,8 @@ const WithdrawRightCheckbox = () => {
   } = useSaleTunnelContext();
   const [hasErrorState, setHasError] = useState(false);
   const setError = useCallback(async () => {
-    setHasError(!product.is_withdrawable && !hasWaivedWithdrawalRight);
-  }, [hasWaivedWithdrawalRight, product.is_withdrawable]);
+    setHasError(!isWithdrawable && !hasWaivedWithdrawalRight);
+  }, [hasWaivedWithdrawalRight, isWithdrawable]);
 
   useEffect(() => {
     registerSubmitCallback('withdrawalRight', setError);
@@ -37,7 +37,7 @@ const WithdrawRightCheckbox = () => {
     };
   }, [setError]);
 
-  if (product.is_withdrawable) return null;
+  if (isWithdrawable) return null;
   return (
     <section
       className="mt-t subscription-button__waiveCheckbox"

package/js/components/SaleTunnel/index.credential.spec.tsx

@@ -53,8 +53,8 @@ describe('SaleTunnel / Credential', () => {
   let richieUser: User;
   let openApiEdxProfile: OpenEdxApiProfile;
 
-  const Wrapper = (props: Omit<SaleTunnelProps, 'isOpen' | 'onClose'>) => {
-    return <SaleTunnel {...props} isOpen={true} onClose={() => {}} />;
+  const Wrapper = (props: Omit<SaleTunnelProps, 'isWithdrawable' | 'isOpen' | 'onClose'>) => {
+    return <SaleTunnel {...props} isWithdrawable={true} isOpen={true} onClose={() => {}} />;
   };
 
   setupJoanieSession();

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -98,8 +98,12 @@ describe('SaleTunnel', () => {
      * Initialization.
      */
     const course = PacedCourseFactory().one();
-    const product = ProductFactory({ is_withdrawable: false }).one();
-    const relation = CourseProductRelationFactory({ course, product }).one();
+    const product = ProductFactory().one();
+    const relation = CourseProductRelationFactory({
+      course,
+      product,
+      is_withdrawable: false,
+    }).one();
     const paymentSchedule = PaymentInstallmentFactory().many(2);
 
     fetchMock.get(

package/js/components/SaleTunnel/index.spec.tsx

@@ -175,7 +175,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     nbApiCalls += 1; // useProductOrder call.
@@ -262,7 +262,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     nbApiCalls += 1; // useProductOrder get order with filters
@@ -337,7 +337,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -373,7 +373,7 @@ describe.each([
           overwriteRoutes: true,
         });
 
-      render(<Wrapper product={product} />, {
+      render(<Wrapper product={product} isWithdrawable={true} />, {
         queryOptions: { client: createTestQueryClient({ user: richieUser }) },
       });
 
@@ -398,7 +398,7 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -447,7 +447,7 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -455,7 +455,7 @@ describe.each([
   });
 
   it('should show a checkbox to waive withdrawal right if the product is not withdrawable', async () => {
-    const product = ProductFactory({ is_withdrawable: false }).one();
+    const product = ProductFactory().one();
     const schedule = PaymentInstallmentFactory().many(2);
     fetchMock
       .get(
@@ -467,7 +467,7 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={false} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -475,7 +475,7 @@ describe.each([
   });
 
   it('should not show a checkbox to waive withdrawal right if the product is withdrawable', async () => {
-    const product = ProductFactory({ is_withdrawable: true }).one();
+    const product = ProductFactory().one();
     const schedule = PaymentInstallmentFactory().many(2);
     fetchMock
       .get(
@@ -487,7 +487,7 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 

package/js/components/SaleTunnel/index.stories.tsx

@@ -12,6 +12,7 @@ export default {
       product: ProductFactory().one(),
       onClose: () => {},
       course: PacedCourseFactory().one(),
+      isWithdrawable: true,
       // enrollment?: Enrollment;
       // product: CredentialProduct | CertificateProduct;
       // orderGroup?: OrderGroup;

package/js/components/SaleTunnel/index.tsx

@@ -17,7 +17,7 @@ import { PacedCourse } from 'types';
 export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
   product: Product;
   organizations?: Organization[];
-
+  isWithdrawable: boolean;
   course?: PacedCourse | CourseLight;
   enrollment?: Enrollment;
   orderGroup?: OrderGroup;

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -6,7 +6,7 @@ import { CourseGlimpseList, getCourseGlimpseListProps } from 'components/CourseG
 import { Spinner } from 'components/Spinner';
 import context from 'utils/context';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { CourseListItem, CourseProductRelation } from 'types/Joanie';
+import { CourseListItem, CourseProductRelationLight } from 'types/Joanie';
 import Banner from 'components/Banner';
 
 const messages = defineMessages({
@@ -31,7 +31,7 @@ interface TeacherDashboardCourseListProps {
   titleTranslated?: string;
   organizationId?: string;
   loadMore: () => void;
-  courseAndProductList?: (CourseListItem | CourseProductRelation)[];
+  courseAndProductList?: (CourseListItem | CourseProductRelationLight)[];
   isLoadingMore?: boolean;
   hasMore?: boolean;
   isNewSearchLoading?: boolean;

package/js/hooks/useCourseProductUnion/index.ts

@@ -7,6 +7,7 @@ import {
   CourseQueryFilters,
   CourseProductRelationQueryFilters,
   ProductType,
+  CourseProductRelationLight,
 } from 'types/Joanie';
 import useUnionResource, { ResourceUnionPaginationProps } from 'hooks/useUnionResource';
 
@@ -40,7 +41,7 @@ export const useCourseProductUnion = ({
   const api = useJoanieApi();
   return useUnionResource<
     CourseListItem,
-    CourseProductRelation,
+    CourseProductRelation | CourseProductRelationLight,
     CourseQueryFilters,
     CourseProductRelationQueryFilters
   >({

package/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
-import { CourseListItem, CourseProductRelation, ProductType } from 'types/Joanie';
+import { CourseListItem, CourseProductRelationLight, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 
 const useTeacherCoursesSearch = () => {
@@ -9,7 +9,7 @@ const useTeacherCoursesSearch = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [count, setCount] = useState<Maybe<number>>(0);
   const [courseAndProductList, setCourseAndProductList] = useState<
-    (CourseListItem | CourseProductRelation)[]
+    (CourseListItem | CourseProductRelationLight)[]
   >([]);
   const [isNewSearchLoading, setIsNewSearchLoading] = useState(false);
   const query = searchParams.get('query') || undefined;

package/js/types/Joanie.ts

@@ -149,7 +149,6 @@ export interface Product {
   state: CourseState;
   instructions: Nullable<string>;
   contract_definition?: ContractDefinition;
-  is_withdrawable: boolean;
 }
 
 export interface CredentialProduct extends Product {
@@ -175,17 +174,21 @@ export interface DefinitionResourcesProduct {
   contract_definition_id: Nullable<ContractDefinition['id']>;
 }
 
-export interface CourseProductRelation {
+export interface CourseProductRelationLight {
   id: string;
   course: CourseLight;
   organizations: Organization[];
   product: Product;
   created_on: string;
+}
+
+export interface CourseProductRelation extends CourseProductRelationLight {
   order_groups: OrderGroup[];
+  is_withdrawable: boolean;
 }
 export function isCourseProductRelation(
-  entity: CourseListItem | CourseProductRelation | RichieCourse,
-): entity is CourseProductRelation {
+  entity: CourseListItem | CourseProductRelationLight | RichieCourse,
+): entity is CourseProductRelationLight {
   return 'course' in entity && 'product' in entity;
 }
 
@@ -699,7 +702,7 @@ export interface API {
       filters?: Filters,
     ): Filters extends { id: string }
       ? Promise<Nullable<CourseProductRelation>>
-      : Promise<PaginatedResponse<CourseProductRelation>>;
+      : Promise<PaginatedResponse<CourseProductRelationLight>>;
   };
   contractDefinitions: {
     previewTemplate(id: string): Promise<File>;

package/js/utils/test/factories/joanie.ts

@@ -206,7 +206,6 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     remaining_order_count: faker.number.int({ min: 1, max: 100 }),
     state: CourseStateFactory().one(),
     instructions: null,
-    is_withdrawable: true,
   };
 });
 
@@ -338,6 +337,7 @@ export const CourseProductRelationFactory = factory((): CourseProductRelation =>
     product: ProductFactory().one(),
     organizations: OrganizationFactory().many(1),
     order_groups: [],
+    is_withdrawable: true,
   };
 });
 

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.tsx

@@ -33,13 +33,14 @@ export const DashboardItemEnrollment = ({ enrollment }: DashboardItemCourseRunPr
         </div>
       </div>,
     ];
-    enrollment.product_relations.forEach(({ product }) => {
+    enrollment.product_relations.forEach(({ product, is_withdrawable }) => {
       if (isCertificateProduct(product)) {
         partialFooterList.push(
           <ProductCertificateFooter
             key={[enrollment.id, product.id].join('_')}
             product={product}
             enrollment={enrollment}
+            isWithdrawable={is_withdrawable}
           />,
         );
       }

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.spec.tsx

@@ -124,6 +124,7 @@ describe('<ProductCertificateFooter/>', () => {
               course,
             }).one(),
           }).one()}
+          isWithdrawable={true}
         />,
       );
       expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
@@ -155,6 +156,7 @@ describe('<ProductCertificateFooter/>', () => {
               course,
             }).one(),
           }).one()}
+          isWithdrawable={true}
         />,
       );
 
@@ -176,7 +178,9 @@ describe('<ProductCertificateFooter/>', () => {
       'https://joanie.endpoint/api/v1.0/certificates/FAKE_CERTIFICATE_ID/',
       CertificateFactory({ id: order.certificate_id }).one(),
     );
-    render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
     expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -193,7 +197,13 @@ describe('<ProductCertificateFooter/>', () => {
         orders: [order],
         course_run: CourseRunFactory({ course }).one(),
       }).one();
-      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      render(
+        <ProductCertificateFooter
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={true}
+        />,
+      );
       expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
       expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
     },
@@ -208,7 +218,9 @@ describe('<ProductCertificateFooter/>', () => {
       orders: [order],
       course_run: CourseRunFactory({ course }).one(),
     }).one();
-    render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
     expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
@@ -274,7 +286,13 @@ describe('<ProductCertificateFooter/>', () => {
       }).one();
       const enrollment = EnrollmentFactory({ orders: [order] }).one();
 
-      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      render(
+        <ProductCertificateFooter
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={true}
+        />,
+      );
 
       if (order.state === OrderState.PENDING) {
         // As the order is in pending state, the user should see the following message.
@@ -315,7 +333,13 @@ describe('<ProductCertificateFooter/>', () => {
 
       fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, order);
 
-      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      render(
+        <ProductCertificateFooter
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={true}
+        />,
+      );
 
       if (order.state === OrderState.NO_PAYMENT) {
         // As the order is in no_payment state, the user should see the following message.

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx

@@ -63,9 +63,14 @@ const messages = defineMessages({
 export interface ProductCertificateFooterProps {
   product: CertificateProduct;
   enrollment: Enrollment;
+  isWithdrawable: boolean;
 }
 
-const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFooterProps) => {
+const ProductCertificateFooter = ({
+  product,
+  enrollment,
+  isWithdrawable,
+}: ProductCertificateFooterProps) => {
   const [order, setOrder] = useState(
     OrderHelper.getActiveEnrollmentOrder(enrollment.orders || [], product.id),
   );
@@ -103,6 +108,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
         className="dashboard-item__button"
         product={product}
         enrollment={enrollment}
+        isWithdrawable={isWithdrawable}
         buttonProps={{ size: 'small' }}
         disabled={!isPurchasable}
         onFinish={(o) => {

package/js/widgets/Dashboard/components/DashboardItem/Order/Installment/index.tsx

@@ -119,6 +119,7 @@ const PaymentMethodManager = ({ order }: Props) => {
         {...modal}
         product={relation.product as CredentialProduct}
         course={relation.course}
+        isWithdrawable={relation.is_withdrawable}
       />
     </>
   );

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/CourseProductItemFooter/index.tsx

@@ -43,6 +43,7 @@ const CourseProductItemFooter = ({
         course={course}
         product={courseProductRelation.product as CredentialProduct}
         organizations={courseProductRelation.organizations}
+        isWithdrawable={courseProductRelation.is_withdrawable}
         disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
@@ -61,6 +62,7 @@ const CourseProductItemFooter = ({
         course={course}
         product={courseProductRelation.product as CredentialProduct}
         organizations={courseProductRelation.organizations}
+        isWithdrawable={courseProductRelation.is_withdrawable}
         disabled={!canPurchase}
         orderGroup={orderGroup}
         buttonProps={{ fullWidth: true }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.1-dev14",
+  "version": "2.30.1-dev18",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -148,7 +148,8 @@
     "workerDirectory": "../richie/static/richie/js"
   },
   "volta": {
-    "node": "20.11.0"
+    "node": "20.11.0",
+    "yarn": "1.22.22"
   },
   "devDependencies": {
     "@storybook/addon-mdx-gfm": "8.3.6",

package/scss/components/templates/richie/_multiple-columns.scss

@@ -23,11 +23,6 @@
     padding: 1rem;
   }
 
-  // Impose tiny horizontal padding to every section row
-  .section__row {
-    padding: $cell-gutter;
-  }
-
   // ----------
   // Shared base adjustments for short columns (25+33+50)
   // ----------
@@ -117,6 +112,8 @@
   // ----------
   &__w25 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 25%);
     }
@@ -169,6 +166,8 @@
   // ----------
   &__w33 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 33.3333%);
     }
@@ -193,6 +192,8 @@
   // ----------
   &__w50 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 50%);
     }
@@ -268,6 +269,8 @@
   // ----------
   &__w75 {
     @include sv-flex(1, 0, 100%);
+    padding: $cell-gutter;
+
     @include media-breakpoint-up(lg) {
       @include sv-flex(1, 0, 75%);
     }