@bigbinary/neeto-payments-frontend 1.3.8 → 1.3.10

package/README.md

@@ -1,258 +1,40 @@
 # neeto-payments-nano
-
-- [Engine and package installation](./docs/engine-and-package-installation.md)
-- [Building and releasing](./docs/building-and-releasing.md)
-
-## Integrations
-
-|   Project    |     Integrated     |
-| :----------: | :----------------: |
-|   neetoCal   | :white_check_mark: |
-| neetoInvoice | :white_check_mark: |
-| neetoCourse  |        :x:         |
-|  neetoForm   |        :x:         |
-
-## @bigbinary/neeto-payments-frontend
-
-![npm](https://img.shields.io/npm/v/@bigbinary/neeto-payments-frontend?color=greenyellow)
-![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-payments-frontend?color=greenyellow)
-
-neetoPayments is the library that manages payments across neeto products.
+The `neeto-payments-nano` manages payments across neeto products. The nano exports the `@bigbinary/neeto-payments-frontend` NPM package and `neeto-payments-engine` Rails engine for development.
+
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+        - [Installation](#installation)
+        - [Usage](#usage)
+    - [Frontend package](#frontend-package)
+        - [Installation](#installation-1)
+        - [Components](#components)
+        - [Hooks](#hooks)
+        - [Functions](#functions)
+2. [Instructions for Publishing](#instructions-for-publishing)
+
+# Development with Host Application
+## Engine
+The engine is used to manage payments across neeto products.
 
 ### Installation
+1. Add this line to your application's Gemfile:
+    ```ruby
+    source "NEETO_GEM_SERVER_URL" do
+       # ..existing gems
 
-1.  **neetoPayments** has a few peer dependencies that are required for the
-    proper functioning of the package. Install all the peer dependencies using
-    the below command:
-
-    ```zsh
-    yarn add @bigbinary/neeto-commons-frontend@2.0.54 @bigbinary/neeto-filters-frontend@2.8.1 @bigbinary/neeto-icons@1.9.22 @bigbinary/neeto-molecules@1.0.9 @bigbinary/neetoui@4.4.10 @honeybadger-io/js@5.1.1 @honeybadger-io/react@5.1.3 axios@1.3.4 classnames@2.3.2 formik@2.2.9 js-logger@1.6.1 mixpanel-browser@2.45.0 ramda@0.28.0 react-helmet@6.1.0 react-query@3.39.3 react-router-dom@5.3.4 react-toastify@8.2.0 yup@1.0.2
+       gem 'neeto-payments-engine'
+    end
     ```
-
-2.  Now install the latest **neetoPayments** package using the below command:
-
+2. And then execute:
     ```zsh
-    yarn add @bigbinary/neeto-payments-frontend
+    bundle install
+    ```
+3. Add this line to your application's `config/routes.rb` file:
+    ```ruby
+    mount NeetoPaymentsEngine::Engine, at: '/payments'
     ```
-
-### Usage
-
-neeto-payments-frontend exports:
-
-- `Dashboard` component
-- `buildStripeTransactionLink()` function
-- `useStripePromise()` hook
-
-#### 1. `Dashboard` component
-
-##### Props
-
-1. **holdableId**: To specify the ID of the entity that holds the stripe
-   account. This is an optional prop. If the value is not specified, the current
-   organization ID is taken as the default value while querying for
-   transactions.
-
-2. **payableEntityColumns**: To specify the columns from the payable entity
-   which need to be additionally displayed. It is an optional prop that defaults
-   to `[]` if not specified.
-
-3. **searchProps**: To specify the properties of the search bar in `Dashboard`.
-
-4. **tabs**: To specify the tabs to be displayed in the payments dashboard. It
-   is an optional parameter.
-
-5. **headerProps**: To specify the props to be passed to the neetoUI `Header`
-   component used in the `Dashboard`.
-
-**More about `payableEntityColumns`**
-
-Here is an example of `payableEntityColumns` prop:
-
-```js
-const payableEntityColumns = [
-  {
-    title: t("entity.meeting"),
-    dataIndex: "payable",
-    key: "meeting",
-    ellipsis: true,
-    width: 150,
-    render: renderMeeting,
-    isFilterable: true,
-    filterProps: {
-      key: "meeting",
-      label: "Meeting",
-      node: "bookings:payable.meeting.name",
-      type: "multi_option",
-      model: "Meeting",
-    },
-  },
-  {
-    title: t("common.host"),
-    dataIndex: ["payable", "host"],
-    key: "host",
-    ellipsis: true,
-    width: 150,
-    isFilterable: true,
-    filterProps: {
-      key: "host",
-      label: "Host",
-      node: "bookings:payable.user.first_name,last_name",
-      model: "User",
-      type: "multi_option",
-    },
-  },
-];
-```
-
-The `payableEntityColumns` is similar to `columnData` prop used in `Table`
-component in **NeetoUI**. The prop can be modified accordingly to customize the
-columns in the table. For more customizations, refer
-[NeetoUI docs](https://neeto-ui.neeto.com/?path=/docs/components-table--default).
-
-The additional keys are `isFilterable` and `filterProps`. `filterProps` is used
-to build the list of columns to be represented in the filters pane. The
-`isFilterable` key must be `true` for `filterProps` to be considered.
-
-> :memo: **Note:** The data about the payable entity is in the format
-> `{ payable: {...} }`. So the `dataIndex` key must be used accordingly. Refer
-> the example above.
-
-> In the case of columns with filter type as `single_option` or `multi_option`,
-> `values` key can be passed along with `filterProps`.
-
-**More about `searchProps` prop**
-
-Here is an example of `searchProps` prop:
-
-```js
-const searchProps = {
-  key: "keyword",
-  node: "bookings:payable.meeting.name,bookings:payable.user.first_name,last_name,bookings:payable.name",
-  model: "Meeting,User,Booking",
-  placeholder: "Search by meeting name, user name or booking name",
-};
-```
-
-This is passed to the `FiltersBar` and `FiltersPane` components from
-`neeto-filters-frontend`. This is similar to the `keyword` prop used in
-`neeto-filters-frontend` with an additional `placeholder` key which is used as
-the placeholder in the search bar.
-
-To know more about the working of `node` and `model` keys, refer the
-[`neeto-filters-frontend` documentation](https://github.com/bigbinary/neeto-filters-frontend/blob/main/README.md).
-
-**More about `tabs` prop**
-
-`tabs` is an array of strings. It has default value as this:
-`["all", "successful", "pending", "declined", "refunded"]`.It should only be a
-subset of the array above. Preferably it shouldn't be an empty array.
-
-#### 2. `buildStripeTransactionLink` function
-
-This function is used to generate the stripe transaction link from a payment
-identifier.
-
-The arguments are:
-
-1. `identifier`: The payment identifier
-2. `isLive`: Specifying whether or not the environment is live. It defaults to
-   `true`.
-
-Example usage
-
-```js
-const transactionLink = buildStripeTransactionLink(
-  "pi_3MqWX92fKivMPpZ11EPmOBBR",
-  false
-);
-```
-
-#### 3. `useStripePromise` hook
-
-This hook is used to generate the `stripePromise` object to be passed to the
-stripe `<Elements>` context. The `useStripePromise` hook takes a stripe account
-identifier as input and returns a `Promise`.
-
-> :memo: **Note:** `STRIPE_PUBLISHABLE_KEY` environment variable must be present
-> for this hook to work.
-
-Example usage
-
-```js
-  const stripeAccountIdentifier = "acct_1Mtqtz2e5McIywz4";
-  const stripePromise = useStripePromise(stripeAccountIdentifier);
-  ...
-  <Elements stripe={stripePromise}>
-    <CardElement />
-  </Elements>
-
-```
-
-#### 4. `PaymentKindRestrictionAlert` component
-
-##### Props
-
-1. **isOpen**: To specify whether the Stripe connect restriction alert should be
-   opened or closed.
-
-2. **paymentKind**: To specify the type of Stripe payment kind for rendering
-   related content to alert either as "standard" or "platform". If Stripe
-   Standard is connected the alert shall forbid Stripe Platform connect and vice
-   versa.
-
-3. **onClose**: Handler function that is triggered when the disconnect button is
-   clicked.
-
-Example usage
-
-```js
-<PaymentKindRestrictionAlert
-  isOpen={isStripePlatformConnectedAlertOpen}
-  paymentKind="standard"
-  onClose={() => setIsStripePlatformConnectedAlertOpen(false)}
-/>
-```
-
-## neetoPaymentsEngine
-
-neeto-payments-engine is a Rails engine that manages payment across the neeto
-products. It offers the following features to the users.
-
-- Integrate payment gateway account.
-- To set a charge for a service.
-- Collect the charge from End-User.
-- Refund amount collected by value or percentage.
-
-Currently, the engine only supports [Stripe](https://stripe.com) payment gateway
-integration from the following countries _Australia, Austria, Belgium, Canada,
-Cyprus, Estonia, Finland, France, Germany, Gibraltar, Greece, Iceland, India,
-Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Portugal, Slovakia,
-Slovenia, Spain, United Kingdom, United States_. International transfers are not
-possible for Indian business Stripe accounts.
-
-### Installation
-
-1. Add this line to your application's Gemfile:
-
-   ```ruby
-   gem 'neeto-payments-engine', git: 'https://github.com/bigbinary/neeto-payments-engine.git', branch: 'stable'
-   ```
-
-2. And then execute:
-
-   ```shell
-   bundle install
-   ```
-
-3. Add this line to your application's `config/routes.rb` file (replace `at` to
-   your desired route):
-
-   ```ruby
-   mount NeetoPaymentsEngine::Engine, at: '/payments'
-   ```
-
 4. Configure the following environment variables.
-
    ```yaml
    APP_URL=#Application URL
    STRIPE_PUBLISHABLE_KEY='pk_test_fnFiGXjRkMXnLkueiNKJidGU00V83aRC0V'
@@ -262,9 +44,7 @@ possible for Indian business Stripe accounts.
    NB: Replace `APP_URL` environment variable value with the host application's
    base URL without a trailing slash for example: `https://app.neetocal.net`.
    Stripe environment variables values are `test` mode keys.
-
 5. Run the following command to subscribe Stripe webhooks events.
-
    ```shell
    bundle exec rails neeto_payments_engine:stripe:webhooks:subscribe
    ```
@@ -287,9 +67,7 @@ possible for Indian business Stripe accounts.
        ]
      ```
    - Add the returned environment variable and its value.
-
 6. Add the following secret values to `config/secrets.yml`.
-
    ```yaml
    host: <%= ENV['APP_URL'] || ENV['HEROKU_APP_URL'] %>
    stripe:
@@ -298,21 +76,17 @@ possible for Indian business Stripe accounts.
      webhooks:
        secret: <%= ENV['STRIPE_WEBHOOK_SECRET'] %>
    ```
-
 7. Add the following line to application's
    `config/initializer/neeto_payments_engine.rb` file. Replace the
    `holdable_class` value with a model name where you want to associate your
    Stripe account in the host application.
-
    ```ruby
-    NeetoPaymentsEngine.holdable_class = "Organization"
+   NeetoPaymentsEngine.holdable_class = "Organization"
    ```
-
 8. Add the following association to the model you defined as holdable_class in
-   step 6.
-
+   step 7.
    ```ruby
-    has_one :stripe_integration, class_name: "::NeetoPaymentsEngine::Stripe::Account", foreign_key: :holdable_id
+   has_one :stripe_integration, class_name: "::NeetoPaymentsEngine::Stripe::Account", foreign_key: :holdable_id
    ```
 
 9. Add the following association to the chargeable model. The chargeable model
@@ -320,47 +94,261 @@ possible for Indian business Stripe accounts.
    For example `Meeting` model in `neetoCal` where meeting service is a
    chargeable one.
    ```ruby
-    has_one :charge, as: :chargeable, class_name: "::NeetoPaymentsEngine::Stripe::Charge", dependent: :destroy
+   has_one :charge, as: :chargeable, class_name: "::NeetoPaymentsEngine::Stripe::Charge", dependent: :destroy
    ```
 10. Add the following association to the payable model.
-
     ```ruby
-     has_one :payment, as: :payable, class_name: "::NeetoPaymentsEngine::Stripe::Transaction", dependent: :destroy
+    has_one :payment, as: :payable, class_name: "::NeetoPaymentsEngine::Stripe::Transaction", dependent: :destroy
     ```
-
 11. Add the following queue to your sidekiq config file `config/sidekiq.yml`
     ```yaml
     queues:
       - payment # For neeto-payments-engine
     ```
 
-### Development
-
-1. Add this line to your application's Gemfile (replace the path to the local
-   copy of neetoPayments' engine):
+### Usage
+You can learn more about setup and usage here:
+  1. [Services](/docs/engine/services.md)
 
-   ```ruby
-   gem 'neeto-payments-engine', path: '../neeto-payments-engine'
+## Frontend package
+### Installation
+1. Install the latest `neeto-payments-frontend` package using the below command:
+   ```zsh
+   yarn add @bigbinary/neeto-payments-frontend
+   ```
+2. `neeto-payments-frontend` has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:
+   ```zsh
+   yarn add @bigbinary/neeto-commons-frontend@2.0.54 @bigbinary/neeto-filters-frontend@2.8.1 @bigbinary/neeto-icons@1.9.22 @bigbinary/neeto-molecules@1.0.9 @bigbinary/neetoui@4.4.10 @honeybadger-io/js@5.1.1 @honeybadger-io/react@5.1.3 axios@1.3.4 classnames@2.3.2 formik@2.2.9 js-logger@1.6.1 mixpanel-browser@2.45.0 ramda@0.28.0 react-helmet@6.1.0 react-query@3.39.3 react-router-dom@5.3.4 react-toastify@8.2.0 yup@1.0.2
    ```
 
-2. And then execute:
+### Components
+#### 1. `Dashboard` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/components/Dashboard/index.jsx))
 
-   ```shell
-   bundle install
-   ```
+**Props**
+- `holdableId`: To specify the ID of the entity that holds the stripe
+   account. This is an optional prop. If the value is not specified, the current
+   organization ID is taken as the default value while querying for
+   transactions.
+- `payableEntityColumns`: To specify the columns from the payable entity
+   which need to be additionally displayed. It is an optional prop that defaults
+   to `[]` if not specified.
+- `tabs`: To specify the tabs to be displayed in the payments dashboard. It
+   is an optional parameter.
+- `headerProps`: To specify the props to be passed to the neetoUI `Header`
+   component used in the `Dashboard`.
 
-3. Add this line to your application's `config/routes.rb` file (replace `at` to
-   your desired route):
+**Configuration**
+- Refer to the [Dashboard](/docs/frontend/dashboard.md) section for detailed information on the available configurations for the `Dashboard` component.
+
+**Usage**
+```jsx
+import React, { useState } from "react";
+import { Dashboard } from "@bigbinary/neeto-payments-frontend";
+
+const App = () => {
+  const headerProps = {
+    className: "w-80",
+    // Your header properties
+  };
+
+  return (
+    <Dashboard
+      tabs={["all", "successful"]}
+      headerProps={headerProps}
+    />
+  );
+};
 
-   ```ruby
-   mount NeetoPaymentsEngine::Engine, at: '/payments'
-   ```
+export default App;
+```
 
-### Usage
+#### 2. `PaymentKindRestrictionAlert` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/components/Stripe/Connect/PaymentKindRestrictionAlert/index.jsx))
+
+**Props**
+- `isOpen`: To specify whether the Stripe connect restriction alert should be
+   opened or closed.
+- `paymentKind`: To specify the type of Stripe payment kind for rendering
+   related content to alert either as "standard" or "platform". If Stripe
+   Standard is connected the alert shall forbid Stripe Platform connect and vice
+   versa.
+- `onClose`: Handler function that is triggered when the disconnect button is
+   clicked.
 
-This engine can be used to integrate a payment gateway and to do payments to
-your application. Currently, the engine only supports the Stripe payment
-gateway.
+**Usage**
+```jsx
+import React, { useState } from "react";
+import { PaymentKindRestrictionAlert } from "@bigbinary/neeto-payments-frontend";
+
+const App = () => {
+  const [isStripePlatformConnectedAlertOpen, setIsStripePlatformConnectedAlertOpen] = useState(false);
+
+  return (
+    <PaymentKindRestrictionAlert
+      isOpen={isStripePlatformConnectedAlertOpen}
+      paymentKind="standard"
+      onClose={() => setIsStripePlatformConnectedAlertOpen(false)}
+    />
+  );
+};
+
+export default App;
+```
+
+#### 3. `SquareCard` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/components/SquareCard/index.jsx))
+
+**Props**
+- `card`: The Square card instance.
+- `setCard`: Function to set the Square card instance.
+
+**Optional Props**
+- `onChange`: Event handler function triggered on Square card events.
+- `id`: ID of the container element for the Square card. Defaults to `square-card-container`.
+- `options`: Configuration options for the Square card. Defaults to `{}`.
+- `disabled`: Disables pointer events if set to `true`. Defaults to `false`.
+
+**Usage**
+```jsx
+import React, { useState } from "react";
+import { SquareCard } from "@bigbinary/neeto-payments-frontend";
+
+const App = () => {
+  const [squareCard, setSquareCard] = useState(null);
+  const handleCardChange = event => {
+    // Handle Square card events
+  };
+
+  return (
+    <SquareCard
+      card={squareCard}
+      setCard={setSquareCard}
+      onChange={handleCardChange}
+      disabled={false}
+    />
+  );
+};
+
+export default App;
+```
+
+#### 4. `PayoutsDashboard` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/components/PayoutsDashboard/index.jsx))
+
+**Props**
+- `payoutsPageRoute`: The route for the payouts page.
+- `isPlatformEnabled`: Indicates whether the platform is enabled or not.
+
+**Usage**
+```jsx
+import React from "react";
+import { PayoutsDashboard } from "@bigbinary/neeto-payments-frontend";
+
+const App = () => {
+  return (
+    <PayoutsDashboard
+      isPlatformEnabled
+      payoutsPageRoute={routes.admin.payment.stripePayouts.show}
+    />
+  );
+};
+
+export default App;
+```
+
+#### 5. `SquareDashboard` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/components/SquareDashboard/index.jsx))
+
+**Props**
+- `searchProps`: To specify the search props to be passed to the neetoUI `Header`
+   component used in the `Dashboard`.
+
+**Optional Props**
+- `holdableId`: To specify the ID of the entity that holds the stripe
+   account. If the value is not specified, the current
+   organization ID is taken as the default value while querying for
+   transactions.
+- `payableEntityColumns`: To specify the columns from the payable entity
+   which need to be additionally displayed. Defaults to `[]`.
+- `kind`: To specify the type of payment. Defaults to `squarePayment`.
+- `headerProps`: To specify the props to be passed to the neetoUI `Header`
+   component used in the `Dashboard`. Defaults to `{}`.
+
+**Usage**
+```jsx
+import React from "react";
+import { SquareDashboard } from "@bigbinary/neeto-payments-frontend";
+
+const App = () => {
+   const searchProps = {
+    placeholder: "Search...",
+  };
+
+  const headerProps = {
+    className: "w-80",
+    // Your header properties
+  };
+  return (
+     <SquareDashboard
+        searchProps={searchProps}
+        headerProps={headerProps}
+        kind="squarePayment"
+        payableEntityColumns=[]
+     />
+  );
+};
+
+export default App;
+```
+
+### Hooks
+#### 1. `useStripePromise` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/hooks/useStripePromise.js))
+
+- This hook is used to generate the `stripePromise` object to be passed to the
+stripe `<Elements>` context. The `useStripePromise` hook takes a stripe account
+identifier as input and returns a `Promise`.
+- Usage in [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/f84ad909628b7ce3497cbb6f9a1da8631121a167/app/javascript/src/components/Form/Design/Preview/index.jsx#L39).
+
+> :memo: **Note:** `STRIPE_PUBLISHABLE_KEY` environment variable must be present
+> for this hook to work.
+
+**Usage**
+```jsx
+  const stripeAccountIdentifier = "acct_1Mtqtz2e5McIywz4";
+  const stripePromise = useStripePromise(stripeAccountIdentifier);
+  ...
+  <Elements stripe={stripePromise}>
+    <CardElement />
+  </Elements>
+```
+
+#### 2. `useSquareCard` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/hooks/useSquareCard.js))
+
+- This hook manages the state and functionality related to the Square card instance, providing methods for setting the card, accessing the current card instance, and tokenizing the card.
+- Usage in [neetoInvoice](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/hooks/useSquareCard.js).
+
+**Returns**
+- `card`: The Square card instance.
+- `setCard`: Function to set the Square card instance.
+- `tokenizeCard`: Asynchronous function to tokenize the Square card instance. It returns a Promise that resolves to the tokenized card. If no card instance is found, a warning is logged, and an empty string is returned. If tokenization is successful, the token is returned. In case of errors during tokenization, an error is logged, and an empty string is returned.
+
+**Usage**
+```jsx
+  const { card, setCard, tokenizeCard } = useSquareCard();
+```
+
+### Functions
+#### 1. `buildStripeTransactionLink` ([source code](https://github.com/bigbinary/neeto-payments-nano/blob/42ad8330442696b102d8555930162d75cf94931e/app/javascript/src/utils/index.js#L3))
+
+- This function is used to generate the stripe transaction link from payment identifier.
+
+**Parameters**
+1. `identifier`: The payment identifier.
+2. `isLive`: Specifying whether or not the environment is live. It defaults to `true`.
+
+**Usage**
+```jsx
+const transactionLink = buildStripeTransactionLink(
+  "pi_3MqWX92fKivMPpZ11EPmOBBR",
+  false
+);
+```
 
-1.  [Stripe Integration](./docs/stripe_integration.md)
-2.  [Stripe Payment](./docs/stripe_payment.md)
+# Instructions for Publishing
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -49,7 +49,8 @@
       "continue": "Continue",
       "connect": "Connect",
       "configure": "Configure",
-      "finish": "Finish"
+      "finish": "Finish",
+      "pay": "Pay"
     },
     "alert": {
       "stripe": {
@@ -85,6 +86,10 @@
       "refundWithStatus": "There are no {{status}} refunds.",
       "account": "There are no standard accounts.",
       "accountWithStatus": "There are no {{status}} standard accounts.",
+      "squarePayment": "There are no payments.",
+      "squarePaymentWithStatus": "There are no {{status}} payments.",
+      "squareRefund": "There are no refunds.",
+      "squareRefundWithStatus": "There are no {{status}} refunds.",
       "payouts": {
         "all": "There are no payouts to show.",
         "paid": "There are no paid payouts.",
@@ -126,7 +131,8 @@
         "successful": "successful",
         "refunded": "refunded",
         "pending": "pending",
-        "initiated": "initiated"
+        "initiated": "initiated",
+        "requires_action": "requires action"
       },
       "payment": {
         "completed": "completed",
@@ -148,7 +154,8 @@
         "declined": "This payment failed because the issuing bank declined it",
         "initiated": "The customer has not entered their payment method.",
         "pending": "Transaction has been authorized, but the funds have not been captured yet",
-        "refunded": "Transaction has been refunded"
+        "refunded": "Transaction has been refunded",
+        "requires_action": "The process requires further action from the customer to complete"
       },
       "refund": {
         "successful": "The refund has been successfully processed",
@@ -223,8 +230,12 @@
       "refundWithStatus_other": "{{count}} {{status}} refunds",
       "squarePayment": "{{count}} payment",
       "squarePayment_other": "{{count}} payments",
+      "squarePaymentWithStatus": "{{count}} {{status}} payment",
+      "squarePaymentWithStatus_other": "{{count}} {{status}} payments",
       "squareRefund": "{{count}} refund",
       "squareRefund_other": "{{count}} refunds",
+      "squareRefundWithStatus": "{{count}} {{status}} refund",
+      "squareRefundWithStatus_other": "{{count}} {{status}} refunds",
       "account": "{{count}} standard account",
       "account_other": "{{count}} standard accounts",
       "accountWithStatus": "{{count}} {{status}} standard account",
@@ -281,6 +292,9 @@
     "validations": {
       "countryRequired": "Country is required",
       "invalidUrl": "Enter a valid URL"
+    },
+    "razorpay": {
+      "loadError": "Failed to load Razropay!!"
     }
   }
 }