feat: add payments mode on PlanCard

shop3 · Mar 21, 2023 · b9646a9 · b9646a9
1 parent 8ce6bcc
commit b9646a9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 28 deletions.
diff --git a/src/common/PlanCard.tsx b/src/common/PlanCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Stack, Button, Icon, DisplayText, Card } from '@shopify/polaris';
-import { CircleInformationMajor, CircleTickMajor } from '@shopify/polaris-icons';
 
 type PlanCardProps = {
   name: string;
@@ -10,6 +9,8 @@ type PlanCardProps = {
   trialDays: number;
   usageCappedAmount: number;
   usageTerms: string;
+  paymentsMode: string;
+  oneTimePrice: number;
 };
 
 const PlanCard: React.FC<PlanCardProps> = ({
@@ -20,6 +21,8 @@ const PlanCard: React.FC<PlanCardProps> = ({
   trialDays,
   usageCappedAmount,
   usageTerms,
+  paymentsMode,
+  oneTimePrice,
 }) => {
   return (
     <Card>
@@ -30,31 +33,26 @@ const PlanCard: React.FC<PlanCardProps> = ({
         <Card.Section>
           <Stack vertical={true} alignment="fill">
             <Stack distribution="center">
-              <DisplayText size="extraLarge">{recurringPrice + currencyCode}</DisplayText>
+              <DisplayText size="extraLarge">{paymentsMode==="recuringPrice" ? recurringPrice + currencyCode : oneTimePrice + currencyCode}</DisplayText>
             </Stack>
             <Card.Section>
               <Stack alignment="center" distribution="center" spacing="baseTight">
-                <DisplayText size="small">{recurringInterval}</DisplayText>
-                <Icon source={CircleInformationMajor} />
+                <DisplayText size="small">{paymentsMode==="recuringPrice" ? recurringInterval : "One time purchase"}</DisplayText>
               </Stack>
             </Card.Section>
             <Button fullWidth size="large" primary>
               Buy now
             </Button>
-            <Stack distribution="center">
-              <DisplayText size="small">Free Enterprise Edition trial: {trialDays}</DisplayText>
+            <Stack vertical={true}>
+              <h5>Free Enterprise Edition trial: {trialDays}</h5>
+              {usageCappedAmount > 0 ? (
+                <h5 style={{paddingTop:-2}}>Additional charges may apply</h5>
+                ) : ( <></>)
+              }
+              <h5>{usageTerms}</h5>
             </Stack>
           </Stack>
         </Card.Section>
-        <Card.Section>
-          <DisplayText size="small">usageCappedAmount: {usageCappedAmount}</DisplayText>
-          <Card.Section>
-            <Stack alignment="center" spacing="baseTight">
-              <Icon source={CircleTickMajor} />
-              <DisplayText size="small">{usageTerms}</DisplayText>
-            </Stack>
-          </Card.Section>
-        </Card.Section>
       </Stack>
     </Card>
   );

diff --git a/stories/common/Plan.stories.tsx b/stories/common/Plan.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Page } from '@shopify/polaris';
+import { Stack, Card, Page } from '@shopify/polaris';
 
 import { PlanCard } from '../../src';
 
@@ -9,18 +9,48 @@ export default {
 };
 
 const Template = () => (
-  <Page narrowWidth>
-    <Card>
-      <PlanCard
-        name="SILVER PLAN"
-        recurringPrice={50}
-        currencyCode="USD"
-        recurringInterval="ANNUAL"
-        trialDays={7}
-        usageCappedAmount={5}
-        usageTerms="This is a silver plan"
-      />
-    </Card>
+  <Page fullWidth>
+    <Stack wrap distribution="center">
+      <Card.Section>
+        <PlanCard
+          name="SILVER PLAN"
+          recurringPrice={50}
+          currencyCode="USD"
+          recurringInterval="Every 30 days"
+          trialDays={7}
+          usageCappedAmount={5}
+          usageTerms="This is a silver plan"
+          paymentsMode='recuringPrice'
+          oneTimePrice={100}
+        />
+      </Card.Section>
+      <Card.Section>
+        <PlanCard
+          name="SILVER PLAN"
+          recurringPrice={500}
+          currencyCode="USD"
+          recurringInterval="Every year"
+          trialDays={7}
+          usageCappedAmount={5}
+          usageTerms="This is a silver plan"
+          paymentsMode='recuringPrice'
+          oneTimePrice={100}
+        />
+      </Card.Section>
+      <Card.Section>
+        <PlanCard
+          name="SILVER PLAN"
+          recurringPrice={500}
+          currencyCode="USD"
+          recurringInterval="Every year"
+          trialDays={7}
+          usageCappedAmount={0}
+          usageTerms="This is a silver plan"
+          paymentsMode='oneTimePrice'
+          oneTimePrice={700}
+        />
+      </Card.Section>
+    </Stack>
   </Page>
 );