Merge pull request #46 from 8848digital/fv15_pre-prod

feat: update frappe v15 oct 23 to dec 10

.gitignore

@@ -192,3 +192,8 @@ cypress/videos
 
 # JetBrains IDEs
 .idea/
+
+# frappecloud billing
+billing/node_modules
+frappe/public/billing
+frappe/www/billing.html

README.md

@@ -14,36 +14,20 @@
 </div>
 
 <div align="center">
-	<a target="_blank" href="#LICENSE" title="License: MIT">
-		<img src="https://img.shields.io/badge/License-MIT-success.svg">
-	</a>
-	<a target="_blank" href="https://www.python.org/downloads/" title="Python version">
-		<img src="https://img.shields.io/badge/python-%3E=_3.10-success.svg">
-	</a>
-	<a href="https://frappeframework.com/docs">
-		<img src="https://img.shields.io/badge/docs-%F0%9F%93%96-success.svg"/>
-	</a>
-	<a href="https://github.com/frappe/frappe/actions/workflows/server-tests.yml">
-		<img src="https://github.com/frappe/frappe/actions/workflows/server-tests.yml/badge.svg">
-	</a>
-	<a href="https://github.com/frappe/frappe/actions/workflows/ui-tests.yml">
-		<img src="https://github.com/frappe/frappe/actions/workflows/ui-tests.yml/badge.svg?branch=develop">
-	</a>
-	<a href="https://codecov.io/gh/frappe/frappe">
-		<img src="https://codecov.io/gh/frappe/frappe/branch/develop/graph/badge.svg?token=XoTa679hIj"/>
-	</a>
+	<a target="_blank" href="#LICENSE" title="License: MIT"><img src="https://img.shields.io/badge/License-MIT-success.svg"></a>
+	<a target="_blank" href="https://www.python.org/downloads/" title="Python version"><img src="https://img.shields.io/badge/python-%3E=_3.10-success.svg"></a>
+	<a href="https://frappeframework.com/docs"><img src="https://img.shields.io/badge/docs-%F0%9F%93%96-success.svg"/></a>
+	<a href="https://github.com/frappe/frappe/actions/workflows/server-tests.yml"><img src="https://github.com/frappe/frappe/actions/workflows/server-tests.yml/badge.svg"></a>
+	<a href="https://github.com/frappe/frappe/actions/workflows/ui-tests.yml"><img src="https://github.com/frappe/frappe/actions/workflows/ui-tests.yml/badge.svg?branch=develop"></a>
+	<a href="https://codecov.io/gh/frappe/frappe"><img src="https://codecov.io/gh/frappe/frappe/branch/develop/graph/badge.svg?token=XoTa679hIj"/></a>
 </div>
 
 
 Full-stack web application framework that uses Python and MariaDB on the server side and a tightly integrated client side library. Built for [ERPNext](https://erpnext.com).
 
 <div align="center" style="max-height: 40px;">
-	<a href="https://frappecloud.com/frappe/signup">
-		<img src=".github/try-on-f-cloud-button.svg" height="40">
-	</a>
-	<a href="https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/gavindsouza/install-scripts/main/frappe/pwd.yml">
-		<img src="https://raw.githubusercontent.com/play-with-docker/stacks/master/assets/images/button.png" alt="Try in PWD" height="37"/>
-	</a>
+	<a href="https://frappecloud.com/frappe/signup"><img src=".github/try-on-f-cloud-button.svg" height="40"></a>
+	<a href="https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/gavindsouza/install-scripts/main/frappe/pwd.yml"><img src="https://raw.githubusercontent.com/play-with-docker/stacks/master/assets/images/button.png" alt="Try in PWD" height="37"/></a>
 </div>
 
 > Login for the PWD site: (username: Administrator, password: admin)

billing/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

billing/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

billing/README.md

@@ -0,0 +1,27 @@
+# Frappe Cloud Billing
+
+Billing page is built to manage the billing of both desk based (ERPNext, HRMS) and portal based apps (Frappe CRM, Insights, Gameplan, Builder etc.)
+
+> Billing page is only built for sites hosted on Frappe Cloud.
+
+## Features
+
+- **Current Plan**: View the current plan of the site.
+- **Manage Subscription**: Upgrade, downgrade your subscription plan.
+- **Plans & Pricing**: View and compare all the available plans and decide which one is best for you.
+- **Billing History**: View your billing history and download invoices.
+- **Prepaid Credits**: Add prepaid credits to your account to pay for your subscription.
+- **Payment Methods**: Add, remove your payment methods (Credit Card, Debit Card) and set a default payment method.
+- **Billing Address**: Add/Update your billing address.
+
+## Usage
+
+1. Go to Billing Overview page typing `/billing` in the URL. You can also access it from your app installed on the site.
+2. Billing Overview page will open with the current plan details and other options.
+3. Click on the `Upgrade plan` button to upgrade or downgrade your subscription plan.
+4. It will redirect you to the `Plans` page where you can select the plan you want to subscribe to.
+5. Click on the `Upgrade` or `Downgrade` button to confirm the subscription.
+6. Before confirming the subscription, you should add prepaid credits to your account to pay for the subscription or you can add a payment method. Check `Payment details` section in the `Billing Overview` page to add prepaid credits or select payment method.
+7. Once you have added prepaid credits or payment method, you can confirm the subscription.
+8. You can view your billing history and download invoices from the `Invoices` page.
+9. You can add, remove payment methods and set a default payment method from the `Cards` page.

billing/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html class="h-full" lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, viewport-fit=cover maximum-scale=1.0, user-scalable=no"
+		/>
+		<title>Billing</title>
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-title" content="Billing" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="white" />
+	</head>
+	<body class="sm:overscroll-y-none no-scrollbar">
+		<div id="app" class="h-full"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>

billing/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "billing-ui",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base=/assets/frappe/billing/ && yarn copy-html-entry",
+    "copy-html-entry": "cp ../frappe/public/billing/index.html ../frappe/www/billing.html",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@stripe/stripe-js": "^1.3.0",
+    "@vueuse/core": "^11.2.0",
+    "frappe-ui": "^v0.1.72",
+    "tailwindcss": "^3.3.3",
+    "vite": "^4.4.9",
+    "vue": "^3.4.12",
+    "vue-router": "^4.2.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.5"
+  }
+}

billing/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

billing/src/App.vue

@@ -0,0 +1,40 @@
+<template>
+	<div v-if="isFCSite.data && user.name" class="flex h-screen w-screen">
+		<div class="h-full border-r bg-gray-50">
+			<AppSidebar />
+		</div>
+		<div class="flex-1 flex flex-col h-full overflow-x-hidden">
+			<router-view />
+		</div>
+		<Dialogs />
+		<Toasts />
+	</div>
+	<PageNotFound v-else />
+</template>
+
+<script setup>
+import PageNotFound from './pages/PageNotFound.vue'
+import AppSidebar from '@/components/AppSidebar.vue'
+import { Dialogs } from '@/dialogs.js'
+import { getSession } from '@/session.js'
+import { Toasts, createResource } from 'frappe-ui'
+import { provide } from 'vue'
+
+const { isFCSite, user } = getSession()
+
+const team = createResource({
+	url: 'frappe.integrations.frappe_providers.frappecloud_billing.api',
+	params: { method: 'team.info' },
+	cache: 'team',
+	auto: true,
+})
+
+const currentSiteInfo = createResource({
+	url: 'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',
+	auto: true,
+	cache: 'currentSiteInfo',
+})
+
+provide('team', team)
+provide('currentSiteInfo', currentSiteInfo)
+</script>

billing/src/assets/Inter/inter.css

@@ -0,0 +1,152 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.12") format("woff2"),
+       url("Inter-Thin.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.12") format("woff2"),
+       url("Inter-Light.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.12") format("woff2"),
+       url("Inter-Regular.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.12") format("woff2"),
+       url("Inter-Italic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.12") format("woff2"),
+       url("Inter-Medium.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.12") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.12") format("woff2"),
+       url("Inter-Bold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.12") format("woff2"),
+       url("Inter-Black.woff?v=3.12") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.12") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.12") format("woff");
+}

billing/src/components/AddCardModal.vue

@@ -0,0 +1,32 @@
+<template>
+	<Dialog v-model="show" :options="{ title: 'Add new card' }">
+		<template #body-content>
+			<div v-if="showMessage" class="inline-flex gap-1.5 text-base mb-5 text-gray-700">
+				<FeatherIcon class="h-4" name="info" />
+				<span> Add at least one card before changing the payment mode. </span>
+			</div>
+			<CardForm
+				@success="
+					() => {
+						show = false
+						emit('success')
+					}
+				"
+			/>
+		</template>
+	</Dialog>
+</template>
+<script setup>
+import CardForm from './CardForm.vue'
+import { Dialog, FeatherIcon } from 'frappe-ui'
+
+const props = defineProps({
+	showMessage: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['success'])
+const show = defineModel()
+</script>