@fat-zebra/sdk 1.5.11 → 1.5.12-beta.1

package/.github/dependabot.yml

@@ -0,0 +1,13 @@
+version: 2
+registries:
+  cloudsmith_npm:
+    type: npm-registry
+    url: https://npm.cloudsmith.io/fat-zebra/npm
+    token: ${{ secrets.CLOUDSMITH_NPM_PASSWORD }}
+updates:
+  - package-ecosystem: npm
+    directories:
+      - .
+    schedule:
+      interval: weekly
+    registries: '*'

package/.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx --no -- commitlint --edit "$1"

package/.husky/prepare-commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 exec < /dev/tty && npx cz --hook || true

package/.tool-versions

@@ -1 +1 @@
-nodejs 23.7.0
+nodejs 24.0.0

package/README.dev.md

@@ -32,42 +32,6 @@ Install dependencies
 $ npm install
 ```
 
-### Generate an access token
-Mechant developers would follow the [JS SDK setup guide](https://docs.fatzebra.com/docs/obtain-oauth-token) to create an OAuth Client first in order to generate temporary access tokens. To simplify the local development workflow, we can simply generate an access token using the script below.
-
-Please note that the access token created will have a lifespan of 1 year!
-
-```bash
-
-# The secret used for encoding JWT. Please make sure it is the same as the one used for decoding in PayNow and/or Gateway. Otherwise requests will get rejected.
-$ export JWT_HMAC_SECRET=fatzebra
-
-# Specify who the access token is created for. A JWT token can only have one subject.
-$ export MERCHANT_USERNAME=<USERNAME>
-
-# Access token will be outputted to stdout.
-$ npm run generate:jwt
-```
-
-### Start mock merchant website using HPP mode
-```bash
-# HPP integration mode: Geared for merchants that use FZ HPP to collect customers' credit card details.
-$ npm run start:<local|staging>:hpp
-```
-
-### Start mock merchant website using API mode
-You rarely need to work with this as most FZ features revolve around HPP.
-```bash
-# API integration mode: Geared for merchants that own their own payments form to collect credit card details.
-$ npm run start:<local|staging>:api
-
-```
-The commands above do the following.
-* Build javascript files specified in _src_ directory. The js bundle is outputted to _dist_ directory as fz.js.
-* The bundle is inserted into merchant website templates (at /examples/{mode}/merchant.ejs).
-* Start up webpack-dev-server. Open index.html in Safari.
-* The app will be hosted at http://localhost:8080
-
 ### Start PayNow
 
 ```bash
@@ -130,38 +94,6 @@ The deployed SDKs are available from the following URLs.
 * Sandbox: https://cdn.pmnts-sandbox.io/sdk/v1/fatzebra.js
 * Production: https://cdn.pmnts.io/sdk/v1/fatzebra.js
 
-## Release react npm package
-
-Prerequisite: it is essential that you have been added to the https://www.npmjs.com/ group account.
-
-To release the react npm package
-
-``` 
-    git checkout master 
-    git pull 
-```
-
-then run 
-
-```
-    npm run npm:publish
-```
-
-You will be prompted with: 
-
-```
-enter (y) for minor release or (n) for patch release
-```
-
-if it is a major release i.e. a breaking change please update the script/consult with management as major release would indicate a breaking change.
-
-You will then see the project build and finally be prompted to:
-```
-Press ENTER to open in the browser...
-```
-
-from here enter your 2FA code and voila! You have published a new version of the SDK. Go tell some merchants.
-
 
 ## Release Management
 

package/package.json

@@ -1,23 +1,17 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "1.5.11",
+  "version": "1.5.12-beta.1",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "jest --clearCache && jest --passWithNoTests --verbose",
-    "build:local": "cp .env.local .env && export ENVIRONMENT=local && npx webpack --config webpack.config.dev.js && node build-styles.js",
-    "build:staging": "cp .env.staging .env && export ENVIRONMENT=staging && npx webpack --config webpack.config.dev.js && node build-styles.js",
-    "build:sandbox": "cp .env.sandbox .env && export ENVIRONMENT=sandbox && npx webpack --config webpack.config.prod.js && node build-styles.js",
-    "build:production": "cp .env.production .env && export ENVIRONMENT=production && npx webpack --config webpack.config.prod.js && node build-styles.js",
-    "build:package": "tsc -p tsconfig.package.json && REACT=true ENVIRONMENT=production node build-styles.js",
-    "start:local:api": "export MERCHANT_MODE=api && npm run build:local --watch && webpack serve --config webpack.config.dev.js --open 'Google Chrome'",
-    "start:local:hpp": "export MERCHANT_MODE=hpp && npm run build:local --watch && webpack serve --config webpack.config.dev.js --open 'Google Chrome'",
-    "start:staging:api": "export MERCHANT_MODE=api && npm run build:staging --watch && webpack serve --config webpack.config.dev.js --open 'Google Chrome'",
-    "start:staging:hpp": "export MERCHANT_MODE=hpp && npm run build:staging --watch && webpack serve --config webpack.config.dev.js --open 'Google Chrome'",
-    "start:staging:es5": "export MERCHANT_MODE=es5 && npm run build:staging --watch && webpack serve --config webpack.config.dev.js --open 'Google Chrome'",
-    "start:docker": "npm run build:dev --watch && webpack serve --config webpack.config.dev.js --host 0.0.0.0",
-    "generate:jwt": "node scripts/generate-access-token.js",
-    "npm:publish": "ts-node scripts/release-package.ts",
+    "build": "ts-node ./build.ts && npm run build:styles",
+    "build:local": "cp .env.local .env && export ENVIRONMENT=local && npm run build",
+    "build:staging": "cp .env.staging .env && export ENVIRONMENT=staging && npm run build",
+    "build:sandbox": "cp .env.sandbox .env && export ENVIRONMENT=sandbox && npm run build",
+    "build:production": "cp .env.production .env && export ENVIRONMENT=production && npm run build",
+    "build:package": "tsc -p tsconfig.package.json && REACT=true ENVIRONMENT=production",
+    "build:styles": "node build-styles.js",
     "prepare": "husky install"
   },
   "keywords": [],
@@ -26,45 +20,34 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@inquirer/prompts": "^5.3.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/ajv": "^1.0.0",
     "@types/axios": "^0.14.0",
     "@types/dotenv": "^8.2.0",
-    "@types/inquirer": "^9.0.7",
     "@types/jest": "^24.0.23",
     "@types/jsdom": "^21.1.1",
-    "@types/nock": "^11.1.0",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
     "audit-ci": "^6.6.1",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^16.0.1",
-    "dotenv-webpack": "^8.0.0",
-    "ejs": "^3.0.1",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^8.0.0",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "esbuild": "^0.25.10",
+    "husky": "^9.1.7",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-localstorage-mock": "^2.4.22",
     "jsdom": "^26.1.0",
     "jsonwebtoken": "^9.0.0",
-    "nock": "^12.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "simple-git": "^3.25.0",
-    "source-map-loader": "^0.2.4",
+    "nock": "^13.0.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "ts-node": "^10.9.2",
-    "typescript": "^5.1.6",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.7.4"
+    "typescript": "^5.1.6"
   },
   "dependencies": {
     "ajv": "^8.17.1",

package/.husky/pre-commit

@@ -1,2 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"

package/dist/fatzebra.css

@@ -1,91 +0,0 @@
-.checkout-button-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 200px;
-}
-
-.iframe-checkout {
-    flex: 1;
-    border: none;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.iframe-foreground,
-.iframe-background {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    flex-direction: column;
-}
-
-.iframe-foreground,
-.iframe-background {
-    position: fixed;
-}
-
-.iframe-foreground {
-    z-index: -1;
-}
-
-.iframe-background {
-    background: rgba(0, 0, 0, 0.5);
-}
-
-.iframe-foreground {
-    flex-grow: 1;
-    top: auto;
-    width: 100%;
-    max-width: 480px;
-    height: 80vh;
-    background-color: #ffffff;
-    border-radius: 25px 25px 0 0;
-}
-
-.slide-in .iframe-foreground {
-    transform: translateY(100vh);
-    transition: transform 0.4s ease, z-index 0.3s ease 0.4s;
-    z-index: -1;
-}
-
-.slide-in .iframe-background {
-    opacity: 0;
-    z-index: -1;
-    transition: opacity 0.3s ease, z-index 0.3s ease 0.3s;
-}
-
-.slide-in.show .iframe-foreground {
-    transform: none;
-    transition: transform 0.4s ease;
-    z-index: 100;
-}
-
-.slide-in.show .iframe-background {
-    opacity: 1;
-    z-index: 0;
-    transition: opacity 0.3s ease;
-}
-
-@media only screen and (min-width: 480px) {
-    .iframe-foreground {
-        margin: 0 auto;
-    }
-}
-
-@media only screen and (min-width: 768px) {
-    .iframe-foreground {
-        margin: 0;
-        width: 400px;
-        height: 100vh;
-        left: 0;
-    }
-
-    .slide-in .iframe-foreground {
-        transform: translateX(-400px);
-    }
-}