Merge pull request #5973 from mozilla/make-product-icon-bg-metadata

chore(styles): make subscription icon background configurable as metadata
2020-07-20 14:04:18 +02:00 · 2020-07-20 14:04:18 +02:00 · 96161f3775
--- a/packages/fxa-payments-server/src/components/DialogMessage/index.scss
+++ b/packages/fxa-payments-server/src/components/DialogMessage/index.scss
@ -13,6 +13,18 @@
    }
  }

+  .dialog-icon {
+    align-items: center;
+    background: #20123a;
+    border-radius: 8px;
+    display: flex;
+    height: 64px;
+    justify-content: center;
+    margin: 0 auto;
+    padding: 16px;
+    width: 64px;
+  }
+
  .reactivate-subscription-success {
    font-weight: 600;
  }
--- a/packages/fxa-payments-server/src/components/PlanDetails/index.scss
+++ b/packages/fxa-payments-server/src/components/PlanDetails/index.scss
@ -37,7 +37,7 @@

  .plan-details-logo-wrap {
    align-items: center;
-    background: #20123a; // this will need to be pulled from a source per product in future
+    background: #20123a;
    border-radius: 8px;
    display: flex;
    flex-shrink: 0;
--- a/packages/fxa-payments-server/src/components/PlanDetails/index.tsx
+++ b/packages/fxa-payments-server/src/components/PlanDetails/index.tsx
@ -37,7 +37,7 @@ export const PlanDetails = ({
    interval,
    interval_count,
  } = selectedPlan;
-  const { webIconURL } = metadataFromPlan(selectedPlan);
+  const { webIconURL, webIconBackground } = metadataFromPlan(selectedPlan);
  const productDetails = productDetailsFromPlan(
    selectedPlan,
    navigatorLanguages
@ -45,6 +45,10 @@ export const PlanDetails = ({

  const role = isMobile ? undefined : 'complementary';

+  const setWebIconBackground = webIconBackground
+    ? { background: webIconBackground }
+    : '';
+
  const planPrice = formatPlanPricing(
    amount,
    currency,
@ -64,7 +68,10 @@ export const PlanDetails = ({
        >
          <div className="plan-details-header">
            <div className="plan-details-header-wrap">
-              <div className="plan-details-logo-wrap">
+              <div
+                className="plan-details-logo-wrap"
+                style={{ ...setWebIconBackground }}
+              >
                <img
                  src={webIconURL || ffLogo}
                  alt={product_name}
@ -84,7 +91,9 @@ export const PlanDetails = ({
                    {planPrice}
                  </Localized>
                  &nbsp;&bull;&nbsp;
-                  <span className="plan-details-subtitle">{productDetails.subtitle}</span>
+                  <span className="plan-details-subtitle">
+                    {productDetails.subtitle}
+                  </span>
                </p>
              </div>
            </div>
--- a/packages/fxa-payments-server/src/lib/mock-data.tsx
+++ b/packages/fxa-payments-server/src/lib/mock-data.tsx
@ -46,6 +46,7 @@ export const SELECTED_PLAN: Plan = {
  interval_count: 1,
  product_metadata: {
    webIconURL: 'http://placekitten.com/49/49?image=2',
+    webIconBackground: 'purple',
    'product:subtitle': 'Even more keen product',
    'product:details:1': 'Quis autem vel eum iure reprehenderit',
    'product:details:2': 'Sed ut perspiciatis unde omnis iste natus',
@ -75,6 +76,7 @@ export const UPGRADE_FROM_PLAN: Plan = {
  interval_count: 1,
  product_metadata: {
    webIconURL: 'http://placekitten.com/49/49?image=9',
+    webIconBackground: 'lime',
    'product:subtitle': 'Nifty product',
    'product:details:1':
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
@ -99,6 +101,7 @@ export const PLAN = {
  interval_count: 1,
  product_metadata: {
    webIconURL: 'http://placekitten.com/512/512',
+    webIconBackground: '#00ffff',
    'product:subtitle': 'Really keen product',
    'product:details:1':
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
--- a/packages/fxa-payments-server/src/lib/test-utils.tsx
+++ b/packages/fxa-payments-server/src/lib/test-utils.tsx
@ -313,6 +313,7 @@ export const MOCK_PLANS: Plan[] = [
    product_metadata: {
      productSet: 'example_upgrade',
      webIconURL: 'http://example.com/product.jpg',
+      webIconBackground: 'purple',
    },
  },
  {
@ -326,6 +327,7 @@ export const MOCK_PLANS: Plan[] = [
    product_metadata: {
      productSet: '123done',
      webIconURL: 'http://example.com/123donepro.jpg',
+      webIconBackground: 'orange',
      'product:subtitle': '123DonePro subtitle',
    },
  },
--- a/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
@ -82,7 +82,7 @@ export const PlanDetailsCard = ({
 }) => {
  const { navigatorLanguages } = useContext(AppContext);
  const { product_name, amount, currency, interval, interval_count } = plan;
-  const { webIconURL } = metadataFromPlan(plan);
+  const { webIconURL, webIconBackground } = metadataFromPlan(plan);
  const productDetails = productDetailsFromPlan(plan, navigatorLanguages);
  const planPrice = formatPlanPricing(
    amount,
@ -91,13 +91,20 @@ export const PlanDetailsCard = ({
    interval_count
  );

+  const setWebIconBackground = webIconBackground
+    ? { background: webIconBackground }
+    : '';
+
  return (
    <div
      className={`container card plan-details-component-card plan-upgrade-details-component-card ${className}`}
    >
      <div className="plan-details-header">
        <div className="plan-details-header-wrap">
-          <div className="plan-details-logo-wrap">
+          <div
+            className="plan-details-logo-wrap"
+            style={{ ...setWebIconBackground }}
+          >
            <img
              src={webIconURL || ffLogo}
              alt={product_name}
@ -119,7 +126,8 @@ export const PlanDetailsCard = ({
                $intervalCount={interval_count}
              >
                {planPrice}
-              </Localized>&nbsp;&bull;&nbsp;
+              </Localized>
+              &nbsp;&bull;&nbsp;
              {productDetails.subtitle}
            </p>
          </div>
--- a/packages/fxa-payments-server/src/routes/Product/index.stories.tsx
+++ b/packages/fxa-payments-server/src/routes/Product/index.stories.tsx
@ -222,6 +222,7 @@ const PLANS: Plan[] = [
    interval_count: 1,
    product_metadata: {
      webIconURL: 'http://placekitten.com/512/512',
+      webIconBackground: 'linear-gradient(purple,lime)',
      'product:subtitle': 'Really keen product',
      'product:details:1':
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
--- a/packages/fxa-payments-server/src/routes/Subscriptions/Reactivate/ConfirmationDialog.tsx
+++ b/packages/fxa-payments-server/src/routes/Subscriptions/Reactivate/ConfirmationDialog.tsx
@ -24,18 +24,24 @@ export default ({
  customer: Customer;
  periodEndDate: number;
 }) => {
-  const { webIconURL } = metadataFromPlan(plan);
+  const { webIconURL, webIconBackground } = metadataFromPlan(plan);
  const { last4 } = customer;

+  const setWebIconBackground = webIconBackground
+    ? { background: webIconBackground }
+    : '';
+
  return (
    <DialogMessage onDismiss={onDismiss}>
-      <img
-        className="fpn-reactivate-subscription"
-        alt={plan.product_name}
-        src={webIconURL || fpnImage}
-        height="48"
-        width="48"
-      />
+      <div className="dialog-icon" style={{ ...setWebIconBackground }}>
+        <img
+          className="reactivate-subscription"
+          alt={plan.product_name}
+          src={webIconURL || fpnImage}
+          height="48"
+          width="48"
+        />
+      </div>
      <Localized
        id="reactivate-confirm-dialog-header"
        $name={plan.product_name}
--- a/packages/fxa-payments-server/src/routes/Subscriptions/Reactivate/SuccessDialog.tsx
+++ b/packages/fxa-payments-server/src/routes/Subscriptions/Reactivate/SuccessDialog.tsx
@ -7,18 +7,25 @@ import { Localized } from '@fluent/react';

 export default ({ plan, onDismiss }: { plan: Plan; onDismiss: () => void }) => {
  const { product_name: productName } = plan;
-  const { webIconURL } = metadataFromPlan(plan);
+  const { webIconURL, webIconBackground } = metadataFromPlan(plan);
+
+  const setWebIconBackground = webIconBackground
+    ? { background: webIconBackground }
+    : '';
+
  return (
    <DialogMessage
      onDismiss={onDismiss}
      data-testid="reactivate-subscription-success-dialog"
    >
-      <img
-        alt={productName}
-        src={webIconURL || fpnImage}
-        width="96"
-        height="96"
-      />
+      <div className="dialog-icon" style={{ ...setWebIconBackground }}>
+        <img
+          alt={productName}
+          src={webIconURL || fpnImage}
+          width="48"
+          height="48"
+        />
+      </div>
      <p
        data-testid="reactivate-subscription-success"
        className="reactivate-subscription-success"
--- a/packages/fxa-payments-server/src/store/types.tsx
+++ b/packages/fxa-payments-server/src/store/types.tsx
@ -63,6 +63,7 @@ export interface ProductMetadata {
  productOrder?: number | null;
  emailIconURL?: string | null;
  webIconURL?: string | null;
+  webIconBackground?: string | null;
  upgradeCTA?: string | null;
  downloadURL?: string | null;
  // capabilities:{clientID}: string // filtered out or ignored for now
--- a/packages/fxa-shared/subscriptions/metadata.ts
+++ b/packages/fxa-shared/subscriptions/metadata.ts
@ -39,6 +39,7 @@ export const metadataFromPlan = (plan: Plan): ProductMetadata => ({
  productOrder: null,
  emailIconURL: null,
  webIconURL: null,
+  webIconBackground: null,
  upgradeCTA: null,
  downloadURL: null,
  ...plan.product_metadata,
--- a/packages/fxa-shared/subscriptions/types.ts
+++ b/packages/fxa-shared/subscriptions/types.ts
@ -27,6 +27,7 @@ export interface ProductMetadata {
  productOrder?: number | null;
  emailIconURL?: string | null;
  webIconURL?: string | null;
+  webIconBackground?: string | null;
  upgradeCTA?: string | null;
  downloadURL?: string | null;
  // capabilities:{clientID}: string // filtered out or ignored for now
--- a/packages/fxa-shared/test/fixtures/stripe/plan1_with_product.json
+++ b/packages/fxa-shared/test/fixtures/stripe/plan1_with_product.json
@ -27,6 +27,7 @@
      "capabilities:dcdb5ae7add825d2": "123donePro,     gogogo",
      "downloadURL": "http://127.0.0.1:8080/",
      "webIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
+      "webIconBackground": "lime",
      "emailIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
      "productSet": "123done",
      "productOrder": "0"
--- a/packages/fxa-shared/test/fixtures/stripe/price1.json
+++ b/packages/fxa-shared/test/fixtures/stripe/price1.json
@ -12,6 +12,7 @@
    "capabilities:dcdb5ae7add825d2": "123donePro,     gogogo",
    "downloadURL": "http://127.0.0.1:8080/",
    "webIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
+    "webIconBackground": "lime",
    "emailIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
    "productSet": "123done",
    "productOrder": "0"
--- a/packages/fxa-shared/test/fixtures/stripe/price1_with_product.json
+++ b/packages/fxa-shared/test/fixtures/stripe/price1_with_product.json
@ -12,6 +12,7 @@
    "capabilities:dcdb5ae7add825d2": "123donePro,     gogogo",
    "downloadURL": "http://127.0.0.1:8080/",
    "webIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
+    "webIconBackground": "lime",
    "emailIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
    "productSet": "123done",
    "productOrder": "0"
@ -31,6 +32,7 @@
      "capabilities:dcdb5ae7add825d2": "123donePro,     gogogo",
      "downloadURL": "http://127.0.0.1:8080/",
      "webIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
+      "webIconBackground": "lime",
      "emailIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
      "productSet": "123done",
      "productOrder": "0"
--- a/packages/fxa-shared/test/fixtures/stripe/product1.json
+++ b/packages/fxa-shared/test/fixtures/stripe/product1.json
@ -12,6 +12,7 @@
    "capabilities:dcdb5ae7add825d2": "123donePro,     gogogo",
    "downloadURL": "http://127.0.0.1:8080/",
    "webIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
+    "webIconBackground": "lime",
    "emailIconURL": "https://123done-stage.dev.lcip.org/img/transparent-logo.png",
    "productSet": "123done",
    "productOrder": "0"
--- a/packages/fxa-shared/test/subscriptions/metadata.ts
+++ b/packages/fxa-shared/test/subscriptions/metadata.ts
@ -12,6 +12,7 @@ const NULL_METADATA = {
  productOrder: null,
  emailIconURL: null,
  webIconURL: null,
+  webIconBackground: null,
  upgradeCTA: null,
  downloadURL: null,
 };
--- a/packages/fxa-shared/test/subscriptions/stripe.ts
+++ b/packages/fxa-shared/test/subscriptions/stripe.ts
@ -79,7 +79,7 @@ function assertPrice(item?: DeepPartial<Stripe.Price>) {
    Object.keys(item?.metadata as any).filter(
      (k) => !k.startsWith('capabilities')
    ),
-    5
+    6
  );
 }